App Inventor ile Oyun Yapımı - Resimli

Etiketler : Android

Google App Inventor ile Blokları kullanarak basit bir oyun yapmaya çalışacağım. Oyun yapılırken tek satır kod yazılmayacak. Fakat anlatım kodlama bilgisi olan kişilerin anlayabileceği  seviyede hazırlanmıştır. Temel App Inventor bilgisi gerektiren yerler hızlı bir şekilde geçilmiştir.

Şimdi yapacağımız oyunun özellikleri;

-Telefonu hareket ettirerek bir böceğin kontrolünü sağlayacağız.

-ekranda bir enerji gösterici olacak ve bu zamanla azalacak. bu çubuğun bitmesi demek böceğin artık yaşayamacağını gösterecek.

-Böceğin diğer böcekleri yiyerek daha fazla enerji kazanmasını ve ölmesine engel olmasını sağlayabiliriz.

-bu arada oradaki kurbağaya yakalanmasına da dikkat etmemiz gerekecek.

Başlamadan önce böcek resmini, kurbağa resimlerini indiriniz.

www.canererden.com/android_calismalari/bocek_yakala/indirilecekler

Programımızı geliştirmeye başlayalım. Öncelikle Appİnventor’da projemize bir isim verelim ve bu ismi Title kısmına da yazalım.

Şimdi dizaynı oluşturmak için tarayıcımızda çalışmalara başlayalım. ilk parçamız Canvas koymak.

-Palette’den Basic kısmından Canvas’ı seçip Ekrana sürükleyip bırakalım. Canvas adını FieldCanvas, Width değerini ‘Fill Parent’ ve Height değerini 300 pixels olarak ayarlayalım.

-Canvas’a bir ImageSprites ekleyelim. İsmini bocek olarak ayarlayıp settingsten Picture kısmına indirdiğimiz bocek resmini gösterelim. Şimdilik böceği nereye yerleştirdiğimiz önemli değil. Interval değerini 10 (milisaniye) olarak ayarlayalım.

-Heading özelliği böceğin hangi açıda hareket edeceğini tanımlamamıza yarar. yani 0 derece yapmamız sadece sağa sola hareket edebilir, 90 yapmak dik hareket edebilir demektir. Biz bu değeri Blocks Editor’de ayarlayacağız.

-Speed özelliği, böceğin her 10 milisaniyede kaç pixel hareket edeceğini göstermeye yarar. Bu özelliği de Blocks Editor’de kullanacağız.

Böceğin hareketleri OrientationSensor ile kontrol edilecek. OrientationSensor telefonun hareketini algılayarak çalışır. Bunu yapmak için Clock parçasını kullanmamız gerekiyor. telefonun her 10 milisaniyede ne kadar hareket ettiğini ve bunun böceği ne kadar etkileyeceğini saat ile alacağız.

Şimdi bir OrientationSensor ekleyelim. Ki bu Non-visible components kısmında görünecektir.

aynı şekilde bir de clock ekleyelim. clock da non visible olacaktır.

Yapılacak hareketleri ekleme

Blocks Editor’u açalım. bocek_guncelle adında bir procedure oluşturalım. ve Clock1.Timer bloğu ekleyelim.

Enerji Gösterici

Böceğin enerji seviyesini gösterecek kırmızı renkte bir çubuk koyacağız.  Yeni bir canvas oluşturup bunu FieldCanvas’ın altına yerleştirelim. Width değerini Fill Parent Height değerini 1 pixel olarak ayarlayalım.

Çubuk 1 pixel yüksekliğinde olacak ve 200 pixelden 0 pixele gelindiğinde böcek ölecek.

Bunun için enerjiyi 200′de sabitleyelim.

- blocks editör’den def variableı sürükleyelim.  Resimdete gösterildiği gibi 200 değerini atayalım.

Şimdi de enerji çubuğumuzu çizelim.

Yeni bir procedure oluşturarak EnerjiSeviyesiniGoster adını verelim. Bu procedure ile enerji_cubugu_ciz komutunu iki kez çağırırız. 1. eski çizgiyi sildirmek ikincisi yeni çizgiyi göstermek için.

Böceğin ölümü

eğer böcek yeterince örümcek yiyemez ise oyun bitecek. ya da kurbağa tarafından yenirse yine oyun bitecek. bu durumlarda biz böceğin durmasını ve ölü böcek resminin ortaya çıkmasını istiyoruz. Şimdi Game Over procedure’ünü oluşturalım.

Şimdi

Enerjinin düşüsü ve enerji sıfıra indiğinde oyunun bitişini yapalım.

Böcek için yem ekleme

Böcek ekleyeceğimiz yemi yediğinde enerji çubuğu artacak. Yem adında yeni bir ImageSprite oluşturalım. Interval değerini bocek te olduğu gibi 10 yapalım.

hızını 2 yapalım ki böcek onu yakalayabilsin.

böcek ve yem çarpıştığında böceğin yemi yemesini istiyoruz.

YemiYe diye bir procedure oluşturalım, ve şunları yapmasını sağlayalım.

-enerji seviyesini 50 puan yükseltsin.

-yemin yokolmasını sağlasın. Visible özelliğini false yaparız.

-yemin durması gerekir.

-yem herhangi bir yerde tekrar belirecek.

ve çarptığında neler olacağını belirtiyoruz.

böcek başka bir ImageSprite ile çarpıştığında YemiYe procedureünü çağırıyoruz ve bütün fonksiyonları YemiYe içerisinde tanımlıyoruz.

Şimdi Yemi_Guncelle prosedürüne geri dönüp aşağıdaki güncellemeleri yapıyoruz.

Yenile Butonunu ekleyelim.

yenileme butonu enerji düzeyini 200′e çıkaracak.

yemin visible ını true yapacak.

ölü böcek resmini değiştirip yeni böcek resmini koyacak.

yapabilmek için

Kurbağayı ekleyelim

bunun için öncelikle FieldCanvas’a bir Image Sprite ekleyelim. Adını kurbaga koyalım. hızı 1 olsun çünkü hepsinden yavaş hareket etmesi gerekiyor.

ve kurbaganın böceğimizi yemesi..

eski böcek.collidedwith prosedürümüze geri dönüyoruz.

ve yenilebutonunda ufak bir değişiklik yapmamız gerekiyor.

belki oyuna bir güzellik katması açısından birçok değişiklik yapılabilir. Örneğin oyunun başlangıcında bir müzik çalınabilir. Screen1.Initilize komutu ile…

biz de kurbagamız için bir müzik koyalım.

İşte Uygulamanın Son hali

uygulamanın son hali resim

Güzel ve yararlı bir çalışma olmuştur umarım. App inventor ile oluşturulacak yeni uygulamaları bekleyin bakalım…

Kaynak: CanerErden.com