Yapay Zeka ile Oyun Yapma Ücretsiz: Gemini Çizer, Claude Kurar (Kod Yazmadan)

Tek satır kod yazmadan yapay zekayla oynanabilir bir oyun yapabilirsin: Gemini görselleri çizer, sen onları Claude'a verip oyuna dönüştürtürsün, sonra tarayıcıda oynarsın. Aşağıdaki oyunun ilk oynanabilir sürümü 10 dakikadan kısa sürede hazırdı. Böyle bir oyun eskiden birkaç hafta sürerdi.

Bahsettiğim oyun bu. Bir kez tıkla, sonra oyna: sol tık ateş eder, sağ tık el bombası atar. Üst çubukta tam ekran düğmesi var.

Fikir: Bir yapay zeka çiziyor, bir başkası kuruyor

Sohbet yapay zekası küçük bir oyunun kodunu çok iyi yazar ama sana aynı üslupta kasvetli bir harabe şehir, bir zombi sürüsü ve bir lazer kulesi çizemez. Görsel yapay zekası bunların hepsini çizer ama görselleri hareket ettiremez. Ben de iki araç kullandım ve her birine en iyi yaptığı işi verdim.

• Gemini görselleri çizdi: arka planı, zombileri ve silahları.
• Claude bu görselleri aldı, ayrı parçalara kesti, sahneyi kurdu ve seviyeleri yaptı.

Bu ikisine bağlı değilsin. Görsel üreten her yapay zeka çizebilir, kod yazan her sohbet yapay zekası kurabilir. ChatGPT ve Gemini kod kısmını da yazabilir, düz şekil ve renklerden oluşan basit oyunlar için gayet yeterlidir. Bir oyunu gerçek bir oyun gibi gösteren şey görsellerdir.

Neye ihtiyacın var

• Görsel üreten bir yapay zeka. Ben Gemini kullandım.
• Kod yazan bir sohbet yapay zekası. Ben Claude kullandım, ChatGPT ya da Gemini de olur.
• Chrome tarayıcısı. Hiçbir program kurmana gerek yok.

Ücretsiz başlayabilirsin ama ücretsiz planların günlük görsel ve mesaj sınırları vardır, kurallar da plandan plana değişir. Birçok görsel aracı, görsellerin ticari kullanımına yalnızca ücretli planda izin verir, bu yüzden oyunu paylaşmayı ya da satmayı düşünüyorsan kendi planında ne yazdığını oku. Bu yazı yapay zekayla hızlıca oyun yapmayı anlatıyor, hukuki tavsiye değildir.

Barındırma için, yani oyunun herkesin açabilmesi için internette durduğu yer için, kendi web sitemi kullandım, şu an okuduğun siteyi. Sen de aynısını kendi siteninle yapabilirsin, başka seçenekler de var, onları biraz aşağıda anlatıyorum.

Henüz bir web siten yoksa önce barındırmaya ihtiyacın var. Basit yollardan biri Bluehost. Yapay zekalı site oluşturucusu barındırmayı hazır bir başlangıç sitesiyle birleştiren bir barındırma şirketi, böylece boş sayfayla uğraşmazsın, üstelik çoğu barındırma planı kendi dosyalarını yüklemene izin verir, mesela tek bir oyun dosyasını. Karar vermeden önce güncel plan ve fiyatlara onların sayfasından bak, çünkü teklifler değişir.

1. adım: Oyunu belirle, sonra görsel yapay zekasından görselleri iste

Bir şey çizmeden önce nasıl bir oyun istediğini düşün. Düşmanlara karşı bir duvarı savunduğun bir savunma oyunu mu, uzay nişancı oyunu mu, labirent mi, kart oyunu mu? Peki nasıl görünmeli: kasvetli bir harabe şehir, aydınlık bir orman, uzay? Hangi karakterlere ihtiyacın var: bir kahraman, birkaç düşman, bir patron? Bunların hepsine tek başına karar vermek zorunda değilsin. Önce yapay zekadan fikir iste, birkaç saniyede bir avuç fikir verir.

