Trafik işaretleri adlı oyun için App inventor programı kullanılacaktır. App inventor Android uygulamalar geliştirmeye imkan tanıyan ve kod bloklarını sadece sürükleyip bırakarak Andorid uygulamalar geliştirmeye imkan veren bir programıdır.
Oyunun Amacı: Bu projeyi eğitici bir oyun geliştirmek amacıyla tasarladım. Giriş ekranı olarak karşımıza gelen ekranda Oyuna Başla ve Ayarlar olmak üzere 2 adet buton var. Ayarlar butonundan oyunun nasıl oynanacağını görebiliyoruz. Oyuna Başla butonuna tıklandığındaysa yeni bir ekran açılıyor. Burada yolda ilerlerken karşımıza çıkan trafik işaretlerine çarptığımızda bizden levhanın anlamını girmemizi istiyor ve bildiklerimiz bize +10 puan kazandırıyor. Oyun sonunda ise aldığımız puana göre bize bir bildirim veriyor.
http://appinventor.mit.edu/explore sitesinden App inventor’a giriş yaptıktan sonra Create butonuna tıklıyoruz ve Gmail hesabımızla giriş yapıyoruz. Start New Project diyerek yeni bir proje oluşturuyoruz ve projemize bir isim veriyoruz.
Karşımıza ilk gelen ekran bir telefon ekranı. Sol tarafta bulunan Palette bölümünde ekranımıza ekleyebileceğimiz araçlar mevcut. Sürükleyerek ekrana bırakıyoruz. Bu araçların özelliklerini sağ tarafta bulunan Properties bölümünden değiştirebiliriz.
Bu oyun için öncelikle 4 farklı ekran kullanılmıştır. Bunları Add Screen bölümünden ekleyebilirsiniz.
SCREEN1:
Bu ekran oyunumuzun giriş ekranıdır.
Screen1 ‘de bulunan araçlar ve özellikleri aşağıdaki gibidir:
Ekran tasarımını yaptıktan sonra Screen1 in Blocks bölümüne geçiyoruz. Sol tarafta eklediğimiz bütün araçlarla ilgili yazabileceğimiz kodlar mevcut. Buradan Start ve Settings butonlarına tıkladığında ne olacağını yazıyoruz:
Play butonuna tıklandığında başka bir ekrana geç diyerek ekran adını Screen2 olarak yazıyoruz.
Settings butonuna tıklandığında başka bir ekrana geç diyerek ekran adını Screen3 olarak yazıyoruz.
SCREEN3:
Bu ekran oyunun nasıl oynanacağını anlatır.
Screen3 ‘te bulunan araçlar ve özellikleri aşağıdaki gibidir:
Ekran tasarımını yaptıktan sonra Screen3 ün Blocks bölümüne geçiyoruz.
Start butonuna tıklandığında Screen2’ye gidecek olan kod bloğunu sürükleyip bırakıyoruz.
Exit butonuna tıklandığında ise close application ile uygulama kapatılacaktır.
SCREEN2:
Bu ekran oyunun olduğu asıl ekrandır.
Screen2’de bulunan araçlar ve özellikleri aşağıdaki gibidir:
Bu ekran için öncelikle levhaları doğru bildiğimizde puanımızı gösterecek olan Sayi ve Puan Labelları Horizontal Arrangement içine yerleştirilmiştir.
Daha sonra Levhanın anlamı? yazılı label ve kullanıcı girişinin sağlanacağı textbox yerleştirilmiştir. Ve bu textbox’ın kontrolünü yapacak 10 adet imagesprite Canvas içine eklenmiş ve aynı konumda üst üste gelecek şekilde yerleştirilmiştir. Ve bunların hepsine tick resmi yüklenmiştir. İsimleri de ok, ok2,… olacak şekilde verilmiştir. Burada kontrol için buton kullanmadık. Çünkü buton tek bir levha için textbox kontrolü sağlıyor ve üst üste ekleme imkanımız olmadığı için image spriteler kullandık. X ve y konumlarını properties bölümünden üst üste gelecek şekilde ayarladık.
Bunların altına bir adet label ekledik. Properties bölümünden Visible tick işaretini kaldırarak görünürlüğünü kapattık. Bu label oyun bittiğinde aldığımız puana göre bize bildirim verecek.
Ekranda hareketli resimler oluşturabilmek amacıyla kullanılan araç:Canvas. Bunun içine farklı konumlarda olacak şekilde trafik levhaları ve araba ekledik.
Son Horizontal Arrangement içine arabanın hareketini sağlayabilmesi için 4 adet buton ekledik. Ve sahnenin altındaki Notifier’ler ise bizim levhalara çarptığımızda karşımıza gelecek olan uyarı mesajlarını sağlıyor.
Ekran tasarımını yaptıktan sonra Screen2 nin Blocks bölümüne geçiyoruz:
Adım1:
Screen2 Initialize kod bloğu sahne ilk yüklendiğinde neler olacağını yazdığımız kod bloğu. Oyunun sonunda karşımıza çıkacak olan Labelın görünürlüğünü kapattık. Kontrolsüz kavşak dışındaki diğer levhaların görünürlüğünü kapattık. Her bir levhaya çarptığımızda görünür olması için soru labelı, cevap textbox’ı ve tick görünürlüğü olan imagespriteların bulunduğu Canvas2 ve HorizontalArrengement3 aracını kapattık. Son olarak oyun ilk açıldığında arabanın duracağı x ve y konumunu ayarladık. X konumu için araba Canvas1’in genişliğinin yarısında duracak ve y konumu 300 olacak.
Adım2:
Bu aşamada levhalara çarptığımda puanımızı içinde tutacak olan sayi değişkenini tanımlıyoruz.
Adım3:
Bu aşamada yön butonlarıyla arabayı hareket ettirebildiğimiz kod bloklarını sürükleyip bırakıyoruz.Sol butonuna tıklandığında araba bulunduğu x konumundan 20 sola, sağa, ileri ya da geri gitsin şeklinde kod bloklarını oluşturuyoruz.
Adım4:
ColidedWith 2 imagespriteın çarpışma olayını belirlediğimiz kod bloğu. Kontolsüz kavşak, araba image sprite’yle çarpıştığında bu levhanın görünürlüğünü kapatıyoruz. Kullanıcının giriş yapabilmesi için levhanın anlamı labelını ve textboxın görünürlüğünü açıyoruz. Bunun için öncelikle bu label ve textboxı kapsayan hizalama aracı HorizontalArrengemet3ün görünürlüğünü true yapıyoruz. Ve yine HorizontalArrengemet3 içinde bulunan ve kontol amacıyla koyduğumuz tickleri kapsayan Canvas2yi açıyoruz. Burada üst üste 10 adet tick eklemiştik ve bunların isimlerini ok, ok2, … olarak değiştirmiştik. Bu ticklerin her biri bir levhayı kontol edeceği için ilk lavha için ilk imagespritein görünürlüğünü true yaparak diğerlerini kapatıyoruz. Ve arabayı başlangıç konumuna geri taşıyoruz.
Adım5:
Oyunda araba ilk levhayla çarpıştı. Levhanın anlamı sorusu geldi. Cevap textboxı ve ok görünür oldu. Kullanıcı giriş yaptı ve kontrol amacıyla ok image sprite’a dokundu. Ok. Touch bu imagesprite’a dokunulduğunda neler olacağını yazdığımız kod bloğu. Burada ok imagesprite’ı girilen değeri kontrol edecek ve eğer girilen değer ‘kontrolsüz kavşak’ ise Notifier ile başlığı ‘TEBRİKLER’, mesajı ‘doğru cevap +10puan’ yazdıran bir uyarı mesajı ekranda belirecek. Kullanıcı bu uyarı mesajına tamam dediğinde Sayi isimli değişken 10 artacak. Kullanıcının giriş yaptığı textbox(cevap.text) ın içindeki yazı silinecek. Eğer kullanıcı textbox’a ‘kontrolsüz kavşak’ yazısı girmemişse bu kez de yanlış olduğunu söyleyen bir uyarı mesajı alacak ve levhanın anlamını görebilecek. Ama puanı artmayacak. Her iki durumda da Soru labelı cevap textboxı ve ok’ların görünürlüğü kaybolacak.
Adım6:
Adım5’teki uyarı mesajlarına tamam dendiğinde ne olacağını söyleyen kod bloğu:After Choosing. Burada hem doğru hem de yanlış olduğu durumlar için 2 adet Notifier tanımlamıştık. Notifier1. AfterChoosing kullanıcının ilk mesaja tamam dediğinde, Notifier2. AfterChoosing ise kullanıcının ikinci mesaja tamam dediğinde ne olacağını yazmamızı sağlar. Burada her iki durumda da bir sonraki levhanın görünürlüğünü aktif yapıyoruz.
Adım7:
Burada artık her levha için aynı kod bloklarını yazmaya başlıyoruz.
Adım8:
Son levhanın kodlarını da aynı şekilde yazıyoruz.
Son ok10’un dokunma olayında ilk başta gizlediğimiz Label1ın görünürlüğünü aktifleştiriyoruz. Ve uyarı mesajına tamam dedikten sonra oyunda toplanan sayi eğer 50ye eşitse ve 50den büyükse bu Labela ‘Oyun bitti! Mükemmel bir sürücüsün’, eğer puan 50den küçükse ‘Oyun bitti! Hey Dostum! Ehliyeti nerden aldın?’ yazdıran kod bloklarını sürükleyip bırakıyoruz.. Bu kontolü if-else kod bloğuyla yaptık. Her iki durum için de yani sayinın 50ye eşit ya da büyük olduğu ve 50den küçük olduğu durum için de Label1’ın görünürlüğünü aktifleştirdik. Daha sonra 50den büyük ve eşit olduğu durum için yazdırılacak yazının rengini Textcolor kod bloğuyla mavi yaptık. Diğer durum için de kırmızı yaptık.
UYGULAMANIN OR CODE: