Web-Dev-For-Beginners/translations/ur/6-space-game/2-drawing-to-canvas

اسپیس گیم بنائیں حصہ 2: ہیرو اور مونسٹرز کو کینوس پر ڈرائنگ کریں

لیکچر سے پہلے کا کوئز

لیکچر سے پہلے کا کوئز

کینوس

کینوس ایک HTML عنصر ہے جو ڈیفالٹ میں کوئی مواد نہیں رکھتا؛ یہ ایک خالی تختی کی طرح ہے۔ آپ کو اس پر ڈرائنگ کر کے مواد شامل کرنا ہوگا۔

✅ کینوس API کے بارے میں مزید پڑھیں MDN پر۔

یہ عام طور پر صفحے کے باڈی کا حصہ ہوتے ہوئے اس طرح ڈکلیئر کیا جاتا ہے:

<canvas id="myCanvas" width="200" height="100"></canvas>

اوپر ہم نے id, width اور height سیٹ کیے ہیں۔

• id: یہ سیٹ کریں تاکہ آپ اس کا حوالہ حاصل کر سکیں جب آپ کو اس کے ساتھ تعامل کرنا ہو۔
• width: یہ عنصر کی چوڑائی ہے۔
• height: یہ عنصر کی اونچائی ہے۔

سادہ جیومیٹری ڈرائنگ کرنا

کینوس کارٹیزین کوآرڈینیٹ سسٹم کا استعمال کرتا ہے چیزوں کو ڈرائنگ کرنے کے لیے۔ اس لیے یہ x-axis اور y-axis کا استعمال کرتا ہے یہ ظاہر کرنے کے لیے کہ کچھ کہاں واقع ہے۔ مقام 0,0 اوپر بائیں کونے میں ہے اور نیچے دائیں کونا وہ ہے جو آپ نے کینوس کی چوڑائی اور اونچائی کے طور پر مقرر کیا ہے۔

تصویر MDN سے

کینوس عنصر پر ڈرائنگ کرنے کے لیے آپ کو درج ذیل مراحل سے گزرنا ہوگا:

1. حوالہ حاصل کریں کینوس عنصر کا۔
2. حوالہ حاصل کریں کینوس عنصر پر موجود کانٹیکسٹ عنصر کا۔
3. ڈرائنگ آپریشن انجام دیں کانٹیکسٹ عنصر کا استعمال کرتے ہوئے۔

اوپر دیے گئے مراحل کے لیے کوڈ عام طور پر اس طرح نظر آتا ہے:

// draws a red rectangle
//1. get the canvas reference
canvas = document.getElementById("myCanvas");

//2. set the context to 2D to draw basic shapes
ctx = canvas.getContext("2d");

//3. fill it with the color red
ctx.fillStyle = 'red';

//4. and draw a rectangle with these parameters, setting location and size
ctx.fillRect(0,0, 200, 200) // x,y,width, height

✅ کینوس API زیادہ تر 2D اشکال پر مرکوز ہے، لیکن آپ ویب سائٹ پر 3D عناصر بھی ڈرائنگ کر سکتے ہیں؛ اس کے لیے آپ WebGL API استعمال کر سکتے ہیں۔

آپ کینوس API کے ساتھ مختلف چیزیں ڈرائنگ کر سکتے ہیں جیسے:

• جیومیٹریکل اشکال، ہم نے پہلے ہی دکھایا کہ ایک مستطیل کیسے ڈرائنگ کی جاتی ہے، لیکن آپ اور بھی بہت کچھ ڈرائنگ کر سکتے ہیں۔
• متن، آپ کسی بھی فونٹ اور رنگ کے ساتھ متن ڈرائنگ کر سکتے ہیں۔
• تصاویر، آپ کسی تصویر کے اثاثے جیسے .jpg یا .png کی بنیاد پر تصویر ڈرائنگ کر سکتے ہیں۔

