İçerik
Web tasarımcısı Filidor Wiese kişisel sitesi ile gözümüze çarptı. Ekranda kendisini temsil eden pikselli bir retro oyun karakteriyle sanal bir evren geliştirmek için Arthur van ’t Hoog ile birlikte çalıştı.
Sprite'lar tasarlandıktan sonra, Wiese bunları GIF'ler gibi geleneksel animasyon teknikleri yerine JavaScript ile canlandırma karmaşık sürecine başladı.
"Sorun, JavaScript açısından kontrol etmenin çok zor olması," diye açıklıyor Wiese. "Arka arkaya birkaç animasyonu tam olarak zamanlamak, döngülemek, zincirlemek ve komut dosyası haline getirmek için bir yola ihtiyacım vardı. Ayrıca hareketli grafik kendisini kare kare yeniden konumlandırabilmelidir. Bu son özellik, daha gelişmiş bir animasyon sağlar; örneğin, yürüyen bir karakter."
"Spritely'den ilham alarak özel bir eklenti üzerinde çalışmaya başladım" diye ekliyor. "Temelde, window.requestAnimationFrame API'sini uygulayarak arka plan resmini yeniden konumlandırma mantığını etkili bir şekilde geciktireceksiniz. Bu JavaScript API, daha az verimli olan aralık tabanlı zamanlayıcıyı sorar."
Bu çalışma, Wiese'nin animasyonlar arasında bazı karmaşık etkileşimler elde etmesini sağladı. "Ortaya çıkan zorluklardan biri, farklı sprite'lar arasındaki etkileşimin gerekliliğiydi. Örneğin, kule yalnızca karakter bilgisayarında yazıyorsa sinyal yaymalıdır. Bunun çalışması için, bir sprite tetiklenmesine izin veren özel JavaScript olayları kullandım başka bir anahtar. "
Bu vitrin ilk olarak .net dergisinin 235 sayısında yayınlandı.
Şimdi bunları okuyun!
- En iyi JavaScript örnekleri
- Harika HTML5 örnekleri
- Web tasarımı eğitimi: en iyi çevrimiçi araçlar
