Adım 5. Çarpışma (Collision)

Şimdiye kadar, topun dışarıya taşmaması için sahne içinde kalmasını yaptık ve playerPaddle nesnemizi fare ile kontrol edilebilir hale getirdik ardından topun pozisyonuna bağlı olarak aşağı yukarı hareket eden cpuPaddle nesnemizi programladık. Şimdi ise top nesnemizi paddle nesnelerimiz tarafından engelleme özelliği ekleyeceğiz.

Hit Test

Flash ile sahnedeki iki objeyi çarpıştırmak istersek bunu hitTestObject() ile yaparız. Her nesnenin etrafında görünmez sınırlayıcı kutular koyduk. Bu sınırlayıcı kutuları yani gizli dikdörtgenler nesnelerin dışarı taşmaması için kullandık. Aynı işlemleri paddle objelerimiz için yapacağız fakat top 30×30 circle bir bir obje. Ve bizde buna göre çarpışma işlemlerimizi gerçekleştireceğiz.
Yapacağımız işlem oldukça basit, gelişmiş oyunlarda  karmaşık şekiller ile nesneleri daha karmaşık çarpıştırmamız gerekebilir .Eğer gelişmiş bir oyun yapmak gibi bir planımız var ise zaten orda çarpışmalar için mükemmel çarpışma algılayıcı algoritmalar geliştirmemiz gerek. Fakat bu oyunumuzda gelişmiş bir çarpışma kodları geliştirmemize gerek yok Flash’ın bize sunduğu hitTestObject() yöntemi ile kontrol edeceğiz.

Çarpışmaları kontrol etmek için, oyunumuzda iki nesne belirtmemiz gerekir. Öncelikle top ve playerPaddle arasında kontrol edelim.

Aşağıdaki kod top ve playerPaddle arasındaki çarpışmalar idare edecek kod.

 

  
if( playerPaddle.hitTestObject(ball) == true ){
    if(ballSpeedX < 0){
        ballSpeedX *= -1;
    }
}

Yukarıdaki “if” ifadesi içinde playerPaddle ve ball nesnemizi hitTestObject yöntemi ile erişip çarpışmalarını sağlıyoruz. HitTestObject nesnelerin sınırlayıcı kutuları var mı yok mu kontrolünü yapacaktır yani çarpıma durumunda “true” dönecektir, ve kod çalışacaktır. Eğer çarpışma yoksa,”false” döner ve hiçbir şey olmaz.

Eğer kodunuzu çalıştırırsanız değişikliği göreceksiniz ve çarpışmayı fark edeceksiniz.

Şimdi ise aynı kodu kopyalayıp “cpuPaddle” için aynı işlemleri yapacağız.

  
if( playerPaddle.hitTestObject(ball) == true ){
    if(ballSpeedX < 0){       
       ballSpeedX *= -1;   
  }  
 } else if(cpuPaddle.hitTestObject(ball) == true ){     
         if(ballSpeedX > 0){
            ballSpeedX *= -1;
    }
 
}

Yukarıdaki kod hem soldaki “playerPaddle” ve sağ taraftaki “cpuPaddle” nesnemiz için çarpışma (collision) kontrolleridir. Böylelikle çarpışma işlemimiz tamamlanmış oldu fakat son bir ekleme daha yapacağız.

Bu oyuna beceri ve bazı düzey eklemek için mümkün cpuPaddle nesnemizin kaybetmesi için, biz topun açısını player Paddle ile çarpışmasına göre değiştireceğiz, sadece bir fonksiyon ekleyerek bunu halledeceğiz.

  
function calculateBallAngle(paddleY:Number, ballY:Number):Number
{
    var ySpeed:Number = 5 * ( (ballY-paddleY) / 25 );
    // (ballY-paddleY) 
 
    return ySpeed;
}

Bu fonksiyonuda ekledikten sonra kodumuzun son hali aşağıdaki gibidir.

  
if( playerPaddle.hitTestObject(ball) == true ){
    if(ballSpeedX < 0){
        ballSpeedX *= -1;
        ballSpeedY = calculateBallAngle(playerPaddle.y, ball.y);
    }
 
} else if(cpuPaddle.hitTestObject(ball) == true ){
    if(ballSpeedX > 0){
        ballSpeedX *= -1;
        ballSpeedY = calculateBallAngle(cpuPaddle.y, ball.y); 
    }
 
}
Sorry, either Adobe flash is not installed or you do not have it enabled

Pong oyunumuzun 4. adımına geldik  1. , 2. ve 3. adımları okuyup uyguladıktan sonra 4.adımdan devam edebilirsiniz.

Adım 4: Bilgisayar tarafından “cpuPaddle”  kontrolü.

Bu bölüm bence son derece öğretici ve oldukça kısa ve oldukça önemli, Çünkü oyun programlamanın en önemli konularından birisini işleyeceğiz. AI (Artificial Intelligence) Yapay Zeka konusu.

Yapay Zeka

