Animasyon Nedir? Pixel Animasyona Başlangıç

Animasyon Nedir?

Animasyon (canlandırma), birkaç resmin arka arkaya hızlı bir şekilde gösterilmesiyle elde edilen hareketli görüntüdür. Günümüzde bilgisayar ile birlikte vektör ve pixel tabanlı animasyonlarda yapılmaktadır. Animatörler olarak görevimiz bu ardışık görüntüleri göze yatkın bir şekilde çizmektir.

İlk animasyon biçimi FLIPBOOK denilen bir teknik ile yapılıyordu. Birçoğumuzun okul kitaplarını ve defterlerini süslediği, her sayfa köşesine kare-kare çizimler yaparak kitabın sayfalarını teker teker açmamız sonucu oluşan görsel ile tamamen aynı mantıkta bir tekniktir.

Flipbook

19. Yüzyılın ortalarında “kinetograph” adı ile ortaya çıkan flipbook, sayfaların hızla çevrilmesi ile hareket algısı yaratan küçük kitaplardır.

Eğer bu işi profesyonel olarak yapmak istiyor iseniz çeşitli kaynaklardan araştırma yapabilir, profesyonel ekipmanlar satın alabilirsiniz. Ör: Andymotion’s Flipbook Kit

Hücre Mantığı

Geleneksal animasyon yöntemlerinde iş sürecini hızlandırmak adına başvurulan yenilikçi bir yöntemdir. Arkaplan, Dekorlar ve Hareketli karakterler üst üste şeffaf zeminler üzerine çizim yapılarak kullanılır. Böylelikle her seferinde arkaplanı tekrar tekrar çizmeye gerek duymadan sadece hareketli objeleri kare kare çizmenize ve arkaplanı sabit tutmanıza olanak tanır.

Bilgisayar Animasyonları

3B Animasyonlar, bilgisayar kullanarak çeşitli programların yadımı ile oluşturulan genişlik, yükseklik ve derinlik algısının söz konusu olduğu video içeriklerdir. Bu animasyonları oluşturmak için 3 Boyutlu modellere ihtiyacınız vardır, 3 Boyutlu modeller ise bir heykeltıraş edası ile çalışan modelleme uzmanları tarafından yapılır ve renklendirilir.

3 Boyutlu Modelleme ve Animasyonlar yapmak için kullanılan programlar;

Pixel Animasyon

Pixel Animasyon, tamamen animasyonun temellerine dayanan “frame to frame” mantığını kullanır, yani kare-kare çizim yapmanız gereken manuel bir yöntemdir. Her kareyi özenle çizerek arka arkaya oynatarak bir video oluşturup animasyonunuzu yapabilirsiniz.

Hadi “Hücre mantığı” ve “frame to frame” kullanarak timeline üzerinde spriteler oluşturalım ve birlikte bir pixel animasyon yapalım.

Sprite

Oyun geliştirme literatürün de sprite, arka plandan bağımsız hareket eden veya işlevsel olarak farklı objelere denir. Ör: Ana Karakter, Düşmanlar, Etkileşimli Objeler vb.

Timeline

Öğrenmeniz gereken ilk şey zaman çizelgesidir yani timeline.

aseprite-timeline

Biz animasyonumuzu Aseprite programında yapacağımız için referans olarak Aseprite üzerinden ilerleyeceğim, fakat endişelenmeye gerek yok birçok program aynı temeller üzerinde işleyişini sürdürür. Timeline da her satır bir görüntüyü temsil eder ve her satırın içindeki numaralı sütunlar ise o görüntünün varyasyonlarını yani “frame”lerini içinde barındırır. Kare-kare dediğimi olay da işte tamda budur.

Yeni bir frame oluşturmak için ALT + B tuşlarını kullanabilirsiniz. Bu kısayol seçili olan katman için yeni bir frame açmanızı sağlar.

aseprite-preview

Kendinizi deneyerek alıştırmalar yapın, her kareye farklı renkler koyarak F7 Tuşu ile ön izleme penceresini açın ve PLAY butonuna veya ENTER tuşuna basıp olayın işleyişini gözden geçirin.

Muhtemelen “Tüm bu kısayol tuşlarını nasıl ezberleyeceğim?” diye bir soru aklınızı kurcalıyor olabilir, endişelenmenize gerek yok her kısa yolun menüde bir butonu mevcut, her şey fare ile rahatlıkla halledilebilir fakat; kısayol tuşları süreci hızlandıracağı için biraz zaman ve ezber ile çok daha rahat çalışmalar gerçekleştirebilirsiniz.

Aseprite programı için bir kısa yol tuş çizelgesi.

Basit Bir Animasyon ile Başlayalım

Birçok animasyon tekniği mevcut fakat şu an en standart olan basit bir yöntem ile başlayacağız ve sabit bir objeyi hareket ettireceğiz pixel animasyon ‘umuza başlayalım. Arka arkaya gelen bu görüntüleri ardışık bir biçimde oynatınca karşımıza hareket ediyormuş hissiyatı veren bir görüntü ortaya çıkacak.

