Spritely.js – uçan kargalar

3
180
views

spritely

Çok uzun zamandan beri var olan ve bazı linklerini kaybettiğimden dolayı taslak olarak kaydetmiş olduğum yazıyı bu gün sizlerle tekrar paylaşmak istedim. Bir sprite animasyon uygulaması bunca zaman boyunca durmadan hizmet verebiliyorsa eğer gerçekten çok faydalıdır demek oluyor. Bu yüzden paylaşmamak olmaz dedim.

Belki daha önceden rastlamışsınızdır bir yerlerde, web sayfasının üst kısmında bir o yana bir bu yana uçuan 2 tane karga animasyonu.  Bir zamanlar bu tarz çalışmalar oldukça popülerdi ancak bu günlerde pek rastladığım söylenemez. Yine de değişik hareketli animasyon severlerin işine yarayacağına inanıyorum. Ayrıca bir diğer özelliği de kargalar uçarken arkaplandaki manzara resimleri de 3 boyutlu olarak hareket ediyor. İstediğiniz kadar katman ekleyerek parallax görütü elde edebilirsiniz.

Spritely.js Kullanımı:

Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri:

Bu iki dosya uzantısını head etiketleri arasına ekledikten sonra sıra geliyor katmanlara ve bu katmanlara vereceğiniz hıza. Mutlaka arabada yolculuk yapmışsınızdır. Uzaklarda görünen dağlar kıpırdamıyor gibi görünürken yakındakiler de hızlıca hareket edermiş gibi görünür. Nesneler ne kadara uzak olursa hareketleri de o kadar yavaş olur. Biz de buna göre her katmana Javascript ile ayrı ayrı hız vereceğiz.

Parametreler:

  • Fps: Sprite tekniğinde kareler arası geçiş hızı.
  • Speed: Katmanların kayma hızı.
  • Dir: Katmanların sağa yada sola kaymasını belirlediğiniz bölüm. Örnek: dir: ‘left’ veya dir: ‘right’ şeklinde ayarlayabilirsiniz.

Bulutlar:

Rengi beyaz olduğundan dolayı görünmesi için arka plan rengini kırmızı yaptım. Resme tıkladığınızda tam boyu açıldığında yine bembeyaz bir çerçeve göreceksiniz. Çerçevenin içine sağ tıklayıp resmi farklı kaydet diye kaydedin bilgisayarınıza.

bulutlar

En uzakta olan nesne olduğundan dolayı buna ekleyeceğimiz sürat çok az olmalıdır.

 Dağlar:

Hazırlayacağınız sprite çalışmasında dağların şekline göre hız vermeniz en doğrusudur. Bizdeki örnek biraz çizgi filmleri andırdığından dolayı nesneler biraz hızlı hareket ediyorlar. Daha gerçekçi çalışmalar için olması gereken hızları bilmeli yada denemelisiniz ta ki en iyi sonucu elde edene dek.

daglar

 Ağaçlı ve yel değirmenli resim.

Bu da dağların önünde durduğundan dolayı sürati biraz daha hızlı olmalıdır.

agaclar

 Kuşlar:

Kuşların hareketlerini ve gezebilecekleri alanların sınırını belirlediğinizde bu alan içinde hareket edip dururlar. İsterseniz sabit bir noktada bile tutabilirsiniz.

kuslar

Bu kodların toplanmış hali aşağıdaki JavaScript kodu gibidir. Toplamda 4 tane katman bulunuyor ama bu katmanları istediğiniz kadar çoğaltabilmeniz mümkün. Bende buna göre bir örnek hazırlamaya çalışıyorum ancak resimlerin kesimi baya zaman aldığından dolayı öncelikle resmi konunun açıklamasını yapmak istedim.

Css :

  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

Spritely.js uygulamasının kullanımı için anlatacaklarımızı bu kadar. Ben de kendimce binalar, deniz, bulutlar, bir karga ve bir tane de jet ski kullanarak bir örnek hazırladım. Son olarak bir tane de gemi ekledim. Gemi deniz katmanlarının ortasına eklenmiş. Demir atmış şekilde yapacaktım ama sonradan vazgeçtim ve kargaların tersi yönünde biraz daha yavaş hareket ediyor. Deniz konusunda hala iyi olmuş diyemem. Biraz dalgalı yapmış olsaydım sanırım daha iyi olacaktı. Neyse hazırlamış olduğum demoya kırmızı butondan bakabilirsiniz.

1 oy (22 votes, average: 4,36 out of 5)
Loading...
Önceki İçerikSchema Organization ile organizasyon logosu biçimlendirme
Sonraki İçerikAdblock engelleme
1983 doğumlu, olmayan bir çocuk babası, espirili ve kendini cana yakın zanneden biri işte. Daha ne olsun ?
Paylaş

3 YORUMLAR

    • Kırmızı kocaman demo butonunu görmedin sanırım 🙂 2 tane demo butonu var. Küçük olanı orjinal sayfayaya ait ve büyük butonda benim hazırladığım demo.

CEVAP VER

Please enter your comment!
Please enter your name here