Bölüm 2 · Sunum 5

Oyun döngüsü, FPS ve frameRate

Hareket ne kadar hızlı? Her bilgisayarda aynı hızda mı?

Güncelle ve çizFPS nedir?frameRate()Hz ile FPS farkı

Bir oyun, siz hiçbir tuşa basmasanız da neden durmaz?

Düşmanlar yürür, süre azalır, bulutlar kayar. Bunları kim, ne sıklıkla ilerletiyor?

Oyun döngüsü

Oyun döngüsü (game loop)Oyun çalıştığı sürece tekrarlanan güncelleme döngüsüdür. Tipik adımları girdi okuma, mantık güncelleme ve çizimdir.

Girdiyi oku→Durumu güncelle→Ekranı çiz→Girdiyi oku→…

setup(): tuval, başlangıç değişkenleri, bir kerelik ayarlar.
draw(): her frame’de arka plan, konumların güncellenmesi, çizim.
p5.js, sketch durdurulana kadar 2. adımı tekrarlar.

Döngüyü ağır çekimde izleyelim

Fareyi soldaki koyu alanda gezdirin. Top kırmızı çizgiye hemen gitmez: önce girdi okunur, sonra konum güncellenir, en son çizilir. Gerçek oyunda bu üç adım saniyede 60 kez döner.

Her frame 3 piksel sağa giden top

Önce konum güncelleniyor, sonra top çiziliyor. Sağdan çıkınca soldan yeniden giriyor.

Top görünmüyor. Ya da yanlış hızda gidiyor. Nereye bakarsınız?

draw’ın içinde güncelleme ile çizim birbirine karışmışsa hatayı aramak zorlaşır.

Güncelle ve çiz: iki ayrı fonksiyon

Top görünmüyorsacizTop’a bakın.

Yanlış hızda gidiyorsaguncelleTop’a bakın.

Küçük örneklerde ikisi aynı fonksiyonda yazılabilir. Proje büyüdükçe ayırmak okumayı ve hata ayıklamayı kolaylaştırır.

`setup` ile `draw` ayrımı performanstır

setup içinde, bir kezcreateCanvas(), görsel yükleme, büyük veri hazırlama gibi maliyetli işler.

Yanlışlıkla draw içindeAynı iş her frame tekrarlanır ve FPS düşer.

Sketch yavaş çalışıyorsa ilk bakılacak yer: draw’ın içinde her frame yapılması gerekmeyen bir iş var mı?

Bir frame’e ne kadar iş sığar?

Fareyi alttaki çubukta sağa götürün. draw içindeki iş arttıkça bir frame’in hazırlanması uzar ve FPS düşer. Sınır bilgisayardan bilgisayara değişir; sizinki kaçta düşmeye başlıyor?

FPS: saniyedeki frame sayısı

FPS (frames per second)Bir saniyede draw() fonksiyonunun kaç kez çalıştığının ölçüsüdür.

Buradaki “frame”, geometrik bir kare değil; draw() çağrısının tek bir tekrarıdır.

p5.js varsayılan olarak 60 FPS civarını hedefler.
Donanım ve sketch’in yükü buna ulaşmayı engelleyebilir.
Hedef, frameRate() ile ayarlanır.

Aynı hız, farklı FPS

Üç top da saniyede aynı yolu alıyor; yalnızca ekrana kaç kez çizildikleri farklı. En alttaki top “ışınlanıyor” gibi görünür: hızlı nesneleri gözle izlemek zorlaşır.

`frameRate()`: iki farklı kullanım

İfade	Anlamı	Sonuç
`frameRate(60)`	Hedef 60 FPS	Çoğu monitörde akıcı hareket
`frameRate(30)`	Hedef 30 FPS	Daha düşük yük, daha seyrek güncelleme
`frameRate()`	Ölçülen anlık FPS	Ekranda gösterilebilir (örneğin 58.2)

Hedef, garanti değildirSayı vererek çağırınca yalnızca hedefi belirlersiniz. Gerçek FPS donanıma ve çizim maliyetine bağlıdır; mobil ya da zayıf cihazlarda 60 her zaman tutmaz.

FPS’i ekranda görelim

“Düzenle” ile frameRate(60) değerini 10, sonra 5 yapın. Ölçülen değer nasıl değişiyor?

`nf()`: sayıyı okunur yazmak

Parametre	Görevi
`sayi`	Biçimlenecek değer
`solBasamak`	Noktanın solundaki basamak sayısı; gerekirse başa 0 ekler
`sagBasamak`	Noktanın sağındaki basamak sayısı; yuvarlar

Çağrı	Sonuç
`nf(58.273, 0, 1)`	`"58.3"`
`nf(58.273, 0, 0)`	`"58"`
`nf(7, 3, 0)`	`"007"`
`nf(3.14159, 1, 2)`	`"3.14"`