İlk olarak taslak objemizi çiziyoruz ce bu objemizin ilk ve sabit olan biçimi oluyor. Ardından CTRL + N ile bu objeyi kopyalayıp programın yeni bir frame açmasını sağlıyoruz. Yeni frame de objemizi biraz yukarıya taşıyarak objeye hareket hissiyatı veriyoruz.

Devamındaki kareler için belirli ölçülerde yükseltip tepe noktasından sonra aynı kareleri geriye doğru tekrar ediyoruz. Bu yükselmenin belirli bir standart ı vardır önce 3px, 2px ve en sonunda 1px yükselecek şekilde bir düzen uygulayabilirsiniz.

Tüm framelerimizi arka arkaya koyduğumuz zaman bir hareket algısı yaratıyor, hala daha tam bir animasyon denemez fakat objemizi hareket ettirdik. Yazımızın devamında daha da geliştireceğiz.

Zamanlama

Animasyonumuz için bir kilit taşı niteliğindedir. Yapmış olduğumuz hareketli objelerde belirli yerlerde duraksamalar kullanmamız gerekebilir. Bu bölgelerde kesinlikle kareleri birkaç defa kopyalayarak işlem yapmayın, bu şekilde yaparak kullanırsanız animasyonunuz boyutu büyüyebilir ve kullanılacak projenin içerisinde düzensizliğe belki de hatalara sebep olabilir.

Topumuz en üstte iken biraz süzülsün, bunu yapabilmemiz için topun en üst seviyede olduğu karenin süresini uzatacağız. Standart olarak Aseprite 100 milisaniye kullanır, biz bu durumu tepe noktasında 300 milisaniye olarak değiştirelim. Topumuzun en üst karesini seçelim, yapmış olduğumuz örnek çalışmada bu altıncı kareye tekabül ediyor. Sağ tıklayarak Kare Özelliklerine tıklayıp veya kısa yol tuşu olarak P ye basalım ve oradaki Duration değerini 100’den 300’e yükseltelim. Artık topumuz en üst seviyede iken bir tık yavaşlayıp süzülme hissiyatı yaratıyor. Bir animasyonun hızını tamamen hızlandırıp yavaşlatmak için tüm kareleri seçip aynı işlemi uygulayabilirsiniz.

Büzülme ve Esneme

Animasyonumuzu geliştirmek için çok etkili bir yöntemdir. Objemizin hareketine doğallık ve akıcılık katmak için hareket yönünde esnetir ve büzeriz. Böylelikle objemizin yapmış olduğu harekette bir hız ve yön eklemiş oluruz.

Objemizi çoğaltarak biraz üstünden bastıralım, Objemizin hacmin, korumak için bu yöntem şuan için uygundur, kendimizi geliştirdikçe bu kuralı çiğnemek için belirli yöntemler keşfedebiliriz ama şimdilik objemizin hacmini korumak için çaba sarf edelim.

Şimdi biraz daha abartarak objemizin alt yüzeyini bozalım ve daha sert bir etki yaratalım.

Çalışmanın sonucunda sprite sheet bu şekilde gözükecek ve sonuç olarak ta biraz daha iyi bir çalışma alacağız.

Büzülme ve Esneme tekniğine daha detaylı bir açıklama getirecek olursak; Hareketlerin belirli bir momentum kuvvetleri vardır. Objelerimiz hareket ivmelenmesinden sonra durmak için bu kuvvet e karşılık verirler ve tersine bir esneme payı gösterirler. Belirli hareketlere karşılık gelen esneme payları için örnekler şu şekildedir.

Hareket Hazırlığı.
Zıplama Hareketi.
Durma Hareketi.
Hareket Bitiş Hazırlığı.

Animasyonunuzu Kaydedin

Animasyonunuzu kaydetmek için CTRL + S veya File > Export yolunu izleyebilirsiniz. Çalışmanızı .aseprite olarak kaydederek işlemlerinizi koruyabilir ilerleyen zamanlarda tekrar üzerinde çalışma gerçekleştire bilirisiniz. Çalışmanızı paylaşmak üzere kaydetmek istiyorsanız, .jpg .png formatlarını kullanarak fotoğraf, .gif formatını kullanarak ise animasyonunuzu çıktı alabilirsiniz. Twitter üzerinde gif formatını direk paylaşabiliyorsunuz, Twitter gif dosyanızı otomatik olarak mp4 e çeviriyor fakat Instagram üzerinde paylaşmak için gif’i kendiniz mp4 e çevirmeniz gerekmektedir.

Çalışmanızı oyunlarda kullanmak üzere dışarı aktarmak istiyorsanız, CTRL + E veya File > Export Sprite Sheet yaparak dosyalarınızı çıktı alabilir ve oyun motorunuzda gerekli düzenlemeler ile birlikte kullanabilirsiniz.

ertankanur-pixel-animation

Sonuç olarak zaman çizelgesi ile denemeler yapıp örnek animasyonlar yapmanızı öneririm, renkleri basit tutarak işlerin karmaşıklaşmasını önleyebilir hayal gücünüzü daha fazla kullanabilirsin iz. Daha yaratıcı bir yaşam dileğimle, sağlıcakla kalın.

Bir Yorum Yazın