Bilgisayar tarafından bir şeyler kontrol etmek ve belirli koşullara bağlı olarak  herhangi bir zaman içinde belirli eylemleri yaptırmak için yapay zekaya başvurmamız gerekir. Yani (Artificial Intelligence) Yapay Zeka. Burada kullanacağımız yöntem oldukça basit ve temel.

Biz bir önceki adımda topu engellemek için Paddle nesnemizi Mouse hareketine bağlı olarak aşağı ve yukarı hareket ettirdik .Şimdi ise “cpuPaddle” nesnemizi yukarı aşağı hareket ettirerek sürekli olarak  ball.y ekseninde top nesnemizi engellemeye çalışacaktır. Peki normal bir oyuncu gibi nasıl bazen başarılı ve diğer zamanlarda ise başarısız yapabiliriz, Yani normal bir oyuncu gibi nasıl hareket ettireceğiz?

Bu anlamanın en iyi yolu sadece normal bir oyuncu hangi durumda nasıl tepki vereceğini bakmak, ve player nesnemize yazdığımız hemen hemen aynı kod ile yapacağız.

Sürekli topu izleyecek. paddle nesnemizin altında ise , paddle nesnemizi aşağıya hareket edecek. Yukarıda ise, onu yukarı taşıyacağız. Ancak yenilmez bir pong oyuncusu olmaması gerek yani yenilmez olmasını durdurmak için, her zaman topu yakalaması olmaz, maksimum hareket hızını cpuPaddle verecektir. Yapay zeka için basit bir adım olacak fakat buna ihtiyacımız var.

Yeni bir değişken tanımlayacağız “cpuPaddleSpeed” adında ve kodlarımızın en üst kısmına veya istediğiniz bir yerde tanımlayabilirsiniz.

   var cpuPaddleSpeed:int = 3;

Hemen ardından aşağıdaki kodu game loop yani oyun döngümüze ekleyin.

  if(cpuPaddle.y < ball.y - 10){     
cpuPaddle.y += cpuPaddleSpeed; } 
else if(cpuPaddle.y > ball.y + 10){
    cpuPaddle.y -= cpuPaddleSpeed;
}

Bu kod cpuPaddle nesnemizi hareket ettirecektir. Paddle y pozisyonu 10 piksel’den fazla ise veya altında ise bu cpuPaddleSpeed değişkeni ile eşit bir hız ile hangi yöne ihtiyacı var ise hareket edecektir.

Sorry, either Adobe flash is not installed or you do not have it enabled

 

Bir sonraki adımda (collision) yani çarpışmaları programlayacağız. Ve bir takım değişiklikler ile cpuPaddle nesnemizi sabit hızdan ve topu aramasından kurtaracağız.

Pong oyunumuzun 3. kısımındayız. Bu kısma başlamadan önce 1. ve 2. kısmı okuyabilirsiniz.

Adım 3: Sol tarafta bulunan Paddle nesnemizin kontrolünü programlayacağız.

Oyunumuzun 2. kısmında top nesnemizi sahnemiz sınırları içinde hareketlerini tamamlamıştık şimdi ise sol tarafta bulunan “playerPaddle” adındaki nesnemizi mouseY  = yani mouse hareketinin y eksenine bağlayacağız.

 

  • mouseY  y – konumunda olması gerek
  • Sahnemizin sınırları içinde kalması gerek
  • Ve son olarak da içinden geçen topu engelleyeceğiz

Oldukça kolay bir kısım olacak bu bölüm

loop() fonksiyonumuza küçük bir satır ekleyeceğiz nerde olması önemli değil fakat en üst kısma değişkenlerin oraya eklerseniz bir düzen içerisinde olacaktır.

   playerPaddle.y = mouseY;

Üstteki kod nesnemizi mouse hareketimizin y ekseninde bağlayıp hareket etmesini sağlamaktadır.

Eğer, nesnemiz oyun ekranının dışına taşıyorsa Düzeltmek için, biz top nesnemizde enzer bir kod parçası yazmıştık şimdi ise ona benzer bir kod parçası ekleyeceğiz.Aşağıdaki kod parçasını kodlarımıza ekleyerek devam ediyoruz.

   //paddle ekranın üst tarafında olup olmadığını kontrol ediyoruz
if(playerPaddle.y - playerPaddle.height/2 < 0){     
 playerPaddle.y = playerPaddle.height/2;  
 //paddle ekranın alt tarafında olup olmadığını kontrol ediyoruz } else if(playerPaddle.y + playerPaddle.height/2 > stage.stageHeight){
     playerPaddle.y = stage.stageHeight - playerPaddle.height/2;
}

Artık sahne dışına taşmayacak.
Sorry, either Adobe flash is not installed or you do not have it enabled

 

Bu yazının gerçekten kısa ve basit olduğunu biliyorum, Bir sonraki adımda ama top (ball) ve “cpuPaddle”  ile çarpışmaları (collision) programlayacağız.

Pong oyunumuzun 2. kısmındayız

