Vibe Skills

Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.

Vercel'da 3D Oyun Yayınlayın: 48 Saatlik Yayınlama Rehberi

Cuma akşamı boş bir sayfadan Pazar akşam yemeğine kadar oyununuz.vercel.app bağlantısına ulaşabilirsiniz. Stack: Three.js, Cursor, Vibe Skills kaynağından bir yapay zeka yeteneği ve Vercel'in ücretsiz katmanı. Hafta sonu toplam maliyet: 0$. Bakımını üstlenmeniz gereken toplam altyapı: sıfır.

Bu, "prototipi laptopta oluşturup tamamlandı demek" değil. Bu, herkesin tarayıcıda açabileceği, HTTPS, kenar önbelleğe alma ve isterseniz özel alan adıyla sunulan bir genel URL. Yapay zeka yeteneği Three.js iskelesini ve çalışan bir vercel.json dosyasını sağlar. Cursor yineleme döngüsünü yönetir. Vercel yayınlamayı yönetir. Siz tasarımı yönetirsiniz.

Bu rehber bağımsız geliştiriciler, "vibe kodlayıcıları", hackathon katılımcıları ve yarım kalmış localhost:5173 sekmelerinden bıkmış herkes içindir. Neden bu stack'in çalıştığını, 48 saatlik yayınlamanın anatomisini, bu iş akışı için oluşturulmuş beş adet 3D oyun yeteneğini ve Cuma'dan Pazar'a adım adım süreci ele alıyoruz.

Vibe Skills

Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.

Yetenekleri Keşfet

Şimdi Ücretsiz Başla

Neden Vercel + Three.js + Yapay Zeka Yetenekleri Tek Developer Stack'i?

Vercel, Three.js oyunu için mümkün olan en tembel yayınlama hedefidir. GitHub'a gönderme yapın, Vercel fark eder, projeyi oluşturur ve 60 saniye içinde size bir URL geri verir. Sağlanacak sunucu yok, Docker dosyası yok, NGINX yapılandırması yok, SSL kurulumu yok. Three.js paketi sadece statik HTML, JS ve WebGL varlıklarıdır ve tam olarak Vercel'in kenar ağı bu hizmeti vermek için tasarlanmıştır.

Ücretsiz katman bir hafta sonu lansmanı için rahatlıkla yeterlidir:

Aylık 100 GB bant genişliği. 10.000 oynama için 5 MB'lık bir Three.js paketi 50 GB'dır. Bant genişliğiniz tükenmeden hafta sonu tükenir.
HTTPS ve *.vercel.app alt alan adıyla sınırsız statik yayınlama.
Ücretsiz katmanda özel alan adı desteği - Eğer varsa kendi oyun-adı.com alan adınızı getirebilirsiniz, aksi takdirde ücretsiz vercel.app URL'si her sosyal platformda paylaşılabilir.
Her commit için önizleme yayınlamaları - Her gönderme kendi URL'sini alır, böylece bir arkadaşınızla bir paket paylaşabilir ve bozmadan yinelemeye devam edebilirsiniz.

Vibe Skills'den bir yapay zeka yeteneği ekleyin ve temel kod yığını da ortadan kaybolur. Three.js sahne kurulumu, oyuncu kontrolcüsü, build pipeline'ı ve Vercel'e hazır bir vercel.json tek bir komutla oluşturulur. Ardından Cursor, hafta sonunun geri kalanını istediğiniz oynanışı tarif ettiğiniz ve çıktıyı ayarladığınız bir sohbete dönüştürür. Tam stack budur: temel için bir pazar yeri yeteneği, yineleme için bir yapay zeka editörü ve yayınlama için Vercel. Tek kişilik, ücretsiz ve hızlı.

Vibe Skills

Claude, Cursor ve daha fazlası için yüzlerce hazır yeteneği gözden geçirin.

Yetenekleri Keşfet

Şimdi Ücretsiz Başla

48 Saatlik Anatomisi: Cuma Konseptinden Pazar Yayınlamaya

Gerçekten canlıya geçen her hafta sonu gönderimi aynı aşamalardan geçer. Pazar öğleden sonra değil, Cuma günü yayınlamayı planlamanın püf noktası, son altı saatin hata ayıklama yerine cilalamaya gitmesidir.

