Brick Breakers Oyunu Yapımı

1. Bölüm:

Merhaba,

Bu eğitim ile bir kaç bölümde brick breakers oyunu yapmaya çalışacağız.Elimden geldiğince açıklayıcı sade bir dille yazmaya çalışacağım…

Öncelikle sahnemizi yani arkaplanımızı siyah yapalım basitçe güzel bir görüntü oluşturmak için.Çalışmamızın frame rate değerini 24 yapalım.Daha sonra bizim kullanacağımız engeli çizerek MovieClip’e çevirelim.Ben 55×10 boyutlarında çizdim ;



Engelimizin instance name ismini “mcEngel” olarak verelim.Instance name verirken küçük büyük harflere dikkat etmelisiniz.

Şimdi biraz kod yazalım ”kodlar” isimli bir layer oluşturun.Ve aşağıdaki kodları yazın ;

//Öncelikle bir ana fonksiyon oluşturacağız.
//Bu fonksiyon oyunumuzu başlatmak için kullanılacak.
//Gerekli olan şeyleri buradan başlatacağız.
function baslat():void
{
//Engel'imizin mouse'u sürekli takip etmesi için
//Enter Frame olayını kullanacağız.
mcEngel.addEventListener(Event.ENTER_FRAME,hareketEngel);
}

function hareketEngel(evt:Event):void
{
//Engel'in x değerini mouse'un x değerine eşitliyoruz.
mcEngel.x = mouseX;
}

baslat();
Test Movie yaptığınızda Engel ‘in mouse’u takip ettiğini görebilirsiniz.Eğer Registration noktasını sağ veya sol taraflardan birisi seçtiyseniz mouse’u engel sağ veya sol tarafa dayalı olarak takip edecektir.Bunu kodlarla düzeltmek için Engel’in x değerini mouseX-mcEngel.width/2 ye eşitlemeniz yeterli.

Bu problemi hallettikden sonra bir problemimiz daha var Engel’imiz sahnenin dışına çıkıyor.Bunu da engellemek için aşağıdaki kodları hareketEngel fonksiyonunun devamına eklemeniz yeterli ;

//Eğer mouse sol taraftan taşarsa ;
if(mouseX < mcEngel.width/2)
{
mcEngel.x = 27.5;
}
//Eğer mouse sağ taraftan taşarsa ;
if(mouseX > stage.stageWidth - mcEngel.width/2)
{
mcEngel.x = stage.stageWidth - mcEngel.width + 27.5;
}
Evet,böylelikle ilk dersimizin sonuna geldik.Gelecek derste topumuzu kodlamaya çalışacağız.Aşağıda kodların tamamını ve swf dosyasını görebilirsiniz.Bir dahaki derste görüşmek üzere iyi çalışmalar…

Kodların tamamı ;

//Öncelikle bir ana fonksiyon oluşturacağız.
//Bu fonksiyon oyunumuzu başlatmak için kullanılacak.
//Gerekli olan şeyleri buradan başlatacağız.
function baslat():void
{
//Engel'imizin mouse'u sürekli takip etmesi için
//Enter Frame olayını kullanacağız.
mcEngel.addEventListener(Event.ENTER_FRAME,hareketEngel);
}

function hareketEngel(evt:Event):void
{
//Engel'in x değerini mouse'un x değerine eşitliyoruz.
mcEngel.x = mouseX;
//Eğer mouse sol taraftan taşarsa ;
if(mouseX < mcEngel.width/2)
{
mcEngel.x = 27.5;
}
//Eğer mouse sağ taraftan taşarsa ;
if(mouseX > stage.stageWidth - mcEngel.width/2)
{
mcEngel.x = stage.stageWidth - mcEngel.width + 27.5;
}
}

baslat();

2. Bölüm:


Merhaba ,

Bu dersimizde oyunumuz için bir top programlıyacağız.10×10 boyutlarında mcTop adında bir daire çizip MovieClip’e çevirdim.instance name değerine de mcTop yazdım.



Şimdi baslat() fonskiyonumuzun içerisine aşağıdaki olay dinleyicisini ekliyoruz;

//Sürekli topu kontrol etmek için Enter Frame
//Olay dinleyicisini kullanıyoruz...
mcTop.addEventListener(Event.ENTER_FRAME,hareketTop);
Sonra dışarda hareketTop fonskiyonumuzu oluşturalım ;

function hareketTop(evt:Event):void
{
//Top hareket kodları
}
hareketTop fonksiyonunu yazmadan önce 2 tane değişkene ihtiyacımız var.Topun x ve y hızları.Kodların en başına bu değişkenleri aşağıdaki gibi tanımlayalım;