✅ آزمائیں! آپ جانتے ہیں کہ مستطیل کیسے ڈرائنگ کی جاتی ہے، کیا آپ صفحے پر دائرہ ڈرائنگ کر سکتے ہیں؟ CodePen پر کچھ دلچسپ کینوس ڈرائنگز دیکھیں۔ یہاں ایک خاص طور پر متاثر کن مثال ہے۔

ایک تصویر کے اثاثے کو لوڈ کریں اور ڈرائنگ کریں

آپ ایک تصویر کے اثاثے کو Image آبجیکٹ بنا کر اور اس کی src پراپرٹی سیٹ کر کے لوڈ کرتے ہیں۔ پھر آپ load ایونٹ کو سنتے ہیں تاکہ معلوم ہو سکے کہ یہ استعمال کے لیے تیار ہے۔ کوڈ اس طرح نظر آتا ہے:

اثاثہ لوڈ کریں

const img = new Image();
img.src = 'path/to/my/image.png';
img.onload = () => {
  // image loaded and ready to be used
}

اثاثہ لوڈ کرنے کا پیٹرن

اوپر دیے گئے کوڈ کو اس طرح کے کنسٹرکٹ میں لپیٹنے کی سفارش کی جاتی ہے تاکہ اسے استعمال کرنا آسان ہو اور آپ صرف اس وقت اس میں تبدیلی کریں جب یہ مکمل طور پر لوڈ ہو:

function loadAsset(path) {
  return new Promise((resolve) => {
    const img = new Image();
    img.src = path;
    img.onload = () => {
      // image loaded and ready to be used
      resolve(img);
    }
  })
}

// use like so

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')
}

اسکرین پر گیم کے اثاثے ڈرائنگ کرنے کے لیے، آپ کا کوڈ اس طرح نظر آئے گا:

async function run() {
  const heroImg = await loadAsset('hero.png')
  const monsterImg = await loadAsset('monster.png')

  canvas = document.getElementById("myCanvas");
  ctx = canvas.getContext("2d");
  ctx.drawImage(heroImg, canvas.width/2,canvas.height/2);
  ctx.drawImage(monsterImg, 0,0);
}

اب وقت ہے کہ آپ اپنا گیم بنانا شروع کریں

کیا بنانا ہے

آپ کو ایک ویب صفحہ بنانا ہوگا جس میں کینوس عنصر ہو۔ یہ ایک سیاہ اسکرین 1024*768 رینڈر کرے۔ ہم نے آپ کو دو تصاویر فراہم کی ہیں:

• ہیرو شپ

  

• 5*5 مونسٹر

  

ترقی شروع کرنے کے لیے تجویز کردہ مراحل

ان فائلوں کو تلاش کریں جو آپ کے لیے your-work سب فولڈر میں بنائی گئی ہیں۔ اس میں درج ذیل شامل ہونا چاہیے:

-| assets
  -| enemyShip.png
  -| player.png
-| index.html
-| app.js
-| package.json

Visual Studio Code میں اس فولڈر کی کاپی کھولیں۔ آپ کو ایک مقامی ترقیاتی ماحول ترتیب دینا ہوگا، ترجیحاً Visual Studio Code کے ساتھ NPM اور Node انسٹال ہو۔ اگر آپ کے کمپیوٹر پر npm سیٹ اپ نہیں ہے، تو یہاں دیکھیں کہ اسے کیسے کریں۔

اپنے پروجیکٹ کو your_work فولڈر میں نیویگیٹ کر کے شروع کریں:

cd your-work
npm start

اوپر دیا گیا کوڈ HTTP سرور کو ایڈریس http://localhost:5000 پر شروع کرے گا۔ ایک براؤزر کھولیں اور اس ایڈریس کو درج کریں۔ یہ ابھی ایک خالی صفحہ ہے، لیکن یہ جلد ہی بدل جائے گا۔

نوٹ: اسکرین پر تبدیلیاں دیکھنے کے لیے، اپنے براؤزر کو ریفریش کریں۔

