Game Dev · 7–8-sinf · 4-hafta

Kamera Skrollingi va Procedural Dunyo Generatsiyasi

800x400 o'lchamdagi tor qafasdan ozod bo'lamiz: kamera koordinatalari, silliq kinoeffekt Lerp ergashishi, ko'p qatlamli fon parallaksi va cheksiz procedural dunyo generatsiyasi.

🎥 Camera Viewport 🌊 Lerp Smoothing 🌆 Parallax Layers ♾️ Procedural Engine
Cheklangan Maydon

Statik Ekran Cheklovi: Nega qahramon ekranga urilib qoladi?

❌ Kamerasiz (Statik Canvas):
  • O'yin maydoni Canvas kengligi (800 piksel) bilan cheklangan.
  • O'yinchi o'ngga yugursa, ekrandan chiqib ko'rinmay ketadi.
  • Uzoq sarguzashtlar yoki cheksiz yugurish o'yinlarini yaratib bo'lmaydi.
✅ Dinamik Kamera bilan (Cheksiz Dunyo):
  • Qahramon doim ekranning qulay hududida (28% chapda) turadi.
  • Dunyo uzunligi 1,000,000+ pikselga cho'zilishi mumkin!
  • Platformalar va kristallar oldinda avtomatik paydo bo'laveradi.
Fazoviy Tizim

World Space vs Screen Space: Obyekt Aslida Qayerda?

1. World Space (Koordinatalar Dunyosi)

O'yin olamidagi haqiqiy mutlaq koordinata. Masalan: xazina sandig'i dunyoda x = 3500 px masofada turibdi. Bu o'zgarmasdir.

2. Screen Space (Ekran Koordinatasi)

O'yinchining monitoridagi piksellar (0 dan 800 px gacha). Kamera ayni paytda qayerga qarab turganiga bog'liq!

📐 Asosiy formula: screenX = worldX - cameraX

Agar sandiq 3500 px da bo'lsa va kamera 3200 px ga siljigan bo'lsa, u ekranning 3500 - 3200 = 300 pikselida chiziladi!

Canvas Transformatsiyasi

Butun Dunyoni Bitta Qatorda Siljitish: ctx.translate()

1-usul: Har bir obyektni qo'lda hisoblash
// Zerikarli va xatolarga moyil: ctx.fillRect( player.x - cameraX, player.y, player.w, player.h ); ctx.fillRect( plat.x - cameraX, plat.y, plat.w, plat.h );
2-usul: Professional matritsa transformatsiyasi
ctx.save(); // Butun dunyoni kamera qadar orqaga suramiz: ctx.translate(-cameraX, 0); // Endi barcha obyektlar o'z tabiiy koordinatasida chiziladi! drawPlayer(); drawPlatforms(); drawGems(); ctx.restore(); // Holatni tiklaymiz
Silliq Ergashish

Camera Lerp: Qattiq Bog'lash Nega Xato?

❌ Qattiq bog'lash (cameraX = player.x):

Qahramon har sakraganda ekran shiddat bilan silkinadi. Tasvir titrab, o'yinchining ko'zini toliqtiradi.

✅ Silliq Lerp (Chiziqli interpolyatsiya):

Kamera yengil va silliq kinoeffekt bilan har freymda masofaning 8% qismini bosib o'tadi.

const targetX = player.x - canvas.width * 0.28; // 0.08 = silliq, yoqimli kinoeffekt: cameraX += (targetX - cameraX) * 0.08;
Kamera Neytral Hududi

Ko'rish Qoidasi: O'yinchi Oldidagi Yo'lni Ko'rishi Shart

Nega qahramonni qoq markazga qo'yib bo'lmaydi?

Agar o'yinchi 50% markazda bo'lsa, u oldindagi yo'lning faqat yarmini ko'radi. Katta tezlikda jarlikka qulab tushish xavfi juda yuqori!

Platformerlar Oltin Qoidasi (25% – 30%):

Klassik o'yinlarda qahramon ekranning 25%–30% chap tomoniga qo'yiladi. Natijada ekranning 70%+ maydoni oldindagi to'siqlarni ko'rishga qoladi!

Parallaks Foni