Adım 2 : Basit oyun döngüsü ve “Ball” hareketlerini programlamak

Öncelikle, oyunumuzda 2 adet Paddle nesnemiz için her birine farklı Instance name vermemiz gerekir nesnelere erişebilmemiz için. Soldaki  Paddle nesnemizin ismini “playerPaddle” olarak yazıyoruz, sağdaki ise “cpuPaddle” ismini veriyoruz ve kayıt ediyoruz.

Tamamdır, şimdi ActionScript panelini açıyoruz (Window -> Actions) kullanarak paneli açabiliriz. Burada yazdığımız kodlar artık derlenebilecek durumda.

Kodları yazmaya başlayabiliriz.

Oyun programlamaya başlamadan önce yapmamız gereken kafamızın içinde oyun mekaniği ile  planlama yapmayı şiddetle öneriyorum. Bu oyun için ben 3 ana mekanik belirledim aşağıdaki gibi fakat programlamaya devam ederken ufak değişiklikler olabilir.

  • Topu sabit bir oranda hareket etmelidir ve Top ise(ball) Paddle ve duvarlara çarparak devam etmesi gerekir.
  • PlayerPaddle nesnemizi yukarı ve aşağı hareket ettirmemiz gerek  bu kontrolü klavye veya mouse hareketleriyle yapacağız biz mouse ile yukarı ve aşağı yapacağız.
  • CpuPaddle ise topu engellemek için otomatik olarak yukarı ve aşağıya oynayacak.

Main game loop – yani bir update fonksiyonuna ihtiyacımız var her defasında oyunu güncel ve ayakta tutması için diyebilirim.

 

init(); // bu fonksiyonu bir kere çağıracağız ve oyunumuz çalışacak.
 
function init():void
{
    stage.addEventListener(Event.ENTER_FRAME, loop); //Saniyede 60 kez oynayacak 
}
 
function loop(e:Event):void
{
 
}

Çok basit, init ettiğimiz yerde kodumuz tekrar tekrar çalışacak

Top: Oyun mekianiği ile başlayalım. Bu kod hareket yapacaktır.

var ballSpeedX:int = -3; //sağ ve sol hız değişkeni
var ballSpeedY:int = -2; //Yukarı ve aşağı hareketi için olacak hız (negative = up)
 
init();
 
function init():void
{
    stage.addEventListener(Event.ENTER_FRAME, loop);
}
 
function loop(e:Event):void
{
    ball.x += ballSpeedX; //her karede, "ball" nesnesine ballSpeedX ekliyoruz.
    ball.y += ballSpeedY; //aynı şekilde y ekseninede ballSpeedY ekliyoruz.
}

Şimdi oyunu derleyebiliriz (Control -> Test Movie) diyerek derleyebiliriz. Top nesnemizi köşede göreceksiniz.

Bu bir gelişme, Ama biz ekranda sabit kalmasını istemiyoruz. Duvarlara çarparak sahnede hareket ettirmek için aşağıdaki kodları ekleyin.

var ballSpeedX:int = -3;
var ballSpeedY:int = -2;
 
init();
 
function init():void
{
    stage.addEventListener(Event.ENTER_FRAME, loop);
}
 
function loop(e:Event):void
{
    ball.x += ballSpeedX;
    ball.y += ballSpeedY;
 
    //topun pozisyonu onun CENTER olduğu ile ölçülür çünkü.
   //Duvara vurup vurmadığını anlamak için genişlik ve yüksekliğin yarısnı çıkarmak gerek.
 
    //Sol ve Sağ kontrolleri
    if(ball.x <= ball.width/2){ //topun sol tarafa x konumu ekranın sol tarafına eşit veya küçük mü olup olmadığını kontrol ediyoruz.        
        ball.x = ball.width/2; //o zaman zaten ekran kapalı sonrasında topun x konumunu ayarlıyoruz.         
       ballSpeedX *= -1; //ve sağ yerine sola hareket yapacak, -1 ile topun hızını x ile çarpıyoruz.       } else if(ball.x >= stage.stageWidth-ball.width/2){ //Topun sağ sınırı 550 olacak

        ball.x = stage.stageWidth-ball.width/2; //burda yeniden konumlandırıyoruz
        ballSpeedX *= -1; // (sol tarafa hareket edecek, sağ tarafa değil)
 
    }
 
    //Şimdi sahnenin üst ve alt hareketleri için hemen hemen aynı kodları yazıyoruz.
    if(ball.y <= ball.height/2){ //Eğer top sahnenin y ekseninden küçük veya eşitese      
       ball.y = ball.height/2; //y'nin değeri        
       ballSpeedY *= -1; //şimdi aşağı yerine yukarı gidiyor, böylece y hızını ters çeviriyoruz.       } else if(ball.y >= stage.stageHeight-ball.height/2){ //Eğer top büyük eşitse 

        ball.y = stage.stageHeight-ball.height/2; //yeni pozisyonu
        ballSpeedY *= -1; //şimdi yukarı hareket ediyor, böylece y hızını ters çeviriyoruz.
 
    }
}

