Bu bölüm Cococs2d-x ile bir başlangıç yaptığınızı ve hayalinizdeki oyunu gerçekleştirmek için bir başlangıç yaptığınızı varsayar. Endişelenmeyin, eğlenceli bir başlangıç olacak!
Haydi başlayalım!
Cocos2d-x cross platform bir oyun motorudur. Bir oyun motoru geliştiricinin çalışma akışı içerisinde birçok bileşen sağlar. Cocos2d-x’in sahip olduğu temel bileşenler; Scene(sahne),Transition(dönüştürme,değiştirme),Sprite,Menu,Audio(ses),Physics(fizikler) ve daha fazlasıdır.
Temel Bileşenler
İlk başta bunaltıcı görülebilir. Fakat biz kavramlara derinlemesine dalmadan cocos2d-x’in temel yapısını birazcık anlayabilmek gerekir. Cocos2d-x’in kalbinde Scene,Node,Sprite,Menu ve Action bileşenleri vardır. En sevdiğiniz oyunlara bakın, bu bileşenlerin tek bir formdaki hali olduğunu göreceksiniz.
Gelin bu oyunu inceleyelim;
Bir de buna bakalım, bileşenlerin kimliklerine ayırdığımızda kafamızda çok daha iyi canlanıyor.
Gördüğünüz bu sahne bazı sprite(imaj nesnesi)’lardan, label(yazı nesnesi)’lerden ve diğer nesnelerden oluşuyor. Hepsinin Cocos2d-x için bir eşdeğer nesnesi var.
Director (Yönetmen)
Cocos2d-x director konseptini kullanır, sanki bir filmin içindeymişsiniz gibi! Director sahnedeki işlemlerin akışını kontrol eder. Bir yapımcı olduğunuzu hayal edin ve ne yapacağınızı director’e söyleyin! Director nesnesinin en önemli görevlerinden biri sahne(scene) geçişlerini, değişimlerini kontrol etmektir. Bu yüzden kodunuzun herhangi bir yerinde Director’ü çağırıp işlem yaptırabilirsiniz.
İşte size tipik bir oyun akışına örnek;
Siz oyununuzun yönetmenisiniz.Siz ne olacağına, ne zaman ve nasıl olacağına karar vereceksiniz. Sorumluluğunuzu alın : )
Scene(Sahne)
Yönetmenle tanıştıktan sonra sizi scene kavramıyla tanıştıralım. Oyununuz çeşitli sahnelerden oluşur.Mesela ana menünün olduğu sahne, bölüm seçim ekranının olduğu sahne, 1. bölümün sahnesi, 2. bölümün sahnesi… gibi. İşte bunun Cocos2d-x’de bu sahneler birer Scene objesidir. Tüm bileşenlerinizi bu sahneye yerleştirilir.
Bu da bir menu ve oyunu kapsayan bir scene. Sahneler renderer bileşeni ile çizilir. Renderer sprite’ların ve diğer objelerin çizilmesinden sorumludur. Bunu daha iyi anlamak için biraz scene graph kavramı hakkında konuşmamız gerekiyor.
Scene Graph(Sahne grafiği)
Scene Graph grafiksel sahneyi düzenleyen bir veri yapısıdır. Sahne grafiklerinde herşey hiyerarşi ile birbirine bağlanır, tıpkı bir ağaca benzeyen bir işleyiş mekanizması vardır.
Sanki bu kavram size biraz karışık geliyor. Fakat aslında yapı baba->çocuk yapısından farksızdır. En üstteki root isimli nesne bu ilişkinin en üstünde yer alıyor. Bunu bir aile hiyerarşisi gibi görebilirsiniz. Root büyük baba, onun çocukları, onun çocuklarının çocukları…. gibi. Bu işleyişi bilmeniz sahnenizi yönetebilmeniz açısından iyi olacaktır. Sahnenizdeki her eleman bu konsepte sadık kalır.
Scene Graph bir ağaç gibidir dedik. Bu ağacın dallarında gezinelim mi? Cocos2d-x in-order-walk algoritması kullanır. Yani sırayla bu ağacın dallarında gezinirsiniz. Yukarıdaki grafikte en tepedeki parçadan en aşağıya doğru sırayla gidildiğini görürsünüz.
Şimdi az önce paylaştığımız sahneyi bu yönde irdeleyelim;
Bu sahne nasıl render ediliyor? İşte anlatmaya çalıştığımız Scene Graph kavramı bundan ibaret, aşağıda bir sahnenin render aşamasındaki iş akışının diyagramını görüyorsunuz.
Peki hangi parça öncelikli, hangi parça öncelikli render edilmeyecek, bunu ne belirliyor? Bunu belirleyen z-order özelliğidir.
Sahnedeki bu node nesneleri belli bir sırayla render edilir. Her node nesnesinin bir z-order özelliği vardır.
// Sahneye bir child(çocuk) ekleyelim ve z-order özelliği -2 olsun
// Scene Graph üzerinde arkada render edilecektir.
scene->addChild(title_node, -2);// Eğer bir child eklerken z-order belirtmezseniz varsayılan olarak 0 değerini alır.Bu nesnenin z-order değeri 0’dır
scene->addChild(label_node);
// Sahneye bir child daha ekleyelim ve z-order değeri 1 olsun.
// Scene Graph üzerinde önde render edilecektir.
scene->addChild(sprite_node, 1);
Sprites
Tüm 2D oyunlarda Sprite objesi vardır. Ve evet oyun geliştirirken çok aşina olacağınız nesnelerdir bunlar. Kısacası oyun için hazırlanmış görsellerinizi-imajlarınızı sahnenizde tanımladığınız, manipüle ettiğiniz, pozisyonunu ve hareketinin değiştirebildiğiniz nesnelerdir. Cocos2d-x’de her Sprite nesnesi Node nesnesinden türetilmiştir. Yani her Sprite nesnesi aynı zamanda bir Node nesnesidir.
Sahnenizde kolayca bir Sprite nesnesi ekleyebilir, bu eklediğiniz sprite’ların pozisyonunu(position),dönüş açısını(rotation) , ölçeğini (scale),saydamlığını (opacity), rengini (color) ve daha birçok özelliğini ayarlayabilirsiniz.
// Bu şekilde bir Sprite nesnesi oluşturabilirsiniz
auto mySprite = Sprite::create(“mysprite.png”);// Sprite nesnesinin pozisyonunu bu şekilde değiştirebilirsiniz
mySprite->setPosition(Vec2(500, 0));mySprite->setRotation(40);
mySprite->setScale(2.0); // Bu metod scale değerini x ve y ile birlikte ayarlar.
mySprite->setAnchorPoint(Vec2(0.5, 0.5));
Gelin bu yazdığımız kodları görsel olarak anlamaya çalışalım;
Pozisyonunu değiştirelim; mySprite->setPosition(Vec2(500, 0));
Rotasyonunu yani açısını değiştirelim; mySprite->setRotation(40);
Scale değerini yani büyüklük ölçeğini değiştirelim; mySprite->setScale(2.0);
Tüm Node nesneleri ve tabiki Sprite nesneleri anchor point değerine sahiptir. Nedir bu anchor point peki? “anchor point” bağlantı noktası anlamına gelir. Yani Sprite ve Node nesnelerinin pozisyon değiştirme, açısını değiştirme işlemlerinde koordinat düzleminde referans alacağı noktadır diyebiliriz.
mySprite->setAnchorPoint(Vec2(0, 0));
Yukarıdaki karakter Sprite’ımızın anchor point değerlerini değiştirelim, bakalım başımıza neler gelecek!
Gördüğünüz gibi, aslında merkez noktası değişiyormuş gibi değil mi? 0,0 sağ alt köşeyi; 0.5 ,0.5 nesnenin tam orta noktasını; 1,1 nesnenin sağ üst köşesini belirliyor.
Actions
Sanırım bu kısım Cocos2d-x’in en özgün ve birçok kütüphanede göremeyeceğiniz özelliğini anlatacak. Bir Scene oluşturdunuzu ve bu Scene‘e Sprite nesnesi eklediniğinizi hayal edin. Peki bu Sprite nasıl hareket edecek, nasıl hareket sağlayacak? Hareket etmeyen ve hiçbirşey yapmayan bir Sprite nesnesi ne işimize yarayabilir?
Bildiğiniz gibi Cocos2d-x bir kod kütüphanesi ve bir visual arayüzü yok. Fakat Actions nesnesi bizim Sprite nesnesini canlandırmak için kullanacağımız position, rotation, color, opacity gibi birçok özelliği geçişli bir şekilde kolayca değiştirmek için ihtiyacımız olan bir nesnedir. Bir Sprite nesnesinin bir noktadan bir noktaya gitmesini mi istiyorsunuz? Yada sprite’ın yanıp sönmesini, renklerinin başka renge yumuşak bir şekilde geçmesini…
Actions nesnelerini, MoveBy ve MoveTo yardımcı nesnelerini anlamaya çalışalım;
auto mySprite = Sprite::create(“Blue_Front1.png“);
// Sprite nesnesini 2 saniye içerisinde bulunduğu konumdan 50 pixel sağa 10 pixel yukarı hareket ettir.
auto moveBy = MoveBy::create(2, Vec2(50,10));
mySprite->runAction(moveBy);// Sprite nesnesini 2 saniye içerisinde 50,10 spesifik pozisyonuna hareket ettir
auto moveTo = MoveTo::create(2, Vec2(50,10));
mySprite->runAction(moveTo);
Sadece bu kadar değil. Hayır, bu hazırladığınız Action‘ları sıraya sokan, yöneten, Sequence nesnesini de anlatmamız gerekir.
Sequence nesneleri ve Spawn
Sprite nesnemizi akıcı bir şekilde hareket ettirebiliyor, büyültüp küçültebiliyor, rengini değiştirebiliyor…. ve daha birçok özelliğini geçişli bir şekilde değiştirebiliyoruz. Bir oyun geliştirmek için herşeye sahibiz değil mi? Tam olarak değil.
Ben birden fazla Action nesnesini sırayla hareket ettirmek, arada istediğim saniye beklemesini ve hatta tanımladığım bazı fonksiyonları da çalıştırmasını istiyorum. Evet Sequence nesnesi tüm bunları yapabildiğimiz bir timeline gibidir. Ona Action nesneleri, fonksiyonlar, Delay yani bekleme nesnesi verirsiniz ve o sizin için bunları sırayla yapar. (Ona bazen küçük tatlı Action nesneleriyle sürprizler yapın : ))
Sequence nesnelerini kullanmak oldukça basittir;
auto mySprite = Node::create();
// 2 saniye içerisinde x:50,y:10 kordinatlarındaki noktaya hareket ettir
auto moveTo1 = MoveTo::create(2, Vec2(50,10));// Bulunduğu pozisyondan x:100,:10 kadar piksel hareket ettir.
auto moveBy1 = MoveBy::create(2, Vec2(100,10));// 2 saniye içerisinde x:150, y:10 kordinatlarındaki noktaya hareket ettir
auto moveTo2 = MoveTo::create(2, Vec2(150,10));// 1 saniye bekle-duraksa
auto delay = DelayTime::create(1);mySprite->runAction(Sequence::create(moveTo1, delay, moveBy1, delay.clone(),
moveTo2, nullptr));
Sequence satırına bakarsanız animasyon programlarında gördüğünüz timeline mantığının kod hali gibidir.
Sequence nesneleri verdiğimiz Action’ları belirlediğimiz sırayla gerçekleştirir dedik. Peki hepsini aynı anda gerçekleştirmek istiyorsam? İşte tam bu noktada Spawn nesnesi işinizi görecektir. Spawn nesneleri verdiğiniz Action nesnelerini aynı anda çalıştırır.
auto myNode = Node::create();
auto moveTo1 = MoveTo::create(2, Vec2(50,10));
auto moveBy1 = MoveBy::create(2, Vec2(100,10));
auto moveTo2 = MoveTo::create(2, Vec2(150,10));myNode->runAction(Spawn::create(moveTo1, moveBy1, moveTo2, nullptr));
Parent Child İlişkileri
Cocos2d-x parent ve child ilişkisini kullanır. Parent ebeveyn, child’ı ise çocuk olarak düşünebilirsiniz. Parent-Child ilişkisini biraz açmak gerekirse. Eğer bir Node nesnesine 2 tane sprite’ı child olarak eklerseniz; node nesnesi üzerinde yaptığınız değişiklikler ve müdahalaler içindeki çocuklara da uygulanacaktır. Bunu bir görsel bir örnekle inceleyelim;
Yukarıda gördüğünüz sağdaki Sprite soldaki Sprite’ın child nesnesidir. Aşağıdaki ise yalnız bir nesnedir. Eğer rotation değerlerini değiştirirsek yukarıdaki nesnelerin açısı beraber değişecek, aşağıdaki nesnenin açısı tek başına değişecektir.
auto myNode = Node::create();
// Açısını değiştirelim
myNode->setRotation(50);
Tıpkı rotation özelliğinde olduğu gibi parent nesnesinin scale değerini değiştirirseniz; bu child nesnesi ile birlikte uygulanacaktır.
auto myNode = Node::create();
// scale değerini değiştirelim
myNode->setScale(2.0); // scales uniformly by 2.0
Logging ve Çıktı Mesajları
Bazen geliştirme yaparken oluşabilecek hatalar, sıkıntılar yada kodunuzun debug etmek için çıktı mesajları almak istersiniz. Bunun için Cocos2d-x’de log() metodundan yararlanılır.(aslında bu işlevsel olarak printf,std:cout özelliğinin Cocos2d-x karşılığıdır)
// basit bir string
log(“Bu mesaj cıktı panelinde gozukmelidir”);// string içerisinde string değişkeni
string s = “gozukmelidir”;
log(“Bu mesaj %s”, s);// string içerisinde double değişkeni
double dd = 42;
log(“double değişkeni %f”, dd);// string icerisinde integer değişkeni
int i = 6;
log(“integer degiskeni %d”, i);// string icerisinde float değişkeni
float f = 2.0f;
log(“float degiskeni %f”, f);// string icerisinde bool degiskeni
bool b = true;
if (b == true)
log(“bool is true”);
else
log(“bool is false”);
Sonuç
Bu yazıda Cocos2d-x ile işinize yarayacak en temel kavramları öğrendiniz.Şimdi derin bir nefes alın, rahatlayın. Tabiki 1 gecede öğrenemeyeceğiniz kısımlar da olabilir. Zamanla hepsini daha iyi kavrayacaksınız. Bunun için pratiğe döküp, kendiniz ortamınızda deneyimleyip görmeniz faydalı olacaktır.
Konu başlıkları ve görseller resmi siteden alınmıştır.
COCOS2D-x TÜRKİYE 