کوڈ شامل کریں

your-work/app.js میں درج ذیل کو حل کرنے کے لیے ضروری کوڈ شامل کریں:

1. کینوس ڈرائنگ کریں سیاہ پس منظر کے ساتھ

   ٹپ: /app.js میں مناسب TODO کے تحت دو لائنیں شامل کریں، ctx عنصر کو سیاہ سیٹ کریں اور اوپر/بائیں کوآرڈینیٹس کو 0,0 پر سیٹ کریں اور کینوس کی اونچائی اور چوڑائی کے برابر سیٹ کریں۔

2. ٹیکسچرز لوڈ کریں

   ٹپ: await loadTexture کا استعمال کرتے ہوئے کھلاڑی اور دشمن کی تصاویر شامل کریں اور تصویر کا راستہ پاس کریں۔ آپ انہیں ابھی اسکرین پر نہیں دیکھیں گے!

3. ہیرو کو اسکرین کے مرکز میں نیچے کے نصف حصے میں ڈرائنگ کریں

   ٹپ: drawImage API کا استعمال کریں ہیرو کی تصویر کو اسکرین پر ڈرائنگ کرنے کے لیے، canvas.width / 2 - 45 اور canvas.height - canvas.height / 4) سیٹ کریں۔

4. 5*5 مونسٹرز ڈرائنگ کریں

   ٹپ: اب آپ دشمنوں کو اسکرین پر ڈرائنگ کرنے کے لیے کوڈ کو ان کومنٹ کر سکتے ہیں۔ اس کے بعد، createEnemies فنکشن پر جائیں اور اسے مکمل کریں۔

   پہلے، کچھ کانسٹنٹس سیٹ کریں:

   const MONSTER_TOTAL = 5;
   const MONSTER_WIDTH = MONSTER_TOTAL * 98;
   const START_X = (canvas.width - MONSTER_WIDTH) / 2;
   const STOP_X = START_X + MONSTER_WIDTH;
   

   پھر، مونسٹرز کی صف کو اسکرین پر ڈرائنگ کرنے کے لیے ایک لوپ بنائیں:

   for (let x = START_X; x < STOP_X; x += 98) {
       for (let y = 0; y < 50 * 5; y += 50) {
         ctx.drawImage(enemyImg, x, y);
       }
     }
   

نتیجہ

مکمل نتیجہ اس طرح نظر آنا چاہیے:

حل

براہ کرم پہلے خود اسے حل کرنے کی کوشش کریں، لیکن اگر آپ پھنس جائیں تو حل دیکھیں۔

---

🚀 چیلنج

آپ نے 2D پر مرکوز کینوس API کے بارے میں سیکھا؛ WebGL API پر ایک نظر ڈالیں، اور 3D آبجیکٹ ڈرائنگ کرنے کی کوشش کریں۔

لیکچر کے بعد کا کوئز

لیکچر کے بعد کا کوئز

جائزہ اور خود مطالعہ

کینوس API کے بارے میں مزید جاننے کے لیے اسے پڑھیں۔

اسائنمنٹ

کینوس API کے ساتھ کھیلیں

ڈسکلیمر:
یہ دستاویز AI ترجمہ سروس Co-op Translator کا استعمال کرتے ہوئے ترجمہ کی گئی ہے۔ ہم درستگی کے لیے کوشش کرتے ہیں، لیکن براہ کرم آگاہ رہیں کہ خودکار ترجمے میں غلطیاں یا غیر درستیاں ہو سکتی ہیں۔ اصل دستاویز کو اس کی اصل زبان میں مستند ذریعہ سمجھا جانا چاہیے۔ اہم معلومات کے لیے، پیشہ ور انسانی ترجمہ کی سفارش کی جاتی ہے۔ ہم اس ترجمے کے استعمال سے پیدا ہونے والی کسی بھی غلط فہمی یا غلط تشریح کے ذمہ دار نہیں ہیں۔