Şöyle bir istekle başlayabilirsin: “Tarayıcıda çalışan, tek bir HTML dosyasından oluşan basit bir oyun yapmak istiyorum. Bana yapması kolay beş oyun fikri ver. Her biri için tek cümleyle oyuncunun ne yaptığını, arka planın nasıl görüneceğini ve hangi karakterlerin ya da nesnelerin görsellerine ihtiyacım olacağını söyle.”

En çok sevdiğin fikri seç, istediğin yeri değiştir, artık tam olarak hangi görselleri isteyeceğini biliyorsun. Basit bir oyunun üç tür görsele ihtiyacı var: arka plan, düşmanlar ve silahlar. Her birini ayrı iste ve hep aynı üslubu iste, böylece her şey aynı aileden görünsün. İşe yarayan istek türü şöyle.

Arka plan için şuna benzer bir şey istedim: “Bir üs savunma oyunu için yukarıdan görünümlü bir oyun arka planı çiz: üstte çatlak, yıkık bir yol, altta kapılı sağlam bir metal duvar. Karanlık, kirli piksel sanat üslubu, geniş 16:9 görsel, yazı ve karakter yok.”

Düşmanlar için: “Yeşil bir siber zombinin altı pozda sprite sayfasını çiz: ikisi yürüyor, biri kollarını uzatmış, biri saldırıyor, ikisi daha. Her pozda aynı karakter ve aynı boyut, önden görünüm, pozlar arasında net boşluk, düz gri bir arka planda. Arka planla aynı piksel sanat üslubu.”

Silahlar ve efektler için de: “Altı karelik bir bilim kurgu silah kulesi çiz, hareketsiz ve ateş ederken, parlayan bir lazer kapısı, dört karelik bir patlama ve mavi bir enerji ışını. Aynı piksel sanat üslubu, düz gri bir arka planda.”

Öğrendiğim bir şey: “şeffaf arka plan” istersen birçok görsel aracı resmin içine sanki çizimin parçasıymış gibi sahte gri-beyaz bir dama tahtası çiziyor. Düz bir renk daha iyi çalışıyor. Claude bunu sonradan kaldırabilir.

2. adım: Görselleri sohbet yapay zekasına ver

Claude'u aç, görselleri ekle ve oyunu basit sözlerle anlat. Bir oyunun nasıl çalıştığını bilmen gerekmiyor. Ne görmek ve ne yapmak istediğini söyle, kodu yapay zekaya bırak. Örneğin:

“İşte üç görsel: bir arka plan, bir zombi sprite sayfası ve bir kule sayfası. Sayfaları kendin ayrı görsellere kes ve tek dosyalık bir tarayıcı oyunu yap. Altta duran bir kule, 10 dalga halinde gelen zombilere karşı bir duvarı savunuyor. Kule fareyle nişan alıyor ve sol tuşla ateş ediyor, sağ tuş el bombası atıyor. Her zombi, geliştirme almak için kredi kazandırıyor. Ses efektleri ekle ve 5. ile 10. dalgada bir patron koy. Bir başlangıç ekranı ve bir zafer ya da oyun bitti ekranı yap.”

Benim durumumda Claude sayfaları parçalara kesti, arka planı yerleştirdi, sahneyi kurdu ve seviyeleri yazdı. Birkaç dakika sonra ilk sürüm oynanabiliyordu. Sonra ekstralara daha çok zaman harcadım, bu da 4. adım.

3. adım: Hiçbir şey kaydetmeden oyna

Claude birçok cevabı doğrudan sohbetin içinde bir önizlemede gösterir. Kodun ChatGPT'den ya da Gemini'den geldiyse daha da hızlı bir yol var: ücretsiz Chrome eklentimiz AI Code Harvester cevaptaki kodu bulur, Göster düğmesi de onu yeni bir sekmede canlı çalıştırır. Dosya kaydetmezsin, hiçbir şeyi kopyalayıp yapıştırmazsın.

Bu yüzden Harvester, dosya kaydetmeden tarayıcıda çalışabilen her şey için güçlü bir ek araç: bir oyun, küçük bir araç, bir sayfa tasarımı. İstersin, Göster'e basarsın, sonuca bakarsın, değişiklik istersin ve yine bakarsın. ChatGPT ve Gemini sayfalarında çalışır, ChatGPT veya Gemini'den gelen HTML kodu nasıl çalıştırılır ve sayfa canlı görülür rehberimiz de adım adım anlatıyor.

