Rehber

Hazır Oyun Şablonuyla Oyun Yapmak: Yeni Başlayanlara 7 Adım

Şablonu seçmekten üzerinde sizin adınızın olduğu bir oyuna: açacağınız dosyalar, önce yapılacak değişiklikler ve oyunu test etme, yayınlama ya da uygulamaya dönüştürme.

Ninjolt kaydırmalı bulmaca görseli, yeni başlayan birinin özelleştirebileceği bir oyun şablonu

Yeni başlayan biri için oyun yapmanın en hızlı yolu, bitmiş bir oyundan yola çıkmaktır. Bir hazır oyun şablonu seçin, demosunu oynayın, kılavuzunu okuyun, sonra metinleri, görselleri ve bölümleri dosya dosya değiştirin; her değişiklikten sonra test edin ve oyun sizin olana kadar devam edin. Ardından oyun klasörünü bir web sitesinde yayınlar ya da uygulama olarak paketlersiniz. Önce bir oyun motoru öğrenmek yok, boş sayfa yok.

Bu rehber o yolu yedi adımda izliyor. Dosya adları kendi şablonlarımızın ürün sayfalarından ve kılavuzlarından alındı; böylece "bölümleri değiştirmek" uygulamada neye benziyor, bir şey satın almadan görebilirsiniz. Rehber hiç oyun yayınlamamış kişiler için yazıldı: bir öğretmen, bir pazarlamacı, oyunları ilk kez deneyen bir web geliştirici. Bir adım Node.js ya da kod editörü gerektiriyorsa bunu açıkça belirtiyoruz.

Hazır oyun şablonuyla oyun yapmak: yedi adım

  1. İstediğiniz oyuna yakın bir şablon seçin.
  2. Demoyu her ekranı tanıyana kadar oynayın.
  3. Kılavuzu okuyun ve adı geçen dosyaları bulun.
  4. Metinleri ve dilleri değiştirin.
  5. Görselleri ve markayı değiştirin.
  6. Bölümleri, kelimeleri ya da kuralları değiştirin.
  7. Test edin, sonra oyunu yayınlayın ya da uygulamaya dönüştürün.

Sıra önemli. Metinler en güvenli değişikliktir; bu yüzden oradan başlar, dosyaların nasıl çalıştığını öğrenirsiniz. Kurallar en sona kalır, çünkü oyunu fark edilmesi zaman alan şekillerde bozabilirler.

Başlangıç için oyun şablonlarına göz atın

Adım 1: fikrinize yakın bir şablon seçin

Şablon ancak büyük kısmını koruduğunuzda zaman kazandırır. Kelime oyunu istiyorsanız bir kelime oyunundan başlayın; bir futbol oyununu bilgi yarışmasına çevirmek şablon işi değil, baştan yazmaktır. Seçimi üç soru daraltır.

  • Oyuncu ne yapıyor? Çift eşleştirme, kelime çizme, atış yapma, parça sıralama. Temel eylemi örtüşen şablonu seçin.
  • Nasıl değiştireceksiniz? Bazı sürümlerde değişikliklerin çoğu tek bir ayar dosyasından yapılır; bazıları ise yeniden derlediğiniz TypeScript projeleridir. Hangisi olduğu ürün sayfasında yazar.
  • Nerede çalışacak? Sürümlerimizin hepsi statik bir web sitesinden çalışır. Yerel (native) uygulamalar ve mağaza yayını hiçbir sürüme dahil değildir.

Mağazamızda liste fiyatları 5 ile 59 ABD doları arasındadır ve her ürün sayfasında canlı bir demo ile "Bu sürüme dahil olmayanlar" adlı bir liste bulunur. O listeyi en az özellikler kadar dikkatli okuyun.

Adım 2: demoyu bir test uzmanı gibi oynayın

Demoyu iki dakika değil, yarım saat oynayın. Her menüyü açın, bir bölümü bitirin, birini kaybedin, dili değiştirin, sayfayı yenileyip ilerlemenizin durduğunu kontrol edin. Gördüğünüz her ekranın ve her metnin listesini çıkarın. Bu liste sonraki adımlar için haritanızdır: üzerindeki her öğe dosyalarda bir yerde yaşar.

Demoyu telefonda da oynayın. Oyuncularınız telefon kullanacaksa şablonun asıl sınavı dizüstü bilgisayardaki değil, telefondaki demodur.

Sayı eşleştirme bulmacası Tenguin'in demosunu deneyin

Adım 3: paketi açın ve kılavuzu okuyun

Şablon kurduğunuz bir program değil, bir klasördür. Paketlerimizde her ürün sayfasında anlatılan aynı parçaları bulursunuz:

  • game/: index.html, görseller, sesler ve fontlarla birlikte yayına hazır oyun. Çevrimiçi olan kısım budur.
  • Kaynak kod: düzenlediğiniz okunabilir kod. Ricopop gibi bazı sürümlerde game/ içindeki dosyalar doğrudan kaynak koddur, derleme adımı yoktur. Gridspark gibi diğerlerinde ayrı bir kaynak klasörü vardır ve onu game/ içine yeniden derlersiniz.
  • Dokümantasyon: resimli bir kılavuz. Gridspark'ınki kurulum, özelleştirme, 20 SSS ve sorun gidermeyi kapsar; Ricopop ve Zabum ayrıca bir START-HERE.txt ile gelir.
  • THIRD-PARTY-LICENSES: fontlar ve kütüphaneler için lisans bildirimleri. Koşullarımız bunları ürününüzle birlikte tutmanızı ister.

