আপনার চরিত্রগুলিকে ফ্যাসারে নিয়ে আসা

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

খেলা সেটআপ

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

শুরু করতে, একটি অস্থাবর অক্ষর দিয়ে একটি গেম তৈরি করুন। আমাদের উদাহরণে, আমরা তীর কীগুলির সাহায্যে সরানো একটি ব্লক দিয়ে শুরু করব। নীচে শুরুর কোডটি দেওয়া হল:

 var config = {
type: Phaser.AUTO,
backgroundColor: 0xCCFFFF ,
width: 600,
height: 600,
physics: {
default: 'arcade'
},
scene: {
preload: preload,
create: create,
update: update
}
};

var gamePiece;
var keyInputs;
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');
keyInputs = this.input.keyboard.createCursorKeys();
}

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

এই কোডটি এমন একটি গেম পিস তৈরি করবে যা নীল পটভূমির চারদিকে ঘুরতে পারে। সরলতার জন্য, উদাহরণটি কেবল গেমের চরিত্রের জন্য একটি কমলা ব্লক ব্যবহার করে। দেখে মনে হচ্ছে:

একটি স্প্রাইট শীট তৈরি করা হচ্ছে

প্রথম পদক্ষেপটি অ্যানিমেশন তৈরি করছে। অ্যানিমেশন তৈরির অনেকগুলি উপায় রয়েছে তবে এটি আমরা এখানে আচ্ছাদন করতে পারি তার বাইরে beyond আমাদের উদ্দেশ্যে, আপনার স্প্রিট শিট হিসাবে আপনার অ্যানিমেশনটি সংরক্ষণ করা ঠিক গুরুত্বপূর্ণ।

সম্পর্কিত: পিক্সেল পারফেক্ট আর্টওয়ার্ক তৈরির সেরা পিক্সেল আর্ট সরঞ্জাম

একটি স্প্রিট শীট একটি একক চিত্র ফাইল যা অ্যানিমেশন ফ্রেমের একটি সেট রয়েছে। অ্যানিমেশনের প্রতিটি ফ্রেম এটি অনুসরণ করে তার পাশে স্থাপন করা হয়। প্রতিটি ফ্রেম একই আকার হতে হবে। অ্যানিমেশন প্রোগ্রামগুলি একক ফ্রেমের মাত্রার উপর ভিত্তি করে চিত্রটিকে স্বতন্ত্র ফ্রেমে কাটবে।

ছবিগুলি একটি অ্যারেতে সংরক্ষণ করা হয়। সমস্ত অ্যারেগুলির মতো, এর অর্থ হ'ল প্রথম চিত্রটি শূন্য অবস্থানে রয়েছে। সুতরাং, উপরের উদাহরণে, ডাউন অ্যানিমেশনটি শূন্য থেকে শুরু হয়ে তিনটিতে শেষ হবে। বাম অ্যানিমেশনটি চারটি থেকে শুরু হয়ে সাত-এ শেষ হবে।

ফেজারে একটি স্প্রিটশিট যুক্ত করা হচ্ছে

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

 this.load.image('gamePiece', 'img/gamePiece.png');

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

 this.load.spritesheet('gamePiece', 'img/spriteSheet.png', {
frameWidth: 60,
frameHeight: 60
});

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

এই উদাহরণটি একটি সাধারণ স্প্রাইট শীট ব্যবহার করবে। আমরা গেম স্প্রিতে একটি তীর এবং ঝলকানি সূচক যুক্ত করেছি। তীরটি সেই দিকে নির্দেশ করবে যেখানে আমাদের স্প্রাইটটি একটি সূচক হিসাবে প্রবাহিত হয় সেই দিকটিতে। যদি চরিত্রটি চলমান না থাকে তবে অ্যানিমেশনটি সমস্ত ফ্রেমের মধ্য দিয়ে ঘুরতে থাকবে।

অ্যানিমেশন তৈরি করা হচ্ছে

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

 this.anims.create({
key: "up",
frameRate: 2,
frames: this.anims.generateFrameNumbers("gamePiece", {start: 0, end:2}),
repeat: -1
});

সর্বোপরি আপ নির্দেশনার জন্য অ্যানিমেশন।

  • অ্যানিমেশনগুলির জন্য কীওয়ার্ড এনিমগুলি সংক্ষিপ্ত। পূর্ববর্তী সংস্করণগুলি পুরো কীওয়ার্ড অ্যানিমেশনগুলি ব্যবহার করেছিল তবে বর্তমান প্রকাশটি এই শর্টকাট ব্যবহার করে।
  • কীটি অ্যানিমেশনটির নাম। আপনি অ্যানিমেশনটি কল করতে কীটি ব্যবহার করবেন।
  • ফ্রেমরেট একটি সেকেন্ডে কতগুলি ফ্রেম দেখানো হয় তা নিয়ন্ত্রণ করে। এই উদাহরণে প্রতি সেকেন্ডে দুটি ফ্রেম থাকবে।
  • পরবর্তী লাইনে ইমেজ এবং ফ্রেমগুলি অ্যানিমেশনে ব্যবহৃত হচ্ছে তা নির্দেশ করে। আপ অ্যানিমেশনটি গেমপিস চিত্র ব্যবহার করে এবং ফ্রেম 0 থেকে শুরু হয়ে ফ্রেম 2 এ শেষ হয়।
  • আপনি যদি অ্যানিমেশনটি অবিচ্ছিন্নভাবে লুপ করতে চান, তবে পুনরায় -1 এ সেট করুন। অন্যথায়, আপনি থামাতে যাওয়ার আগে অ্যানিমেশনটি কতবার পুনরাবৃত্তি করা উচিত তা প্রবেশ করতে পারেন।

