İçeriğe geç
Tüm projeler

Proje 01Web · Gerçek zamanlı · Çok oyunculu

Puzzle Arena

Yapbozu birlikte, gerçek zamanlı çözmek.

Ücretsiz, gerçek zamanlı çok oyunculu bir yapboz platformu. Arkadaşlar aynı masayı paylaşıyor, birbirinin imlecini görüyor, kamera ve mikrofonla konuşuyor ve kendi fotoğraflarını saniyeler içinde yapboza dönüştürüyor.

Siteyi ziyaret etpuzzlearena.net(yeni sekmede açılır)
Rol
Tasarım ve mühendislik — ürün, gerçek zamanlı sistem, web
Platform
Web — masaüstü & mobil tarayıcılar
Teknolojiler
Next.js, React, WebRTC, Gerçek zamanlı senkronizasyon, Görüntü işleme
puzzlearena.net / board

01Genel bakış

Puzzle Arena, masa başındaki en eski sosyal oyunlardan birini, onu sosyal yapan şeyi kaybetmeden internete taşıyor. Oyuncular aynı odaya katılıyor, tek bir ortak masada parçaları hareket ettiriyor, herkesin nerede çalıştığını görüyor ve çözerken yüz yüze konuşuyor.

02Problem

Çevrimiçi yapbozların çoğu yalnız oynanıyor: tek oyuncu, tek masa, başka kimsenin varlığına dair hiçbir his yok. Birlikte çözmek — insanların asıl keyif aldığı kısım — genelde ekran paylaşımı demek; o zaman da sadece bir kişi oynayabiliyor.

03Hedefler

  1. H1Birden fazla kişinin aynı masada, aynı anda parça taşıyabilmesi
  2. H2Diğer oyuncuları hissettirmek — imleçler, ses, görüntü
  3. H3Kişisel bir fotoğrafı saniyeler içinde oynanabilir bir yapboza dönüştürmek
  4. H4Ücretsiz ve anında olması: kurulum yok, bir bağlantıyla katıl

04Rolüm

Tasarım ve mühendislik — ürün, gerçek zamanlı sistem, web.

  • Ürün ve arayüz tasarımı
  • Gerçek zamanlı oda ve masa senkronizasyonu
  • WebRTC ile kamera ve mikrofon entegrasyonu
  • Yüklenen fotoğraflardan yapboz üretimi
  • Kütüphane, profiller, seviyeler ve başarımlar

05Teknoloji

Web
Next.js / React
Gerçek zamanlı
Oda & masa senkronizasyonu / Canlı imleçler
Medya
WebRTC / Kamera & mikrofon
İçerik
Fotoğraftan yapboz üretimi / Yapboz kütüphanesi

06Mimari

Masa ortak bir durumdur: her hamle küçük ve sıktır; hamleyi yapan oyuncu için anında hissettirmeli, odadaki herkes için de tutarlı kalmalıdır.

  1. 01

    Oda

    Hızlı oyun, davet kodu ya da bağlantıyla katılım; açık ve özel odalar

  2. 02

    Masa senkronizasyonu

    Parça hareketleri ve yerine oturmalar odadaki herkese iletilir

  3. 03

    Varlık

    Canlı imleçler her oyuncunun nerede çalıştığını gösterir

  4. 04

    Medya

    Oyuncular arasında WebRTC ile kamera ve mikrofon

  5. 05

    Üretici

    Yüklenen fotoğraf 6–500 birbirine geçen parçaya bölünür

07Zorluklar & çözümler

C1İki el, tek parça

İki oyuncu aynı parçayı aynı anda tuttuğunda basit bir senkronizasyon parçayı ikisi arasında zıplatır ya da iki farklı yerde bırakır.

İki oyuncu aynı parçayı aynı anda tuttuğunda basit bir senkronizasyon parçayı ikisi arasında zıplatır ya da iki farklı yerde bırakır.

Parça, onu sürükleyen oyuncuya aittir; diğerleri onu dolu olarak görür ve bırakıldığında masa tek bir konumda karar kılar.

Parça, onu sürükleyen oyuncuya aittir; diğerleri onu dolu olarak görür ve bırakıldığında masa tek bir konumda karar kılar.

C2Ağ üzerinden anında his

Parça hareket etmeden önce sunucudan yanıt beklemek, sürüklemeyi yapışkan ve tepkisiz hissettirir.

Parça hareket etmeden önce sunucudan yanıt beklemek, sürüklemeyi yapışkan ve tepkisiz hissettirir.

Hamleler önce yerelde çizilir ve diğer oyunculara sürekli akıtılır; sürükleyen kişi asla ağı beklemez.

Hamleler önce yerelde çizilir ve diğer oyunculara sürekli akıtılır; sürükleyen kişi asla ağı beklemez.

C3Her fotoğraftan yapboz

Fotoğraflar her boyutta ve oranda gelir; ama parçalar 6'dan 500'e kadar her sayıda temiz şekilde birbirine geçmelidir.

Fotoğraflar her boyutta ve oranda gelir; ama parçalar 6'dan 500'e kadar her sayıda temiz şekilde birbirine geçmelidir.

Üretici ızgarayı görselin oranlarına göre ayarlar ve her parça için birbirine geçen kenarlar keser; böylece her fotoğraf adil ve çözülebilir bir yapboza dönüşür.

Üretici ızgarayı görselin oranlarına göre ayarlar ve her parça için birbirine geçen kenarlar keser; böylece her fotoğraf adil ve çözülebilir bir yapboza dönüşür.

08Ekranlar

  • puzzlearena.net / board
    a.Ortak masa — canlı imleçler, ses ve görüntü
  • puzzlearena.net / lobby
    Hızlı oyun, oda seçenekleri ve popüler yapbozlar bulunan Puzzle Arena ana ekranı
    b.Lobi — hızlı oyun, odalar, kütüphane ve kendi yapbozların

09Sonuçlar

  • puzzlearena.net adresinde ücretsiz olarak yayında
  • Çok oyunculu, tek oyunculu ve kişisel yapbozlar tek bir üründe
  • 11 kategorili kütüphane; seviyeler, başarımlar ve arkadaşlarla
Siteyi ziyaret etpuzzlearena.net(yeni sekmede açılır)

10Çıkarılan dersler

“Asıl özellik varlık hissi — imleçler ve ses, grafiklerden daha önemli.”

“Gerçek zamanlı bir arayüzde yerel oyuncu asla ağı beklememeli.”

“En iyi karşılama, seni doğrudan bir odaya bırakan bir bağlantıdır.”