Fizik ile Animasyon Temelleri

15 Mart 2008 – 19:35

Temelde harekete eden birçok şey insanoğlunun etkisini çekmiştir. Mesela çocuklar ilk defa gördükleri hareket eden bir nesneyi dikkatle izlerler, belki hepsi değil ama çoğu öyledir, en azından benim gördüğüm kadarıyla. Bu sistem aslında yetişkinlerde de aynıdır,  mesela güzel animasyonlarla süslenmiş bir siteye girdiğimizde dikkatimizi neyin nasıl hareket ettiği çeker. Aslında kimse bu eylem için bir çaba harcamaz ama beyin bu işleve öyle alışmıştır ki, her şeyi kendiliğinden yapar. Mesela yürümek için düşünmemiz gerekmez, yürüme eylemini gerçekleştirirken nasıl adım atacağınızı düşünmezsiniz, çünkü bunu zaten biliyorsunuzdur.

Peki, gerçek hayatta sorunsuz bir şekilde yaptığımız her şeyi programlama da yapabilirmiyiz? Flash içerisinde bir nesneyi hareket ettirmek için neye ihtiyaç duyarız? Bu nesneye nasıl yön veririz, nesnenin harekete başlayacağı ve duracağı noktası neresidir? Bu hareket noktalarının sınırları nelerdir? Hareket hızı nedir?

Sorulacak olan soruda sınır olmadığı gibi, cevaplamanın da bir den çok farklı yöntemi vardır. Bu makalede temel olarak flash içerisinde fizik ile animasyon temellerini anlatacağım.

Hareket bir nesnenin bulunduğu konumdan başka bir konuma doğru belirli bir kuvvet uygulanarak zamana karşı yer değiştirmesidir. Animasyon ise harekettir. Bir animasyonun gerçekleşmesi için belirli bir hareketin olması gereklidir. Yani, nesne belirli bir zaman içerisinde yer değiştirdikçe, animasyon gerçekleşir.

Newton birinci yasası eylemsizlik ile ilgilidir. Eylemsizlik yasasına göre bir cisme dışarıdan bir kuvvet etki etmediği sürece ya sürekli olarak aynı yerde durur ya da sabit bir hızla doğrusal hareketini gerçekleştirir.

Bunu biraz açıklayalım, düz bir zeminde duran bir topa herhangi bir kuvvet uygulanmayana kadar top hareketsizdir, herhangi bir eylemi gerçekleştirmemektedir. Topa kuvvet uygulandığında ise top kuvvetin uygulandığı yönün aksine doğru hareket eder;

Football

Topa kuvvet uyguladığı andan itibaren top harekete geçer, harekete geçen top uygulanan kuvvet miktarı, topun ağırlığı, rüzgar, yer çekimi gibi etkenler dahil edilerek belirli bir süre hareket eder.

Peki, bu işlemi flash içerisinde nasıl yapabiliriz, yani bir topu flash içerisinde nasıl hareket ettirebiliriz. Bunun için iki yol var aslında birincisi frameler yardımıyla animasyonu gerçekleştiririz. Her bir frame topun bulunduğu farklı bir koordinatı yerleştiririz. Swf dosyasını export ettiğimizde her bir frame sırayla çalışır ve biz topun hareketine şahit oluruz. Bu bir animasyondur.

Frame Example

Birinci yol yani framelerle animasyon yapmak güzel bir yol aslında ama eksileri çok, hata yaptığınızda geri dönüşünüz çok zor, işlemleri tekrar tekrar yapmanız gerekir, her şeyi sil baştan oluşturmak tabi ki zor. İkinci yöntem ise kodlarla animasyon yapmak, kodlarla animasyon yapmak bana göre hem daha zevkli hem daha kolay. Çoğu kişiye ilk başta zor gelebilir, ama alıştıkça daha kolay ve daha hızlı bir şekilde yapmak istediğiniz işlemleri gerçekleştireceksiniz. Şimdi aynı şekilde flash içerisine topumuzu nasıl animasyon uygulayabileceğimize bakalım. Aşağıdaki örnekte butona tıkladığınızda topun hareket ettiğini görüyorsunuz.
 

 Kodlar;

  1. //Butona olay dinleyicisi ekliyoruz
  2. start_ball.addEventListener(MouseEvent.MOUSE_DOWN, startBall);
  3. //butuna tıklandığında aşağıdaki fonksiyon ile topun hareketi için yeni bir olay dinleyicisi ekliyoruz.
  4. function startBall(e:MouseEvent):void {
  5. //topun x değerine 15 vermemizin sebebi tekrar butuna tıkladığımızda başa dönmesini istememiz.
  6. ball_mc.x = 15;
  7. //Hızı tekrar 20 olarak ayarlıyoruz
  8. speed =20;
  9. this.addEventListener(Event.ENTER_FRAME, moveTheBall);
  10. }
  11. //hızımızı berliliyoruz
  12. var speed:Number =20;
  1. //Topun hareket etmesini sağlayan Fonksiyon
  2. function moveTheBall(e:Event):void {
  3.  
  4. //topun koordinatını belirliyoruz
  5. ball_mc.x += speed;
  6. //Top sahnedeki x koordinat değeri 450 sayısını geçerse eğer olay dinleyicisini kaldırıyoruz
  7. //Böylece top sahnenin dışına çıkmamış oluyor
  8. if (ball_mc.x>450) {
  9. this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
  10.  
  11. }
  12. }