var topXHizi:Number = 10; //Top X hızı
var topYHizi:Number = 10; //Top Y hızı
Şimdi hareketTop fonksiyonumuza aşağıdaki kodları ekleyerek Topumuza hareket verelim ;

mcTop.x += topXHizi;
mcTop.y += topYHizi;
Tabiki bu şekilde Test Movie yaptığınız da topun hiç durmadan aşağıya doğru gittiğini göreceksiniz.Bu durumu düzeltmek için if koşullarını kullanacağız.Eğer top alt , üst ,sağ veya sol duvara geldiğinde -1 ile çarparsak hız tam tersine dönecektir.Böylece istediğimize ulaşmış olacağız.Aşağıdaki kodları hareketTop fonksiyonunun içerisine yazın ;

//Top kontrolleri
if(mcTop.x >= stage.stageWidth-mcTop.width)
{
//Top sağ duvara çarptığında tersine çeviriyoruz
topXHizi *= -1;
}
if(mcTop.x <= 0)
{
//Top sol duvara çarptığında tersine çeviriyoruz topXHizi *= -1;
}
if(mcTop.y >= stage.stageHeight-mcTop.height)
{
//Top alt duvara çarptığında tersine çeviriyoruz
topYHizi *= -1;
}
if(mcTop.y <= 0)
{
//Top üst duvara çarptığında tersine çeviriyoruz
topYHizi *= -1;
}
Test Movie yaptığınız da topunuzun duvarlara çarparak geri döndüğünü görebilirsiniz.Eğer ilk defa bir oyun yapıyorsanız bu bile size zevk verecektir .Bir sonraki adımımız topun engele çarptığı an neler olacağıyla ilgili.İşte bu kısım biraz daha matematiksel.Ancak kodlarla açıklamaları okuyup üzerine biraz düşünürseniz kolaylıkla anlayabilirsiniz.
Öncelikle kullanacağımız hittestobject kodu top la engel kesiştiği zaman da fonksiyonu çalıştırmamıza yarayacak.Biraz matematiksel yapacağımızdan bu durumda hesaplaTopEngel diye bir fonksiyon oluşturacağız.Aşağıdaki kodları hareketTop fonksiyonunun içerisine yazın ;

if(mcTop.hitTestObject(mcEngel))
{
hesaplaTopEngel();
}
Şimdi hesaplaTopEngel fonksiyonumuzu en dışta tanımlayalım ;

function hesaplaTopEngel():void
{
//topYeri : Topun engel üzerindeki yeri
var topYeri:Number = mcTop.x - mcEngel.x;
//yerYuzde : Topun engel üzerindeki yüzdelik değeri
//Top engelde sol taraftaysa -.5
//Top engelde sağ taraftaysa .5
//Ortada ise 0 çıkacaktır formülü kağıt kalemle hesaplarsanız
//daha iyi anlayabilirsiniz...
var yerYuzde:Number = (topYeri/(mcEngel.width-mcTop.width))-.5;
//yerYuzde değerini büyütüyoruz gerçekten bir
//zıplayış olsun diye
topXHizi = yerYuzde * 10;
//Topun yönünü tersine çeviriyoruz
topYHizi *= -1;
}
Bu dersimizde burada bitti aşağıda kodların tamamını ve önizlemeyi görebilirsiniz.Diğer derste de sahnemize bricks (tuğlaları) nasıl ekliyeceğiz onu göreceğiz.

var topXHizi:Number = 10; //Top X hızı
var topYHizi:Number = 10; //Top Y hızı

//Öncelikle bir ana fonksiyon oluşturacağız.
//Bu fonksiyon oyunumuzu başlatmak için kullanılacak.
//Gerekli olan şeyleri buradan başlatacağız.
function baslat():void
{
//Engel'imizin mouse'u sürekli takip etmesi için
//Enter Frame olayını kullanacağız.
mcEngel.addEventListener(Event.ENTER_FRAME,hareketEngel);
//Sürekli topu kontrol etmek için Enter Frame
//Olay dinleyicisini kullanıyoruz...
mcTop.addEventListener(Event.ENTER_FRAME,hareketTop);
}

function hareketEngel(evt:Event):void
{
//Engel'in x değerini mouse'un x değerine eşitliyoruz.
mcEngel.x = mouseX;
//Eğer mouse sol taraftan taşarsa ;
if(mouseX < mcEngel.width/2)
{
mcEngel.x = 27.5;
}
//Eğer mouse sağ taraftan taşarsa ;
if(mouseX > stage.stageWidth - mcEngel.width/2)
{
mcEngel.x = stage.stageWidth - mcEngel.width + 27.5;
}
}