Aşama	Zaman Bloğu	Ne Yaparsınız	Aşama Sonu İtibarıyla Ne Yayınlanır
Aşama 1: Konsept	Cuma 18:00 - 22:00	Tür seçin, 1 sayfalık tasarım belgesi yazın, Vibe Skills 3D oyun yeteneğini yükleyin, başlangıç paketini GitHub'a gönderin, Vercel'e bağlayın	İskelet sahneyle canlı `oyun-adı.vercel.app` URL'si
Aşama 2: Oluşturma	Cumartesi 09:00 - 20:00	Yer tutucuyu temel mekaniğinizle değiştirin, 1 seviye ekleyin, kazanma/kaybetme durumunu çalıştırın	Aynı Vercel URL'sinde oynanabilir paket, her göndermede otomatik olarak yayınlanır
Aşama 3: Cilalama	Pazar 10:00 - 16:00	Ses, efektler, öğretici penceresi, hata düzeltme, mobil performansı kontrolü	İlk 60 saniyede herhangi bir cihazda çalışmayan bir paket
Aşama 4: Lansman	Pazar 16:00 - 20:00	Özel alan adı ayarlayın (isteğe bağlı), GIF kaydedin, itch.io sayfasını yazın, bağlantıyı yayınlayın	Genel URL + itch.io sayfası + sosyal medyada bir lansman gönderisi

Bunun çalışmasının nedeni Cuma günü Vercel'e göndermedir. URL mevcut olduğunda, her Cumartesi ve Pazar commit'i otomatik olarak yayınlanır. "Pazar gecesi yayınlama paniği" olmaz çünkü yayınlama zaten Cuma günü gerçekleşmiş ve hafta sonu boyunca otopilotta çalışmıştır.

Vercel'da 3D Oyun "Vibe Kodlamak" Nasıl Görünür?

Vibe kodlamak, istediğiniz şeyi düz İngilizce ile açıklamak ve bir yapay zeka editörünün kodu yazmasına izin vermek, ardından çıktı üzerinde yineleme yapmaktır. Vercel'deki bir Three.js oyunu için döngü alışılmadık derecede temizdir: Cursor'daki her değişiklik yerel geri bildirim için pnpm dev uzaktaki, ardından canlı bir önizleme URL'sine git push uzaktaki ve ardından main üzerinde üretime otomatik olarak yayınlanan bir değişikliktir.

Vibe kodlu bir Vercel oyun hafta sonu şöyle görünür:

Yeteneğin başlangıç klasörünü Cursor'da açın.
Sohbet penceresinde bir özellik tanımlayın: "200 milisaniye içinde iki kez boşluğa basılırsa çift zıplama".
Cursor kontrolcü dosyasını düzenler. Kaydedin. pnpm dev yeniden yüklenir. Zıplamayı tarayıcıda hissedersiniz.
Doğru hissettirirse, git push. Vercel bir önizleme URL'si oluşturur. Bir arkadaşınıza gönderin.
Hissiyat kilitlendiğinde main'e birleştirin. Üretim URL'si 60 saniye içinde güncellenir.

Yapay zeka yazma işini yapar. Vercel yayınlamayı yapar. Siz hissi ve tasarımı yaparsınız.

Vibe Skills'de Bunu Mümkün Kılan 5 Yapay Zeka 3D Oyun Yeteneği

Bu yetenekler Vercel + Three.js + Cursor hafta sonu iş akışı için tasarlanmıştır. Her biri Vite tabanlı bir Three.js projesi, çalışan bir vercel.json, Vercel'in kenardan sunabileceği statik bir paket üreten bir pnpm build ve test edilmiş bir yayınlama yolu ile birlikte gelir. Hepsi Vibe Skills'deki 3D Oyunlar kategorisinde yer almaktadır.

1. Three.js + Vercel Oyun Başlangıç Paketi

Varsayılan seçim. Oyuncu kontrolcüsü, üçüncü şahıs kamera, ışıklandırma sistemi, gökyüzü küresi ve çarpışmalı bir zemin düzlemi ile bir Three.js sahnesi oluşturur. Three.js varlık paketleri için doğru önbelleğe alma başlıklarını ayarlayan bir vercel.json ile birlikte gelir. pnpm dev yerel olarak çalışır; Vercel kontrol panelinde tek tıklama GitHub deposunu bağlar ve canlı bir URL'niz olur.

