গেম ডেভেলপমেন্টের জন্য Phaser দিয়ে শুরু করা

Phaser হল 2D ভিডিও গেম তৈরির একটি কাঠামো। এটি গেমটি প্রদর্শন করতে HTML5 ক্যানভাস এবং গেমটি চালানোর জন্য জাভাস্ক্রিপ্ট ব্যবহার করে। ভ্যানিলা জাভাস্ক্রিপ্টের উপর ফ্যাসার ব্যবহার করার সুবিধা হল যে একটি বিস্তৃত লাইব্রেরি রয়েছে যা ভিডিও গেমগুলির অনেক পদার্থবিদ্যা সম্পন্ন করে যা আপনাকে গেমটি নিজেই ডিজাইনে মনোনিবেশ করতে দেয়।

ফেজার ডেভেলপমেন্ট টাইম কমায় এবং ওয়ার্কফ্লো সহজ করে। চলুন শিখি কিভাবে ফ্যাসার দিয়ে একটি বেসিক গেম তৈরি করা যায়।

---

---

কেন ফ্যাসারের সাথে বিকাশ?

ফ্যাসার অন্যান্য ভিজ্যুয়াল প্রোগ্রামিং ভাষার অনুরূপ যে প্রোগ্রামটি লুপড আপডেটের উপর ভিত্তি করে। ফেজারের তিনটি প্রধান ধাপ রয়েছে: প্রিলোড, তৈরি এবং আপডেট।

প্রিলোডে, গেমের সম্পদ আপলোড করা হয় এবং গেমের জন্য উপলব্ধ করা হয়।

গেমটি আরম্ভ করে এবং গেমের সমস্ত উপাদান তৈরি করে। গেমটি শুরু হওয়ার পরে সেই প্রতিটি ফাংশন একবার চালানো হয়।

অন্যদিকে, আপডেট, পুরো গেম জুড়ে একটি লুপে চলে। এটি ওয়ার্কহর্স যা গেমের উপাদানগুলিকে ইন্টারেক্টিভ করতে আপডেট করে।

ফ্যাসারের সাহায্যে গেমস ডেভেলপ করার জন্য আপনার সিস্টেম সেট আপ করুন

ফ্যাসার HTML এবং জাভাস্ক্রিপ্টে চালানো সত্ত্বেও, গেমগুলি আসলে সার্ভার-সাইড চালানো হয়, ক্লায়েন্ট-সাইড নয়। এর মানে হল যে আপনাকে আপনার গেমটি চালাতে হবে আপনার লোকাল হোস্ট । গেম সার্ভার-সাইড চালানো আপনার গেমকে প্রোগ্রামের বাইরে অতিরিক্ত ফাইল এবং সম্পদ অ্যাক্সেস করতে দেয়। আমি সুপারিশ একটি লোকালহোস্ট সেট আপ করতে XAMPP ব্যবহার করে যদি আপনার ইতিমধ্যে একটি সেটআপ না থাকে।

---

---

নিচের কোডটি আপনাকে উঠিয়ে দেবে। এটি একটি মৌলিক খেলার পরিবেশ স্থাপন করে।







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');
}




চালানোর জন্য, গেমটি আপনার লোকালহোস্টে একটি 'img' ফোল্ডারে সংরক্ষিত 'গেমপিস' নামে একটি PNG চিত্রের প্রয়োজন হবে। সরলতার জন্য, এই উদাহরণটি 60xgame de60px কমলা বর্গ ব্যবহার করে। আপনার গেমটি এরকম কিছু হওয়া উচিত:

---

---

আপনি যদি কোন সমস্যায় পড়েন, তাহলে কি ভুল হয়েছে তা বের করতে আপনার ব্রাউজারের ডিবাগার ব্যবহার করুন। এমনকি একটি মাত্র অক্ষর অনুপস্থিতি ধ্বংসের কারণ হতে পারে, কিন্তু সাধারণত, আপনার ডিবাগার সেই ছোট ত্রুটিগুলি ধরবে।

সেটআপ কোড ব্যাখ্যা করা

