Yapay zeka ile oyun yapmak: Phaser’dan Godot’ya rehber

Yapay zeka ile oyun yapmanın en kolay yolu, bir kodlama ajanına tarayıcıda çalışan küçük bir oyunu HTML canvas ya da Phaser ile yazdırmak, her değişikliği tarayıcıda hemen oynamak ve ajanın elle ayarlayamadığı “hissi” kendi denemelerinle düzeltmektir. Daha büyük 2D ya da 3D projeler için Godot iyi bir sonraki adım. Bitince oyunu itch.io’ya yükleyip birkaç dakikada paylaşabilirsin.

Bu yazıda ilk oyunu sıfırdan yayına kadar götürüyorum: hangi aracı neden seçtiğim, ajana verdiğim ilk istem, oyun döngüsü, görsel ve ses dosyaları (lisanslar dahil), oyun hissini ayarlamak, oyun testi ve itch.io.

Neden oyun, vibe coding için iyi bir alan

Oyun, vibe coding için hem çok eğlenceli hem de öğretici. Sonuç anında görünür: bir sayı değiştirirsin, karakter daha yüksek zıplar. Küçük bir oyun birkaç dosyadan ibarettir ve ajan bütününü bağlamında tutabilir.

Ama oyunun bir tuzağı var: “çalışıyor” ile “oynaması keyifli” arasında büyük bir fark var. Ajan kodun çalışıp çalışmadığını test edebilir; oyunun eğlenceli olup olmadığını test edemez. O kısım sende.

Hangi araç: canvas, Phaser, Godot, Unity

İlk oyun için Phaser öneriyorum. Düz canvas da olur ama çarpışma, sprite animasyonu ve girdi yönetimini sıfırdan yazdırmak zaman alır; Phaser bunları hazır verir. Ayrıca her şey metin dosyası ve tarayıcıda çalışıyor, yani ajanın göremediği bir editör yok.

Godot’ya oyun büyüdüğünde geç: çok sayıda sahne, karmaşık seviye tasarımı, 3D ya da masaüstü sürümü gerektiğinde. Godot’nun sahne dosyaları (.tscn) ve kaynakları (.tres) okunabilir metin olduğu için ajan onları da düzenleyebilir. Yine de ben sahne yerleşimini editörde kendim yapıyor, ajana GDScript’i bırakıyorum; elle düzenlenen sahne dosyasında küçük bir hata editörde sahneyi açılmaz hale getirebiliyor.

Unity güçlü ama ajanla çalışmak için en zahmetli seçenek. C# betiklerini ajan rahat yazar; sahneler, prefab’lar ve inspector ayarları ise editörde yaşar. Unity’yi zaten biliyorsan kullan; ilk oyununsa önerim değil.

Adım 1: Kurulum

İhtiyacın olanlar:

• Node.js ve bir paket yöneticisi
• Bir kodlama ajanı: Claude Code, Codex, Gemini CLI ya da opencode gibi
• Git: “dün çalışıyordu” anına dönebilmek için

Projeyi Vite ile başlatıp Phaser’ı ekle:

npm create vite@latest kaktus-kosu -- --template vanilla-ts
cd kaktus-kosu
npm install
npm install phaser
git init && git add -A && git commit -m "ilk iskelet"
npm run dev

npm run dev bir yerel adres verir; oyunu tarayıcıda orada görürsün ve ajan dosyaları değiştirdikçe sayfa kendiliğinden yenilenir.

Adım 2: Ajana ilk istem

Oyunda ilk istem özellikle önemli, çünkü “bir oyun yap” isteğine ajan kendi hayal ettiği oyunu yapar. Kapsamı küçük ve somut tut:

Bu bir Vite + TypeScript projesi, Phaser kurulu. Basit bir sonsuz
koşu oyunu yapıyoruz.