nf(sayi, solBasamak, sagBasamak) yalnızca gösterimi düzenler; FPS hesabını değiştirmez.

`topX = topX + 3`. FPS 60’tan 30’a düşerse top ne yapar?

Bir saniyede kaç piksel yol alıyordu? Şimdi kaç piksel alır?

Yarı hızda gider

Hız, frame sayısına bağlı

60 FPSSaniyede 60 × 3 = 180 piksel.

30 FPSSaniyede 30 × 3 = 90 piksel.

SonuçAynı kod, farklı cihazlarda farklı hızda oynar.

Çözüm, hızı frame sayısına değil geçen gerçek süreye bağlamak: deltaTime. Onu bir sonraki konuda göreceğiz.

Monitörün hızı ile oyunun hızı aynı şey değil

Kavram	Birim	Ne ölçer?	Tipik değerler
Yenileme hızı	Hz	Monitörün saniyede kaç kez yeni görüntü çizdiği	60, 75, 120, 144, 165, 240…
FPS	frame/s	Oyunun saniyede kaç frame ürettiği	p5.js’te hedef 30–60; oyunlarda 60–240+

Oyun frame üretir→Monitör o frame’leri (ya da bir kısmını) gösterir

Çoğu ofis ve dizüstü ekranı 60 Hz’dir. Oyun monitörlerinde 120–144 Hz yaygın; telefon ve tabletlerde 90 / 120 Hz paneller sıklaşıyor.

Tarayıcı ikisini eşlemeye çalışır

Vsync benzeri davranışTarayıcılar çizimi monitörün yenileme döngüsüyle eşlemeye çalışır. Yırtılma (tearing) azalır. Oyun, panelin gösterebildiğinden fazla frame üretirse fazlası atılır ya da birleştirilir.

Yüksek Hz’li monitördeframeRate() çağrılmazsa p5.js daha yüksek FPS’e çıkmaya çalışabilir. Frame başına sabit piksel ekleyen hareket o zaman daha hızlı oynar.

frameRate(60) yazıp hedefi açıkça vermek, paneller arası farkı azaltır. Asıl güvenilir çözüm yine deltaTime.

Sinema 24, oyun 60: neden?

24SinemaKlasik film uzun süre yaklaşık 24 fps ile özdeşleşti. Sessiz dönemde 16–18 fps de yaygındı.

25–30TelevizyonBölgeye göre yaklaşık 25 ya da 30 fps’lik yayın aileleri.

30–120+OyunEtkileşim daha yüksek hız ister: 30 oynanabilir, 60 akıcı; rekabetçi oyunlarda 120 ve üstü istenir.

“Kaç fps iyi?” sorusunun cevabı ortama göre değişir. Film izlemek ile nişancı oyunu oynamak aynı ihtiyaç değil.

Oyunlarda FPS neden önemli?

AkıcılıkDüşük ve dalgalı FPS hareketi kesik kesik gösterir; kalabalık sahnelerde rahatsız eder.

Tepki hissiDaha sık çizilen frame, tıklamanın sonucunu ekrana daha erken yansıtır.

AdaletHareket frame’e bağlıysa yüksek FPS’li oyuncu avantaj ya da dezavantaj yaşar.

OkunabilirlikHızlı nesnelerde (mermi, top) seyrek frame “nereye gitti?” hissi verir.

Ünlü oyunlar kaç FPS’te çalışır?

Zelda: Ocarina of Time 1998Saniyede yaklaşık 20 frame. Dönemin donanımı üç boyutlu bir dünyayı ancak bu hızda çizebiliyordu; oyun yine de klasik oldu.

Doom 1993Oyunun mantığı saniyede 35 adım atar. Hızlı hissi veren, yüksek FPS değil, tutarlı tempodur.

E-spor bugünRekabetçi nişancı oyunlarında 144, 240 hatta 360 Hz monitörler kullanılır; oyun da o kadar frame üretmeye çalışır.

Patlama sahnesinde FPS 9’a düştü.

💥

oyuncu

Bu artık oyun değil, slayt gösterisi.

🖼️

yorumlar

Daha yüksek her zaman daha iyi mi?

Algı“Göz X fps’nin üstünü göremez” diye tek bir sihirli sayı yok. 30 → 60 geçişi belirgin bir yumuşama olarak hissedilir; 60 → 144 daha çok hızlı kamera ve nişan almada fark eder. Yükseldikçe kazanç azalır.

DonanımDaha fazla frame, işlemciye ve ekran kartına daha çok iş demektir: güç tüketimi ve ısı artar, pil çabuk biter, fanlar hızlanır. Oyunlar bu yüzden FPS sınırı ve pil modu sunar.