এখন পর্যন্ত, গেমটি কিছুই করে না। কিন্তু আমরা ইতিমধ্যে অনেক মাটি coveredেকে ফেলেছি! আসুন কোডটি আরও গভীরভাবে দেখি।

ফ্যাসার গেম চালানোর জন্য, আপনাকে ফ্যাসার লাইব্রেরি আমদানি করতে হবে। আমরা লাইন 3 এ এটি করি। এই উদাহরণে, আমরা সোর্স কোডের সাথে লিঙ্ক করেছি, কিন্তু আপনি এটি আপনার লোকালহোস্টে ডাউনলোড করতে পারেন এবং ফাইলটিও রেফারেন্স করতে পারেন।

ফ্যাক্টরি রিসেট করার পর আমি কিভাবে গুগল ভেরিফিকেশন বাইপাস করব?

বেশিরভাগ কোড এখন পর্যন্ত গেমের পরিবেশকে কনফিগার করে, যা ভেরিয়েবল কনফিগ দোকান আমাদের উদাহরণে, আমরা একটি নীল (হেক্স রঙের কোডে CCFFFF) পটভূমি সহ একটি ফেজার গেম সেট আপ করছি যা 600px দ্বারা 600px। আপাতত, গেম ফিজিক্স সেট করা হয়েছে আর্কেডিয়ান , কিন্তু ফ্যাসার বিভিন্ন পদার্থবিদ্যা প্রদান করে।

অবশেষে, দৃশ্য প্রোগ্রামটি চালানোর জন্য বলে প্রিলোড খেলা শুরুর আগে কাজ করে এবং সৃষ্টি গেমটি শুরু করার জন্য ফাংশন। এই সমস্ত তথ্য যা বলা হয় খেলা বস্তুর কাছে প্রেরণ করা হয় খেলা ।

সম্পর্কিত: প্রোগ্রামিং এবং কোডিংয়ের জন্য 6 টি সেরা ল্যাপটপ

কোডের পরবর্তী অংশটি হল যেখানে খেলাটি সত্যিই আকার নেয়। প্রিলোড ফাংশন হল যেখানে আপনি আপনার গেমটি চালানোর জন্য যা প্রয়োজন তা আরম্ভ করতে চান। আমাদের ক্ষেত্রে, আমরা আমাদের গেম পিসের ছবিটি প্রিললোড করেছি। এর প্রথম প্যারামিটার । চিত্র আমাদের ইমেজের নাম এবং দ্বিতীয়টি প্রোগ্রামটিকে বলে যে ছবিটি কোথায় পাওয়া যাবে।

গেমপিস ইমেজটি ক্রিয়েট ফাংশনে গেমটিতে যুক্ত করা হয়েছিল। লাইন 29 বলছে যে আমরা ইমেজ গেমপিস যোগ করছি একটি স্প্রাইট হিসাবে 270px বাম এবং 450px নিচে আমাদের খেলা এলাকার উপরের বাম কোণে।

আমাদের গেম টুকরা সরানো

এখন পর্যন্ত, এটিকে খুব কমই একটি খেলা বলা যেতে পারে। এক জিনিস, আমরা আমাদের গেম টুকরা সরানো যাবে না। আমাদের গেমের জিনিস পরিবর্তন করতে সক্ষম হতে, আমাদের একটি আপডেট ফাংশন যুক্ত করতে হবে। আমরা গেমটি আপডেট করার সময় কোন ফাংশনটি চালাতে হবে তা বলার জন্য কনফিগ ভেরিয়েবলে দৃশ্যটি সামঞ্জস্য করতে হবে।

একটি আপডেট ফাংশন যোগ করা হচ্ছে

কনফিগারে নতুন দৃশ্য:

scene: {
preload: preload,
create: create,
update: update
}

পরবর্তী, তৈরি ফাংশনের নীচে একটি আপডেট ফাংশন যুক্ত করুন:

আমার ল্যাপটপ প্লাগ ইন আছে কিন্তু চার্জ হচ্ছে না

function update(){
}

কী ইনপুট পাওয়া