Hiçbir şeye dokunmadan önce kılavuzun kurulum ve özelleştirme bölümlerini okuyun. Dosyaların adı orada geçer ve aşağıdaki her değişiklik bu adlardan biriyle başlar.

Adım 4: önce metinleri ve dilleri değiştirin

Metinler dosya düzenini az riskle öğretir. Ürün sayfalarımızdan gerçek örnekler:

  • Gridspark: arayüz metinleri src/locales.js içinde.
  • Pinloop, Trimora ve Twirldrop: arayüz metinleri i18n.ts içinde, oyunun adı ise brand.ts dosyasında.
  • Bodoku: metinler src/i18n sözlüklerinde; sayfa, yer tutucuları (interpolation placeholders) bozmamanız konusunda uyarır.
  • Golazo: metinler dil sözlüklerinde, takımlar teams.js içinde.

Tuzak yer tutuculardır. "Level {n} complete" gibi bir satırda {n} her dilde olduğu gibi kalmalıdır. Etrafındaki kelimeleri değiştirin, süslü parantezleri asla.

Diller de seçimin bir parçası. Sürümlerimizin çoğu 14 arayüz diliyle gelir; Letter River, Plop ve Zabum 3 dille gelir. Dil çıkarmak eklemekten kolaydır; dil eklemek yalnızca menüyü değil, her satırı çevirmek demektir.

Adım 5: görselleri ve markayı değiştirin

Lisans beyaz etikete (white label) izin verir: Polar Games adını ve logosunu kendinizinkiyle değiştirebilir, ürününüzün içindeki kodu, görselleri ve sesleri değiştirebilirsiniz. Nasıl yapılacağı sürüme bağlıdır.

  • Tenguin: ayarların çoğu index.html'in yanındaki tek bir dosyada, tenguin.config.js'de durur: başlık, logo yolu, vurgu rengi, varsayılan dil, ödüller ve fiyatlar. Bir değeri düzenleyin, dosyayı yükleyin, sayfayı yenileyin. Derleme yok.
  • Bodoku ve Frogdoku: görseller src/art/manifest.ts içinde tanımlanır.
  • Pinloop: brand.ts başlığı, renkleri, 30 hedefi ve 12 arka planı tutar; ses efektleri ve müzik public/audio klasöründedir.
  • Ricopop: müzik ve efektler değiştirebileceğiniz MP3 dosyalarıdır; ricopop.config.js ise dokunarak başlama ekranını ve tam ekran düğmesini kontrol eder.

Değiştirdiğiniz dosyayla aynı görsel boyutunu ve formatı koruyun. Orijinalin iki katı genişlikte bir logo menüyü kodun beklemediği şekillerde kaydırır.

Pinloop'u ve brand.ts dosyasını inceleyin

Adım 6: bölümleri, kelimeleri ya da kuralları değiştirin

Oyununuzun herkesin kopyasına benzemeyi bıraktığı yer burasıdır. Test araçlarının en çok işe yaradığı yer de burası.

  • Ricopop: 50 bölüm src/levels.js içinde metin haritaları olarak durur. İsteğe bağlı node tools/validate.mjs aracı, bir haritayı düzenledikten sonra her bölümün hâlâ kazanılabilir olduğunu kontrol eder.
  • Letter River: kelimeler ve ipuçları source/words/en.js, pt.js ve es.js içinde, bulmaca üretimi ise source/js/levels.js içinde. node test/check.js kelime listelerini ve dil başına 80 bölümü doğrular.
  • Deepforge: odalar, kazmalar, denge ve metinler source/src/data/chambers.ts içinde.
  • Gridspark: kural sabitleri ve renk paleti src/config.js içinde, bulmaca kuralları ise game.js, board.js, generator.js ve shapes.js dosyalarında.

Kurallar en riskli değişikliktir. Her seferinde tek bir sayıyı değiştirin, üç tur oynayın, sonra bir sonrakine geçin. Oyun yanlış hissettiriyorsa "orijinal" kopyanıza dönüp karşılaştırın.

Kelime listeleri düzenlenebilen kelime bulmacası Letter River'ı inceleyin

Adım 7: test edin, sonra yayınlayın ya da paketleyin

Çift tıklayarak değil, yerel bir sunucuda test edin

Ürün sayfalarımızın birçoğu, oyunun file:// üzerinden, yani index.html'e çift tıkladığınızda açılan adresten çalışmadığını açıkça söyler. Bunun yerine yerel bir web sunucusu üzerinden test edin: birçok kod editöründe bir tane bulunur, Ricopop'un isteğe bağlı geliştirici araçlarında da var. TypeScript ile yazılmış sürümleri yeniden derlemek için Node.js gerekir: örneğin Gridspark, oynanabilir dosyaları game/ içine kopyalamak için npm test ve npm run build çalıştırır; Pinloop ise dist/ klasörüne derler ve siz onu game/ içine kopyalarsınız.

