@kirmizibisiklet 6 saat önce

Oyun Döngüsü: Delta Time ile Hızdan Bağımsız Hareket

Oyun döngüsü her bilgisayarda farklı hızda çalışır. Birinin bilgisayarı saniyede 60 kare gösterirse, diğerinin 120 kare gösterebilir. Eğer hareketleri kare sayısına bağlı yaparsanız, hızlı bilgisayarlarda karakterler daha hızlı hareket eder.

Delta time (Δt) bunu çözer: Son karenin ne kadar süre önce çizildiğini ölçer ve hareketi buna göre ayarlar.

Önceki karenin zamanını tutun. Şimdiki zaman eksi önceki zaman = delta time.

1var lastTime = Date.now();
2var deltaTime = 0;
3
4function gameLoop() {
5var currentTime = Date.now();
6deltaTime = (currentTime - lastTime) / 1000; // saniye cinsine çevir
7lastTime = currentTime;
8
9update(deltaTime);
10render();
11requestAnimationFrame(gameLoop);
12}

Karakter hızını (birim/saniye) delta time ile çarparsanız, her karede doğru mesafe kaydırılır.

1var playerX = 0;
2var playerSpeed = 100; // piksel/saniye
3
4function update(deltaTime) {
5if (keysPressed['ArrowRight']) {
6playerX += playerSpeed * deltaTime;
7}
8if (keysPressed['ArrowLeft']) {
9playerX -= playerSpeed * deltaTime;
10}
11}

1var player = { x: 0, y: 100, speed: 200 }; // 200 piksel/saniye
2var lastTime = Date.now();
3var keysPressed = {};
4
5window.addEventListener('keydown', (e) => keysPressed[e.key] = true);
6window.addEventListener('keyup', (e) => keysPressed[e.key] = false);
7
8function gameLoop() {
9var currentTime = Date.now();
10var deltaTime = (currentTime - lastTime) / 1000;
11lastTime = currentTime;
12
13// Güncelle
14if (keysPressed['ArrowRight']) player.x += player.speed * deltaTime;
15if (keysPressed['ArrowLeft']) player.x -= player.speed * deltaTime;
16
17// Çiz
18var canvas = document.querySelector('canvas');
19var ctx = canvas.getContext('2d');
20ctx.clearRect(0, 0, canvas.width, canvas.height);
21ctx.fillStyle = 'blue';
22ctx.fillRect(player.x, player.y, 40, 40);
23
24requestAnimationFrame(gameLoop);
25}
26
27gameLoop();

Çıktı: Sağ-sol tuşlarıyla kare hızı ne olursa olsun karakter sabit hızda hareket eder.

Delta time = şimdiki zaman − önceki zaman. Hareketi hız × deltaTime formülüyle hesaplayın. Böylece tüm bilgisayarlarda aynı hız sağlanır.

bknz: ASP.NET Core'da Dependency Injection Nasıl Çalışır?

konu hakkında tepkinizi verebilirsiniz

5 yorum

Balkon Kedisi

@balkonkedisi 2 saat önce
Çok güzel anlatılmış, delta time tam da bu yüzden gerekli. Hız tuşunda çalışırken delta time'ı unutup karede sabit birim kaydırsam, yüksek fps'de karakter uçar gider.
```
1var lastTime = Date.now();
2
3function gameLoop() {
4var currentTime = Date.now();
5var deltaTime = (currentTime - lastTime) / 1000; // saniye cinsinden
6lastTime = currentTime;
7
8var speed = 100; // birim/saniye
9if (keyPressed['ArrowRight']) {
10playerX += speed * deltaTime;
11}
12
13requestAnimationFrame(gameLoop);
14}
```
Bu şekilde 60 fps'de de 144 fps'de de karakter saniyede 100 birim hareket eder, bilgisayar hızına fark etmez.
adlı kullanıcıya yanıt verdi

Barış Yıldırım

@kirmizibisiklet 2 saat önce

Aynen bu farkı ilk başta fark etmediğimde oyunumda karakterler monitör yenilenme hızına göre değişik hızlarda koşuyordu Delta time ekledikten sonra her yerde aynı davranıyor o kadar güzel bir çözüm
adlı kullanıcıya yanıt verdi

Balkon Kedisi

@balkonkedisi 1 saat önce
Evet, başta anlamayınca gerçekten garip oluyor. Ben de aynı şeyi yaşadım, 60 fps'de test ettikten sonra arkadaşın 144 fps'de oynadığında karakterin çok hızlı koştuğunu görmek biraz şok olmuş. Delta time ekledikten sonra herkes aynı deneyimi yaşıyor, o da işin güzel tarafı.
```
1var lastTime = Date.now();
2
3function gameLoop() {
4var currentTime = Date.now();
5var deltaTime = (currentTime - lastTime) / 1000; // saniye cinsinden
6lastTime = currentTime;
7
8player.x += player.speed * deltaTime; // 100 birim/saniye
9
10requestAnimationFrame(gameLoop);
11}
```
Gerçekten bu kadar basit, zamanı tutup çarpma işlemiyle her karenin süresi kadar hareket ettiriyorsun.
Reklam · TEST
AdSense Test ReklamıYorumlar arası · Görüntülü
adlı kullanıcıya yanıt verdi

Barış Yıldırım

@kirmizibisiklet 48 dk önce
hee bence delta timeı kodda görünce first sanıyorsun ya abi ama işte o kadar değil gerçekten ben de bir sefer oyunumu 60 fpsde bitirip arkadaşa vermiştim çok kare atıyor diye kızıyo sonra anlattım farkı sonra da kendi oyununda eklemesi lazımdı şu şekilde düşün ya karenin süresi değişse de saniye hep 1 saniye delta timela her karede doğru orantı yaptığın için uçmazlar karakterler
```
1let lastTime = 0;
2function gameLoop(currentTime) {
3let deltaTime = (currentTime - lastTime) / 1000; // saniyeye çevir
4lastTime = currentTime;
5
6playerX += playerSpeed * deltaTime; // her karede doğru mesafe
7
8requestAnimationFrame(gameLoop);
9}
10requestAnimationFrame(gameLoop);
```
görmüşsün vardır requestAnimationFramein zamanlaması monitörün hızına göre değişir delta time işte o sapkınlığı düzeltiyo sonuç olarak
adlı kullanıcıya yanıt verdi

Balkon Kedisi

@balkonkedisi 2 dk önce

Aynen, arkadaşın oyunu hızlı bilgisayarda test etmek gerçekten can sıkıcı. Bir kere delta time'ı ekledikten sonra o sorun ortadan kalkıyor ama ilk başta fark etmemek çok normal.

Oyun Döngüsü: Delta Time ile Hızdan Bağımsız Hareket

İlgili İçerikler

Bellek Havuzu (Object Pool): Oyunda Nesneleri Verimli Yönetme

Animasyon Durum Makinesi: State Transitions Doğru Tasarımı

Oyun Sahnesinde Performans Optimizasyonu: Profiler Okumak

Oyun Seslendirilmesi: Audio Mixer Kurulumu ve Ses Katmanları

5 yorum