Ara.15

ActionScript 3.0 AIR SDK ile Sanal JoyStick ile Karakteri 360° Yönlendirme ve Hareket Ettirme

JoyStick, bildiğiniz üzere başparmağınız veya komple eliniz ile sağa, sola, yukarı ve aşağı şekilde hareket ettirerek karakterinizi yönlendirmeye yarayak oyun çubuğudur. Aynı çubuğu üstten bakış açısı ile mobil oyunlarımızda ekran üzerinde kodlayabiliriz.

Sanal JoyStick Grafikleri Hazırlamak

Sanal JoyStick için bize iki adet grafik yeterli olacaktır. Bunlardan birincisi JoyStick’in alt kısmını belli eden dairesel bir grafik, diğeri de yine dairesel bir şekil olan JoyStick’in avuç içinde kalan top kısmı.

JoyStick için aşağıdaki gibi iki adet daire çizerek, grafikleri hazırlayabilirsiniz. Çizim için Tools panelinde yer alan Oval aracını kullanabilirsiniz. Dairelerden biri, diğerinden daha büyük olsun. Büyük olan altta kalacak şekilde çizimlerinizi yapın ve birer MovieClip nesnesine çevirin. Büyük olana joyStickAlt, diğerine de joyStickTop nesne ve durum adlarını verin. Birbirinden farklı renklerde çizdiğinize de dikkat edin.

Bu grafikleri üst üst gelecek şekilde hizalayın. Hizalama işlemleri için CTRL+K ile Align (Hizalama) panelini kullanabilirsiniz.

İki grafik de seçili iken tekrar bu nesneleri MovieClip’e çevirin. Bu sefer nesne ismi ve durum adı olarak joyStick adını girin.

Şimdi merkezleme işlemleri yapacağız…

Daha önceki bölümlerde hatırlayacağınız üzere MovieClip içine girip merkez noktasına referanslama yapmıştık (Deadpool örneğini hatırlayın).

Öncelikle joyStickTop MovieClip’i içine girin ver topun tam ortasına gelecek şekilde merkezi ayarlayın. Sonrasında ise joyStick MovieClip’i içinde, joyStickAlt ve joyStickTop MovieClip’lerini merkez noktasına ortalayın. Böylece joyStick’i tutup çekiştirdikçe, kendi merkez noktasında dönecektir.

Sanal JoyStick ile Trigonometrik Olarka Yön Hesabı Yapmak ve Araba Sürmek

“DVD > Konu Örnekleri > Sanal JoyStick > Araba.png” dosyasını Flash’a ekleyin, veya kendiniz bir araba çizin.

Eklediğiniz araba grafiğini araba nesne ve durum adı ile bir MovieClip’e çevirin. Araba MovieClip’ine girin ve merkez noktasını ön tekerleklerin ortasına gelecek şekilde merkezleyin. Buradaki mantık; arabadöndükçe tam ortasından değil de ön tekerleklerin merkez noktasından dönmesidir.

Şimdi kök sahneye dönün ve aşağıdaki ActionScript 3.0 kodlarını yazarak uygulamanızı test edin. Umarım trigonometri ile aranız iyidir…

var joyStickBaslangicX:Number = 0;
var joyStickBaslangicY:Number = 0;
var joyStickGerginlik:Number = .8;
var joyStickGeriEsneme:Number = .15;
var arabaHizi:Number = 0;
var joyStickTutuldumu:Boolean = false;
var aciDegeri:int;
var joyStickHarekeMesafesiRadyus:int = 40;

joyStickBaslangicX = joyStick.x;
joyStickBaslangicY = joyStick.y;

joyStick.addEventListener(MouseEvent.MOUSE_DOWN, joyStickTutuldu);
stage.addEventListener(MouseEvent.MOUSE_UP, joyStickBirakildi);
stage.addEventListener(Event.ENTER_FRAME, arabayiSur);

function joyStickTutuldu(e:MouseEvent):void{
joyStickTutuldumu = true;
}

function joyStickBirakildi(e:MouseEvent):void{
joyStickTutuldumu = false;
}

function arabayiSur(e:Event):void{
if(joyStickTutuldumu){

aciDegeri = Math.atan2(MovieClip(root).mouseY – joyStickBaslangicY, MovieClip(root).mouseX – joyStickBaslangicX) / (Math.PI/180);
joyStick.rotation = aciDegeri;
joyStick.joyStickTop.rotation = -aciDegeri;

joyStick.joyStickTop.x = joyStick.mouseX;

if(joyStick.joyStickTop.x > joyStickHarekeMesafesiRadyus){
joyStick.joyStickTop.x = joyStickHarekeMesafesiRadyus;
}

araba.rotation = aciDegeri;

araba.y += Math.sin(aciDegeri*(Math.PI/180)) * (joyStick.joyStickTop.x/8);
araba.x += Math.cos(aciDegeri*(Math.PI/180)) * (joyStick.joyStickTop.x/8);

}else{
arabaHizi = -joyStick.joyStickTop.x * joyStickGerginlik;
joyStick.joyStickTop.x += arabaHizi;
}
}

Burada farklı olarak if(){} koşullu döngüsünü görüyoruz. Diğer tüm programlama dillerinde olduğu gibi aynı mantıkla çalışmaktadır. Bir de Math sınıfına ait sinüs ve cosinus hesaplarının yapılması gösterilmiştir.

Karaktere Yürüme Alanı Sınırı Koymak

Aynı örnek üzerinden devam ediyoruz…

Kodlarımızda else{} döngüsünden sonra aşağıdaki sınırlama kodlarını ekleyin.


if(araba.y < 0){ araba.y = 0; } if(araba.y > stage.stageHeight){
araba.y = stage.stageHeight;
}
if(araba.x < 0){ araba.x = 0; } if(araba.x > stage.stageWidth){
araba.x = stage.stageWidth;
}

Bu kod yapısında, araba MovieClip’inin ekran içinden çıkıp çıkılmadığı 4 farklı yönde sürekli kontrol ediliyor. Eğer sınırlara yaklaşmışsa, direkt sınır değeri x ve y koordinatlarına atanıyor. Yani yeni artan değer eklenmiyor.

stageWidth; sahnenin genişliğini, stageHeight ise sahnenin yüksekliğini verir. Flash’ta da orijin noktası sol üst köşedir. Yani sağa ilerledikçe X değeri artar, aşağı ilerledikçe de Y değeri artar.

Bu makale, Level Yayıncılık’tan çıkmış olan Mobil Oyun Programlama ve Tasarımı kitabımdan içeriktir.
İçeriği paylaş:
  • facebook
  • twitter