Oyun:
- Oyuncu soldan sağa koşan bir karakter, boşluk tuşu ya da dokunma ile zıplar.
- Sağdan kaktüsler gelir; çarpınca oyun biter.
- Skor zamanla artar, ekranın sağ üstünde görünür.
- Oyun bitince "Tekrar başlamak için boşluk" yazısı çıkar.

Kurallar:
- Görsel yerine şimdilik renkli dikdörtgenler kullan.
- Tüm ayarlanabilir sayıları (yerçekimi, zıplama hızı, oyun hızı,
  kaktüs aralığı) src/config.ts içinde tek bir nesnede topla.
- Arcade fiziği kullan.
- Oyun 800x400 olsun ve ekrana sığacak şekilde ölçeklensin.
- npx tsc --noEmit hatasız geçsin.
- Bitince dosya yapısını ve config.ts'teki değerleri açıkla.

Buradaki en değerli kural config.ts. Oyun hissini ayarlarken o dosyadaki sayılarla oynayacaksın; sayılar kodun içine dağılırsa her ayar için ajana gitmek zorunda kalırsın.

“Görsel yerine dikdörtgen” kuralı da önemli. Önce oynanışı doğru yap, sonra güzelleştir. Güzel görünen ama keyifsiz bir prototip en kötü sonuç.

Adım 3: Oyun döngüsünü anla

Her oyunun kalbinde bir döngü var: girdiyi oku, dünyayı güncelle, ekrana çiz, tekrarla. Saniyede onlarca kez. Phaser bunu senin için yönetir ve sahnenin update(time, delta) metodunu her karede çağırır. Düz canvas’ta ise kendin yazarsın:

let last = performance.now()

function loop(now) {
  const dt = (now - last) / 1000 // saniye cinsinden geçen süre
  last = now
  update(dt)
  draw()
  requestAnimationFrame(loop)
}

requestAnimationFrame(loop)

Bilmen gereken tek kavram dt: hareketi kare başına değil, geçen süreye göre hesaplamak. Ajan bazen x += 5 yazar; bu durumda oyun yüksek yenileme hızlı bir ekranda daha hızlı akar. Hareket kodunda dt görmüyorsan ajana sor.

Adım 4: Oyna, yinele, commit et

Döngü şöyle:

1. Oyunu bir dakika oyna.
2. Hissettiğini somut yaz: “Zıplama havada çok uzun kalıyor, kaktüsten kaçmak çok kolay.”
3. Ajan değiştirsin, tekrar oyna.
4. İyi olan her hali commit et.

Tarayıcı konsolundaki hataları (F12) olduğu gibi ajana yapıştır. Görsel bir sorun varsa ekran görüntüsü ver.

Bir uyarı: oyun mantığını ajana tek seferde büyütme. “Güçlendirmeler, boss savaşı ve seviye sistemi ekle” dersen üçü birbirine dolanır. Her seferinde bir mekanik.

Adım 5: Oyun hissi (game feel)

Bir oyunu “iyi hissettiren” şey genellikle büyük özellikler değil, küçük ayrıntılardır. Ajan bunları kendiliğinden eklemez ama sen istersen çok iyi uygular:

• Coyote time: kenardan düştükten sonra çok kısa bir süre daha zıplamaya izin vermek.
• Zıplama tamponu: yere değmeden hemen önce basılan zıplamayı hatırlamak.
• Değişken zıplama: tuşu bırakınca yükselmenin kesilmesi.
• Ekran sarsıntısı ve vuruş duraksaması: çarpışmada birkaç karelik donma.
• Yumuşak geçişler (tween): skorun büyüyüp küçülmesi, düşmanın titreyerek kaybolması.
• Ses: kısa bir zıplama sesi, hissi ekrandaki her şeyden çok değiştirir.

Ajana şöyle bir istem veriyorum:

Zıplamanın hissini iyileştir:
- 100 ms coyote time ve 100 ms zıplama tamponu ekle.
- Boşluk erken bırakılırsa yukarı hızı yarıya indir.
- Çarpışmada 80 ms duraksama ve hafif ekran sarsıntısı ekle.
Tüm süreleri config.ts'e koy. Başka davranışı değiştirme.

