Główna zawartość
Programowanie
Zmiany scen kontrolowane przyciskiem
Dotarliśmy tak daleko z użytkownikiem klikającym gdziekolwiek aby zmienić scenę. Ale to podejście ma pewną wadę: nie możemy użyć kliknięć w scenie do jakiejkolwiek dodatkowej interakcji. Sposób, w jaki wiele gier i aplikacji rozwiązało ten problem, to dodanie określonych elementów interfejsu użytkownika, takich jak menu i przyciski, i nawigacja scen, która ma miejsce podczas interakcji z określonym elementem interfejsu użytkownika. Dodajmy przycisk do kontroli scen w prawym górnym rogu naszego programu.
Co to jest "przycisk"? Sprowadza się to dwóch rzeczy: 1) wizualny wskaźnik, że obszar jest klikalny i 2) logika, która sprawia, że obszar odpowiada na kliknięcie. Zacznijmy od wskazania wizualnego, obszar
rect()
i tekst text()
i opakujmy to w funkcje, w przypadku, kiedy chcielibyśmy wywołać to kilka razy:var drawButton = function() {
fill(81, 166, 31);
rect(15, 10, 50, 25);
fill(255, 255, 255);
textSize(16);
text("NEXT", 19, 29);
};
Gdzie powinniśmy to wywołać? Jest wiele potencjalnych miejsc - wszędzie tam, gdzie przycisk ma zostać narysowany na górze:
- Gdy program uruchamia się po raz pierwszy, po wywołaniu
drawScene1()
- Wewnątrz
mouseClicked()
, po narysowaniu każdej sceny - Wewnątrz
mouseDragged()
, po narysowaniu nowego dziecka - Wewnątrz
draw()
, po przerysowaniu animowanej sceny
Dobrą praktyką jest wywoływanie funkcji tylko wtedy, gdy jest to konieczne. W przeciwnym razie marnujemy tylko moc naszego komputera!
Wiemy, że musimy ją wywołać wewnątrz
draw()
, ponieważ w innym wypadku zniknie, gdy perkusista będzie grał. Pamiętaj, że metoda draw()
jest wywoływana cały czas, dużo częściej niż inne metody. Oznacza to, że możemy ją wywołać wyłącznie w draw()
i powinno to pokryć wszystkie inne przypadki.Sprawdź sam! Jeśli wydaje ci się, że potrzebujesz ją w innym miejscu zawsze możesz dopisać kolejne wywołanie w kodzie.
draw = function() {
if (currentScene === 4) {
drawScene4();
}
drawButton();
};
Ooo! Teraz mamy przycisk w każdej scenie, cały czas. Sprawdź:
Ale, haha, wiesz co jest zabawne? Przycisk nic nie robi! To znaczy, użytkownik może myśleć, że coś robi, jeśli zdecyduje się kliknąć wyznaczony obszar. Ale w rzeczywistości, można kliknąć gdziekolwiek i będzie tak samo. Musimy zmienić logikę naszego
mouseClicked
tak, aby sprawdzało położenie przycisku zanim zdecydujemy się zmienić scenę.Podobnie jak podczas projektowania przycisków we Wprowadzeniu do JS, musimy wymyślić takie warunki
if
, które będą sprawdzały pozycję mouseX
i mouseY
. Wszystkie te warunki muszą być spełnione:- Czy
mouseX
jest większe niż pozycja x po lewej stronierect
? - Czy
mouseX
jest mniejsze niż pozycja x po prawej stronierect
? - Czy
mouseY
jest większe niż pozycja y na górzerect
? - Czy
mouseY
jest mniejsze niż pozycja y na dolerect
?
Używamy
&&
, aby sprawdzić, czy wszystkie cztery warunki są prawdziwe, a jeśli tak, to przejdziemy dalej:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
}
};
To jest to! Z tym sprawdzaniem mamy program, gdzie użytkownik klika w określoną część ekranu aby przejść do następnej sceny. Wypróbuj klikając przycisk i obszar poza przyciskiem:
Teraz, kiedy mamy sposób sprawdzania, kiedy kliknięty jest obszar przeznaczony do zmiany scen, możemy użyć kliknięć do innych interakcji w naszych scenach, tak długo, jak użytkownicy nie klikają na przycisk. Oznacza to, że możemy pozwolić użytkownikowi dodać "dzieci Winstona" podczas kliknięcia zamiast przeciągnięcia, jak początkowo chcieliśmy. Wystarczy że dodamy warunek else do naszego if i przeniesiemy kod z
mouseDragged
do wspomnianego else:mouseClicked = function() {
if (mouseX >= 15 && mouseX <= 65 &&
mouseY >= 10 && mouseY <= 45) {
...
} else {
if (currentScene === 5) {
image(getImage("creatures/BabyWinston"),
mouseX-20, mouseY-20);
}
}
};
Teraz musimy dodać sprawdzenie obecnej sceny, aby wyświetlić obrazek tylko na jednej scenie. Ale teraz, jest to dla nas łatwe, aby dodać oddziaływanie na kliknięcia na innych scenach. Co jeszcze możesz umożliwić użytkownikowi dodać? Bębny? Zarost? Pobaw się z programem poniżej:
Chcesz dołączyć do dyskusji?
- jak zmienić kolor przycisku "next" najeżdzając na niego myszką ?(1 głos)
- Ponieważ funkcja draw co chwilę rysuje nowy przycisk wystarczy dodać odpowiedni warunek do drawButton. Jeśli by tak nie było (przycisk rysowałby się tylko raz lub kilka razy na scenę) trzeba by było skorzystać z funkcji mouseMoved, która się wywołuje przy każdym ruchu myszki.
Zrobiłem u siebie spin-off z odpowiednim kodem, funkcja mouseMoved jest wykomentowana.(11 głosów)