Asıl önemli olan istikrarSürekli 55–60, bir anda 90’a çıkıp 40’a düşen bir grafikten daha öngörülebilir bir oynanış verir.

Yapay zekâyla: FPS düşerse

x += 3 ile giden bir kare düşünün. FPS 60’tan 30’a inince ne olur? Önce kendiniz yazın.
Aynı senaryoyu bir yapay zekâya sorun; gerekçesini sizinkiyle karşılaştırın.
Sonraki bölümde göreceğimiz deltaTime’ın bu sorunu nasıl çözeceğini tek cümleyle tahmin edin.

Her mini oyun için dört soru

1VeriDurumu hangi değişkenler tutuyor?

2GüncellemeHer frame’de ya da olayda ne değişiyor?

3ÇizimEkranda görünenler hangi değişkenlerden geliyor?

4KuralOyuncunun eylemi hangi koşulla kabul ya da reddediliyor?

Eksik kalan adımı (bir sınır, bir başlangıç değeri, tek seferlik bir olay) şimdi tamamlamak, sonra büyük bir sketch’in içinde aramaktan kolaydır.

Tek cümlelik köprü

“Şimdi X biliyorum; bundan sonra Y için buna ihtiyacım var.”

Bu cümleyi bugünkü konu için doldurun. Kuramıyorsanız, eksik kalan başlığın örneğini bir kez daha çalıştırın.

Kod zamanı

Kayan top örneğine ölçülen FPS’i yazdırın. Topun tuvali baştan sona kaç saniyede geçtiğini ölçün.
frameRate(30) yapın ve yeniden ölçün. Tahmininiz tuttu mu?
Kodu guncelleTop() ve cizTop() olarak ikiye bölün. İkinci bir top ekleyin: daha yavaş ve başka renkte.
Bilerek yavaşlatın: draw içinde 20 000 turluk bir for ile küçük daireler çizin. FPS kaça düştü?
Zorlu: top kenardan çıkıp başa dönmek yerine iki kenar arasında gidip gelsin; her sekmede rengi değişsin.

60 FPS’te top 500 piksellik tuvali 5 saniyede geçiyor. Kod `x += 2`. FPS 20’ye düşerse?

Yine 5 saniye
10 saniye
Yaklaşık 15 saniye
Yaklaşık 1,7 saniye

Frame sayısı üçte bire indi; saniyede alınan yol da üçte bire iner. Süre üç katına çıkar.

Hangisi `draw` içinde olmamalı?

background(30)
topX = topX + 3
createCanvas(500, 300)
ellipse(topX, 150, 50, 50)

Tuval bir kez kurulur. draw’a yazılırsa saniyede 60 kez yeniden kurulur ve FPS düşer.

`frameRate(120)` yazdınız. Ekranda ölçülen FPS 60 görünüyor. Neden olabilir?

frameRate yalnızca 60’a kadar sayı kabul eder.
Sayı yalnızca bir hedeftir; monitörün yenileme hızı ya da donanım daha fazlasına izin vermiyor olabilir.
nf sayıyı yarıya böler.

Tarayıcı çizimi monitörün yenileme döngüsüyle eşler. 60 Hz bir ekranda 60’ın üstüne çıkmak çoğu zaman mümkün olmaz.

Merak edenler için kaynaklar

Robert Nystrom · Game Programming PatternsGame LoopOyun döngüsünün neden ve nasıl kurulduğunu anlatan, ücretsiz okunabilen kitap bölümü (İngilizce).gameprogrammingpatterns.com/game-loop.html Blur BustersUFO TestAynı hareketi farklı FPS’lerde yan yana gösteren test sayfası; kendi monitörünüzü deneyin.testufo.com

p5.js referansıframeRate()Hedef FPS’i ayarlamak ve ölçülen değeri okumak.p5js.org/reference/p5/frameRate Glenn Fiedler · Gaffer On GamesFix Your Timestep!İleri düzey: profesyonel oyunlarda güncelleme ile çizimin ayrılması (İngilizce).gafferongames.com/post/fix_your_timestep

Bölüm 2’yi bitirdik

Oyun döngüsü: girdiyi oku, durumu güncelle, ekranı çiz; sonra yeniden.
Güncelleme ile çizimi ayırmak hata ayıklamayı kolaylaştırır.
Maliyetli işler setup’a aittir; draw’a yazılırsa FPS düşer.
FPS: saniyede draw’ın çalışma sayısı. frameRate(60) hedef verir; frameRate() ölçer.
Hz monitörün, FPS oyunun hızıdır.
x += 3 gibi frame’e bağlı hareket, her cihazda farklı hızda oynar.

Bölüm 2 bitti

Sırada: diziler ve deltaTime

Birçok nesneyi tek bir listede tutmak ve her cihazda aynı hızda hareket etmek.

Tüm sunumlar ← Önceki