খেলোয়াড়কে তীরচিহ্নের সাহায্যে গেম টুকরা নিয়ন্ত্রণ করতে দিতে, খেলোয়াড় কোন কী টিপছে তা ট্র্যাক করতে আমাদের একটি পরিবর্তনশীল যোগ করতে হবে। নীচে keyInputs নামে একটি পরিবর্তনশীল ঘোষণা করুন যেখানে আমরা গেমপিস ঘোষণা করেছি। এটি ঘোষণা করা হলে সমস্ত ফাংশন নতুন পরিবর্তনশীল অ্যাক্সেস করতে দেবে।

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 এর মধ্যে সংঘর্ষ খুঁজছে।

তৃতীয় প্যারামিটারটি সংঘর্ষকারীকে বলে যে একবার এটি একটি সংঘর্ষ সনাক্ত করলে কী করতে হবে। এই উদাহরণে, একটি ফাংশন আছে। যদি সংঘর্ষ হয়, খেলার সমস্ত উপাদান ধ্বংস হয়ে যায়; এটি খেলা বন্ধ করে দেয়। এখন খেলোয়াড় গেমওভার করবে যদি তারা কোন বাধা পায়।

ফেজারের সাহায্যে গেম ডেভেলপমেন্টকে চেষ্টা করুন

এই গেমটির উন্নতি এবং আরও জটিল করে তোলার বিভিন্ন উপায় রয়েছে। আমরা শুধুমাত্র একজন খেলোয়াড় তৈরি করেছি, কিন্তু একটি দ্বিতীয় প্লেযোগ্য চরিত্র যোগ করা এবং 'awsd' নিয়ন্ত্রণের সাহায্যে নিয়ন্ত্রণ করা যেতে পারে। একইভাবে, আপনি আরো বাধা যোগ এবং তাদের চলাচলের গতি পরিবর্তনের সাথে পরীক্ষা করতে পারেন।

কিভাবে উইন্ডোজ ১০ সস্তায় পাবেন

এই ভূমিকা আপনাকে শুরু করবে, কিন্তু আরো অনেক কিছু শেখার বাকি আছে। ফ্যাসারের সবচেয়ে বড় বিষয় হল যে অনেক গেম ফিজিক্স আপনার জন্য করা হয়েছে। 2D গেম ডিজাইন করা শুরু করার জন্য এটি একটি দুর্দান্ত সহজ উপায়। এই কোডটি তৈরি করা চালিয়ে যান এবং আপনার গেমটি পরিমার্জিত করুন।

যদি আপনি কোন ত্রুটির মধ্যে পড়েন, আপনার ব্রাউজার ডিবাগার সমস্যাটি আবিষ্কার করার একটি দুর্দান্ত উপায়।

শেয়ার করুন শেয়ার করুন টুইট ইমেইল ওয়েবসাইটের সমস্যা সমাধানের জন্য কিভাবে Chrome DevTools ব্যবহার করবেন

আপনার ওয়েবসাইটগুলিকে উন্নত করার জন্য ক্রোম ব্রাউজারের অন্তর্নির্মিত ডেভেলপমেন্ট সরঞ্জামগুলি কীভাবে ব্যবহার করবেন তা শিখুন।

পরবর্তী পড়ুন সম্পর্কিত বিষয়

• প্রোগ্রামিং
• জাভাস্ক্রিপ্ট
• HTML5
• খেলার প্রোগ্রাম উন্নত করা

লেখক সম্পর্কে জেনিফার সিটন(21 নিবন্ধ প্রকাশিত)

জে সিটন একজন বিজ্ঞান লেখক যিনি জটিল বিষয়গুলো ভাঙতে পারদর্শী। তিনি সাসকাচোয়ান বিশ্ববিদ্যালয় থেকে পিএইচডি করেছেন; তার গবেষণা অনলাইনে শিক্ষার্থীদের ব্যস্ততা বাড়ানোর জন্য গেম-ভিত্তিক শিক্ষাকে কাজে লাগানোর দিকে মনোনিবেশ করেছে। যখন সে কাজ করছে না, তখন তুমি তাকে পড়বে, ভিডিও গেম খেলবে অথবা বাগান করবে।

জেনিফার সিটন থেকে আরো

আমাদের নিউজলেটার সদস্যতা

প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

সাবস্ক্রাইব করতে এখানে ক্লিক করুন