Atölye › Mario Tarzı Platform › 19/37. adım
Bölüm 2048 piksel genişliğinde, ekran ise 640. Sağa koşunca oyuncu ekrandan çıkıyor. Bir kamera lazım: dünyaya açılan ve oyuncuyu izleyen bir pencere.
Kamera tek bir sayı: camera → ekranın sol kenarının dünyadaki x'i. Oyuncuyu ekranın ortasında tutmak için onu her
karede hesaplayacağız.
İşin güzel tarafı: hiçbir şeyin çizimini değiştirmeyeceğiz. Dünyayı çizmeden önce bütün canvas'ı camera kadar sola
kaydıracağız, çizimden sonra geri alacağız. Her şey kendi dünya koordinatında çizilir; yalnız bakış açısı kayar.
```js
let camera
camera = 0
camera = player.x + player.w / 2 - canvas.width / 2
ctx.save()
ctx.translate(-Math.round(camera), 0)
ctx.restore()
```let camera → kameranın x'i; loadLevel içinde camera = 0.camera = player.x + player.w / 2 - canvas.width / 2 → oyuncunun ortası (x + w / 2) ekranın ortasına
(canvas.width / 2, yani 320) gelsin. Oyuncu x = 1000'deyse kamera 1000 + 12 − 320 = 692.ctx.save() → çizim ayarlarının o anki hâlini kaydeder.ctx.translate(-Math.round(camera), 0) → bundan sonra çizilen her şeyi camera kadar sola kaydırır. Dünyada
x = 692'de duran şey ekranda 0'a düşer. Math.round en yakın tam sayıya yuvarlar; yarım piksellerde çizim bulanık olmaz.ctx.restore() → kaydedilen ayarlara geri döner: kaydırma biter. (Ekranda sabit kalacak yazılar ileride bunun
altına gelecek.)let coyote satırının üstüne let camera yaz.loadLevel içinde coyote = 0 satırının üstüne camera = 0 yaz.update içinde updatePlayer() satırının altına bir boş satır bırak ve camera satırını yaz.draw içinde gökyüzü fillRect satırının altına bir boş satır bırak; ctx.save() ve ctx.translate(...) yaz.draw'ın sonunda, oyuncunun fillRect satırının altına ctx.restore() yaz.Beceriler: Canvas üzerine çizim, Oyun durumları