Bu örneğin nasıl çalıştığına dönersek eğer, ENTER_FRAME olayı ile her frame yenilendiğinde moveTheBall fonksiyonu devreye giriyor. Fonksiyon içerisinde ise topun o anki x koordinatına 20 eklenerek yeni x koordinatı belirleniyor. Böylece topun sürekli hareketi sağlanıyor. Topun sahnedeki x koordinat değeri 450 sayısını geçerse eğer olay dinleyicisini kaldırıyoruz, buda animasyonun durmasına neden oluyor.Burada bizim hareket yönümüz x koordinatı bu y koordinatı da olabilir. Hatırlarsanız biraz önce hareketin kuvvetin aksi yönde olduğunu söylemiştim. Flash içerisinde bu yapı yok aslında yani gerçek bir kuvvet yok, bizim yukarda yaptığımız animasyon da topa bir kuvvet uygulamadık, sadece x pozisyonu değiştirdik, bunu sürekli hale getirdiğimizde ise animasyon meydana gelmiş oldu. Tabii bu bunu gerçekleştiremeyiz anlamına gelmez. Flash içerisinde de gerçek fizik kurallarını uygulayabilirsiniz. Basitten başlayalım mesela yukarıdaki örneğimizi bir hız örneği olarak görebilirsiniz, sabit hızda ilerleyen bir top. Gerçek hayatta bir topa vurduğunuzda top hızla hareket eder, daha sonra yavaşlar ve durur. Peki, aynı mantığı flash içerisinde nasıl yapacağız? Dikkatli düşünürseniz eğer topun ilerledikçe yavaşladığını yani hızının düştüğünü anlayabilirsiniz. Yani tek yapmamız gereken topun hızını düşürmek. Aşağıdaki örnekte butona tıkladığınız zaman ilk önce top normal hızıyla başlıyor daha sonra bu hız giderek düşüyor.

Kodlar;

  1. //Butona olay dinleyicisi ekliyoruz
  2. start_ball.addEventListener(MouseEvent.MOUSE_DOWN, startBall);
  3. //butuna tıklandığında aşağıdaki fonksiyon ile topun hareketi için yeni bir olay dinleyicisi ekliyoruz.
  4. function startBall(e:MouseEvent):void {
  5.   //topun x değerine 15 vermemizin sebebi tekrar butuna tıkladığımızda başa dönmesini istememiz.
  6.  ball_mc.x = 15;
  7.   //Hızı tekrar 20 olarak ayarlıyoruz
  8.   speed =20;
  9.  this.addEventListener(Event.ENTER_FRAME, moveTheBall);
  10. }
  11. //hızımızı belirliyoruz
  12. var speed:Number =20;
  13. //yavaşlama ivmesini berliliyoruz.
  14. var ax:Number =0.4;
  15. //Topun hareket etmesini sağlayan Fonksiyon
  16. function moveTheBall(e:Event):void {
  17.  //Hızdan ivmeyi çıkarıyoruz
  18.  speed -= ax;
  19.  //topun koordinatını belirliyoruz
  20.  ball_mc.x += speed;
  21.  //Top sahnedeki x koordinat değeri 450 sayısını geçerse eğer olay dinleyicisini kaldırıyoruz
  22.  //Böylece top sahnenin dışına çıkmamış oluyor
  23.  if (ball_mc.x>450) {
  24.   this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
  25.  }
  26. }

Kodlarda ise pek bir değişiklik yok aslında sadece, ivme için ax adlı bir değişken oluşturuyoruz, bu değişkene verdiğimiz değer frame her yenilendiğinde hızdan belirli bir değer düşürüyor, böylece topumuz yavaşlamış oluyor.

Peki, şimdiye kadar sorunumuz yok, ya yer çekimi, biz yer çekimini hiç hesaba katmadık, bir topu havadayken bıraktığınızda top yere düşer, yere düşme sebebi yer çekimidir. Ünlü hikâyeyi hepiniz bilirsiniz Isaac Newton bir elma ağacının altında otururken, başına bir elma düşür ve “Bingo” yer çekiminin kafasına şekillenmesine neden olmuştur. Peki, nedir yer çekimi? Yer çekimi kısaca yeryüzündeki cisimleri yere(ya da merkeze) doğru çeken bir kuvvettir. Şimdi bu kuvveti flash içerisinde nasıl hayata geçirebileceğimize bakalım.