function hareketTop(evt:Event):void
{
//Top hareket kodları
mcTop.x += topXHizi;
mcTop.y += topYHizi;

//Top kontrolleri
if(mcTop.x >= stage.stageWidth-mcTop.width)
{
//Top sağ duvara çarptığında tersine çeviriyoruz
topXHizi *= -1;
}
if(mcTop.x <= 0)
{
//Top sol duvara çarptığında tersine çeviriyoruz
topXHizi *= -1;
}
if(mcTop.y >= stage.stageHeight-mcTop.height)
{
//Top alt duvara çarptığında tersine çeviriyoruz
topYHizi *= -1;
}
if(mcTop.y <= 0)
{
//Top üst duvara çarptığında tersine çeviriyoruz
topYHizi *= -1;
}
if(mcTop.hitTestObject(mcEngel))
{
hesaplaTopEngel();
}
}

function hesaplaTopEngel():void
{
//topYeri : Topun engel üzerindeki yeri
var topYeri:Number = mcTop.x - mcEngel.x;
//yerYuzde : Topun engel üzerindeki yüzdelik değeri
//Top engelde sol taraftaysa -.5
//Top engelde sağ taraftaysa .5
//Ortada ise 0 çıkacaktır formülü kağıt kalemle hesaplarsanız
//daha iyi anlayabilirsiniz...
var yerYuzde:Number = (topYeri/(mcEngel.width-mcTop.width))-.5;
//yerYuzde değerini büyütüyoruz gerçekten bir
//zıplayış olsun diye
topXHizi = yerYuzde * 10;
//Topun yönünü tersine çeviriyoruz
topYHizi *= -1;
}

baslat();

3. Bölüm:


Merhaba,

Buraya kadar engel’i ve top’u programladık.Şimdi ise oyuna adını da veren brickleri programlamaya başlıyacağız.Bu aşama diğerlerinden daha zor olduğu için 2 ye böldüm.Bu derste sadece brickleri sahneye nası ekliyeceğimizi göreceğiz.Hadi başlayalım…

Öncelikle nasıl brickleri sahneye ekliyeceğiz ona bakalım.Bunun için bir dizi değişken kullanacağız.Sadece 2 farklı sayıyla (1 ve 0) basitçe halledeceğiz.1 brick sahnede 0 sahnede değil anlamına gelecektir.Mesela aşağıda ki bir bricks sırası örneği ;

lvlDizi:Array = new Array (1,1,1,1,1,1,1);
Tabiki yukardaki kod bi işimize yaramayacaktır,biz bricklerimizi fonksiyon yardımıyla oluşturacağız.Brick için ben 70×15 boyutlarında bir kare çizdim.Bunu movieClip’e çevirelim yalnız aşağıdaki resmi dikkate alarak bunu yapın ;



lvlOlustur() isimli bir fonksiyon tanımlayacağız.Ancak bir kaç değer’e(değişken’e) ihtiyacımız var.Kullanıcı her level de yenilenmesini istemiyoruz.Bu yüzden aşağıdaki resimdeki gibi bir frame daha oluşturuyoruz ;



İlk frame deki kodlar ;

//Başlangıç level'i
var anaDuzey:Number = 1;
//Dizi şekli 1.level'in
var lvlKod:Array = new Array(1,1,1,1,1,1,1);
//Tüm leveller için dizi
var lvlDizi:Array = new Array(lvlKod);
Ayrıca 2.frame’in en başına yani oyun frame’ine bir stop(); komutu ekleyin.Yoksa oyun oynanmıyacak şekilde döngü gibi 1 ve 2. framelerde gidip gelecektir.

Şimdi oyun frame’ine gelelim.lvlOlustur() fonksiyonumuzu yazmaya başlayalım ;