4. adım: Her seferinde tek istekle geliştir

İlk sürüm hiçbir zaman son sürüm değildir, eğlence de burada. İlk sürümden sonra oyunu basit isteklerle, tek tek değiştirdim. Bazıları:

• “Ekranın kenarında, kısa bir metinle küçük tuş harfleri göster, oyuncu hangi tuşun neyi aldığını bilsin.”
• “En yakın zombiye kendi kendine el bombası atan bir asker ekle.” Onun için Claude'a Gemini'den yeni görseller verdim.
• “Kendi kendine nişan alıp ateş eden, ama ana kuleden daha yavaş bir otomatik kule ekle.”
• “Zombiler yalnızca gövdelerine ya da kafalarına vurduğumda enerji kaybetsin, bacaklarına vurduğumda değil.”
• “Sol üst köşeye bir duraklatma düğmesi ve bir tam ekran düğmesi ekle.”
• “Son dalgayı çok daha büyük yap.”

En çok zaman kazandıran kural: tek bir değişiklik iste, dene, sonra bir sonrakini iste. Bir şey bozulursa “son değişikliği geri al” de. Yapay zeka ne yaptığını hatırlar ve düzeltebilir.

Çevrimiçi yapmadan önce kendi bilgisayarında dene

Oyunu paylaşmadan önce hataları kimsenin görmediği evinde dene. Böyle bir oyun bir web sayfasıdır ve bilgisayarın onu hiçbir sunucu olmadan açabilir.

1. Kodu tek bir dosya olarak kaydet, örneğin game.html. Oyun bir klasördeki görselleri kullanıyorsa klasörü dosyanın yanında tut. Ya da yapay zekaya şunu söyle: “Görselleri dosyanın içine koy, tek dosya olsun.” Böylece kaybolacak bir şey kalmaz.
2. Dosyaya çift tıkla. Tarayıcında açılır.
3. Oyuna bir kez tıkla, sonra tuşları kullan. Oyunun klavyeyi duyabilmesi için tarayıcının bu ilk tıklamaya ihtiyacı var.
4. Her şeyi kontrol et: fare ve tuşlar, ses, tam ekran, duraklatma ve oyunun sonuna kadar oynanıp oynanamadığı.
5. Yanlış olanı düzelt, yapay zekaya tam olarak ne gördüğünü söyleyerek.

Çalışınca, başkaları da oynasın diye internete koy. Bunun için web barındırmaya ihtiyacın var, yani internette dosyalarını saklayan ve onlara bir adres veren bir yer. Tek bir oyun dosyası hemen her barındırmada çalışır, ücretsizlerde de. Yapay zekanın yaptığı web sayfası nerede yayınlanır rehberimiz seçenekleri sade bir dille anlatıyor. Kendi sitemizde Firebase Hosting kullanıyoruz.

Oyunu kendi sitenin bir sayfasında göstermek için şöyle ekle:

<iframe src="https://yoursite.com/game.html" width="1024" height="572" allow="fullscreen"></iframe>

allow="fullscreen" kısmı oyuncuların tam ekran düğmesini kullanmasını sağlar. Yeni bir sürüm yükleyip hâlâ eskisini görüyorsan, tarayıcı sıfırdan yüklesin diye Ctrl+F5'e bas.

Sınır yok

Temel hazır olunca gerisi bir istek uzakta: yeni bir düşman, sonraki seviye için yeni bir arka plan, daha zorlu bir patron, başka bir silah, yepyeni bir oyun türü. Yeni bir görünüm için görsel yapay zekasından başka bir görsel seti iste ve sohbet yapay zekasına ver. Bir zamanlar bir ekip ve haftalarca emek gerektiren şey bugün bir akşam ve biraz hayal gücü istiyor.

Başlamadan önce bilmekte fayda var

Oyunla ne yapacağına sen karar verirsin

Oyun hazır olunca sonrasına sen karar verirsin. Sosyal medyada paylaş, linki arkadaşlarına gönder, kendi web sitene koy ya da yalnızca kendin için sakla. Doğru bir cevap yok, işin güzelliği onu senin yapmış olman.

Sıkça Sorulan Sorular