Hlavní obsah
Změna scény ovládaná tlačítkem
Dosud nám stačilo, aby uživatel ke změně scény klikl kdekoli na obrazovce. Ale uvědomili jsme si, že tento přístup má jednu nevýhodu: nemůžeme použít kliknutí v rámci scén pro jakýkoliv jiný druh interakce. Mnoho her a aplikací to řeší přidáním specifických prvků uživatelského rozhraní, jako menu a tlačítka, a scény ovládají pouze při interakci s konkrétním prvkem tohoto rozhraní. Přidejme vpravo nahoře tlačítko k ovládání scén v našem programu.
Co je to "tlačítko"? Ve skutečnosti to jsou dvě věci: 1) vizuální indikátor, že je oblast klikatelná, a 2) logika, díky níž tato oblast reaguje na kliknutí. Začněme s vizuálním indikátorem,
rect()
s nějakým text()
, a vložme jej do funkce, abychom kód mohli zavolat vícekrát:var drawButton = function() {
fill(81, 166, 31);
rect(15, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 19, 29);
};
Kde bychom teď funkci měli volat? Existuje spousta potenciálních míst – vždy, když se chceme ujistit, že bude tlačítko vykresleno nahoře:
- Když se program poprvé načte, po zavolání
drawScene1()
- Uvnitř
mouseClicked()
, po nakreslení každé scény - Uvnitř
mouseDragged()
, po nakreslení nového miminka - Uvnitř
draw()
, poté, co znovu nakreslíme animovanou scénu
Obecně platí, že funkce chceme volat jen když je to skutečně nezbytné. Jinak jen plýtváme energií našeho počítače!
Víme, že tuto funkci musíme volat v
draw()
, protože jinak zmizí, zatímco bude bubeník bubnovat. Nezapomeň, že metoda draw()
se volá neustále, častěji než všechny ostatní metody. To znamená, že ji můžeme volat pouze z draw()
, a tím by měly být pokryty i všechny ostatní případy. Vyzkoušej si to! Pokud máš pocit, že ji chceš mít kdekoli jinde, vždy můžeš do tvého kódu vložit další její volání.
draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};
Super! Teď máme tlačítko v každé scéně, neustále. Podívej se na to:
Ale víš, co je na tom všem nejlepší? Tlačítko nic nedělá! Uživatel by si ale mohl myslet, že něco dělá, když klikne na tuto oblast. Ve skutečnosti by však mohl kliknout kdekoli a udělalo by to totéž. Musíme změnit logiku
mouseClicked
tak, abychom zkontrolovali umístění tlačítka předtím, než se rozhodneme, že je čas na změnu scény.Stejně jako jsme to udělali ve výzvách s tlačítkem v Úvod do JS, musíme vymyslet podmínku
if
pro kontrolu mouseX
a mouseY
. Všechny tyto věci musí být pravdivé:- Je
mouseX
větší než souřadnice x levé stranyrect
? - Je
mouseX
menší než souřadnice x pravé stranyrect
? - Je
mouseY
větší než souřadnice y horní stranyrect
? - Je
mouseY
menší než souřadnice y spodní stranyrect
?
Používáme
&&
k ověření toho, zda jsou všechny čtyři podmínky pravdivé, a pokud ano, přejdeme na další scénu:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
}
};
A to je ono! S touto kontrolou máme program, kde uživatel klikne na určitou oblast obrazovky a přesune se na další scénu. Vyzkoušej si kliknutí na tlačítko a na místo bez tlačítka:
Nyní, když máme způsob, jak rozhodovat, kdy je kliknutí určeno pro změnu scény, můžeme použít kliknutí pro další interakce v našich scénách, pokud nesouvisí s kliknutím na tlačítko. To znamená, že můžeme nechat uživatele, ať přidá Winstona jako miminko za použití kliknutí namísto přesunutí, jak jsme původně chtěli. Jednoduše do příkazu if přidáme else a přesuneme kód z
mouseDragged
do else:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"),
mouseX-20, mouseY-20);
}
}
};
Všimni si, že musíme kontrolovat aktuální scénu, abychom se ujistili, že se to provede pouze pro tuto scénu. V tomto bodě je pro nás snadné přidat interakci dle kliknutí k jakékoliv další scéně. Co jiného by mohl uživatel přidat? Bubny? Vousy? Pohraj si s programem níže:
Chceš se zapojit do diskuze?
Zatím žádné příspěvky.