Roll It, klasik bir ahşap yürüyüş yolunun yalnızca telefonunuzdaki ve bilgisayarınızdaki tarayıcıyı kullanarak yeniden tasarladığı bir Chrome Denemesidir. Telefonunuzdaki tarayıcı, bileğinizi sallayarak topu nişan alıp yuvarlamanıza olanak tanır. Bilgisayarınızdaki tarayıcı ise WebGL ve Tuval ile Roll It ara yolunun gerçek zamanlı grafiklerini oluşturur. İki cihaz Websockets üzerinden iletişim kurar. Uygulama yok İndirmeye gerek yok. Jeton yok. İhtiyacınız olan tek şey modern bir tarayıcıdır.
Legwork, Google Creative Lab'in yönlendirmesiyle kullanıcı deneyimini, arayüzleri ve oyun ortamını geliştirdikten sonra Roll It oluşturmak için geliştirme ortağı Mode Set ile iş birliği yaptı. Proje süresince bazı benzersiz zorluklarla karşılaştık. Bu makalede, kullandığımız bazı teknikler, keşfettiğimiz hileler ve Roll It'in meyvelerini toplarken öğrendiğimiz dersler adım adım gösterilmektedir.
3D İş Akışı
Baştaki zorluklardan biri, 3D modelleri yazılımımızdan web için hazır bir dosya biçimine taşımanın en iyi yolunu bulmaktı. Öğeler Cinema 4D içinde oluşturulduktan sonra modeller basitleştirildi ve düşük poligonlu ağlara dönüştürüldü. Renklendirme ve dokulandırmaya yönelik olarak nesnenin parçalarını birbirinden ayırt edebilmek için her bir ağa belirli poligon seçim etiketleri verildi. Daha sonra, üç.js için uyumlu dosyalar oluşturmak üzere bir Collada 1.5 (.dae) dosyası olarak dışa aktarıp açık kaynak bir 3D programı olan Blender'a içe aktarabildik. Modellerimizin doğru şekilde içe aktarıldığından emin olduktan sonra ağı bir JSON dosyası olarak dışa aktardık ve ışıklandırma kod kullanılarak uygulandı. Attığımız adımlara daha ayrıntılı bir şekilde göz atalım:
Kodu yazma
Roll It, açık kaynak kitaplıklarla geliştirilmiştir ve modern tarayıcılarda yerel olarak çalışır. WebGL ve WebSockets gibi teknolojilerle web, konsol kalitesinde oyun ve multimedya deneyimlerine kapanıyor. HTML geliştirme için daha modern araçlar kullanılabilir hale geldikçe, geliştiricilerin bu deneyimleri oluşturma kolaylığı ve rahatlığı önemli bir artış gösterdi.
Geliştirme ortamı
Roll It'in orijinal kodunun büyük bir kısmı CoffeeScript ile yazılmıştır. CoffeeScript, kısa ve öz bir dildir. İyi biçimlendirilmiş ve linç uygulanmış JavaScript'e dönüştürme işlemi net, kısa ve öz bir dildir. CoffeeScript, başarılı devralma modeli ve daha net kapsam işleme ile OOP geliştirmede öne çıkıyor. CSS, geliştiriciye projenin stil sayfalarını geliştirmek ve yönetmek için bir dizi harika araç sunan SASS çerçevesiyle yazılmıştır. Bu sistemleri derleme sürecine eklemek biraz zaman alıyor. Ancak özellikle Roll It gibi daha büyük projelerde kesinlikle buna değer. Geliştirme sırasında öğelerimizi otomatik olarak derleyecek bir Ruby on Rails sunucusu oluşturduk. Böylece bu derleme adımlarının tamamı şeffaf hale geldi.
Basitleştirilmiş ve rahat bir kodlama ortamı oluşturmanın ötesinde, sitenin daha hızlı yüklenmesi amacıyla istekleri en aza indirmek için öğeleri manuel olarak optimize ettik. Tüm görüntüleri iki sıkıştırma programından (ImageOptim ve ImageAlpha) çalıştırdık. Her program, resimleri sırasıyla kayıpsız ve kayıplı olarak optimize eder. Doğru ayar kombinasyonuyla, bir resmin dosya boyutunu önemli ölçüde azaltabilirler. Böylece, bilinmeyen kaynaktan gelen resimler yüklenirken yalnızca bant genişliğinden tasarruf etmekle kalmaz, aynı zamanda optimize edildiğinde resimleriniz HTML, CSS ve JavaScript'te satır içi yerleştirme için çok daha küçük bir base64 kodlamalı dizelere dönüşür. Base64 kodlaması söz konusu olduğunda, Open Sans WOFF ve SVG yazı tipi dosyalarımızı da bu tekniği kullanarak doğrudan CSS'ye yerleştirdik. Bu da toplam istek sayısının daha da az olmasına neden oldu.
Fizik kuralları etkin 3D sahne
THREE.js, web için her zaman bulunan 3D JavaScript kitaplığıdır. Ölümlülerin özel gölgelendiriciler yazmak veya manuel matris dönüşümleri gerçekleştirmek zorunda kalmadan, iyi aydınlatılmış, güzel, etkileşimli 3D sahneleri kolayca oluşturabilmelerini sağlayan alt düzey 3D matematik ve donanım tabanlı WebGL optimizasyonlarını özetler. Physijs, JavaScript'e çevrilmiş popüler bir C++ fizik kitaplığı için ÜÇ.js'ye özel bir sarmalayıcıdır. Bu kütüphaneden, top yuvarlanma, zıplama ve hedefine doğru zıplama işlemlerini 3D olarak simüle etmek için kullandık.
En başından beri sadece fiziksel topu yuvarlama deneyimini gerçekçi hale getirmekle kalmadık, aynı zamanda oyundaki nesnelerin gerçek hissini yaşatmak için çalıştık. Bunun için Physijs sahnesinin genel yer çekiminin, oyuncunun atışından yuvarlanan topun hızının, şerit atlayışının eğiminin, topun ve kulvar malzemelerinin sürtünme ve eski haline döndürme (zıpkınlık) özelliklerini birçok kez tekrarlamamız gerekiyordu. Daha fazla yerçekimi ve daha fazla hızın birleştirilmesiyle daha gerçekçi bir oyun deneyimi ortaya çıktı.
Düzleme
Modern tarayıcı ve video kartı kombinasyonlarının çoğu, WebGL ortamında yerel donanım tabanlı kenar yumuşatma özelliğinden faydalanmalıdır, ancak bazıları düzgün çalışmaz. Kenar yumuşatmanın kendiliğinden çalışmaması durumunda, THREE.js sahnesindeki sert ve zıt kenarlar pürüzlü ve çirkin olacaktır (en azından akıllı gözlerimiz için).
Neyse ki bir çözüm var. Bir kod snippet'i sayesinde, platformun antialiasing'i yerel olarak destekleyip desteklemediğini tespit edebiliyoruz. Uyuyorsa herhangi bir şey yapmanız gerekmez. Başlamazsa, THREE.js ile birlikte gelen ve bize yardımcı olabilecek bir dizi işlem sonrası gölgelendiriciler vardır. Diğer bir deyişle, FXAA kenar yumuşatma filtresi. Oluşturulan sahneyi bu gölgelendiriciyle her karede yeniden çizdiğimizde, genellikle çizgilerimizin ve kenarlarımızın çok daha yumuşak bir görünümünü elde ederiz. Aşağıdaki demoyu inceleyin:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
İvme ölçere dayalı oyun kontrolleri
Yuvarla Mobil cihazlar bir süredir tarayıcının ivme ölçerine erişebiliyordu. Ancak sektör olarak web'deki harekete dayalı hareket tanıma özelliğini keşfetmeye yeni başlıyoruz. Telefonun ivme ölçerinin sağladığı veri miktarı biraz kısıtlıdır, ancak biraz yaratıcılıkla yeni ve harika deneyimler sunabiliriz.
Yuvarladeviceorientation Önceki yatırma değerini mevcut yatırma değerinden çıkararak olaylar arasındaki açı deltasını depolarız. Daha sonra, son on açılı deltayı sürekli olarak toplayarak telefon uzayda hareket ederken sürekli dönüşü tespit edebiliriz. Telefon, süpürme açısı değişimi eşiğini aştığında bir yuvarlama işlemi başlatırız. Daha sonra, bu taramadaki en büyük tek eğim deltasını bularak top için bir hız tahmin edebiliriz. Roll It'te bu hız, her ivme ölçer güncellemesine eklediğimiz zaman damgaları kullanılarak normalleştirilir. Bu, ivme ölçer güncellemelerinin farklı cihazlardaki tarayıcıya akışın değişken hızının sorunsuzlaştırılmasına yardımcı olur.
WebSockets iletişimi
Oyuncu topu telefonuyla yuvarladıktan sonra, telefondan dizüstü bilgisayara topu fırlatmasını söyleyen bir mesaj gönderilir. Bu "roll" mesajı, iki makine arasındaki bir WebSocket bağlantısı üzerinden bir JSON veri nesnesi aracılığıyla gönderilir. JSON verileri küçüktür ve çoğunlukla mesaj türü, atış hızı ve nişan yönünden oluşur.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Dizüstü bilgisayar ile telefon arasındaki tüm iletişim, bunun gibi küçük JSON mesajları aracılığıyla gerçekleşir. Oyunun masaüstündeki durumunu her güncellediğinde veya kullanıcı telefonundaki bir düğmeyi çevirdiğinde ya da düğmeye dokunduğunda makineler arasında bir WebSocket mesajı iletilir. Bu iletişimin basit ve kolay yönetilmesi için, WebSockets mesajları her iki tarayıcıdan da tek bir çıkış noktası kullanılarak yayınlanır. Buna karşılık, alıcı tarayıcıda tek bir giriş noktası bulunur ve bir WebSocket nesnesi her iki uçta da tüm gelen ve giden iletileri işler. Bir WebSocket mesajı alındığında, JSON verileri jQuery'nin trigger() yöntemi kullanılarak JavaScript uygulaması içinde yeniden yayınlanır. Bu noktada, gelen veriler diğer herhangi bir özel DOM etkinliği gibi davranır ve uygulamadaki başka bir nesne tarafından alınıp işlenebilir.
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
Roll It'in WebSocket sunucuları, iki cihaz bir oyun koduyla senkronize edildiğinde anında oluşturulur. Roll It için arka ucu, Go kullanılarak Google Compute Engine ve App Engine platformunda geliştirilmiştir.
Yatırılan menü ekranları
Oyun sırasında kullanılan etkinliğe dayalı WebSocket mesajlarının ötesinde, Roll It içindeki menüler, telefonu eğerek ve bir seçimi onaylamak için bir düğmeye dokunarak kontrol ediliyor. Bu, telefondan dizüstü bilgisayara daha tutarlı bir yatırma verisi akışı gerektirir. Bant genişliğini azaltmak ve gereksiz güncellemelerin gönderilmesini önlemek için bu mesajlar yalnızca cihazın eğimi birkaç dereceden fazla değiştiyse gönderilir. Telefon bir masanın üzerinde, düz duruyorsa yatırma verisi akışı göndermenin bir anlamı olmaz! İletim hızı da kısıtlanır. Cihaz etkin olarak yatırılıyor olsa bile yuvarlatıldığında saniyede en fazla 15 WebSockets mesajı gönderilir.
Eğme değerleri bilgisayarda alındıktan sonra, düzgün bir görünüm sağlamak için zaman içinde requestAnimationFrame kullanılarak ara değer olarak interpolasyon yapılır. Bunun sonucunda, dönen bir menü ve kullanıcının seçimini belirtmek için yuvarlanan bir top elde edilir. Telefon eğme verileri gönderirken bu DOM öğeleri, requestAnimationFrame döngüsü içindeki bir CSS dönüşümü yeniden hesaplanarak gerçek zamanlı olarak güncellenir. Menünün kabı sadece dönüyor ancak top yerde yuvarlanıyor gibi görünüyor. Bu etkiye ulaşmak için topların x koordinatını kendi dönüşleriyle ilişkilendirebilmek üzere bazı temel trigonometri yöntemlerini uygularız. Basit denklem şu şekildedir: dönüşler = x / (çap * π)
Son adım
Yuvarla, zamanın işaretidir. Gelişimini destekleyen açık kaynak projeler, masalarımızdaki ve cebimizdeki cihazların işlem gücü ve platform olarak web'in durumu arasında, açık web'de bağlantı kurmak gerçekten heyecan verici ve dönüştürücü bir zaman. Yalnızca birkaç yıl önce, bu teknolojinin büyük kısmı yalnızca tescilli sistemlerde bulunuyordu ve ücretsiz olarak kullanılamayacak ve dağıtılamayacaktı. Günümüzde her gün yapbozun yeni parçalarını oluşturup paylaştıkça, daha az çalışarak ve daha fazla hayal gücüyle karmaşık deneyimler gerçekleştirilebiliyor. Hiç beklemeye gerek yok. Harika bir şeyler inşa edin ve bunu tüm dünyayla paylaşın.
