گیم ڈویلپمنٹ کے لیے فیزر کے ساتھ شروع کرنا۔

فیزر 2 ڈی ویڈیو گیمز بنانے کا ایک فریم ورک ہے۔ یہ گیم ڈسپلے کرنے کے لیے HTML5 کینوس اور گیم چلانے کے لیے جاوا اسکرپٹ کا استعمال کرتا ہے۔ ونیلا جاوا اسکرپٹ پر فیزر کا استعمال کرنے کا فائدہ یہ ہے کہ اس میں ایک وسیع لائبریری ہے جو ویڈیو گیمز کی زیادہ تر طبیعیات کو مکمل کرتی ہے جس سے آپ خود گیم کو ڈیزائن کرنے پر توجہ دے سکتے ہیں۔

فیزر ترقی کے وقت کو کم کرتا ہے اور کام کے بہاؤ کو آسان کرتا ہے۔ آئیے سیکھیں کہ فیزر کے ساتھ ایک بنیادی گیم کیسے بنائی جائے۔

---

---

فیزر کے ساتھ ترقی کیوں؟

فیزر دیگر بصری پروگرامنگ زبانوں کی طرح ہے کہ یہ پروگرام لوپڈ اپ ڈیٹس پر مبنی ہے۔ فیزر کے تین اہم مراحل ہیں: پری لوڈ ، تخلیق اور اپ ڈیٹ۔

پری لوڈ میں ، گیم کے اثاثے اپ لوڈ کیے جاتے ہیں اور گیم کے لیے دستیاب کیے جاتے ہیں۔

گیم کو شروع کریں اور گیم کے تمام ابتدائی عناصر بنائیں۔ جب کھیل شروع ہوتا ہے تو ان میں سے ہر ایک کام چلتا ہے۔

دوسری طرف ، اپ ڈیٹ پورے کھیل میں ایک لوپ میں چلتا ہے۔ یہ ورک ہارس ہے جو گیم کے عناصر کو انٹرایکٹو بنانے کے لیے اپ ڈیٹ کرتا ہے۔

فیزر کے ساتھ گیمز تیار کرنے کے لیے اپنا سسٹم مرتب کریں۔

اس کے باوجود کہ فاسر ایچ ٹی ایم ایل اور جاوا اسکرپٹ پر چلتا ہے ، گیمز دراصل کلائنٹ سائیڈ نہیں ، سرور سائیڈ پر چلائے جاتے ہیں۔ اس کا مطلب ہے کہ آپ کو اپنا گیم چلانے کی ضرورت ہوگی۔ آپ کا لوکل ہوسٹ . گیم سرور سائیڈ چلانے سے آپ کے گیم کو پروگرام سے باہر اضافی فائلوں اور اثاثوں تک رسائی حاصل ہوتی ہے۔ میں تجویز کرتا ہوں لوکل ہوسٹ قائم کرنے کے لیے 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');
}




چلانے کے لیے ، گیم کو ایک PNG تصویر کی ضرورت ہوگی جسے 'گیم پیس' کہا جاتا ہے جسے آپ کے لوکل ہوسٹ کے 'img' فولڈر میں محفوظ کیا جاتا ہے۔ سادگی کے لیے ، یہ مثال 60xgame de60px اورنج اسکوائر استعمال کرتی ہے۔ آپ کا کھیل کچھ اس طرح نظر آنا چاہیے:

---

---

اگر آپ کو کوئی مسئلہ درپیش ہے تو ، اپنے براؤزر کا ڈیبگر استعمال کریں تاکہ معلوم کریں کہ کیا غلط ہوا ہے۔ یہاں تک کہ ایک ہی کردار سے محروم ہونا تباہی کا باعث بن سکتا ہے ، لیکن عام طور پر ، آپ کا ڈیبگر ان چھوٹی چھوٹی غلطیوں کو پکڑ لے گا۔

سیٹ اپ کوڈ کی وضاحت

اب تک ، کھیل کچھ نہیں کرتا ہے۔ لیکن ہم نے پہلے ہی بہت ساری زمین کا احاطہ کر لیا ہے! آئیے کوڈ کو مزید گہرائی سے دیکھیں۔

فیزر گیم چلنے کے لیے ، آپ کو فیزر لائبریری درآمد کرنے کی ضرورت ہے۔ ہم یہ لائن 3 پر کرتے ہیں۔ اس مثال میں ، ہم نے سورس کوڈ سے منسلک کیا ، لیکن آپ اسے اپنے لوکل ہوسٹ میں ڈاؤن لوڈ کر سکتے ہیں اور فائل کا حوالہ بھی دے سکتے ہیں۔

انٹرنیٹ سے منسلک ہونے کا کیا مطلب ہے؟

زیادہ تر کوڈ اب تک کھیل کے ماحول کو تشکیل دیتا ہے ، جو کہ متغیر ہے۔ تشکیل اسٹورز ہماری مثال میں ، ہم ایک نیلے رنگ کے ساتھ ایک فیزر گیم ترتیب دے رہے ہیں (ہیکس کلر کوڈ میں CCFFFF) پس منظر جو 600px by 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 گیمز ڈیزائن کرنا شروع کرنے کا یہ ایک بہت آسان طریقہ ہے۔ اس کوڈ کی تعمیر جاری رکھیں اور اپنے کھیل کو بہتر بنائیں۔

اگر آپ کو کوئی غلطی ہو جاتی ہے تو ، آپ کا براؤزر ڈیبگر اس مسئلے کو دریافت کرنے کا ایک بہترین طریقہ ہے۔

بانٹیں بانٹیں ٹویٹ ای میل۔ ویب سائٹ کے مسائل کو حل کرنے کے لیے کروم DevTools کا استعمال کیسے کریں۔

اپنی ویب سائٹ کو بہتر بنانے کے لیے کروم براؤزر کے بلٹ ان ڈویلپمنٹ ٹولز کا استعمال کرنا سیکھیں۔

اگلا پڑھیں۔ متعلقہ موضوعات۔

• پروگرامنگ۔
• جاوا اسکرپٹ۔
• HTML5۔
• کھیل کی ترقی

مصنف کے بارے میں جینیفر سیٹن۔(21 مضامین شائع ہوئے)

جے سیٹن ایک سائنس رائٹر ہے جو پیچیدہ موضوعات کو توڑنے میں مہارت رکھتا ہے۔ اس نے ساسکیچوان یونیورسٹی سے پی ایچ ڈی کی ہے۔ اس کی تحقیق آن لائن طالب علموں کی مصروفیت بڑھانے کے لیے گیم پر مبنی سیکھنے کو استعمال کرنے پر مرکوز ہے۔ جب وہ کام نہیں کررہی ہے ، آپ اسے پڑھنے ، ویڈیو گیمز کھیلنے یا باغبانی کے ساتھ ملیں گے۔

جینیفر سیٹن سے مزید

ہماری نیوز لیٹر کو سبسکرائب کریں

ٹیک ٹپس ، جائزے ، مفت ای بکس ، اور خصوصی سودوں کے لیے ہمارے نیوز لیٹر میں شامل ہوں!

سبسکرائب کرنے کے لیے یہاں کلک کریں۔