English Chrome'a ekle
Menü
English
Bölümler Hızlı başlangıç

Türkçe özet

Hızlı başlangıç

Bir komutla çalışan bir oyun projesi kur, Inspector'da her koltuğu kendin oyna, hazır olunca bağlantısını paylaş.

Bu sayfada

Projeyi oluştur

İki şablon var. Host mode yalnız statik dosyalardan oluşur ve barındırması ücretsizdir. Engine mode'da tek bir Worker hem sayfaları hem de kurallarını sunar. 

pnpm create camtable-addon oyunum            # host mode: yalnız statik dosyalar
pnpm create camtable-addon oyunum --engine   # engine mode: tek Worker
cd oyunum
pnpm install
pnpm dev                                     # sonra yazdırdığı Inspector bağlantısını aç

npm ile de aynı: npm create camtable-addon@latest oyunum ya da npx create-camtable-addon oyunum.

Projede neler var

Kurallar, oyun sayfası ve protokol yolları ayrı dosyalarda durur. Şablonun README'si günlük komutları anlatır.

Dosya Ne işe yarar
src/game.ts Kurallar: saf bir reducer (tapRace). Aynı nesne iki modda da çalışır. Yarışın Game Settings'i de burada (RACE_SETTINGS, kazanmak için kaç dokunuş gerektiği); reducer onu okur.
src/addon.ts Manifest ve bütün protokol yolları, birkaç sabitten kurulur. İlk iş ADDON_ID'yi değiştir.
index.html , src/main.ts , src/ui.ts Oyun sayfası: "Tap Race", on dokunuşa ilk ulaşan kazanır. Host mode'da main.ts, createHostAuthority(tapRace, { sdk }) çağırır.
vite-plugin-addon.ts , vite.config.ts Geliştirirken protokol yollarını CORS ile sunar, derlerken statik dosya olarak yazar.
scripts/dev.mjs pnpm dev: eklentiyi geçici bir https tünelinin arkasında açar, Inspector bağlantısını ve kurulum bağlantısını yazdırır.
public/_headers , public/404.html Cloudflare için CORS ve önbellek başlıkları, bir de gerçek bir 404 sayfası.
src/engine/worker.ts , wrangler.json , scripts/serve-worker.mjs (--engine) Tek Worker: dist/ klasöründen statik dosyalar ve imzalı /engine/* yollarının arkasında kuralların. pnpm dev onu yerelde çalıştırır.
tests/ Reducer, baştan sona bir maç ve protokole karşı her yol; --engine ile imzasız isteği reddeden, imzalı olanı kabul eden engine. Hiçbiri ağ istemez.

pnpm dev ve Inspector

pnpm dev eklentini geçici bir https tünelinin arkasına koyar ve üç adres yazdırır:

  Manifest URL  https://<rastgele-kelimeler>.trycloudflare.com/manifest.json
  Inspector     https://camtable.app/inspector?url=<manifest adresi>
  Install link  https://camtable.app/install?url=<manifest adresi>
  1. Inspector bağlantısını aç. Inspector, CamTable sitesinin bir sayfası. Discord ile giriş yaparsın, manifest adresi bağlantıda hazır gelir. Bir oyun ve oynama seçeneği (Play Option) seçip bir Test Odası (Test Room) açarsın.
  2. Her koltuğu sen oyna. Inspector her koltuk için ayrı bir oyun çerçevesi açar. Her birinin kendi oda bağlantısı, kendi Match Player Id'si ve yer tutucu bir video kutucuğu olur. İlk koltuk odanın sahibidir. Ne Discord araması ne de CamTable'ın Chrome eklentisi gerekir.
  3. Gerçek bir aramada dene. Install link'i CamTable'ın Chrome eklentisi kurulu bir tarayıcıda açarsan oyunu gerçek bir Discord aramasında oynarsın.

Test Odası gerçek bir oda: lobi, oyun ayarları, odanın sınırları ve engel listesi her odadaki gibi çalışır. Yalnız sen girersin, hiçbir yerde listelenmez, ücretli bir Plan istemez ve açıldıktan 30 dakika sonra kapanır. Aynı anda bir tane açık tutabilirsin.

Çevrimdışı deneme yolu yok: oyun bir CamTable odasında çalışır, oda da CamTable'ın sunucusunda. Tünel bu yüzden var ve adresi her çalıştırmada değişir. Önerilen tünel cloudflared (hesap istemez, ücretsiz), ama şart değil: kendi tünelinin adresini ADDON_ORIGIN ile verebilirsin. Testlerin (pnpm test) ise ağsız çalışır.

Inspector'ı aç

Hazır olunca paylaş

Tünel geçici. Oyunu paylaşmak için yayına al ve https manifest adresini ver. Şablon Cloudflare'e tek komutla yayınlar:

ADDON_ORIGIN=https://oyunum.pages.dev pnpm run deploy               # host mode: Cloudflare Pages
ADDON_ORIGIN=https://oyunum.<hesabın>.workers.dev pnpm run deploy   # engine mode: tek Worker

Oyuncular adresi CamTable panelindeki Eklentilerim sekmesine yapıştırır. Ya da bir kurulum bağlantısı paylaşırsın: https://camtable.app/install?url=<manifest adresi>. Bağlantı, CamTable'ın onay ekranını tam o manifest için açar; CamTable'ın Chrome eklentisi olmayan oyuncuya sayfa bunu söyler ve Chrome Web Mağazası düğmesini gösterir. Yeni sürümü yayınlayınca version'ı artır: süren odalar başladıkları sürümle devam eder.

Devamı İngilizce

Ayrıntıların tamamı İngilizce rehberde:

Bu sayfada