Gerçekten çok karmaşık değil, fakat neler olduğunu anlamak için kodlara yorum yazmam gerekiyodu. Ekranın sağ tarafında x değerini bulmak için sahneye stageWidth özelliği kullandık ve aynı şekilde ekranın alt tarafı için y değerini bulmak için stageHeight özelliği kullandık. Topun pozisyonu ekranın belirli bir tarafında her zamankinden daha büyük veya daha az ise, hızı ters çevirdik ve duvarda çarparak sıçrama işlemini yapacak.

Sorry, either Adobe flash is not installed or you do not have it enabled

 

Adım 3’de görüşmek dileğiyle.

1972 yılında Atari Pong sürümü ile video oyun endüstrisine öncülük etmiştir. Eğer klasik oyunlar düşünüyorsanız, Pong listenin  hemen hemen her zamanen üstündedir. Yani Flash ile yapacağınız oyunlar arasında Pong oyun örneği listenizde olmalıdır. Bu blog yazımda, baştan sona tam bir Pong oyunu yapacağız.

Bu oyun örneğimde yeni başlayanlar ve oyun geliştirmek isteyenler için tasarladım OOP ile yazmadım direk Flash içine kodlarımızı yazacağız.

Oyunumuzun son hali aşağıdaki gibidir. Biz sahne ayarlamalarımızı 550,400 yapacağız fakat burdaki SWF küçük boyutta gözükmektedir.

Sorry, either Adobe flash is not installed or you do not have it enabled

Birinci Adım: Flash projesini kurmak ve oyun nesnelerini oluşturmak.

Yapılacak ilk şey, Flash ile yeni bir proje  oluşturun ve ismini “Pong” verin. Bir klasör oluşturup içine kayıt edebilirsiniz böylelikle daha düzenli olacaktır.

Şimdi ise Properties panelinden genişlik ve yükseklik değerlerini 550, 400 ayarlayın.

Properties

Oyunun boyutlarını, FPS  ve arka plan rengini bu panelden değiştirebilirsiniz. Burada  3 önemli kural var. Proje boyutu 550px, 400px olduğundan emin olun fakat bu ayar Flash ile varsayılan ayar olarak geliyor. Hemen ardından arka plan rengini siyah olarak ayarlayın. Biz siyah arka plan üzerine beyaz oyun nesneleri kullanacağız. Sonrasında FPS değerini 60 olarak ayarlayın (kare- saniye başına hız). 30 FPS değeri oldukça standart fakat 60 FPS hızı oldukça iyi hızlı ve gercekçi.

Document-properties

Projemizin kurulum ayarları bitti, Şimdi ise Pong oyunu için gereken 3 adet nesne var iki çubuk ve bir top. Öncelikle topumuzu yapalım. Daire aracını kullanarak, beyaz, 10 x 10 piksel daire oluşturmak. Tools panelinden oval çizin ve properties panelinden genişlik ve yükseklik değerlerini 10×10 yapın.

ponk-ball

Şimdi ise nesnemizi seçelim ve üst menülerden Modfy -> Convert To Symbol diyerek İsmini “Ball” ismini vererek MovieClip yapalım.Dikkat etmemiz gerekn bir nokta var hemen yanda Grid yapısında Registration Point  tam ortası olması gerek dolayısıyla sizlerde ortasını seçerek kayıt edebilirsiniz.

Ball Movieclip

Hemen ardından iki adet  “Paddle” adında dikdörtgen oluşturun. Ve yukarıdaki adımları aynı şekilde yaparak MovieClip yapabilirsiniz ismi “Paddle” olacak şekilde.

Boyutları 50×10 piksel bir Rectangle tool ile dikdörtgen oluşturabilirsiniz. Hemen altta da görüldüğü gibi Registration Point ortası olarak ayarlayın.

Paddle Pong

Paddle-document

 

 

 

 

 

 

 

Hepsi bu kadar :)  Şimdi yapmamız gereken tüm oyun parçaları sahnede olması gerek bunun için Library paneline gidin ve ana sahneye iki adet Paddle  ve 1 adet Ball adındaki nesnemizide sahneye sürükleyerek bırakın. Birinci Paddle konumu
(20, 200) diğer Paddle konumu ise, (530, 200), top ise (275, 200) olacak şekilde ayarlayabilirsiniz.

Scene Pong

Ve oyunumuzun ayarlamalarını oluşturduğumuz birinci adım bitti. Adım ikide görüşmek üzere.

Facebook’ta bir uygulamayı veya oyunu geliştirmek ve dağıtmak, arkadaşlar, fotoğraflar ve diğer bilgileri hakkında ayrıntılı bilgi almak için Facebook API ile çalışmak gerekir. Facebook Graph API üzerinden bu görevleri gerçekleştirmek için kullanabileceğiniz birkaç resmi SDK bulunmaktadır. Bu yazımda actionscript 3.0 ile javascript SDK kullanarak detaylara değineceğim.

