Mayın tarlasından esinlenen bir yakınlık oyunu.
squoosh.app'i geliştiren ekip geri döndü. Bu kez, PROXX (proxx.app) adında web tabanlı bir oyun geliştirdik. PROXX, efsanevi Minesweeper oyunundan esinlenen bir yakınlık oyunudur. Oyun uzayda bulunuyor ve göreviniz kara deliklerin nerede olduğunu bulmak. Masaüstü bilgisayarlardan özellikli telefonlara kadar her türlü cihazda kullanılabilir. Kullanıcılar oyunu fare, klavye, d-pad kullanarak, ekran okuyucuyla bile oynayabilirler.
Temel çizgimiz
Bu oyunu oluşturmadan önce, uygulama için aşağıdaki hedefleri ve bütçeleri belirledik:
- Aynı temel deneyim: Tüm cihazlar aynı şekilde çalışmalıdır.
- Erişilebilir: fare, klavye, dokunma, d-pad, ekran okuyucular
- Etkili:
- Başlangıç yükünün 25 KB'tan az olması
- Yavaş 3G'de 5 saniyeden kısa TTI (etkileşim süresi)
- Tutarlı 60 fps animasyon
Web İşçileri
Oyun; temel oyun mantığı, kullanıcı arayüzü hizmeti, durum hizmeti ve animasyon grafikleri olmak üzere 4 ana varlıktan oluşur. Baştan beri ana iş parçacığının ana iş parçacığında yoğun animasyonlu grafikler çalıştırmamız gerektiğini bildiğimiz için, ana iş parçacığının mümkün olduğunca serbest kalması için oyun mantığını ve durum hizmetini bir web çalışanına taşıdık.
Derleme zamanı önceden oluşturma
Kullanıcı arayüzümüz, 25 kb'ın altında bir başlangıç yükü için agresif hedefimize ulaşmamızı sağladığından Preact ile geliştirilmiştir. İyi bir ilk yükleme deneyimi sunmak için 1. görünümü önceden oluşturmaya karar verdik. Derleme sırasında üst sayfaya erişmek için Puppeteer kullanarak önceden işleme yapar ve önceden işlem yaparak DOM'un doldurulmasına izin veririz. Ortaya çıkan DOM, daha sonra HTML'ye serileştirilir ve index.html olarak kaydedilir.
Animasyon için tuval, (görünmez) Erişilebilirlik için DOM
Oyun grafiklerini WebGL kullanarak bir tuvalde oluşturuyoruz. Bir tuval, arka plan animasyonundan ve üstteki oyun ızgarası için başka bir tuvalden sorumludur. Ayrıca, erişilebilirlik amacıyla düğmeler içeren bir HTML tablomuz da var. Bu tablo, her iki tuvalin üzerinde yer alır, ancak görünmez (opaklık: 0) olarak ayarlanır. Gördüğünüz oyun durumunun tuvalde oluşturulmuş hali olsa da, oyuncu görünmez DOM tablosuyla etkileşim halindedir. Bu da bize etkinlik işleyici ekleme ve tarayıcının odak yönetimine bel bağlama imkanı sağlar.
DOM öğesini kanvasta tutarak tarayıcıların yerleşik erişilebilirlik özelliklerinden yararlanabiliyoruz. Örneğin, oyun tablomuzda role="grid" ayarlandığında, ekran okuyucular odaklanılan hücrenin satırını ve sütununu bizim uygulamak zorunda kalmadan duyurabilir.
Paketleme ve kod bölme için birleştirme
Uygulama için toplam boyutumuz gzip olarak sıkıştırılmış 100 KB'tır. Bunun 20 KB'ı ilk yük (index.html) içindir. Bu proje için Rollup.js'yi kullanıyoruz. Ana iş parçacığımız ve web çalışanımız arasında bağımlılıkları paylaştık. Rollup, bu paylaşılan bağımlılıkları yalnızca bir kez yüklenmesi gereken ayrı bir yığına yerleştirebilir. Webpack gibi diğer paketleyiciler, paylaşılan bağımlılıkları çoğaltarak çift yüklemeye neden olur.
Özellikli telefonları destekleme
KaiOS telefonlar gibi akıllı telefonlar giderek daha popüler hale geliyor. Bunlar kaynakları oldukça kısıtlı cihazlar, ancak bu telefonlarda da deneyimi son derece duyarlı hale getirmemize izin verebildiğimizde web çalışanlarından yararlanma yaklaşımımız. Özellikli telefonlarda farklı bir giriş arayüzü (d-pad ve sayı tuşları, dokunmatik ekran yok) bulunduğundan tuş tabanlı bir arayüz de uyguladık.
Sırada ne var?
Google I/O 2019 için bu oyunu zamanında hazırlarken çok iyi ama yoğun zaman geçirdik. Bu yüzden dinlenmeye hak ettiğimiz zamanı ayıracağız, ancak oyunun bu alanlarının her biri hakkında daha ayrıntılı belgelerle geri dönmeyi planlıyoruz.
O zamana kadar lütfen Mariko'nun I/O'da bu projeyle ilgili yaptığı konuşmayı kontrol edin.
Koda proxx github deposundan göz atabilirsiniz.
İyi denemeler! Surma, Jake, Merih