Hlavní obsah

Programování

Kurz: Programování > Kapitola 4

Lekce 2: Ovládání scén

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é strany rect?
Je mouseX menší než souřadnice x pravé strany rect?
Je mouseY větší než souřadnice y horní strany rect?
Je mouseY menší než souřadnice y spodní strany rect?

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:

Setřídit podle:

Chceš se zapojit do diskuze?

Přihlášení

Zatím žádné příspěvky.

Umíš anglicky? Kliknutím zobrazíš diskuzi anglické verze Khan Academy.