Başlarken öncelikle bu üç Facebook JavaScript API çağırmamız gerekli.

  • FB.init – Facebook API’yi init etmek
  • FB.login – Login with facebook (Facebook ile giriş yapmak)
  • FB.api – Facebook Graph API’yi çağırmak

ActionScript ile “flash.external.ExternalInterface” kullanarak  JavaScript fonksiyonlarını çağırabiliriz. Yani flash içerisinden bu komut ile istediğiniz javascrript API’ye erişebilir ve kullanabilirsiniz. Bizde Facebook Graph API için javascript SDK kullanırken dışarıdaki javascript komutlara bu şekilde erişebileceğiz.

facebookAPI

 

Test etmek için aşağıdaki adımları tamamlamanız gerekmektedir.

  • Flash ve JavaScript arasındaki iletişimi kurmak
  • Flash uygulaması için sunucu kurmak
  • Yeni bir Facebook uygulaması oluşturmak
  • Facebook JavaScript SDK
  • Bazı veriler için facebook ile giriş yapmak

1- Flash ve JavaScript arasındaki iletişimi kurmak

Flash runtime da Facebook JavaScript SDK  kullanmak  için, öncelikle ExternalInterface kullanarak iki katman arasındaki iletişimi kurmak gerekir.

Ana ActionScript 3 sınıfında  bu üç işlevi ekleyin ve init() fonksiyonunu çağırın.

private function init():void{
ExternalInterface.addCallback("myFlashcall",myFlashcall);
stage.addEventListener(MouseEvent.CLICK, onClick);
}
private function myFlashcall(str:String):void{
trace("myFlashcall: "+str);
}
protected function onClick(event:MouseEvent):void{
if(ExternalInterface.available){

trace("onClick");
ExternalInterface.call("myFBcall");
}
}

2- (Flash Builder kullanıyorsanız, index.template.html oluşturduktan sonra )  HTML dökümanıda  bulunan <head> tagi içine aşağıdaki kodları ekleyin.

  function myFBcall(){
      alert("test");
      document.getElementById("NAME_OF_YOUR_FLASH_ELEMENT").myFlashcall(“test string”);
   }
</script>

Ana sınıfı gerçek bir proje adıyla değiştirmek isterseniz  NAME_OF_YOUR_FLASH_ELEMENT isminin yerine değiştirebilirsiniz. Ben “FacebookDemo” ismini kullanacağım.

3- Uygulamayı çalıştırın. Flash içeriğinin içinde sahnede bir yere tıklarsanız, bir JavaScript çağrılır ve bir alert ekranda gözükecektir.

 

2- Flash uygulaması için geliştirme sunucusu kurmak

Online uygulama geliştirmek veya localhost sunucusu kurabilirsiniz. Ben geliştirme ortamı için localhost kullanmayı tercih ettim. Mac OS X üzerinde siz de MAMP sunucusu kullanabilirsiniz, veya Windows üzerinde WAMP sunucusu kullanabilirsiniz.

MAMP sunucu portum 8888 /Applications/MAMP/htdocs.

  1. Htdocs klasörü içiner fbdemo klasörü ekleyin.
  2. Gelişim sürecini kolaylaştırmak için, Flash Builder htdocs / fbdemo klasör ve çalışma (debug) sunucu üzerinde uygulamayı derlemek için yapılandırma ayarlamalarını düzenleyin.

Screenshot 2014-11-23 13.01.04

 

3- Sunucunuzda çalıştığından emin olun

3- Yeni bir Facebook App oluşturun

Bir sonraki adım, bir Facebook uygulaması oluşturmaktır.

  1. https://developers.facebook.com/apps/ gidin ve Yeni App Oluştur’u tıklatın. (Create New App)
  2. Uygulama (App) Domain için, localhost yazın.
  3. Site URL kısmına http://localhost:8888/fbdemo yazın
  4. Bir sonraki adımda unutmamanız gereken API Key ve API

Screenshot 2014-11-23 13.19.20

 

 

Facebook JavaScript SDK ile ilgili detaylar için,
https://developers.facebook.com/docs/reference/javascript/ adresinden bakabilirsiniz.

SDK başlatmak için, HTML <head> tagi içinde aşağıdaki kodu dahil edin  ve önceki adımda olan App ID ile YOUR_APP_ID bilgilerini değiştirin. (Flash Builder kullanıyorsanız, bu kod index.template.html ekleyin.)

window.fbAsyncInit = function() {

FB.init({
appId : 'YOUR_APP_ID',
channelUrl : 'www.YOUR_DOMAIN.COM/channel.html',
status : true,
cookie : true,
xfbml : true
});
};
(function(d, debug){

var js, id = 'facebook-jssdk', ref = d.getElementsByTagName('script')[0];
if (d.getElementById(id)) {return;}
js = d.createElement('script'); js.id = id; js.async = true;
js.src = "//connect.facebook.net/en_US/all" + (debug ? "/debug" : "") + ".js";
ref.parentNode.insertBefore(js, ref);
}(document, /*debug*/ false));
</script>