Sonra config.ts’teki sayılarla kendin oyna. Bu kısım bir yapay zekaya devredilemez; birkaç milisaniyelik farkı ancak oynarken hissedersin.

Adım 6: Görseller, sesler ve lisanslar

Oynanış iyi olunca dikdörtgenleri gerçek görsellerle değiştir. Burada dikkatli olman gereken tek şey lisans.

Hazır paketler:

• Kenney gibi kaynakların birçok paketi CC0, yani atıf bile istemeden kullanılabilir.
• OpenGameArt’ta her dosyanın lisansı farklıdır (CC0, CC‑BY, CC‑BY‑SA, GPL…). CC‑BY atıf ister, CC‑BY‑SA ise türev işi de aynı lisansla paylaşmanı isteyebilir. Her dosyanın lisansını oku.
• itch.io’daki ücretli ve ücretsiz asset paketlerinin her biri kendi lisansıyla gelir; ticari kullanım izni olup olmadığına bak.

Projede bir CREDITS.md ya da oyun içi bir “Teşekkürler” ekranı tut ve her asset’in kaynağını ve lisansını yaz.

Yapay zeka ile üretilen görseller: Hızlı ve cazip, ama birkaç uyarı:

• Yapay zeka ile üretilmiş içeriğin telif durumu ülkeden ülkeye değişebiliyor ve hâlâ netleşmemiş konular var.
• Her görsel üretim aracının kendi kullanım koşulları var; ticari kullanımı kontrol et.
• Bazı oyun mağazaları yapay zeka ile üretilmiş içerik için beyan istiyor.
• Teknik olarak da zahmetli: üretilen görsellerde stil tutarlılığı, sprite sayfası düzeni ve animasyon kareleri arasında uyum çoğu zaman elle düzeltme gerektirir.

Benim yaklaşımım: prototipte açık lisanslı hazır paket, yayında ya kendi çizdiğim ya da lisansını net bildiğim görseller.

Ajanın asset’lerle yapabileceği iş de var: sprite sayfasını Phaser’a yükleme, animasyonları tanımlama, ses dosyalarını bağlama. Ona dosya adlarını ve kare boyutunu ver; tahmin ettirmek yerine.

Adım 7: Oyun testi (playtest)

Oyunu yazan kişi, oyunun en kötü testçisidir; ne yapacağını zaten bilir. Ajan için de bu geçerli. Yapman gerekenler:

• Oyunu birine ver ve hiçbir şey açıklama. Nerede takıldığını sessizce izle.
• Not al: hangi noktada öldü, nerede sıkıldı, neyi yanlış anladı.
• Bu notları ajana dönüştürülebilir görevler olarak ver: “Oyuncular ilk kaktüse hep çarpıyor; ilk 5 saniyede kaktüs gelmesin.”

Oyun mantığının küçük parçaları (skor hesabı, çarpışma kuralları) birim testle de doğrulanabilir; ajandan bunlar için test yazmasını iste. Hissi ise yalnızca oynayarak test edersin.

Adım 8: itch.io’da yayınlama

Tarayıcı oyununu itch.io’ya koymak birkaç dakika sürer:

npm run build
cd dist && zip -r ../kaktus-kosu.zip . && cd ..

Sonra itch.io’da yeni proje oluştur, türünü HTML seç, zip’i yükle ve “tarayıcıda oynanacak” olarak işaretle. Oyun alanının boyutunu (örneğin 800×400) ve tam ekran düğmesini ayarla. Zip’in kökünde index.html olmalı; Vite’ta göreli yollar için vite.config.ts’te base: './' ayarı gerekebilir, ajana bunu kontrol ettirebilirsin.

Godot’da ise Web için dışa aktarma şablonunu kurup HTML5 olarak dışa aktarır, aynı şekilde yüklersin. Sık güncelleme yapacaksan itch.io’nun butler komut satırı aracı yüklemeyi otomatikleştirir.