আপনাকে প্রতিটি দিকনির্দেশ এবং নিষ্ক্রিয় অবস্থার জন্য একটি অ্যানিমেশন তৈরি করতে হবে।

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

আপনার চরিত্রটি কীভাবে সচল করা যায়

কোনও চরিত্রে একটি অ্যানিমেশন যুক্ত করা বেশ সহজ। জটিল অংশটি অ্যানিমেশনগুলির মধ্যে রূপান্তরিত হচ্ছে। আপনি তৈরির কার্যটিতে একটি শুরু অ্যানিমেশন সেট করতে পারেন।

 gamePiece = this.add.sprite(270, 450, 'gamePiece');
gamePiece.anims.play("spin");

প্রথম লাইন প্লেয়ার তৈরি করে। এটি আগের মতো একটি একক চিত্রের সাথে স্প্রিট তৈরি করার মতো। দ্বিতীয় লাইনটি অ্যানিমেশনটিকে স্পিনে সেট করে। স্পিন একটি অলস অ্যানিমেশন যা শূন্য থেকে এগারোটি ফ্রেমের মধ্য দিয়ে লুপ করবে।

এখন, আপনি যখন আপনার গেমটি পুনরায় লোড করবেন, অলস অ্যানিমেশনটি খেলতে শুরু করবে। তবে, আপনি লক্ষ্য করবেন যে আপনার চরিত্রটি সরিয়ে দেওয়ার পরেও এটি চালিয়ে যেতে চলেছে। চলাচলের ভিত্তিতে অ্যানিমেশনগুলি সেট আপ করা একটু কৌশলযুক্ত।

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

এটি সমাধান করার জন্য, আমাদের একটি আলাদা পদ্ধতি উচিত। এর পরিবর্তে যদি একটি কী isDown পরীক্ষণ, আমরা যদি একটি কী JustDown হয় জানতে চাই। জাস্টডাউন কেবল তখনই সত্য যখন কীটি প্রথমবার টিপে দেওয়া হয়। কীটি ধরে রাখলে এটি সত্য নয়। যদি আমরা জাস্টডাউন দিয়ে অ্যানিমেশনটি সেট করি তবে অ্যানিমেশনটি প্রতিটি ফ্রেম পুনরায় সেট করবে না।

আপনি তৈরি ফাংশনে কী কী ইনপুটটি পর্যবেক্ষণ করতে চান তার জন্য আপনাকে একটি ভেরিয়েবল তৈরি করতে হবে:

 leftKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.LEFT);
rightKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.RIGHT);
upKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.UP);
downKey = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.DOWN);

তারপরে, আপনি আপডেট ফাংশনে কী টিপছে কিনা তা পরীক্ষা করতে চান:

 if(Phaser.Input.Keyboard.JustDown(upKey)){
gamePiece.anims.play("up");
}

এখন, আপ কীটি প্রথমবার টিপলে গেমটি আপ অ্যানিমেশনে পরিবর্তিত হবে। প্রতিটি দিকনির্দেশকীর জন্য আপনার অনুরূপ if-বিবৃতি লিখতে হবে।

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

 if(Phaser.Input.Keyboard.JustUp(upKey)){
gamePiece.anims.play("spin");
}

প্লেয়ারটি একবার আপ কীটি টিপানো বন্ধ করে দিলে এটি অ্যানিমেশনটি আমাদের নিষ্ক্রিয় স্পিন অ্যানিমেশনে ফিরে আসবে। প্রতিটি দিকনির্দেশকীর জন্য আপনার অনুরূপ বিবৃতি লিখতে হবে।

চূড়ান্ত কোডটি দেখতে পেস্টবিনে যান

পরবর্তী পদক্ষেপ: আপনার নিজস্ব অ্যানিমেশন তৈরি করুন

ফ্যাসারে অ্যানিমেশন তৈরি করা স্থির চিত্র ব্যবহারের চেয়ে খুব বেশি আলাদা নয়। তবে এটি আপনার গেমের বিকাশকে পরবর্তী স্তরে নিয়ে আসবে! Phaser অ্যানিমেশন যুক্ত করা সহজ করে তোলে যাতে আপনি কঠিন অংশটিতে মনোনিবেশ করতে পারেন: অ্যানিমেশন তৈরি করে!

আপনার নিজস্ব স্প্রিট শীট তৈরি করার সময়, এই পয়েন্টারগুলি ভুলে যাবেন না:

  • অ্যানিমেশন ফ্রেমগুলির অবশ্যই একই মাত্রা থাকা উচিত
  • ফ্রেমগুলি শূন্য থেকে শুরু হওয়া একটি অ্যারেতে সংরক্ষণ করা হবে
  • অ্যানিমেশনগুলিতে প্রায়শই চলন সেট করে এমন ট্রিগারগুলির চেয়ে আলাদা ট্রিগার প্রয়োজন set