2- Sonraki adım ise <body> tagi içine fb-root divi ekleyin.

<div id="fb-root"></div>

5. Facebook ile giriş ve bazı veriler almak

Artık Facebook ile giriş yaparak ve API’yi kullanarak verileri alabilirsiniz.

MyFBcall fonksiyonunu düzenleyin ve aşağıdaki kod ile içeriğini değiştirin. Bu kod, facebook ile giriş yaparken size adınızı getirir ve bir alert görürsünüz ve daha sonra Flash runtime’a geri göndereceğiz.

function myFBcall(){
     FB.login(function(response) {
      if (response.authResponse) {
       console.log('Bilgilerinize hoşgeldiniz.... ');
       FB.api('/me', function(response) {
       alert('Your name is ' + response.name);
        document.getElementById("FacebookDemo").myFlashcall(response.name); }); 
     } else { 
      console.log('Kullanıcı girişi iptal.');
    }
     });
       }

Artık Flash facebook arasında temel bir bağlantı kurdunuz.

Yukarıdaki kod FB.login fonksiyonunu çağırır ve gerçek authResponse durumunu denetleyen bir anonim fonksiyon geri çağırır (callback). Daha sonra Facebook Graph API çağrıları ise FB.api fonksiyonunu çağırır. Geçerli kullanıcı hakkında bilgi almak için, sadece bir ‘/me’ parametresi yeterli olacaktır.

Eğer giriş yaptıktan sonra, sadece FB.login gerek kalmadan tek başına FB.api (“command”) çağırabilirsiniz; Örneğin:

function getProfilePicture(){
FB.api("/me/picture", function(response) {
// DO SOMETHING
});
}

Şu anda giriş yaptığınızdan emin olduğunuzu doğrulamak için, FB.getLoginStatus çağırabilirsiniz.

Daha fazla bilgi için Facebook geliştirici sitesinden yardım alabilirsiniz.

Bu Blog postumla beraber bir sonraki blog postum ActionScript ile trigonometri örnekleri anlatmayı düşünüyorum.

Öncelikle Trigonometri nedir, Açı nedir, Radyan ve Derece nedir gibi genel bir giriş yaptıktan sonra uygulama örneklerine geçmeyi düşünüyorum.

Trigonometri

Adından da anlaşılacağı gibi temel olarak üçgen ve üçgenlerin kenarları ile olan ilişkilerini inceleyen bir matematik dalıdır. Bildiğiniz gibi üçgenlerin üç kenarı ve üç açısı bulunmaktadır.

Açılar

Trigonometrinin temeli açılardır diyebiliriz. Açı iki düz çizginin birleşmesi sonucu çizgiler arasında meydana gelen boşluktur. Aşağıdaki şekillerde de görüldüğü gibi iki çizginin birleşmesi ile çizgiler arasında 4 tane farklı açı oluşur. Trigonometride genellikle açıya rotasyon gözüyle de bakılır.

Açı; başlangıç noktaları aynı olan iki ışının aralarında oluşan boşluktur. Bu boşluk büyüdükçe açının derecesi de büyüyecektir.

IMG_6453

Radyan ve Derece 

Radyan ve Dereceden önce dairenin ne olduğunu bilmemiz gereklidir. Daire için “düzlem üzerinde merkez noktadan çevresine eşit mesafede olan belirli bir takım noktalardır” diyebiliriz. Bizim öğrendiğimiz ve bildiğimiz şekli ise basit bir çemberdir. Radyan ve Dereceler ise bu daire üzerindeki açıları ölçmemiz için kullanılan araçlardır. Bir daire 360 derecedir ve bu 360 derecenin her bir parçası 1 dereceye eşittir. Radyan ise 57.2958 derecedir. Biraz daha genişletirsek bir daire yani 360 derece 6.2832 radyandır. PI sayısı ise değer olarak 3.1416’dır. Bu değer yarım daireye eşittir, yani 180 derece. 2PI ise tam bir daireye eşittir 360 derece yani 6.2832 radyandır. Aslında bu değerlerin tamamını bilmemize gerek yok ama ne olduklarını ne anlama geldiklerini bilirsek yazdığımız kodlarıda rahatlıkla yazabilir, çözebilir ve ne yazdığımızı rahatlıkla anlayabiliriz.

IMG_6454

Açılardaki son değineceğim konu ise ActionScript’in açı anlayışı. ActionScript açı ölçümlerinde dereceler ile çalışmaz; dereceler yerine radyanlar ile çalışır. Bu yüzden değerlerin derece değil de radyan olarak verilmesi gerekir. Peki radyan ve derecelerin birbirine nasıl dönüştürüldüğünü öğrenmemiz gerek. Dönüşümler için PI sayısını kullanmamız gerek.

radyan = derece * Math.PI / 180;

derece = radyan  * 180 / Math.PI;

