فلیش آہستہ آہستہ ایچ ٹی ایم ایل 5 اور جاوا اسکرپٹ کے حق میں ایڈوب کی طرف سے ترک کر دیا جا رہا ہے؛ اس کے سرکاری اختتام کی زندگی سال 2020 کے لئے مقرر کی جاتی ہے. اور یہی مضمون ہے جہاں یہ مضمون کام میں آ جائے گا.
مندرجہ بالا مندرجہ ذیل تجاویز ایچ ٹی ایم ایل 5 گیم ڈویلپرز کی مدد کرنے کے لئے عام غلطیوں سے بچنے کے لۓ عام غلطیوں سے بچنے کے لۓ، اور ساتھ ساتھ پوری ترقیاتی عمل کو آسانی سے ممکنہ طور پر آسانی سے جانا جاتا ہے. آپ سب کی ضرورت جاوا اسکرپٹ، ویب جی ایل اور فیزر فریم ورک کا بنیادی علم ہے.
SWF سے آپ کے کھیل ڈیزائن کو تبدیل کرنے میں جاوا اسکرپٹ کو بہتر بنایا جا سکتا ہے صارف کا تجربہ جس میں باری میں یہ ایک جدید نظر دیتا ہے. لیکن یہ کیسے کریں؟ کیا آپ کو اس پرانے ٹیکنالوجی سے چھٹکارا حاصل کرنے کے لئے ایک وقفے جاوا اسکرپٹ گیم کنورٹر کی ضرورت ہے؟ ٹھیک ہے، HTML5 تبادلوں پر فلیش کیک کا ایک ٹکڑا ہوسکتا ہے - یہاں ہے کہ اس معاملے کے بارے میں کیا تجربہ کار جاوا اسکرپٹ گیم ڈویلپر ہے.
آپ کے ڈیزائن کے عمل کو سادہ رکھنے کی طرح؟ A. ویب سائٹ بلڈر اور دائیں ویب میزبانی فراہم کنندہ اسے اس طرح رکھ سکتا ہے.
کسی دوسرے پلیٹ فارم میں ایک کھیل کو تبدیل کرنے میں اس کو بہتر بنانے کا بہترین موقع ہے، اس کے مسائل کو حل کرنے اور سامعین کو بڑھانے کا بہترین موقع ہے. ذیل میں چند چیزیں ہیں جو آسانی سے کئے جا سکتے ہیں اور غور کرنے کے قابل ہیں:
جب یہ جاوا سکرپٹ کھیل کی ترقی کے لئے آتا ہے، تو یہ کھیل ہی کھیل میں بٹن، ویجٹ اور دیگر GUI عناصر کے لئے ایچ ٹی ایم ایل اور سی ایس ایس کو فائدہ اٹھانے کے لئے پریشان ہوسکتا ہے. ہمارا مشورہ یہاں محتاط رہنا ہے. یہ انسداد دہشت گردی کا ہے، لیکن اصل میں ڈوم عناصر کو پیچیدہ کھیلوں پر کم پرفارمنس ہے اور یہ موبائل پر زیادہ اہمیت حاصل ہے. اگر آپ تمام پلیٹ فارم پر مسلسل 60 ایف پی ایس حاصل کرنا چاہتے ہیں، تو پھر ایچ ٹی ایم ایل اور سی ایس ایس سے استعفی کی ضرورت ہوسکتی ہے.
غیر انٹرایکٹو GUI عناصر، جیسے صحت کی سلاخوں، بارود بار یا اسکور کاؤنٹر باقاعدگی سے تصاویر (phaser.image 'کلاس) کا استعمال کرتے ہوئے فورس میں آسانی سے لاگو کیا جا سکتا ہے،' Trimming اور 'Phaser'. سادہ ٹیکسٹ لیبل کے لئے متن 'کلاس.
بلٹ میں 'Phaser.Button' کلاس استعمال کرتے ہوئے بٹن اور چیک باکس جیسے انٹرایکٹو عناصر کو لاگو کیا جاسکتا ہے. دیگر، زیادہ پیچیدہ عناصر مختلف سادہ اقسام، جیسے گروپوں، تصاویر، بٹن اور ٹیکسٹ لیبلز پر مشتمل ہوسکتے ہیں.
اگر آپ اپنی مرضی کے مطابق ویکٹر فونٹ (مثال کے طور پر ٹی ٹی ایف یا OTF) کے ساتھ متن فراہم کرنا چاہتے ہیں، تو آپ کو اس بات کا یقین کرنے کی ضرورت ہے کہ کسی بھی متن کو انجام دینے سے قبل فونٹ پہلے ہی براؤزر کی طرف سے لوڈ کیا گیا ہے. Phaser V2.6 اس مقصد کے حل فراہم نہیں کرتا، لیکن ایک اور لائبریری کا استعمال کیا جا سکتا ہے - ویب فونٹ لوڈر .
فرض کریں کہ آپ کے پاس فونٹ فائل ہے اور آپ کے صفحے میں ویب فونٹ لوڈر شامل ہیں، پھر ذیل میں ایک فونٹ لوڈ کرنے کا ایک سادہ مثال ہے. ایک سادہ سی ایس ایس فائل بنائیں جو ویب فونٹ لوڈر کی طرف سے لوڈ کیا جائے گا (آپ کو اپنے HTML میں شامل کرنے کی ضرورت نہیں ہے):
@ فونٹ-چہرہ {
// یہ نام آپ جے ایس میں استعمال کریں گے
فونٹ-خاندان: 'گن پلے'؛
فونٹ فائل پر // یو آر ایل، رشتہ دار یا مطلق ہوسکتا ہے
SRC: URL ('../ فونٹس / gunplay.ttf') فارمیٹ ('TrueType')؛
فونٹ وزن: 400؛
}
اب ایک عالمی متغیر نام WebFontConfig کی وضاحت کریں. کچھ آسان ہے جیسا کہ یہ عام طور پر کافی ہوگا:
var webfontconfig = {
'کلاسیں': غلط،
'ٹائم آؤٹ': 0،
'فعال': فنکشن () {
// فونٹ کامیابی سے بھرا ہوا ہے ...
}،
'اپنی مرضی کے مطابق': {
'خاندانوں': ['گنہگار']
// پہلے ذکر کردہ سی ایس ایس میں یو آر ایل
'یو آر ایل': ['شیلیوں / فانٹ. css']
}
}؛
اوپر دکھایا گیا ہے 'فعال' کال بیک میں اپنا کوڈ ڈالنے کے لئے یاد رکھیں. اور یہ بات ہے!
اب ہم جاوا اسکرپٹ کے تبادلوں پر ہمارے فلیش کے درمیانے نقطہ میں ہیں - یہ شائقین کی دیکھ بھال کرنے کا وقت ہے. ایکشن سکرپٹ میں مسلسل مقامی اعداد و شمار کو مسلسل ذخیرہ کرنے کے لئے آپ کو 'شارپبوبل' کلاس کا استعمال کریں گے. جاوا اسکرپٹ میں، سادہ متبادل ہے LocalStorage API. ، جس میں بعد میں دوبارہ حاصل کرنے کے لئے تاروں کو ذخیرہ کرنے کی اجازت دیتا ہے، صفحہ دوبارہ لوڈ.
بچت کا ڈیٹا بہت آسان ہے:
var ترقی = 15؛
LocalStorage.Setitem ('MyGame.Pogress'، ترقی)؛
نوٹ کریں کہ مندرجہ بالا مثال میں 'ترقی' متغیر، جو ایک نمبر ہے، ایک تار میں تبدیل کیا جائے گا.
لوڈنگ بھی آسان ہے، لیکن یاد رکھیں کہ حاصل کردہ اقدار کو تاریں یا سست ہو جائیں گے اگر وہ موجود نہیں ہیں.
var ترقی = پیریسنٹ (Localstorage.getitem ('mygame.progress') || 0؛
یہاں ہم اس بات کو یقینی بناتے ہیں کہ واپسی کی قیمت ایک نمبر ہے. اگر یہ موجود نہیں ہے تو، 0 'ترقی' متغیر کو تفویض کیا جائے گا.
آپ مثال کے طور پر، JSON: مزید پیچیدہ ڈھانچے کو بھی ذخیرہ اور دوبارہ حاصل کرسکتے ہیں.
وار اعداد و شمار = {'اہداف': 13، 'جیت': 7، 'نقصانات': 3، 'ڈرا': 1
}؛
Localstororage.SetiTem ('mygame.stats'، JSSON.Stringify (اعداد و شمار)؛
...
وار اعداد و شمار = JSON.PARSE (Localstorage.getitem ('MyGame.stats') || {}؛
کچھ معاملات موجود ہیں جب 'مقامی اسٹورج' اعتراض دستیاب نہیں ہوگی. مثال کے طور پر، فائل کا استعمال کرتے وقت: // پروٹوکول یا جب ایک نجی ونڈو میں ایک صفحہ بھری ہوئی ہے. آپ 'کوشش اور پکڑو' کا بیان استعمال کرسکتے ہیں تاکہ یہ یقینی بنائیں کہ آپ کا کوڈ کام جاری رکھیں اور ڈیفالٹ اقدار کو استعمال کریں، جو ذیل میں مثال میں دکھایا گیا ہے:
کوشش کریں {
Var ترقی = Localstorage.getitem ('mygame.pogress')؛
} پکڑنے (استثنا) {
// LocalStorage دستیاب نہیں، ڈیفالٹ اقدار کا استعمال کریں
}
یاد رکھنا ایک اور چیز یہ ہے کہ ذخیرہ کردہ اعداد و شمار فی فی فی ڈومین کو بچایا جاتا ہے. لہذا اگر کوئی خطرہ ہے کہ بہت سے کھیلوں کو ایک ڈومین پر میزبان کیا جاتا ہے، تو بچت کرتے وقت ایک سابقہ (نام اسپیس) کا استعمال کرنا بہتر ہے. مثال کے طور پر، 'MyGame.' ایک سابقہ ہے اور آپ عام طور پر اس کھیل کے نام سے اسے تبدیل کرنا چاہتے ہیں.
اگر آپ کا کھیل ایک iframe میں سرایت ہے، تو مقامی اسٹورج iOS پر جاری نہیں رہیں گے. اس صورت میں، آپ کو بجائے والدین میں اعداد و شمار کو ذخیرہ کرنے کی ضرورت ہوگی.
جب فیرسر اور Pixijs آپ کے sprites فراہم کرتے ہیں، تو وہ ایک سادہ اندرونی ٹکڑے ٹکڑے کا استعمال کرتے ہیں. اس میں بہت سے خصوصیات نہیں ہیں کیونکہ یہ رفتار کے مطابق ہے. تاہم، آپ اپنے مقاصد کے لئے اس شادر کو تبدیل کرسکتے ہیں. مثال کے طور پر، آپ کو اضافی معائنہ کرنے یا انجام دینے کے لئے مزید خصوصیات کی حمایت کرنے کا معائنہ کرنے کے لئے اسے فائدہ اٹھانا پڑتا ہے. ذیل میں آپ کے اپنے ڈیفالٹ ٹکڑے ٹکڑے کس طرح فیزر V2 کرنے کی فراہمی کے لئے ایک مثال ہے.
فنکشن پری لوڈ () {
یہ.load.shader ('filename.frag'، 'shaders / filename.frag')؛
}
فنکشن تخلیق () {
var renderer = it.renderer؛
وار بیچ = renderer.spritebatch؛
Batch.DefaultShader =.
نیا Pixi.abstractFilter (itic.cache.getshader ('filename.frag')؛
Batch.SetContext (renderer.gl)؛
}
ایک اپنی مرضی کے مطابق ڈیفالٹ Shader Phaser اور Pixijs میں ڈیفالٹ ٹنٹنگ طریقوں کو تبدیل کرنے کے لئے استعمال کیا جا سکتا ہے. فیزر اور PixiJs میں ٹنٹنگ ایک دیئے گئے رنگ کی طرف سے ساخت پکسلز ضرب کرکے کام کرتا ہے. ضرب ہمیشہ رنگوں کو سیاہ کرتا ہے، جو واضح طور پر کوئی مسئلہ نہیں ہے؛ یہ فلیش ٹنٹنگ سے صرف مختلف ہے. ہمارے کھیلوں میں سے ایک کے لئے ہمیں فلیش کی طرح ٹنٹنگ کو لاگو کرنے کی ضرورت ہے اور فیصلہ کیا کہ ایک اپنی مرضی کے مطابق ڈیفالٹ shader استعمال کیا جا سکتا ہے. ذیل میں اس طرح کے ایک ٹکڑا شادر کا ایک مثال ہے:
// مخصوص ٹنٹ مختلف، فلیش ٹنٹنگ کی طرح ملتی ہے
// رنگ سے اور ضرب نہیں ہوتا. ایک رنگ کا منفی
// اس شادر کے لئے مناسب طریقے سے کام کرنے کے لئے فراہم کی جانی چاہیئے،.
// سپرے. سفید کرنے کے لئے پورے سپرائٹ کو تبدیل کرنے کے لئے 0 کرنے کے لئے.
صحت سے متعلق Lowp فلوٹ؛
وی سی سی 2 vtexturecoord مختلف؛
مختلف vec4 vcolor؛
یونیفارم sampler2d usampler؛
باطل مین (باطل) {
VEC4 F = TEXTURE2D (USAMPLER، VTEXTURECOORD)؛
فلوٹ ایک = کلپ (vcolor.a، 0.00001، 1.0)؛
gl_fragcolor.rgb = f.rgb * volor.a + کلپ (1.0 - vcolor.rgb / A، 0.0، 1.0) * vcolor.a * f.a؛
gl_fragcolor.a = f.a * volor.a؛
}
یہ shader پکسلز کو ایک بیس رنگ میں شامل کرکے پکسلز کو ہلاتا ہے. کام کرنے کے لئے، آپ کو آپ چاہتے ہیں رنگ کے منفی فراہمی کی ضرورت ہے. لہذا، سفید حاصل کرنے کے لئے، آپ کو سیٹ کرنے کی ضرورت ہے:
sprite.tint = 0x000000؛ // یہ رنگ سفید سفید کرنے کے لئے
sprite.tint = 0x00fffff؛ // یہ سرخ دیتا ہے
ڈیبگنگ کے ساتھ مدد کرنے کے لئے ایک ڈیفالٹ shader کو تبدیل کرنے کے لۓ بھی لیا جا سکتا ہے. ذیل میں ہم نے وضاحت کی ہے کہ اس طرح کے شادر کے ساتھ کس طرح زیادہ سے زیادہ اندازہ لگایا جاسکتا ہے.
اتارنے کا وقت ہوتا ہے جب اسکرین پر بہت سے یا تمام پکسلز کئی بار فراہم کیے جاتے ہیں. مثال کے طور پر، بہت سے اشیاء اسی جگہ لے رہے ہیں اور ایک دوسرے پر ایک دوسرے کو فراہم کرتے ہیں. کتنے پکسلز ایک GPU فی سیکنڈ فراہم کر سکتے ہیں، بھرنے کی شرح کے طور پر بیان کیا جاتا ہے. جدید ڈیسک ٹاپ GPUS عام طور پر 2 ڈی مقاصد کے لئے زیادہ سے زیادہ بھرتی شرح ہے، لیکن موبائل لوگ بہت سست ہیں.
اس تصویر پر آپ پہلے ہی غلط استعمال کی رپورٹ کر چکے / چکی ہیں. ہیلپ ڈیسک جلد از جلد معاملے کو دیکھے گا. تصویر کے بارے میں غلط استعمال کی اطلاع کرنے میں ایرر آ گیا ہے. براہ مہربانی دوبارہ کوشش کریں. اگر یہ ایرر برقرار رہے تو ہمارے ہیلپ ڈیسک سے رابطہ کریں. غلط استعمال کی اطلاع دیتے ہوئے ایرر آ گیا ہے.
باطل مین (صفر) {
gl_fragcolor.rgb + = 1.0 / 7.0؛
}
یہ shader پکسلز کو ہلاتا ہے جو عملدرآمد کیا جا رہا ہے. نمبر 7.0 اشارہ کرتا ہے کہ پکسلز سفید کو تبدیل کرنے کے لئے کتنے لکھتے ہیں؛ آپ اس نمبر کو اپنی پسند میں دھن سکتے ہیں. دوسرے الفاظ میں، اسکرین پر لائٹر پکسلز کئی بار لکھے گئے تھے، اور سفید پکسلز کم از کم سات مرتبہ لکھے گئے تھے.
یہ شادر بھی 'پوشیدہ' اشیاء کو تلاش کرنے میں بھی مدد ملتی ہے کہ کسی بھی وجہ سے اب بھی فراہم کی جاتی ہے، اور اس کے ارد گرد اس کے ارد گرد انتہائی شفاف علاقوں ہیں (GPU اب بھی آپ کے ساختہ میں شفاف پکسلز پر عمل کرنے کی ضرورت ہے).
ایک طبیعیات کا انجن ایک درمیانے درجے والا ہے جو جسمانی جسمانی اداروں (عام طور پر سخت جسم کی متحرک) اور ان کے تصادم کے لئے ذمہ دار ہے. طبیعیات کے انجن 2D یا 3D خالی جگہوں کو ضم کرتے ہیں، لیکن دونوں نہیں. ایک عام طبیعیات انجن فراہم کرے گا:
ایک فیزر پلگ ان ہے جو اس مقصد کے لئے اچھی طرح سے کام کرتا ہے. BOX2D یونٹی گیم انجن اور گیمیمیکر سٹوڈیو 2 میں بھی استعمال کیا جاتا ہے.
جبکہ ایک فزکس انجن آپ کی ترقی کو تیز کرے گی، وہاں ایک قیمت ہے جو آپ کو ادا کرنا پڑے گا: کم رن ٹائم کی کارکردگی. تصادم کا پتہ لگانے اور حساب سے متعلق ردعمل ایک سی پی یو-گہری کام ہے. آپ موبائل فون پر ایک منظر میں کئی درجن متحرک اشیاء تک محدود ہوسکتے ہیں یا کم سے کم کارکردگی کا مظاہرہ کرتے ہیں، ساتھ ساتھ 60 ایف پی ایس کے نیچے گہرے فریم کی شرح کو کم کرسکتے ہیں.
اگر آپ کے پاس FLA فائل کے اندر اندر ایک فلیش کھیل صوتی اثرات ہیں تو پھر ان کو GUI سے برآمد کرنا ممکن نہیں ہے (کم از کم ایڈوب متحرک سی سی 2017) اس مقصد کی خدمت کرنے والے مینو کے اختیارات کی کمی کی وجہ سے. لیکن ایک اور حل ہے - ایک وقف کردہ سکرپٹ جو صرف ایسا کرتا ہے:
فنکشن عمومیفینیمیم (نام) {
// snake_case نام پر ایک اونٹ کا نام بدلتا ہے
واپسی کا نام. RAPLESS (/ (a-z]) / جی، '_ $ 1'). تبدیل کریں (/ ^ _ /، '') .لولورٹر ()؛
}
فنکشن DisplayPath (PATH) {
// فائل کا راستہ زیادہ پڑھنے کے قابل بناتا ہے
UNSESCAPE (PATH) واپس لو .اور جگہ ('فائل: ///'، '' .میں ('|'، '')؛
}
fl.outputpanel.Clear ()؛
اگر (fl.getdocumentdom (). لائبریری. lightlecteditems (). لمبائی اور جی ٹی؛ 0)
// صرف منتخب کردہ اشیاء حاصل کریں
وار لائبریری = fl.getdoummentdom (). لائبریری. letictionems ()؛
اور
// تمام اشیاء حاصل کریں
وار لائبریری = fl.getdocumentdom (). لائبریری.
// برآمداتی منزل ڈائرکٹری کے لئے صارف سے پوچھیں
var جڑ = fl.browseforfolderurl ('ایک فولڈر کا انتخاب کریں.')؛
var غلطیاں = 0؛
کے لئے (var i = 0؛ i & lt؛ lightugh. طاقت؛ I ++) {
Var آئٹم = لائبریری [i]؛
اگر (item.itemtype! == 'آواز')
جاری رہے؛
وار راستہ = جڑ + '/'؛
اگر (item.originalcompressiontype === 'خام')
PATH + = عمومی اصلاحات (ITEM.NAME.SPLIT ('.') ) + '.wav'؛
اور
PATH + = عمومی اصلاحات (شے. نام)؛
وار کامیابی = item.exporttofile (راستہ)؛
اگر (کامیابی)
غلطیاں + = 1؛
FL.TRACE (DisplayPath (PATH) + ':' + (کامیابی؟ 'ٹھیک': 'غلطی')؛
}
FL.TRACE (غلطیاں + 'غلطی (ے)')؛
صوتی فائلوں کو برآمد کرنے کے لئے سکرپٹ کا استعمال کیسے کریں:
یہ ہو گیا ہے! اب آپ کو مخصوص ڈائرکٹری میں ویو فائلوں کو ہونا چاہئے. کیا کرنا باقی ہے، مثال کے طور پر، MP3، OGG یا AAC. (اگر آپ کے پاس کھیل فائلوں کو محفوظ رکھنے کے لئے، مہذب میں اپ گریڈ کریں کلاؤڈ اسٹوریج .)
اچھی پرانی MP3 فارمیٹ واپس آ گیا ہے، کیونکہ کچھ پیٹنٹ ختم ہو چکے ہیں اور اب ہر براؤزر کو MP3ز کو ڈیموڈ اور کھیلنے میں مدد ملتی ہے. یہ تھوڑا سا آسان بناتا ہے، کیونکہ آخر میں دو علیحدہ آڈیو فارمیٹس تیار کرنے کی کوئی ضرورت نہیں ہے. مثال کے طور پر، مثال کے طور پر، OGG اور AAC فائلوں کے لئے، اب تک MP3 کافی ہو گی.
اس کے باوجود، آپ کو MP3 کے بارے میں یاد کرنے کی دو اہم چیزیں موجود ہیں:
یہ مضمون اصل میں تخلیقی ویب ڈیزائن میگزین ویب ڈیزائنر کے مسئلہ 277 میں شائع کیا گیا تھا. مسئلہ 277 خریدیں یا یہاں ویب ڈیزائنر کو سبسکرائب کریں .
متعلقہ مضامین:
(تصویری کریڈٹ: Pixabay سے جان ویکیک) آپ کو کس طرح بادل اسٹوریج کا استع..
(تصویری کریڈٹ: اولیور گناہ) صفحہ 1 کا 2: مختلف زاویہ �..
آپ سی ایس ایس کے ساتھ بہت کچھ کر سکتے ہیں - شاید آپ سے زیادہ سوچ سکتے ہیں -..
جب آپ کو پیدا کرنے کے ساتھ کام کیا جاتا ہے کردار ڈیزائن سکریچ سے..
اس ٹیوٹوریل میں، میں اس تکنیکوں اور طریقوں کو اشتراک کرنے جا رہا ہوں جو ..
چاہے ہم اسے تسلیم کرنا چاہتے ہیں یا نہیں، پیغام رسانی بات چیت کے پلیٹ فا..
ایک واقعہ کے لئے عکاسی تخلیق ایک شاندار تخلیقی چیلنج ہے جس میں آپ کی ڈرا..
ڈاکٹر عجیب میں یہ پورٹل اثر بہت خاص تھا. اس فلم میں یہ بہت زیادہ اثر تھا �..