Yayınlayın

game/ klasörünün içeriğini herhangi bir statik HTTP(S) barındırma hizmetine yükleyin. Sürümlerimizin oynanması için PHP ya da veritabanı gerekmez; Zabum ve Ricopop'un varsayılan olarak kapalı, isteğe bağlı PHP skor tabloları vardır. Kılavuzların dediği gibi her klasörü index.html'in yanında tutun.

Ya da uygulama olarak paketleyin

Capacitor gibi araçlar bir web oyununu Android ya da iOS projesinin içine yerleştirir. Capacitor'ın başlangıç sayfası, kökünde index.html bulunan derlenmiş web dosyalarından oluşan bir klasör ister, platformları npx cap add android ve npx cap add ios ile ekler ve dosyaları npx cap sync ile kopyalar. Bu, yeni başlayan birinin ilk haftasının ötesinde bir adımdır ve sürümlerimizin hiçbiri yerel derleme ya da mağaza yayını içermez; bu işi ayrıca fiyatlandırırız.

  1. 2. adımdaki listenizde yer alan her ekran sizin metinlerinizi ve görsellerinizi gösteriyor.
  2. İlerleme sayfa yenilendiğinde korunuyor.
  3. Oyun telefonda, beklediğiniz yönde çalışıyor.
  4. THIRD-PARTY-LICENSES bildirimleri hâlâ dosyalarla birlikte.
  5. Neyi değiştirdiğinizi dosya dosya açıklayabiliyorsunuz.

Lisans oyununuzla neler yapmanıza izin veriyor

Her satın alma, sizin ya da bir müşterinizin tek bir son ürünü için süresiz, münhasır olmayan bir lisans verir. Oyuncular ürüne ücretsiz ya da reklam gelirli bir modelle erişebilir. Kodu, görselleri ve sesleri değiştirebilir, adımızı ve logomuzu kaldırıp yerine kendinizinkini koyabilirsiniz. Şablonu, kodunu ya da varlıklarını tek başına; şablon, kit veya varlık paketi olarak yeniden satamaz ya da paylaşamazsınız. Destek 6 ay, uzatmayla 12 ay sürer ve sağlanan dosyaların kurulumunu ve kullanımını, ayrıca yeniden üretilebilen hataları kapsar. Özelleştirme ve yeni özellikler ayrı hizmetlerdir ve işe başlamadan önce fiyatlandırılır.

Lisans koşullarının tamamını okuyun

Sıkça sorulan sorular

Kod bilmeden oyun yapabilir miyim?

Kod yazmadan çok şeyi değiştirebilirsiniz: metinler, renkler, görseller ve bazı ayarlar düz dosyalarda durur. Tenguin ayarların çoğunu tek bir yapılandırma dosyasında tutar. TypeScript sürümlerinde kuralları ya da bölümleri değiştirmek için temel düzeyde kod okumak ve yeniden derlemek için Node.js gerekir.

Bilgisayarımda neyin kurulu olması gerekir?

Ricopop ve Golazo gibi derleme adımı olmayan sürümler için bir kod editörü ve bir tarayıcı yeterlidir. TypeScript sürümlerini yeniden derlemek için Node.js ve npm gerekir; gereken sürüm her ürün sayfasında yazılıdır.

Şablondan yaptığım oyunu satabilir ya da yayınlayabilir miyim?

Kendiniz ya da bir müşteriniz için tek bir son ürün olarak, ücretsiz ya da reklamlı biçimde yayınlayabilirsiniz. Şablonu ya da kodunu tek başına yeniden satamazsınız. Ücretli uygulamalar ya da uygulama içi satın almalar için önce bize sorun.

index.html'i açınca oyunum neden boş sayfa gösteriyor?

Genellikle dosya file:// üzerinden açıldığı için. Kılavuzlarda anlatıldığı gibi oyunu yerel bir web sunucusundan çalıştırın ya da bir barındırma hizmetine yükleyin.

Ne kadar sürer?

Ne kadar değiştirdiğinize bağlı. Metinler ve bir logo bir gün sürebilir; yeni bölümler, görseller ve kurallar daha uzun sürer. Metinlerle başlayın, bir test sürümü yayınlayın ve gerisini aşama aşama ekleyin.

Tek bir oyunla başlayın

Bir şablon seçin, demosunu yarım saat oynayın ve kılavuzunun özelleştirme bölümünü okuyun. Adı geçen dosyalar değiştirebileceğiniz şeylere benziyorsa başlangıç noktanızı buldunuz demektir. Değişiklikleri bizim yapmamızı tercih ederseniz şablonu ve listenizi gönderin, size fiyat teklifiyle dönelim.

Tüm oyun şablonlarını görün

Değişiklikler için fiyat teklifi isteyin