Parallaks: 2D O'yinda 3D Fazoviy Chuqurlik Illyuziyasi

Qatlam Siljish tezligi Vizual mazmun
Дальний план (Distant) cameraX * 0.05 Osmon, yulduzlar, oy (deyarli harakatsiz)
Средний план (Midground) cameraX * 0.35 Kiber shahar osmono'par binolari, chiroqlar
Передний план (Foreground) cameraX * 1.00 Platformalar, kristallar, qahramon (to'liq tezlik)
Procedural Generatsiya

Procedural Dunyo: Platformalar Yugurish Davomida Yaratiladi

ensurePlatformsAhead() algoritmi:
function ensurePlatformsAhead() { let lastPlat = platforms[platforms.length - 1]; // Kamera ko'radigan masofadan 600px oldinda turamiz: while (lastPlat.x - cameraX < canvas.width + 600) { const gap = Math.random() * 80 + 140; const w = Math.random() * 180 + 160; const nextX = lastPlat.x + lastPlat.w + gap; const nextY = Math.min(360, lastPlat.y + ...); platforms.push({ x: nextX, y: nextY, w: w, h: 24 }); } }
Fizikaviy sakrash chegaralari:

Platformalar orasidagi jarlik tasodifiy 1000 px bo'lishi mumkin emas! U o'yinchining sakrash formulasiga mos cheklanadi: `maxGap = vx * airTime`. Aks holda o'yinni o'tib bo'lmaydi!

Culling Texnologiyasi

Culling: O'tmishni O'chirish Barqaror 60 FPS Garovidir

🚨 Culling (tozalash) bo'lmasa:

5000 metr yugurgandan so'ng, orqada 300+ platforma va 500+ kristall qolib ketadi. Dvigatel 2 kilometr orqada qolgan narsalarni ham hisoblab qotadi!

✅ Culling qo'llanganda:
for (let i = platforms.length - 1; i >= 0; i--) { // Agar platforma kameradan 250px orqada qolsa: if (platforms[i].x + platforms[i].w < cameraX - 250) { platforms.splice(i, 1); // Xotiradan tozalash! } }
To'liq Arxitektura

Cheksiz Yuguruvchi Dvigatelining To'liq Zanjiri

1. Input & Fizika

player.x += vx; vy += g;
Platformalarga AABB qo'nish.

2. Kamera Lerp

cameraX += (target - cam) * 0.08
Silliq kuzatish.

3. Procedural & GC

Oldinda yangi platforma yasash, orqadagilarni splice qilish.

4. Render

Parallaks foni + ctx.translate(-cameraX, 0).

💡 Aynan mana shu arxitektura Flappy Bird, Subway Surfers, Jetpack Joyride kabi mashhur o'yinlarning yuragidir!
Amaliy Laboratoriya

Infinite Cyber Runway: Dunyo Parametrlarini Sinovdan O'tkazish

Laboratoriya vazifalari:
  1. Brauzerda lab/index.html trenajyorini oching.
  2. Lerp = 1.0 (qattiq) va Lerp = 0.08 (silliq) farqini sinab ko'ring.
  3. Dunyo to'rini va kamera markaz chizig'ini yoqib ko'ring.
  4. 500 metrdan ko'proq masofaga yugurib, 20 ta kristall to'plang!
Jonli dvijok telemetriyasi:

Orqada qolgan platformalar o'chirilgani sari "Tozalangan (GC)" soni o'sib borishini va FPS barqaror 60 da turishini kuzating!

Xulosa va Baholash

10 Ballik Baholash Mezoni

9 – 10 Ball: Senior Runner
  • ScreenX hisobi xatosiz topilgan.
  • Lerp mohiyati to'g'ri tushuntirilgan.
  • Parallaks nisbatlari va culling sharti to'g'ri.
7 – 8 Ball: Yaxshi Natija
  • Hisoblash to'g'ri.
  • Parallaks yoki cullingda 1 ta xatolik bor.
  • Varaqa to'ldirilgan.
5 – 6 Ball: Qoniqarli
  • Faqat hisoblash bajarilgan.
  • Nazariy savollar chala.
🚀 Keyingi 19-dars: Mobil Moslashuv, Touch va Virtual Joystik!