Ajanların oyunlarda sık yaptığı hatalar

• Oyunu göremiyor. Ajan kodu yazar ama ekranda ne olduğunu bilmez. Ekran görüntüsü ya da ne gördüğünü tarif etmek şart.
• Sihirli sayılar. Değerler koda dağılır. config.ts kuralını her yeni mekanikte hatırlat.
• Kareye bağlı hareket. dt kullanılmıyorsa oyun farklı ekranlarda farklı hızda akar.
• Eski API’ler. Phaser ve Godot’nun büyük sürümleri arasında API’ler değişti; ajan eski sürüm kodu yazabilir. Ajana sürümü söyle: “Godot 4 kullanıyoruz, Godot 3 sözdizimi yazma.”
• Her şey tek dosyada. Oyun büyüdükçe sahneleri, varlıkları ve ayarları ayrı dosyalara bölmesini iste.
• Performansı unutmak. Yüzlerce mermi ya da düşman çıktığında oyun yavaşlar. Nesne havuzu (object pooling) iste.

Güvenlik

Oyun masum görünse de aynı kurallar geçerli:

• Skor tablosu ya da çok oyunculu bir backend eklersen anahtarları .env’de tut ve .env’yi .gitignore’a ekle.
• Tarayıcı oyununa koyduğun her şey oyuncu tarafından okunabilir; gizli anahtar istemci koduna girmez.
• API anahtarlarını sohbete yapıştırma; ajana hangi ortam değişkenini okuyacağını söyle.
• Ajanın çalıştırdığı komutları onaylamadan önce oku, özellikle paket kurulumlarını ve silme komutlarını.
• İstemciden gelen skora güvenme; çevrimiçi skor tablosunda hile kolaydır.

AgentVera ile bu süreç

Bunların hepsi bir terminal ve tarayıcıyla yapılabilir. Ben oyun projelerinde birkaç ajanı yan yana çalıştırmayı ve sonucu aynı pencerede görmeyi seviyorum, bunun için AgentVera kullanıyorum:

• Ayrı worktree’lerde ayrı denemeler. Bir ajan bir git worktree’de zıplama hissi üzerinde, diğeri başka bir worktree’de yeni bir düşman türü üzerinde çalışır; beğenmediğin denemeyi silip geçersin. Git paneli dalları gösterir.
• Ajanın tarayıcısı. Ajan tarayıcısı ile ajan, Playwright üzerinden oyunu açıp ekran görüntüsü alabilir; sen de sekmeyi canlı izlersin. Oyunu “görmek” sorununu kısmen çözer, hissetmeyi çözmez.
• Terminal ve editör. npm run dev bir panelde açık kalır, config.ts’i editörde kendin düzenlersin.
• İnceleme ve token. Birleştirmeden önce kod incelemesi turu kontrol eder; token kullanımını da panelde görürsün.

AgentVera oyun motoru değil; Godot editörünün ya da itch.io’nun yerini tutmaz.

Kısa kontrol listesi

• İlk oyun küçük: tek mekanik, tek ekran
• Ayarlanabilir sayılar config.ts’te
• Hareket dt ile hesaplanıyor
• Önce dikdörtgenlerle oynanış, sonra görseller
• Her asset’in kaynağı ve lisansı yazılı
• En az bir kişi açıklama yapılmadan oynadı
• itch.io zip’inin kökünde index.html var

Sonuç

Yapay zeka ile oyun yapmak, vibe coding’in en keyifli uygulamalarından biri. Phaser ile tarayıcıda küçük başla, sayıları tek dosyada topla, oynanışı dikdörtgenlerle doğru yap, hissi kendi ellerinle ayarla ve lisanslara dikkat et. Ajan kodu yazar; oyunu eğlenceli yapan sensin. Birden fazla ajanla deneme yapmak istersen paralel kodlama ajanları yazısına, araç seçimi için en iyi yapay zeka kodlama araçları yazısına bakabilirsin.