Baştan başlamak gerekirse yer çekimi için öncelikle bir yerimiz(taban)  olması gerekiyor. 550×400 ölçülerinde bir sahneniz var, bu sahnede y koordinatında tabanımızı 350 olarak ayarlıyoruz. Peki, sizce yer çekimini nasıl oluşturabiliriz? Biraz önce yaptığımız örnekte ne yaptığımızı hatırlarsanız, topa belirli bir hız veriyorduk, sonra bu hızdan ivmeyi çıkararak yavaşlatıyorduk. Top belirlediğimiz noktaya geldiğinde ise animasyonu durduruyorduk. Şimdi bizim y koordinatında tabanımız 350.Yani topumuz 350 piksele geldiğinde yere çarpıp yukarıya doğru geri gidecek. Yani topun düşüş hızı eksi olacak. Burası çok önemli topun hızı eksi olduğunda top tekrar yukarıya doğru hareket edecek. Tabii şunu unutmamak gerekir hala bir ivmemiz var ve bu ivme iki tarafta da çalışıyor, hem yukarıya doğru hem aşağıya doğru.  Aşağıdaki örnekte butona tıkladığınız zaman nasıl çalıştığını göreceksinizdir.

Kodlar;

  1. function moveTheBall(e:Event):void {
  2.  //Hıza ivme ekliyoruz
  3.  speed += ay;
  4.  //topun yeni konumunu bekliyoruz
  5.  ball_mc.y += speed;
  6.  //eğer topun y değeri+topun yüksekliği floor değerini geçerse
  7.  //diğer bir deyişle top yere ulaştığında hızı sıçrama değer ile çarpıp
  8.  //hızı negatif yapıp topun yukarıya çıkmasını sağlıyoruz.
  9.  if (ball_mc.y + ball_mc.height > floor) {
  10.   //Topun floor değerini geçmemesini sağlıyoruz.
  11.   ball_mc.y = floor - ball_mc.height ;
  12.   //hızı ters çeviriyoruz.eğer negatif se pozitif, pozitif se negatif yapıyoruz
  13.   speed *= bounce;
  14.   //sıçrama sayısını bir arttırıyoruz
  15.   i++;
  16.  }
  17.  //Sıçrama sayısı 14 eşit olduğunda olay dinleyicisini kaldırıyoruz.
  18.  if (i==14) {
  19.   this.removeEventListener(Event.ENTER_FRAME, moveTheBall);
  20.  }
  21. }

Şimdilik bu kadar, yukarıdaki örneklere benzer birçok örnek geliştirilebilir. Bu makaledeki esas amacım temelleri vermekti. Örneklere bir den çok etken ekleyebilirsiniz, rüzgar, sürtünme vb..

Kaynak Kodlar
Kolay Gelsin
Engin!

Bu makale ile ilgili olabilecek yazılar



  1. 6 Responses to “Fizik ile Animasyon Temelleri”

  2. Gerçekten çok yararlı bir makale olmuş. Sürtünme kuvveti ve yer çekimi kuvveti hakkında bir proje geliştiriyordum bu makale ufkumu biraz daha açtı doğrusu…

    By ibrahim şenol on May 18, 2008

  3. merhaba hocam
    kodun bir kısmında daha önce görmediğim bir karakter gördüm onun mazeretiyle soru soracaktım..

    if (ball_mc.y + ball_mc.height > floor) {
    > bu ne anlama geliyor acaba

    asıl sorumda seminerlerin kaynak kodlarıyla ilgili 2. ve 4. haftayı buldum ama diğerlerini bulamadım linki varmı acaba sende
    teşekürler şimdiden…

    By emrah atılkan on Tem 7, 2008

  4. hocam yazdığım karakter görünmedi sebebini anlamadım ama dönüştüğü karakterden büyüktür işareti olduğu anlaşılıyor..
    sanırım sende büyüktür yapmak istemiştin

    height ve floor arasındaki

    By emrah atılkan on Tem 7, 2008

  5. Merhaba Emrah,
    karakterlerde oyle bir sorun yaşıyorum, aslında ilk zaman buldugumda bu hatayı gidericem. ama denk gelimiyor bir türlü.
    kaynak kodlara gelirsek, 1 ve 3 haftadaki kaynak kodları bast kodlardı, o yüzden vermeye gerek duymadım. Eğer kayıtlıysa buraya bir yere asmaay çalışırım

    Kolay Gelsin

    By Engin Yöyen on Tem 8, 2008

  6. gerçekten teşekkürler…

    By elma on Kas 17, 2008

  1. 1 Trackback(s)

  2. Ağu 24, 2008: TEKNOVE » Fizik ile Animasyon Temelleri

Yorum Ekleyin


Creative Commons License İçerik Hakkı Engin Yöyen'e ait olup sitedeki makaleler Creative Commons Attribution-Noncommercial 3.0 Unported lisansı ile lisanslanmıştır.