Phaser 2D ভিডিও গেম তৈরির জন্য একটি কাঠামো। গেমটি প্রদর্শন করতে এটি HTML5 ক্যানভাস এবং গেমটি চালানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করে। ভেনিলা জাভাস্ক্রিপ্টের ওপরে ফেজার ব্যবহারের সুবিধাটি হ'ল একটি বিস্তৃত গ্রন্থাগার রয়েছে যা আপনাকে গেমটি নিজেই ডিজাইনিং করতে মনোনিবেশ করার অনুমতি দেয় এমন ভিডিও গেমগুলির পদার্থবিজ্ঞানের অনেকগুলি সম্পূর্ণ করে।
Phaser উন্নয়নের সময় হ্রাস করে এবং কর্মপ্রবাহকে সহজ করে দেয়। আসুন শিখি কীভাবে ফ্যাসার দিয়ে একটি বেসিক গেম তৈরি করতে হয়।
কেন ফেজার দিয়ে বিকাশ?
ফ্যাসার অন্যান্য ভিজ্যুয়াল প্রোগ্রামিং ভাষার মতো যা প্রোগ্রামটি লুপ করা আপডেটের উপর ভিত্তি করে। ফেসারের তিনটি প্রধান পর্যায় রয়েছে: প্রিলোড, তৈরি এবং আপডেট।
প্রিলোডে, গেমের সম্পদগুলি আপলোড হয় এবং গেমের জন্য উপলব্ধ করা হয়।
তৈরি করুন গেমটি এবং শুরু হওয়া সমস্ত গেম উপাদানকে আরম্ভ করে। গেমটি শুরু হয়ে গেলে এই ফাংশনগুলির প্রতিটি একবার চালানো হয়।
অন্যদিকে, আপডেট পুরো গেম জুড়ে একটি লুপে চলে। এটি ওয়ার্কহর্স যা এটিকে ইন্টারেক্টিভ করতে গেমের উপাদানগুলিকে আপডেট করে।
ফেজার দিয়ে গেমস ডেভেলপ করার জন্য আপনার সিস্টেম সেট আপ করুন
যদিও ফ্যাসার এইচটিএমএল এবং জাভাস্ক্রিপ্টে চলে, গেমগুলি আসলে ক্লায়েন্ট-সাইড নয়, সার্ভার-সাইডে চালিত হয়। এর অর্থ হল আপনার গেমটি লোকালহোস্টে চালানো দরকার। গেম সার্ভার-সাইড চালানো আপনার গেমটিকে প্রোগ্রামের বাইরে অতিরিক্ত ফাইল এবং সম্পদ অ্যাক্সেস করার অনুমতি দেয়। আমি আপনার কাছে ইতিমধ্যে একটি সেটআপ না থাকলে লোকালহোস্ট সেট আপ করতে XAMPP র পরামর্শ দিচ্ছি।
নীচের কোডটি আপনাকে আপ এবং চলমান করবে। এটি একটি বেসিক গেম পরিবেশ স্থাপন করে।
<html>
<head>
<script src="//cdn.jsdelivr.net/npm/[email protected]/dist/phaser.js"></script>
</head>
<body>
<script>
var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create
}
};
var gamePiece;
var game = new Phaser.Game(config);
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
}
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
}
</script>
</body>
</html>চালানোর জন্য, গেমটির জন্য আপনার লোকালহোস্টের একটি "img" ফোল্ডারে সংরক্ষিত "গেমপিস" নামে একটি পিএনজি চিত্র প্রয়োজন। সরলতার জন্য, এই উদাহরণটি 60xgame de60px কমলা স্কোয়ার ব্যবহার করে। আপনার গেমটি দেখতে এমন কিছু দেখতে পাওয়া উচিত:
আপনি যদি কোনও সমস্যায় পড়ে থাকেন তবে কী ভুল হয়েছে তা নির্ধারণ করতে আপনার ব্রাউজারের ডিবাগারটি ব্যবহার করুন। এমনকি একটি একক চরিত্র হারিয়ে যাওয়াও সর্বনাশা ডেকে আনতে পারে, তবে সাধারণত, আপনার ডিবাগার সেই ছোট্ট ত্রুটিগুলি ধরবে।
সেটআপ কোড ব্যাখ্যা করা
এখনও অবধি গেমটি কিছু করে না। তবে এরই মধ্যে আমরা অনেক জমি haveেকে ফেলেছি! কোডটি আরও গভীরভাবে দেখুন।
ফেজার গেমটি চালানোর জন্য আপনাকে ফ্যাসার লাইব্রেরি আমদানি করতে হবে। আমরা লাইন 3 এ এটি করি this উদাহরণস্বরূপ, আমরা উত্স কোডের সাথে লিঙ্ক করেছি, তবে আপনি এটিকে আপনার লোকালহোস্টে ডাউনলোড করতে এবং ফাইলটিকেও রেফারেন্স করতে পারেন।
এখন পর্যন্ত বেশিরভাগ কোড গেমের পরিবেশকে কনফিগার করে, যা ভেরিয়েবল কনফিগারেশন সঞ্চয় করে। আমাদের উদাহরণস্বরূপ, আমরা একটি নীল (হেক্স রঙের কোডে সিসিএফএফএফএফ) ব্যাকগ্রাউন্ডের একটি ফেজার গেম সেট আপ করছি যা 600px বাই 600px। এখনকার জন্য, খেলা পদার্থবিদ্যা তোরণ সেট করা হয়েছে, কিন্তু Phaser অফার বিভিন্ন পদার্থবিদ্যা।
শেষ অবধি, দৃশ্যটি প্রোগ্রামটি গেমটি শুরুর আগে প্রিলোড ফাংশনটি চালাতে এবং গেমটি শুরু করার জন্য ক্রিয়া ফাংশনটি জানায়। এই সমস্ত তথ্য গেম নামক গেমের অবজেক্টে দেওয়া হয়।
কোডটির পরবর্তী বিভাগটি যেখানে গেমটি সত্যই রূপ নেয়। প্রিললোড ফাংশনটি যেখানে আপনি আপনার গেমটি চালানোর জন্য যে কোনও কিছু শুরু করতে চান। আমাদের ক্ষেত্রে, আমরা আমাদের গেমের টুকরোটির চিত্রটি পূর্ব লোড করেছি। .Image এর প্রথম পরামিতিটি আমাদের চিত্রটির নাম দেয় এবং দ্বিতীয়টি চিত্রটি কোথায় খুঁজে পায় তা প্রোগ্রামকে বলে tells
গেমপিস ইমেজটি তৈরি ফাংশনে গেমটিতে যুক্ত করা হয়েছিল। লাইন 29 বলছে যে আমরা চিত্র গেমপিসটি আমাদের গিরিট অঞ্চলের উপরের বাম কোণ থেকে একটি স্প্রিট 270px বাম এবং 450px হিসাবে যুক্ত করছি।
আমাদের গেমের পিস মুভ তৈরি করা
এখনও অবধি, এটিকে খুব সহজেই একটি খেলা বলা যেতে পারে। একটি জিনিস, আমরা আমাদের গেম টুকরা স্থানান্তর করতে পারবেন না। আমাদের গেমের জিনিসগুলিকে পরিবর্তন করতে সক্ষম হতে আমাদের একটি আপডেট ফাংশন যুক্ত করতে হবে। আমাদের যখন গেমটি আপডেট করা হয় তখন কোন ফাংশনটি চালানো উচিত তা জানাতে আমাদের কনফিগার ভেরিয়েবলের দৃশ্যটিও অ্যাডজাস্ট করতে হবে।
একটি আপডেট ফাংশন যুক্ত করা হচ্ছে
কনফিগারেশনে নতুন দৃশ্য:
scene: {
preload: preload,
create: create,
update: update
}
এরপরে, ক্রিয় ফাংশনের নীচে একটি আপডেট ফাংশন যুক্ত করুন:
function update(){
}
কী ইনপুট প্রাপ্তি
খেলোয়াড়টিকে তীর কীগুলির সাহায্যে গেম টুকরোটি নিয়ন্ত্রণ করতে, খেলোয়াড়টি কী কী টিপছে তা ট্র্যাক করার জন্য আমাদের একটি ভেরিয়েবল যুক্ত করতে হবে। নীচে কী গেমপুটস নামক একটি ভেরিয়েবল ঘোষণা করুন যেখানে আমরা গেমপিসগুলি ঘোষণা করেছি। সেখানে এটি ঘোষণা করে সমস্ত ফাংশন নতুন ভেরিয়েবল অ্যাক্সেস করতে দেবে।
var gamePiece;
var keyInputs;
গেমটি তৈরির ফাংশনে তৈরি করা হলে কী-ইনপুট ভেরিয়েবলটি শুরু করা উচিত।
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
}
এখন আপডেট ফাংশনে, আমরা প্লেয়ারটি একটি তীর কী টিপছে কিনা তা খতিয়ে দেখতে পারি, এবং যদি সেগুলি হয় তবে সে অনুযায়ী আমাদের গেমের টুকরোটি সরান। নীচের উদাহরণে, গেম টুকরো 2px সরানো হয়েছে, তবে আপনি এটি একটি বৃহত্তর বা ছোট সংখ্যা তৈরি করতে পারেন। একসময় 1px টুকরো স্থানান্তরিত করা কিছুটা ধীর মনে হয়েছিল।
function update(){
if(keyInputs.left.isDown){
gamePiece.x = gamePiece.x - 2;
}
if(keyInputs.right.isDown){
gamePiece.x = gamePiece.x + 2;
}
if(keyInputs.up.isDown){
gamePiece.y = gamePiece.y - 2;
}
if(keyInputs.down.isDown){
gamePiece.y = gamePiece.y + 2;
}
}
গেমটির এখন একটি চলনযোগ্য চরিত্র! তবে সত্যই একটি খেলা হতে আমাদের একটি উদ্দেশ্য প্রয়োজন। আসুন কিছু বাধা যুক্ত করা যাক। 8-বিট যুগে প্রচুর গেমের ভিত্তি ছিল ডডিং বাধা।
গেমটিতে বাধা যুক্ত করা
এই কোড উদাহরণটিতে দুটি বাধা স্প্রিট হয় যা বাধা 1 এবং বাধা 2 বলে। বাধা 1 নীল বর্গ এবং বাধা 2 সবুজ। গেমপিস স্প্রাইটের মতো প্রতিটি চিত্রই প্রিললোড করা দরকার।
function preload(){
this.load.image('gamePiece', 'img/gamePiece.png');
this.load.image('obstacle1', 'img/obstacle1.png');
this.load.image('obstacle2', 'img/obstacle2.png');
}
তারপরে প্রতিটি বাধা স্প্রিটকে গেমপিসের মতো তৈরি ফাংশনটিতে আরম্ভ করা দরকার।
function create(){
gamePiece = this.physics.add.sprite(270, 450, 'gamePiece');
keyInputs = this.input.keyboard.createCursorKeys();
obstacle1 = this.physics.add.sprite(200, 0, 'obstacle1');
obstacle2 = this.physics.add.sprite(0, 200, 'obstacle2');
}
বাধা বিপত্তি সরানো
এবার টুকরো টুকরো করার জন্য, আমরা প্লেয়ার ইনপুটটি ব্যবহার করতে চাই না। পরিবর্তে, আসুন উপরের থেকে নীচে এক টুকরো সরানো এবং অন্যটি বাম থেকে ডানে সরানো যাক। এটি করতে, আপডেট ফাংশনে নিম্নলিখিত কোডটি যুক্ত করুন:
obstacle1.y = obstacle1.y + 4;
if(obstacle1.y > 600){
obstacle1.y = 0;
obstacle1.x = Phaser.Math.Between(0, 600);
}
obstacle2.x = obstacle2.x + 4;
if(obstacle2.x > 600){
obstacle2.x = 0;
obstacle2.y = Phaser.Math.Between(0, 600);
}
উপরের কোডটি পর্দার নীচে বাধা 1 এবং প্রতিটি ফ্রেমের 4px জুড়ে বাধা 2 সরবে। কোনও স্কোয়ারটি স্ক্রিন বন্ধ হয়ে গেলে, এটি একটি নতুন এলোমেলো স্পটে আবার বিপরীত দিকে সরানো হয়। এটি নিশ্চিত করবে যে প্লেয়ারের জন্য সর্বদা একটি নতুন বাধা রয়েছে।
সংঘর্ষগুলি সনাক্ত করা হচ্ছে
তবে আমরা এখনও পুরোপুরি সম্পন্ন হইনি। আপনি খেয়াল করেছেন যে আমাদের খেলোয়াড় বাধার মধ্য দিয়ে পার করতে পারে। খেলোয়াড় যখন কোনও বাধা দেয় এবং গেমটি শেষ করে তখন আমাদের গেমটি সনাক্ত করতে হবে।
ফেসার ফিজিক্স লাইব্রেরিতে একটি সংঘর্ষক সনাক্তকারী রয়েছে। আমাদের যা করতে হবে তা হ'ল এটি তৈরির ফাংশনে আরম্ভ করা।
this.physics.add.collider(gamePiece, obstacle1, function(gamePiece, obstacle1){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
this.physics.add.collider(gamePiece, obstacle2, function(gamePiece, obstacle2){
gamePiece.destroy();
obstacle.destroy();
obstacle2.destroy();
});
কলসিডার পদ্ধতিতে তিনটি পরামিতি প্রয়োজন। প্রথম দুটি প্যারামিটারগুলি সনাক্ত করে যে কোন বস্তুর সংঘর্ষ হচ্ছে। সুতরাং উপরে, আমরা দুটি সংঘর্ষকারী সেট আপ আছে। প্রথমটি সনাক্ত করে যখন গেমপিসটি বাধা 1 এর সাথে সংঘর্ষ হয় এবং দ্বিতীয় সংঘর্ষক গেমপিস এবং বাধা 2 এর মধ্যে সংঘর্ষের সন্ধান করে।
তৃতীয় প্যারামিটারটি কোনও সংঘর্ষ শনাক্ত করার পরে সংঘটনকারীকে কী করতে হবে তা জানায়। এই উদাহরণে, একটি ফাংশন আছে। যদি কোনও সংঘর্ষ হয় তবে সমস্ত গেম উপাদান ধ্বংস হয়ে যায়; এটি খেলা বন্ধ করে দেয়। এখন খেলোয়াড় গেমওভার করবে যদি তারা কোনও বাধা দেয়।
গেম ডেভলপমেন্টকে ফেজার দিয়ে চেষ্টা করুন
এই গেমটি উন্নত করে আরও জটিল করা যায় এমন বিভিন্ন উপায় রয়েছে। আমরা কেবল একটি প্লেয়ার তৈরি করেছি, তবে দ্বিতীয় প্লেযোগ্য চরিত্রটি "অ্যাডএসডি" নিয়ন্ত্রণের সাহায্যে যুক্ত এবং নিয়ন্ত্রণ করা যেতে পারে। একইভাবে, আপনি আরও বাধা যুক্ত করতে এবং তাদের চলাফেরার গতিতে ভিন্নতা নিয়ে পরীক্ষা করতে পারেন।
এই ভূমিকা আপনাকে শুরু করবে, তবে শেখার মতো আরও অনেক কিছুই বাকি আছে। Phaser সম্পর্কে দুর্দান্ত জিনিস হ'ল গেম ফিজিক্স আপনার জন্য অনেক কিছু করা হয়েছে। 2 ডি গেম ডিজাইন করা শুরু করার এক দুর্দান্ত সহজ উপায়। এই কোডটি তৈরি করা এবং আপনার গেমটি সংশোধন করা চালিয়ে যান।
আপনি যদি কোনও ত্রুটির মধ্যে চলে যান তবে সমস্যাটি আবিষ্কার করার জন্য আপনার ব্রাউজার ডিবাগারটি দুর্দান্ত উপায়।