function lvlOlustur():void
{
//Dizilerin index numaraso 0'dan başladığı için anaDuzey-1
//olarak yapacağız.
var diziUzunlugu:int = lvlDizi[anaDuzey-1].length;
//Ana brick sırasını oluşturuyoruz
var brickSira:int = 0;
//Brickleri sahneye yerleştirmek için döngü kullanıyoruz
for(var i:int = 0;i {
//Brick sırasını kontrol ediyoruz
if(lvlDizi[anaDuzey-1][i] == 1)
{
//Brick oluşturuyoruz
var brick:MovieClip = new mcBrick();
//Brick kordinatlarını veriyoruz
brick.x = 15+(i-brickSira*7)*75;
brick.y = 10+brickSira*20;
//Yeni sıra kontrolü
for(var c:int=1;c<=10;c++)
{
if(i==c*7-1)
{
brickSira++;
}
}
//Brick'i sahneye ekliyoruz
addChild(brick);
}
}
}
Şimdi tek yapmanız gereken lvlOlustur(); fonksiyonunu baslat fonksiyonu içerisinde çalıştırmak.Birdaha ki derste bricklerle topu etkileşime geçireceğiz.Dosyanın son halindeki kodları ve swf halini aşağıda görebilirsiniz…

İlk Framedeki Kodlar ;

//Başlangıç level'i
var anaDuzey:Number = 1;
//Dizi şekli 1.level'in
var lvlKod:Array = new Array(1,1,1,1,1,1,1);
//Tüm leveller için dizi
var lvlDizi:Array = new Array(lvlKod);
Oyun Frameindeki Kodlar ;

stop();

var topXHizi:Number = 10; //Top X hızı
var topYHizi:Number = 10; //Top Y hızı

//Öncelikle bir ana fonksiyon oluşturacağız.
//Bu fonksiyon oyunumuzu başlatmak için kullanılacak.
//Gerekli olan şeyleri buradan başlatacağız.
function baslat():void
{
//Engel'imizin mouse'u sürekli takip etmesi için
//Enter Frame olayını kullanacağız.
mcEngel.addEventListener(Event.ENTER_FRAME,hareketEngel);
//Sürekli topu kontrol etmek için Enter Frame
//Olay dinleyicisini kullanıyoruz...
mcTop.addEventListener(Event.ENTER_FRAME,hareketTop);
//Level oluşturuluyor
lvlOlustur();
}

function hareketEngel(evt:Event):void
{
//Engel'in x değerini mouse'un x değerine eşitliyoruz.
mcEngel.x = mouseX;
//Eğer mouse sol taraftan taşarsa ;
if(mouseX < mcEngel.width/2)
{
mcEngel.x = 27.5;
}
//Eğer mouse sağ taraftan taşarsa ;
if(mouseX > stage.stageWidth - mcEngel.width/2)
{
mcEngel.x = stage.stageWidth - mcEngel.width + 27.5;
}
}

function hareketTop(evt:Event):void
{
//Top hareket kodları
mcTop.x += topXHizi;
mcTop.y += topYHizi;

//Top kontrolleri
if(mcTop.x >= stage.stageWidth-mcTop.width)
{
//Top sağ duvara çarptığında tersine çeviriyoruz
topXHizi *= -1;
}
if(mcTop.x <= 0)
{
//Top sol duvara çarptığında tersine çeviriyoruz
topXHizi *= -1;
}
if(mcTop.y >= stage.stageHeight-mcTop.height)
{
//Top alt duvara çarptığında tersine çeviriyoruz
topYHizi *= -1;
}
if(mcTop.y <= 0)
{
//Top üst duvara çarptığında tersine çeviriyoruz
topYHizi *= -1;
}
if(mcTop.hitTestObject(mcEngel))
{
hesaplaTopEngel();
}
}

function hesaplaTopEngel():void
{
//topYeri : Topun engel üzerindeki yeri
var topYeri:Number = mcTop.x - mcEngel.x;
//yerYuzde : Topun engel üzerindeki yüzdelik değeri
//Top engelde sol taraftaysa -.5
//Top engelde sağ taraftaysa .5
//Ortada ise 0 çıkacaktır formülü kağıt kalemle hesaplarsanız
//daha iyi anlayabilirsiniz...
var yerYuzde:Number = (topYeri/(mcEngel.width-mcTop.width))-.5;
//yerYuzde değerini büyütüyoruz gerçekten bir
//zıplayış olsun diye
topXHizi = yerYuzde * 10;
//Topun yönünü tersine çeviriyoruz
topYHizi *= -1;
}

function lvlOlustur():void
{
//Dizilerin index numaraso 0'dan başladığı için anaDuzey-1
//olarak yapacağız.
var diziUzunlugu:int = lvlDizi[anaDuzey-1].length;
//Ana brick sırasını oluşturuyoruz
var brickSira:int = 0;
//Brickleri sahneye yerleştirmek için döngü kullanıyoruz
for(var i:int = 0;i {
//Brick sırasını kontrol ediyoruz
if(lvlDizi[anaDuzey-1][i] == 1)
{
//Brick oluşturuyoruz
var brick:MovieClip = new mcBrick();
//Brick kordinatlarını veriyoruz
brick.x = 15+(i-brickSira*7)*75;
brick.y = 10+brickSira*20;
//Yeni sıra kontrolü
for(var c:int=1;c<=10;c++)
{
if(i==c*7-1)
{
brickSira++;
}
}
//Brick'i sahneye ekliyoruz
addChild(brick);
}
}
}

baslat();

Anlata bildiysem ne mutlu bana !