Şimdi ilk olarak 100 dereceyi radyana dönüştürelim. Daha sonra da çıkan sonucu tekrar dereceye dönüştürelim

trace(100 * Math.PI / 180);    // Sonuç  1.7453292519943295

trace(1.7453292519943295 * 180 / Math.PI);  // Sonuç 100

Son konularımız ise Üçgen , Sinüs ve Kosinüs bu konular hakkında da özet bilgiler verdikten sonra örnekler yapmaya başlayacağız.

Üçgen

Üçgen geometride kullanılan temel şekillerden biridir. Bizim kullanacağımız genellikle dik üçgen olacakatır. Dik üçgende açı ölçüsü 90 derece olan köşenin karşısındaki kenar hipotenüstür. Hipotenüs her zaman diğer iki kenarda daha uzundur.

Dairesel Hareket Sinüs ve Kosinüs

Bir dik açının sinüsü karşı kenarın hipotenüse oranıdır. Kosinüs ise komşu kenarın hipotenüse oranıdır. Formüle etmek gerekirse

IMG_6455 2

Ufak bir girişten sonra uygulamalarla daha iyi anlaşılacağını düşünüyorum.

Socket bağlantıları belirlenen bir port numarası üzerinden sunucuya bilgi yollamak ve almak için kullanılır. Tabi bu sistem normal dosya gönderme ve alma sistemleri gibi çalışmaz. Aradaki en büyük normal bağlantıları istenilen bilgiyi aldıktan sonra bağlantıyı kapatırlar. Socket bağlantılarında ise veri alışverişinden sonra bağlantı kopartılmaz. Bu bağlantılar ya sunucu tarafındaki iletişimin kesilmesi ya da Flash Player tarafından bağlantının kesilmesi harici sürekli olarak açık kalır.

Socket bağlantılarının genel kullanımları ise online oyun sistemlerinde, chat programlama, real-time mesajlaşma , çoklu kullanıcı veri paylaşımına kadar birçok alanı kapsar.

ActionScript içerisinde iki çeşit socket bağlantısı vardır, XML Socket ve Binary Socket fakat ben bu yazıda XML Socket ile bağlantı kurup detaylarını anlatacağım.

Öncelikle XML Socket Nedir ve Nasıl Bağlantı Kurulur?

XML Socket belirlenen bir sunucuya bağlanarak sunucu ile alış verişinde bulunur. Bu veri alışverişini XML dökümanını kullanarak yapar. Kullanıcı herhangi bir şekilde veri isteğinde bulunmadığı  halde bile sunucu tarafında herhangi bir değişiklik olduğunda sunucu veriyi otomatik olarak yollar. Örneğin en basit anlık mesajlaşmada 2 kullanıcıdan biri mesajın gelmesi için hiç bir hamlede bulunmasına gerek yok. Sunucu bunu otomatik olarak açık olan bağlantı ile kullanıcıya mesajı yollar. XML Socket ile sunucuya bağlanmamız için ilk olarak sunucu adresine ve bağlanılacak port numarasına ihtiyacımız var. Sunucu adresi (domain adı.com) ya da ip adresi olabilir (127.0.0.1). Port numarası ise sunucu üzerinden bağlanacak olan port numarasıdır. Bağlanılacak olan port numarası güvenlik ve sınırlamalar nedeni ile 1024’den aşağı olmamalıdır. Güvenlik konularına şimdilik girmek istemiyorum :)

XMLSocket objesi çok karmaşık olmayıp ve bir kaç metot ve özelliği vardır. Aşağıda bulunan XMLSocket kod örneklerini inceleyebilir ve bilgisayarınızda ip yerine “localhost” yazarak test edebilirsiniz. Socket tarafını Nodejs ile yazmayı tercih ettim tabiki büyük projelerde Java gibi güçlü diller ile yazabilirsiniz.

Öncelikle Flash programını açarak SocketExample.fla olarak kayıt ettikten sonra

Eklemeniz gereken butonlar ve yazı alanları var.

Components panelinden ekleyerek

textarea – output_txt (instance name)
textinput – input_txt (instance name)
buton (send) – send_btn (instance name)
buton (disconnect) – disconnect_btn (instance name)

a

 

 

 

 

 

 

 

 

 

 


//XMLSocket objesi var xmlSocket: XMLSocket = new XMLSocket(); // Sunucu adı ve port numarası (ip adresi yerine localhost yazarak localinizde test edebilirsiniz) xmlSocket.connect(“localhost”, 7000); // Gelen veriyi almak için bir event tanımlıyoruz tetiklenmesi için fonksiyon ekliyoruz. xmlSocket.addEventListener(DataEvent.DATA, onIncomingData); //Veri yollamak için buton eventi ve fonksiyonu send_btn.addEventListener(MouseEvent.CLICK, clickHandler); //Bağlantıyı kopartmak için disconnect_btn.addEventListener(MouseEvent.CLICK, disconnectHandler); function clickHandler(event: MouseEvent): void { xmlSocket.send(input_txt.text); input_txt.text = “”; } function disconnectHandler(event: MouseEvent): void { xmlSocket.close(); send_btn.enabled = false; } function onIncomingData(event: DataEvent): void { trace(“[” + event.type + “] ” + event.data); output_txt.text += event.data + “\n”; output_txt.verticalScrollPosition = output_txt.maxVerticalScrollPosition; }

