Ana içerik
Düğmelerle kontrol edilen sahne değişiklikleri
Sahne değiştirmek için şimdilik kullanıcının herhangi bir yere tıklamasıyla idare ettik. Ama bu yaklaşımın bir dezavantajının farkına vardık; sahnelerin içinde herhangi ekstra bir etkileşim için tıklama kullanamayız. Birçok oyun ve uygulama, menü ve buton gibi, belirli Kullanıcı Arayüzü öğeleri ekleyerek, ve sadece bir Kullanıcı Arayüzü öğesine tıklandığında, sahnelerde gezinerek, bunun üstesinden gelir. Programımızdaki sahneleri kontrol etmek için sağ üste bir buton ekleyelim.
"Buton" nedir? Aslında iki şeydir: 1) bir bölgenin tıklanabilir olduğunun görsel göstergesi ve 2) bir bölgenin tıklamaya yanıt vermesini sağlayan mantık. Görsel göstergeyle başlayalım,
rect() ve biraz text(), ve bir kereden fazla çağırmak için, bir fonksiyona koyun:var drawButton = function() {
fill(81, 166, 31);
rect(340, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 344, 29);
};Şimdi bunu nerede çağıralım? Kesinlikle bunu birinci sahneyi çizdiğimizde çağırmamız gerekir, böylece, bir sonraki sahneye geçebiliriz:
drawScene1();
drawButton();Bunu sonraki her sahnede de göstermemiz gerekir. Her sahne çizimi fonksiyonunun içinden çağırabilirdik, ama bunun daha kolay bir yolu vardır: her sahneyi çizdikten sonra çağırmayı unutmamak için,
mouseClicked fonksiyonunun sonuna koyun:mouseClicked = function() {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
drawScene1();
}
drawButton();
};Tamam, yalan söyledim, o kadar da basit değil. Üstteki kodla, biri dışında her sahnede butonu görürüz. Bunun hangisi olduğunu bulabilir misiniz? Size birkaç saniye veriyorum...bunu okumayı bırakın! Düşündünüz mü? Tamam, tamam, animasyon sahnesi. Çünkü
draw()'un içindeki kod, sahne 4'ü butonun hemen üstüne çizecektir, onun için bunu da fonksiyonun sonuna eklememiz gerekiyor:draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};Girişimci bireyler, sonraki butonun üstüne bebekler sürüklemek isterse diye, bunu
mouseDragged'in de sonunda çağıralım:mouseDragged = function() {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
}
drawButton();
};Vay! Şimdi her sahnede her zaman bir butonumuz olacak. Buna bir bakın:
Ama, hah ha, komik olan nedir, biliyor musunuz? Buton hiçbir şey yapmıyor! Yani, kullanıcı, o bölgeye tıklamaya karar verdiğinde, bir şey yapacağını düşünebilir. Ama, aslında istedikleri yere tıklayabilirler, ve her seferinde aynı şeyi yapar.
mouseClicked mantığını, sahne değiştirme zamanı geldiğine karar vermeden önce buton konumunu kontrol edecel şekilde değiştirmemiz gerekir.JS'ye Giriş'te yaptığımız buton görevleri gibi,
mouseX ve mouseY'yi kontrol etmek için bir if koşulu bulmalıyız. Genelde, bu, dört koşulu && işlemcisiyle birleştirmek demektir, mouseX'in sol taraftan büyük olduğu, mouseX'in sağ taraftan küçük olduğu, mouseY'nin üst kenardan büyük olduğu, ve mouseY'nin alt kenardan küçük olduğu. Ama, butonumuz sağ üst köşede, ve kullanıcıya tıklamak için serbestlik vermek istiyorum, o nedenle sadeleştirelim ve sadece iki koşulu kontrol edelim - mouseX sol taraftan büyük mü, ve mouseY alt kenardan küçük mü?mouseClicked = function() {
if (mouseX >= 340 && mouseY <= 45) {
if (currentScene === 1) {
drawScene2();
} else if (currentScene === 2) {
drawScene3();
} else if (currentScene === 3) {
drawScene4();
} else if (currentScene === 4) {
drawScene5();
} else if (currentScene === 5) {
drawScene1();
}
drawButton();
}
};İşte bu kadar! Bu kontrolle, artık kullanıcının bir sonraki sahneye geçmek için ekranın belirli bir alanına tıkladığı bir programımız var. Butonu ve butonun dışındaki kısımları tıklamayı deneyin:
Artık tıklamanın sahne değiştirme demek olduğunu bildiğimize göre, tıklamaları, buton üzerinde olmadığı sürece, sahnelerimizdeki başka etkileşimler için de kullanabiliriz. Bunun anlamı, başta istediğimiz gibi, kullanıcının sürükleme yerine tıklamayla Winston bebeklerini eklemesini sağlayabileceğimizdir. İf'imizde bir else ekleyeceğiz, ve kodu
mouseDragged'den else'e taşıyacağız:mouseClicked = function() {
if (mouseX >= 340 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"), mouseX-20, mouseY-20);
}
}
};Dikkat ederseniz, sadece geçerli sahne için oluştuğundan emin olmak için, kontrolü o sahnede bırakmamız gerekir. Ama artık, başka bir sahneye etkileşim eklememiz de kolaylaşmıştır. Kullanıcının daha neler eklemesine izin verebilirsiniz? Davul? Sakal? Aşağıdaki programla oynayın:
Tartışmaya katılmak ister misiniz?
Henüz gönderi yok.