En iyisi: saf 2D hariç her tür için. Ne inşa ettiğinizi henüz bilmiyorsanız bunu kullanın.

2. Birinci Şahıs Vercel Gezgini

Ayak sesi kancaları, baş sallama ve işaretçi kilidi CSP başlıklarını doğru şekilde işleyen bir vercel.json ile cilalı bir birinci şahıs kontrolcüsü (WASD + fare işaretçisi kilidi + yerçekimi + sprint + zıplama). Bu, birçok tek geliştiriciyi üretimde zorlar. Yetenek bunu sizin için çözer.

En iyisi: yürüme simülatörleri, korku prototipleri, anlatı oyunları, müze sergileri için.

3. Tarayıcı Arena Nişancı Kiti

Vercel'e özel ayarlanmış, varlıkları gzip'leyen, yapay zekayı kod parçacığına ayıran ve müziği gecikmeli yükleyen bir üstten görünüm arenası (ikiz çubuklu kontrolcü, dalga oluşturucu, temel düşman yapay zekası, mermi sistemi, puan HUD'u). Çok oyunculu kancalar dahildir; hafta sonu tek oyunculu olarak sunulur.

En iyisi: arcade nişancıları, mermi cehennemi, mobil cihazlarda hızlı yüklenmesi gereken jam girişleri için.

4. Vercel Bulmaca Platform Oyunu

Değişken zıplama, kokot zamanlaması, kenar algılama, kontrol noktaları, Blender veya kodda düzenleyebileceğiniz üç örnek seviye ve bir yeniden doğma döngüsü ile üçüncü şahıs bir platform oyunu. vercel.json, anında kenardan önbelleğe alınan seviye yeniden yüklemeleri için yapılandırılmıştır, bu nedenle telefonunuzda oyun testleri hızlı hissettirir.

En iyisi: bulmaca platform oyunları, parkur prototipleri, seviye tasarımı deneyleri için.

5. Vercel Sürüş Sandbox

Arkadaş canlısı sürüş hissi (hızlanma eğrisi, drift fiziği, kamera gecikmesi, temel arazi) ile düşük poligonlu bir araba, bir pist şablonu ve büyük arazi ağları için ayarlanmış bir yayınlama. Önceden ayarlanmış HTTP başlıkları, Safari'de WebGL bağlamının daha hızlı başlamasını sağlar, tarihi olarak Three.js için en yavaş tarayıcı.

En iyisi: arcade yarışları, arazi sürüşü, portföy için araba hissi demoları için.

Vibe Skills'de tüm 3D oyun yeteneklerine göz atın →

Cuma'dan Pazar'a Adım Adım

Bu tam zaman çizelgesidir. Başlangıç saatini ayarlayın, ancak sırayı koruyun. Anahtar kilometre taşı Cuma gecesi Vercel yayınıdır. Ondan sonraki her şey yinelemedir.

Cuma 18:00 - 20:00: Yetenek Seçin, GitHub'a Gönderin, Vercel'e Bağlayın

Adım 1: Vibe Skills'de bir 3D oyun yeteneği seçin. 3D Oyunlar kategorisini gözden geçirin, türünüze uyanı seçin ve başlangıç paketini yeni bir klasöre yükleyin. Cursor'da açın. Akşam 7'ye kadar hareket eden bir oyuncuyla bir Three.js sahnesi görmelisiniz.

Adım 2: Bir GitHub deposu oluşturun ve gönderin. git init, git remote add, git push. Oyununuzun adını depo adı olarak kullanın (crystal-runner, lunar-fishing, ne olursa olsun). Depo adı genellikle URL'niz olur.

Adım 3: Depoyu Vercel'e bağlayın. GitHub ile Vercel'e giriş yapın (ücretsiz), "Yeni Proje Ekle"ye tıklayın, depoyu seçin. Vercel Vite'ı otomatik olarak algılar ve derlemeyi yapılandırır. Yayınla'ya tıklayın. 60 saniye içinde crystal-runner.vercel.app URL'niz olur. Telefonunuzda açın. Bir arkadaşınızla paylaşın. Yayınlama çubuğu hafta sonunun geri kalanı için sıfırlandı.

Cuma 20:00 - 22:00: Tasarım Belgesini Yazın

Adım 4: Beş soruyu düz İngilizce ile yanıtlayın. Depo içindeki bir Notion sayfası veya markdown dosyası açın ve yanıtlayın:

Oyuncu her 5 saniyede ne yapıyor? (temel döngü)
Kazanma koşulu ve kaybetme koşulu nedir?
Bir koşu veya bir seviye ne kadar sürüyor?
Görsel kanca nedir? (palet, ışıklandırma, stil referansı)
Bunu 30 saniyede akılda kalıcı kılan tek özellik nedir?

Adım 5: Tasarım belgesini commit edin. Depoya gönderin. Vercel yeniden yayınlayacaktır. Anlamlı her değişikliği gönderme disiplini, canlı URL'yi dürüst tutar.

Cumartesi 09:00 - 13:00: Temel Mekaniği Oluşturun

Adım 6: Yer tutucu mekaniğini tek özelliğinizle değiştirin. Bu tek önemli özelliktir. Cursor sohbetini kullanarak tanımlayın ("oyuncu bir kristal aldığında, yakındaki düşmanları 2 saniye dondur ve bir zil sesi çal"). Yerel olarak pnpm dev ile yineleyin. Doğru hissettirdiğinde gönderin.

Adım 7: Kazanma/kaybetme durumunu bağlayın. Gerçek bir sonu olan 60 saniyelik bir paket, bir oyun gibi hissettirir. Sonu olmayan 60 dakikalık bir paket, bir teknoloji demosu gibi hissettirir. Her zaman önce kazanma ekranını, sonra diğer her şeyi bağlayın.

Cumartesi 13:00 - 20:00: Bir Seviye Ekleyin

Adım 8: Cilalı bir seviye oluşturun. Yarım yamalak üç tane değil. Geometri için yer tutucu küpler kullanın. Yeteneğin stok karakterini kullanın. Hissiyatı ayarlayın - zıplama yüksekliği, kamera gecikmesi, parçacık yoğunluğu.

Adım 9: Bir öğretici bindirmesi ekleyin. İlk açılışta "WASD ile hareket et, tıkla ateş et" şeklinde iki cümlelik bir pencere, hafta sonu prototipini kafası karışmış oyunculardan kurtarır. Cursor, React (veya vanilla DOM) bindirmesini 30 saniyede oluşturabilir.

Adım 10: Her saat başı gönderin. Her gönderme bir Vercel önizleme URL'si alır. Her birini bir arkadaşınıza gönderin. Geri bildirim döngüsü, bu stack'in gizli silahıdır.

Pazar 10:00 - 16:00: Cilalama

Adım 11: Üç ses ekleyin. Ayak sesi döngüsü, ambiyans pad, kazanma sesi. Üç ses bile bir hafta sonu prototipini önemli ölçüde yükseltir. Ücretsiz kaynaklar: freesound.org, opengameart.org.

Adım 12: Efekt ekleyin. Vuruşta parçacıklar, darbede ekran titremesi, puan kazanıldığında sayı pop-up'ları. Efektler, 48 saatlik bir paketin bir GIF'te 6 aylık bir paket gibi görünmesini sağlar. Cursor'dan "oyuncu hasar aldığında 150 milisaniye boyunca 0.3 yoğunlukta ekran titremesi ekle" diye sorun - bu, beş saniyede kamera titreme kancasını yazacaktır.

Adım 13: Bir Lighthouse taraması çalıştırın. Vercel URL'sini bir telefonla açın ve Chrome Geliştirici Araçları Lighthouse'u çalıştırın. Three.js paketleri genellikle 400 KB ila 1.5 MB arasındadır. 3 MB'ın üzerindeyse, Cursor'dan ağır modüller üzerinde kod parçalama özelliğini etkinleştirmesini isteyin. Vercel'in gzip ve brotli'si gerisini halledecektir.

Adım 14: Hata ayıklama turu. Canlı URL'nizi art arda beş kez oynayın. İki kez bozulan bir şeyi düzeltin. Bir kez bozulanı görmezden gelin.

Pazar 16:00 - 20:00: Lansman

Adım 15: (İsteğe bağlı) Özel alan adı ayarlayın. Önceden bir oyun-adı.com satın aldıysanız, Vercel'in proje ayarlarında ekleyin. SSL otomatik olarak sağlanır. Aksi takdirde *.vercel.app URL'si uygundur - HTTPS'ye sahiptir, paylaşılabilir ve her yerde yüklenir.

Adım 16: En iyi anın 15 saniyelik bir GIF'ini kaydedin. Yerel değil, canlı URL'yi kullanın. GIF, Twitter, Bluesky ve Reddit'te tıklanan şeydir.

Adım 17: Bir itch.io sayfası oluşturun (isteğe bağlı ama yüksek kaldıraçlı). Başlık, tek satırlık slogan, üç ekran görüntüsü, GIF, kontroller, krediler ve *.vercel.app iframe'inizin bir yerleşimi (itch.io HTML5 oyunları için iframe yerleşimlerini destekler). Artık iki URL'niz var - biri gündelik paylaşım için, diğeri oyuncu kitlesi için.

Adım 18: Bağlantıyı yayınlayın. Twitter, Bluesky, geliştirici topluluk Discord'unuz, r/IndieDev, r/threejs, r/WebGames. Her zaman GIF ile başlayın. Her zaman URL'yi ekleyin. Bir Vibe Skills yeteneği kullandıysanız, geliştirme günlüğü gönderinizde bundan bahsedin - takip eden diğer geliştiriciler de aynı başlangıç paketini isteyecektir.

En Yaygın Üç Vercel Yayınlama Hatasından Kaçının

Neredeyse her tek kişilik Three.js + Vercel hafta sonunu üç şey bozar. Hepsi Cuma gecesi yakalanırsa 5 dakikalık düzeltmelerdir ve Pazar akşamı 19:00'da keşfedilirse 5 saatlik tavşan delikleri haline gelir.

Yanlış derleme çıktı dizini. Vite varsayılanı dist/. Vercel Vite'ı otomatik olarak algılar ve dist/ kullanır. Çıktıyı özelleştirdiyseniz, vercel.json içindeki outputDirectory'yi veya proje ayarlarını ayarlayın, aksi takdirde yayınlamanız bir 404 olur.
Yerel olarak çalışan ancak üretimde 404 veren varlık yolları. Çalışma zamanında yüklenen GLB, doku veya ses dosyaları için göreceli yollar veya Vite import.meta.env.BASE_URL yardımcısını kullanın. Sabit kodlanmış /assets/... yolları genellikle çalışır, ancak kopyalanıp yapıştırılmış mutlak Windows yolları kesinlikle çalışmaz.
İşaretçi kilidini veya ses bağlamını engelleyen CSP başlıkları. Birinci şahıs oyunları işaretçi kilidi gerektirir. Ses, kullanıcı hareketi aktivasyonu gerektirir. 3D Oyunlar kategorisindeki herhangi bir yetenek, bunu yönetmek için vercel.json dosyasında doğru headers bloğuyla birlikte gelir. Kendi başınıza sıfırdan yazdıysanız, yeteneğin deposundan yapılandırmayı kopyalayın.

Yayınlama Cuma günü çalışır, bu yüzden Pazar günü bozulduğunda, bu her zaman son bir değişiklikten kaynaklanır. git bisect sizin dostunuzdur. Daha da iyisi: her 30 dakikada bir gönderme yapın, böylece bozuk commit küçük olur.

Sıkça Sorulan Sorular

Oyunum trafik alırsa Vercel ücretsiz katmanı gerçekten dayanır mı?

Evet, bir hafta sonu lansmanı ve ilk birkaç hafta için. Ücretsiz katman size aylık 100 GB bant genişliği sunar, bu da yaklaşık 5 MB'lık bir Three.js paketi için 20.000 oynama anlamına gelir. Bu sınıra ulaşırsanız, Pro planı ayda 20$'dır ve sizi 1 TB'a çıkarır. Bir hafta sonu gönderimi için ücretsiz, fazlasıyla yeterlidir. Vibe Skills'deki yetenekler, paket boyutunu en aza indiren derleme yapılandırmalarıyla birlikte gelir, bu da ücretsiz katmanı daha da uzatır.

Ücretsiz Vercel katmanında özel alan adı kullanabilir miyim?

Evet. Ücretsiz katman, otomatik HTTPS ile özel alan adlarını destekler. Bir alan adı satın alın (Namecheap, Cloudflare Registrar, Porkbun), Vercel'e yönlendirin ve Vercel SSL sertifikasını halleder. Kurulum yaklaşık 10 dakika sürer. Alan adınız yoksa, oyun-adı.vercel.app URL'si herhangi bir platformda paylaşılacak kadar kısadır.

Bu stack bir oyun jam'i gönderimi için uygun mu?

Evet ve oyun jam gönderimleri için en iyi stacklerden biridir. Çoğu jam (Ludum Dare, GMTK, js13k, GitHub Game Off) web'de oynanabilir herhangi bir URL'yi kabul eder. Bir *.vercel.app bağlantısı, yargıçlar için bir itch.io URL'si gibi çalışır. Birçok jam kazananı her ikisine de gönderim yapar - oyuncu kitlesi için itch.io, hızlı standart URL olarak Vercel.

Başlamadan önce Three.js bilmem gerekiyor mu?

Cursor'ın yazdıklarını okuyacak ve değerleri ayarlayacak kadar JavaScript'e ihtiyacınız var. Three.js'i sıfırdan yazmanıza gerek yok. Vibe Skills'deki yetenekler motor kurulumunu, kamerayı, kontrolcüyü ve derleme yapılandırmasını oluşturur. Cursor, açıklamalarınızdan oyun kodu kodunu halleder.

Pazar 19:00'da Vercel derlemem başarısız olursa ne olur?

En yaygın neden bir TypeScript hatası veya eksik bir ortam değişkenidir. Vercel, derleme günlüğünü hatalı satırı vurgulayarak gösterir. Kontrol panelinde tek tıklama, son çalışan yayına geri döner ve onu üretime yükseltir. Her gönderme bir önizleme yayını olduğu için, çalışan bir yayından asla birden fazla commit uzakta değilsiniz. Bu yüzden Cumartesi ve Pazar günleri her 30 dakikada bir gönderme yapmak önemlidir.

Bir Vibe Skills 3D oyun yeteneğinden gelen kodu satabilir veya değiştirebilir miyim?

Evet. Vibe Skills'deki yetenekler, kodu Vercel, itch.io, Steam veya başka herhangi bir yerde kendi oyununuzda yayınlamanıza izin veren ticari olarak uygun bir lisansla birlikte gelir. Oluşturucular yeteneğin fikri mülkiyetini elinde tutar, siz de üzerine inşa edilen oyunun fikri mülkiyetini elinde tutarsınız.

Cursor'ı kullanmak istemezsem ne olur?

Proje dosyalarını düzenleyebilen herhangi bir yapay zeka editörü işe yarar. Claude Code, Cursor, Windsurf, GitHub Copilot Chat, Cline - bunların herhangi biri bir Vibe Skills yeteneğinden Three.js iskelesi üzerinde yineleme yapabilir. Yeteneğin kendisi editörden bağımsızdır.

Bu Hafta Sonu Yayınlayın

Tek geliştiricilerin çoğunun neden asla bir 3D oyun yayınlamadığı motor, tür veya beceri seviyesi değildir. Bu, Cuma gecesi "biraz daha araştıracağım" ve asla başlamayacakları zamandır. Sahip olduğunuz bir sonraki boş hafta sonunda, dört aşamalı planı izleyin: bir Vibe Skills 3D oyun yeteneği yükleyin, GitHub'a gönderin, Vercel'i bağlayın, Cuma 20:00'ye kadar yayınlayın, ardından Cumartesi ve Pazar günlerini canlı bir URL üzerinde yineleyerek geçirin.

Vercel'deki on hafta sonu yayınlanmış oyun portföyünüz, varsayımsal altı aylık hayal motor projenizden daha değerlidir. Yayınlanan her zaman kazanır. Ücretsiz Vercel URL'si bunun kanıtıdır.

Vibe Skills'de 3D oyun yeteneklerine göz atın →

Three.js temel kod karmaşasını atlayın. Vibe Skills'de bir 3D oyun yeteneği yükleyin, Vercel'e gönderin ve Pazar gecesine kadar canlı bir URL'niz olsun.