Şimdi ise NodeJs ile Socket için gereken kodlar.

Nodejs ile web server, modüller gibi temel bilgileri�
http://bit.ly/1s1ABWB ve
http://bit.ly/1shdftA adreslerinden inceleyebilirsiniz.


Dökümanınızın ismi tcp_server.js olarak kaydedin

var net = require(“net”), //net modülü entegre ediyoruz sys = require(‘sys’); //sys modülü

var server = net.createServer(function(stream) { stream.setEncoding(“utf8″); stream.on(“connect”, function() { stream.write(“hello\0″); sys.puts(sys.inspect(stream, false)); }); stream.on(“data”, function(data) { stream.write(data + “\0″); }); stream.on(“end”, function() { stream.end(); }); }); server.listen(7000, “localhost”);

Her şey hazır oldukran sonra terminalinize gidip node tcp_server.js diyerek socketi ayağa kaldırdıktan sonra flash’da cmd+enter diyerek swf’den text alanına yazı yazarak send butonuna basın ve Output panelinden gelen datayı görebilirsiniz.

gamuaStarling, Flash player 11 ile gelmiş olup oyun geliştirmek için tasarlanmıştır zengin partikül efektleri yapabileceğiniz ve Stage3D API’si üstüne geliştirilen ActionScript 3.0 2D Framework ve oyun motorudur. AIR ve Desktop içinde kullanılabilir. Görsel çizimini flash display üstlendiğinde 20fps’ye kadar düşen performans, Starling ile 60fps’ye yükselmektedir. Bunun en büyük nedeni hardware ve software render farkıdır.

Performanslı olması açısında CPU yerine GPU kullanmaktadır yeni nesil bilgisayarların GPU ( Graphichs Processing Unit ) performansı oldukça güçlüdür.

Starling 2D oyun geliştirmek, özellikle de ActionScript 3.0 geliştiricileri için tasarlanmıştır. Starling, hafif, esnek ve kullanımı kolay olduğundan, aynı zamanda UI programlama gibi diğer proje ihtiyaçları için de kullanılabilir. Temel ActionScript 3.0 bilgisi gerekmektedir. Starling mümkün olduğunca kolay olacak şekilde tasarlanmıştır, böylece herhangi bir Java veya .Net geliştiricisi hemen kullanmaya başlayabilir.

Starling bir çok yönden hafif bir framework olduğunu söylemiştim. Sınıfların boyutu (kod 80 KB) sınırlıdır.
Starling ücretsiz ve açık kayanaktır. BSD lisanslı, bu yüzden ticari uygulamalarda özgürce kullanabilirsiniz. Üzerinde her gün çalışılmakta ve geliştirilmeye devam edilmektedir.

Perde arkasında, Starling kullandığı Stage3D API’leri-mobil cihazlarda masaüstü ve OpenGL ES2 üzerinede OpenGL ve DirectX üstünde çalışan düşük seviyeli GPU API’leri vardır.

 

Yani Starling ActionScript 3.0 ile geliştirlen Flash Player ve AIR tabanlı 2D oyun geliştirme framework’üdür.

Teknik olarak
// Texture objesi oluşturuyoruz.
var texture: Texture = Texture.fromBitmap (new embeddedBitmap ());

// Görüntü nesnesi oluşturuyoruz.
var image: Image = new Image (texture);

// Özelliklerini ayarlıyoruz
image.pivotX = 50;
image.pivotY = 50;
image.x = 300;
image.y = 150;
image.rotation = Math.PI / 4;

// Ekrana addChild ile alıyoruz
addChild (image);

AS3 API

  • flash.events.EventDispatcher
  • flash.events.Events
  • flash.display.DisplayObject
  • flash.siplay.Sprite
  • flash.display.Stage

 Starling API

  • starling.events.EventDispatcher
  • starling.events.Event
  • starling.display.DisplayObject
  • starling.display.Sprite
  • starling.display.Stage
  • starling.events.Event.ADDED_TO_STAGE
  • starling.eventsEvent.ENTER_FRAME
  • starling.events.Event.RESIZE
  • starling.events.Event.REMOVE

Browser, Desktop, Android, İOS desteğinin yanında Stage3d altyapısına sahip 3d kütüphaneler ile ortak kullanım şansı da tanıyor .http://gamua.com/starling/ sitesine bakıldığında 200den fazla oyun görülmekte. Andorid ve İOS platformu üzerine yazılan oyunlara bakıldığında İOS bir hayli önde.

Kısa giriş niteliğinde olan bu yazımı önümüzdeki günlerde örneklendireceğim.

– http://gamua.com/starling/