CreateJS - HTML5 Kütüphanesi: Giriş

29-03-2015    Okuma Modu

HTML5 ile gelen elementlerin başında canvas elementi gelir. Site kodlamanın başına <!DOCTYPE html> yazınca siteniz HTML5 standartlarına uygun hale geliyor. Fakat bunu yazınca yada audio tag'ini kullanınca HTML5 biliyorum diyenlerden olmayın. HTML5 vs Flash kapıştırmaların asıl nedeni grafik yorumlayan canvas elementidir. Türkçe karşılığı tuvaldir.

Canvas elementi internete yeni bir bakış açısı getiriyor. Bolca animasyonlu, "janjanlı" siteler yapmak mümkün. Fakat düz javascript ile canvas elementini işlemek, uzunca kodlar yazmanızı gerektirir buda belli süre sonra sıkılmanıza ve kodların karmaşık hale gelmesine sebep olabilir. Lafı çok uzatmadan CreateJS kütüphanesine geçelim.

 

CreateJS 4 tane kütüphanenin optimize edilerek birleştirilmiş halidir. Neler var içinde derseniz?

  • EaselJS: en çok kullanacağınız kütüphanedir. Standart grafik nesneleri bulundurur. Yani şekiller oluşturmamızı bu kütüphane sağlar.
  • TweenJS: Animasyonlar yapmamızı sağlar.
  • SoundJS: Adı üstünde ses kütüphanesidir. Ses dosyalarıyla yapacağımız işlemleri oldukça kolaylaştırır.
  • PreloadJS: Yapacağınız projelere ses, video gibi ortam dosyaları ekledğinizde yüklenmesi zaman alır. Bu dosyalar yüklenirken boş bir ekran yerine yükleniyor ekranı hazırlamanızı sağlayan kütüphanedir.

CreateJS kütüphanasini iki şekilde kullanabilirsiniz. Birincisi paket olarak CreateJS kütüphanesini sayfanıza yüklersiniz. Diğer seçenek ise bu 4 kütüphaneden kullanacaklarınızı seçerek sayfaya yüklersiniz. Tavsiyem CreateJS kütüphanesini sayfaya yüklemeniz. Hadi başlayalım.

<head> </head> tagları arasına aşağıdaki kodu ekleyerek CreateJS kütüphanemizi sayfamıza yükleyelim.

<script src="https://code.createjs.com/createjs-2014.12.12.min.js"></script>

<body> </body> tagları arasına canvas elementini ekleyip herhangi bir id verin. Ben birinciOrnek olarak id verdim.

<canvas id="birinciOrnek" width="500" height="300"></canvas>

Gelelim javascript'e, eğer kodları <head> </head> tagları arasına yazıyorsanız fonksiyonunuzu <body onload="fonksiyon_ismi()"> yada diğer türlerde sayfa yüklendiğinde çağırmayı unutmayın. Ben normalde <head></head> tagları arasına yazmayı tercih etsemde codepen beni body içine yazmaya zorladı.

Fonksiyonumuzu oluşturalım, standart olarak sayfa yüklendiğinde çalışan fonksiyonun ismine init() verilir. 

<script>
  function init() {
    // kodlar buraya
  }

  // <body onload="init()"> yaptıysanız aşağıdaki satıra gerek yok.
  init();
</script>

Sahnemizi oluşturup stage değişkenine atalım.

 var stage = new createjs.Stage("birinciOrnek");

Şimdi şekil oluşturup dikdörtgen çizip sahnemize ekleyelim.  

// Şekil nesnesi oluşturum circle değişkenine atadık.
var circle = new createjs.Shape();

/* Şekil nesnemizi kırmızıya boyayıp daire çizdik  
 drawCircle(x_kordinatı, y_kordinadı, yarıçap)*/
circle.graphics.beginFill("#f00").drawCircle (50,100,50);

// sahnemize daireyi ekledik.
stage.addChild(circle);

Tek bir işlem kaldı o da sahnemizi yenilemek. Eğer yenilemezseniz boş bir tuval gözükecektir. Bu kodu nereye eklerseniz onun üstünde ki kodlar, tuvale yansır. Yani altına başka bir şekil eklerseniz bunlar gözükmeyecektir. Bu kodu bir zamanlayacıya bağlayıp çalıştırmak mümkün yani her defasında yazmanız gerekmeyecektir. ticker diye aratırsanız bulacaksınızdır, ilerleyen derslerde anlatacağım.

//Sahnemizi yeniler
stage.update();

Hadi şimdi nasıl gözüktüğüne bakalım.

See the Pen XJGgBN by Rıza GÜNEŞ (@riza) on CodePen.

Giriş dersi olduğu için çok temel seviyede anlattım bir daha ki dersimde bu kadar açıklama satırı olmayacaktır. EaselJs'de daire dışında çizilecek bir sürü şekil vardır, Bunları yeni yazımı beklemeden öğrenmek istiyorsanız sizi bu adrese alalım.

Kendinize iyi bakın. :)

Kategoriler: HTML5 CreateJS