Zbuduj aktywne menu gry Flash: Bounce

Polish (Polski) translation by Władysław Łucyszyn (you can also view the original English article)

Pierwsze wrażenia są bardzo ważne w portalu gier Flash; jeśli twoja gra nie chwyci gracza w ciągu pierwszych kilku sekund, ma mnóstwo innych gier do wyboru. Ponieważ menu jest pierwszym punktem interfejsu, pomoże ci wszystko, co możesz zrobić, by było mniej nudne. W tym samouczku stworzymy menu zawierające głębokość zamiany, płynne efekty przewijania i dwa różne projekty przejścia.

Końcowy podgląd wyników

Oto dwa projekty, nad którymi będziemy pracować:

Pierwszy projekt będzie miał kolejne ekrany przechodzące z różnych kierunków, w zależności od tego, która opcja zostanie kliknięta.

Drugi projekt przenosi wszystkie ekrany od dołu: bardziej elastyczny wybór, jeśli masz więcej niż cztery opcje.

Wprowadzenie: Co sprawia, że jest "aktywny"?

Są dwie główne rzeczy, które sprawiają, że to menu jest "aktywne". Pierwszym z nich są efekty przewijania na przyciski: niezależnie od tego, ile przeskalowały po uruchomieniu, zmniejszają one skalę od określonego rozmiaru (w przeciwieństwie do animacji utworzonej na osi czasu). Po drugie, kod drugiego stylu ma być elastyczny i łatwy do rozszerzenia na własne potrzeby.

Krok 1: Konfiguracja

Pierwszą rzeczą, którą musimy utworzyć, jest nowy plik Flash (ActionScript 3.0). Ustaw jego szerokość na 600px, jej wysokość na 300px, a klatki na sekundę na 30. Kolor tła można zostawić jako biały.

Teraz zapisz plik; możesz nazwać to, co chcesz, ale nazwałem moje menuBounce.fla.

W następnej sekcji utworzymy osiem klipów MovieClip używanych w menu. Dla porównania, oto lista wszystkich kolorów używanych w samouczku:

Biały - #FFFFFF (0xffffff)
Złoto - #E8A317 (0xe8a317)
Jasne złoto - #FBB917 (0xfbb917)
Niebieski - #1569C7 (0x1569c7)
Jasnoniebieski - #1389FF (0x1389ff)
Zielony - #347235 (0x347235)
Jasnozielony - #3E8F1B (0x3e8f1b)
Czerwony - #990000 (0x990000)
Jasnoczerwony - #C10202 (0xc10202)
Matowy szary - #222222 (0x222222)

Krok 2: Tworzenie MovieClips

Na początek utworzymy "backs" (klipy filmowe, które będą wyświetlać rzeczywiste ekrany), ale zanim zaczniemy, włączmy kilka bardzo przydatnych funkcji Flash.

Kliknij scenę prawym przyciskiem myszy i wybierz polecenie Siatka > Pokaż siatkę. Domyślnie utworzy siatkę 10px na 10px na scenie. Następnie ponownie kliknij prawym przyciskiem myszy na scenie i wybierz opcję Przyciąganie > Przyciągaj do siatki.

Teraz możemy zacząć rysować! Wybierz narzędzie Prostokąt i narysuj prostokąt złoty o wymiarach 600 x 300 pikseli. Następnie wybierz to wypełnienie, kliknij prawym przyciskiem myszy i wybierz Konwertuj na symbol. Nadaj nazwę goldBack, ustaw typ filmu na MovieClip, a rejestrację w lewym górnym rogu.

Następnie kliknij prawym przyciskiem myszy MovieClip i wybierz Powiel trzy razy, aby utworzyć trzy kolejne kopie. Teraz koloruj je kolorem jasnoniebieskim, jasnozielonym i jasnoczerwonym. Następnie nadaj im nazwy: blueBack, greenBack i redBack.

Aby akończyć backs'y powinniśmy dodać jakiś tekst wewnątrz każdego MovieClip: na goldBack napisz "PLAY", na blueBack napisz "INSTRUKCJE", na greenBack napisz "OPCJE", a na redBack wpisz "KREDYTY". Kiedy już napisałeś tekst, poleciłbym go rozdzielić, aż stanie się wypełnieniem (to eliminuje potrzebę osadzania czcionek i sprawia, żeprzejście staje się bardziej płynne). Twoje plecy powinny wyglądać podobnie do poniższego:

Teraz zacznijmy od klikalnych kwadratów! Wybierz narzędzie Prostokąt i narysuj kwadrat o jasności 100 x 100 pikseli. Wybierz wypełnienie, kliknij prawym przyciskiem myszy i Konwertuj na symbol. Nazwij MovieClip goldSquare, ustaw typ filmu na MovieClip, a rejestrację w lewym górnym rogu. Nadszedł czas, aby napisać tekst na placu, ale tym razem zamiast rozbijać tekst, zostaw go na razie. Wstaw klatkę kluczową i zmień kolor wypełnienia na złoty. Teraz rozłącz tekst na obie ramki, aż staną się wypełnieniem.

Teraz kliknij prawym przyciskiem myszy MovieClip i wybierz Duplikuj symbol trzy razy. Następnie powtórz ten sam proces z poprzednich dla pozostałych trzech kolorów, nazwanych odpowiednio MovieClips blueSquare, greenSquare i redSquare. Twoje kwadraty powinny wyglądać podobnie do poniższego:

Krok 3: Pozycjonowanie MovieClips

Zacznij od usunięcia wszystkiego poza sceną. Następnie przejdź do Wstaw > Nowy symbol. Nazwij go menuBounceMC, ustaw typ na MovieClip, zarejestruj się w lewym górnym rogu i wyeksportuj jako MenuBounceMC.

Teraz przeciągnij wszystkie plecami z biblioteki i umieść je w następujący sposób:

goldBack: (-600,0)
blueBack: (0,-300)
greenBack: (0,300)
redBack: (600, 0)

Jeśli zamierzasz użyć projektu jednokierunkowego, umieść wszystkie cztery oparcia w jednej z tych pozycji. Użyłem (0, 300).

Teraz przeciągnij wszystkie kwadraty z biblioteki do MovieClip i umieść je w następujący sposób:

goldSquare: (120,150)
blueSquare: (240,150)
greenSquare: (360,150)
redSquare: (480, 150)

Ostatnią rzeczą, którą musimy zrobić przed rozpoczęciem kodowania, jest przypisanie nazw instancji. Ustaw nazwy instancji kwadratów jako square0, square1, square2, square3, począwszy od lewej. Następnie ustaw nazwy instancji dla pleców zgodnie z odpowiadającym kwadratem tego samego koloru. Tak więc goldBack otrzyma nazwę instancji back0, ponieważ goldSquare ma nazwę instancji square0.

Krok 4: Konfigurowanie klas

Po zakończeniu tworzenia i pozycjonowania MovieClips możemy zacząć konfigurować dwie klasy, z których będziemy korzystać.

Najpierw przejdź do właściwości pliku Flash i ustaw jego klasę na MenuBounce; następnie utwórz nowy plik ActionScript 3.0 i zapisz go jako MenuBounce.as.

Teraz skopiuj poniższy kod; Wyjaśnię to po:

package{
  import flash.display.MovieClip;
	import flash.events.Event;
	
	public class MenuBounce extends MovieClip{
		public var menuBounceMC:MenuBounceMC = new MenuBounceMC();
		public function MenuBounce(){
			addChild(menuBounceMC);
		}
	}
}

Jest to podstawowa klasa dokumentów, do której dodaliśmy trochę dodatkowego kodu, który tworzy instancję MenuBounceMC i dodaje ją do sceny.

Teraz utwórz nowy plik ActionScript 3.0 i zapisz go jako MenuBounceMC.as. Teraz skopiuj poniższy kod, abyśmy mogli go skonfigurować.

package{
	import flash.display.MovieClip;
	import flash.display.Sprite;
	import flash.events.Event;
	import flash.events.MouseEvent;
	
	public class MenuBounceMC extends MovieClip{
		public var activeSquare:MovieClip;
		public var activeBack:MovieClip;
		public var squaresArray:Array = new Array();
		public var backsArray:Array = new Array();
		public var speed:Number = 20;
		
		public function MenuBounceMC(){
			
		}
	}
}

Każda zmienna ma określony cel:

activeSquare: Który kwadrat jest przewracany
activeBack: Który z powrotem został wybrany do przeniesienia
squaresArray: Tablica zawierająca wszystkie kwadratowe MovieClips
backsArray: Tablica zawierająca wszystkie tylne MovieClips
speed: Ile pikseli tył jest przenoszony przez każdą ramkę

Wszystkie te zmienne zostały ustawione, z wyjątkiem topSquare (który jest ustawiony w innych funkcjach) i tablic. Więc musimy wepchnąć wszystkie MovieClipy do tablicy. Dodaj następujące linie wewnątrz konstruktora:

			squaresArray = [square0, square1, square2, square3];
			backsArray = [back0, back1, back2, back3];

Jednak ta metoda może być trochę uciążliwa, jeśli zamierzasz używać dużej liczby MovieClipów w menu - powiedzmy 50. Alternatywą byłoby całkowite utworzenie MovieClips za pomocą kodu i wciśnięcie ich podczas dodawania ich do menu. Ale w naszym celu używania tylko ośmiu MovieClip-ów działa dobrze.

Ostatnim zestawem rzeczy, które musimy dodać, aby ukończyć konfigurację, są nasze detektory zdarzeń, które wyzwalają wszystkie przejścia i efekty przechodzenia. Dodaj te linie poniżej linii push().

addEventListener(MouseEvent.MOUSE_OVER, bounceOver);
addEventListener(MouseEvent.MOUSE_OUT, bounceOut);
addEventListener(MouseEvent.CLICK, bounceClick);
addEventListener(Event.ENTER_FRAME, bounceUpdate);

Krok 5: Tworzenie manipulatorów MouseEvent

Zacznijmy od utworzenia trzech łatwiejszych funkcji:

public function bounceOver(event:MouseEvent):void {
			
}
public function bounceOut(event:MouseEvent):void {
			
}
public function bounceClick(event:MouseEvent):void {
				
}

Wewnątrz funkcji bounceOver() zacznij od dodania instrukcji if, aby upewnić się, że żadne z powrotem nie jest obecnie "aktywne" - to znaczy, przejście, przejście na zewnątrz lub siedzenie na wierzchu:

if(activeBack == null){

}

Pozostała część całego kodu w funkcji bounceOver() zostanie zapisana wewnątrz instrukcji if. Teraz obliczamy, czy obiekt zawinięty (event.target) jest kwadratem, sprawdzając, czy jest on w squaresArray[]:

if(squaresArray.indexOf(event.target) != -1){

}

Zakładając, że jest, wykonujemy prawdziwe mięso funkcji:

					activeSquare = event.target as MovieClip;
					activeSquare.gotoAndStop(2);
					setChildIndex(activeSquare, numChildren - 1);

Najpierw ustawiamy zmienną activeSquare, aby wskazywała na kwadrat, o którym mowa. Następnie zatrzymujemy animację tego kwadratu na drugiej klatce, która wyświetla obraz "najazdu". Na koniec przesuniemy ikonkę, aby być na szczycie wszystkiego, używając setChildIndex().

Przechodzimy teraz do funkcji bounceOut(). Tym razem zaczynamy od sprawdzenia, czy obiekt, z którego rozwijana jest mysz, jest aktualnie aktywnym kwadratem:

if(event.target == activeSquare){

}

Wewnątrz bloku if dodaj następujący kod; przerywa animację kwadratu na pierwszej klatce, a następnie ustawia activeSquare z powrotem na wartość null, abyśmy mogli przewrócić nad inną:

				activeSquare.gotoAndStop(1);
				activeSquare = null;

Następnie przejdź do funkcji bounceClick(). Ta funkcja będzie używana do inicjowania wszystkich przejść. Zacznij od sprawdzenia, czy jest już aktywny powrót:

			if(activeBack == null){

			}

Zapobiega to kliknięciu innego kwadratu podczas przejścia. Jeśli jest aktywny powrót, kliknięcie powinno cofnąć to, abyśmy mogli kliknąć inny kwadrat:

			if(activeBack == null){

			}else{
				activeBack = null;
			}

Zakładając, że nie ma aktualnie aktywnego back, po raz kolejny dodaj blok-if, aby sprawdzić, czy kliknięty obiekt był kwadratem:

			if(activeBack == null){
				if(squaresArray.indexOf(event.target) != -1){
					
				}
			}else{
				activeBack = null;
			}

Jeśli użytkownik kliknął kwadrat, musimy ustawić odpowiedni tył jako "aktywny" z powrotem. Ponieważ indeks każdego elementu w backsArray[] pasuje do indeksu każdego elementu w squaresArray, jest to proste:

			if(activeBack == null){
				if(squaresArray.indexOf(event.target) != -1){
					activeBack = backsArray[squaresArray.indexOf(event.target)] as MovieClip;
					
				}
			}else{
				activeBack = null;
			}

Teraz musimy po prostu przesunąć aktywny wstecz, aby był na szczycie wszystkiego:

			if(activeBack == null){
				if(squaresArray.indexOf(event.target) != -1){
					activeBack = backsArray[squaresArray.indexOf(event.target)] as MovieClip;
					setChildIndex(activeBack, numChildren - 1);
				}
			}else{
				activeBack = null;
			}

Krok 6: Tworzenie programu obsługi zdarzeń ostatecznych

To jest ostatnia funkcja, którą zamierzamy stworzyć. Zacznijmy od dodania efektu skalowania w przypadku przewracania lub wyrzucania kwadratu:

public function bounceUpdate(event:Event):void {
	for each (var square in squaresArray) {
		if(square == activeSquare){
			if(square.scaleX <= 1.5){
				square.scaleX +=0.05;
				square.scaleY +=0.05;
			}
		}else{
			if(square.scaleX >= 1){
				square.scaleX -=0.05;
				square.scaleY -=0.05;
			}
		}
	}
}

Tutaj stworzyliśmy pętlę for-each, aby przejrzeć każdy kwadrat w tablicy i sprawdzić, czy jest to aktualnie aktywny kwadrat. Jeśli tak, skalujemy go tak, aby był większy lub równy 1,5 raza jego regularnego rozmiaru; jeśli nie, zmniejszamy go, aż wróci do normalnego rozmiaru. (Z technicznego punktu widzenia ten kod może pozwolić na to, by był nieco mniejszy niż jego standardowy rozmiar, ale w praktyce jest to niezauważalne).

Teraz jest to miejsce, w którym niektórzy z was pójdą waszymi oddzielnymi drogami; jeśli tworzysz projekt 1, przejdź do kroku 7a, a jeśli tworzysz projekt 2, przejdź do kroku 7b.

Krok 7a: Wykończenie projektu 1

Gratulacje, wybrałeś projekt 1! Ten projekt jest prosty i łatwy do naśladowania - zakładając, że masz dokładnie cztery kwadraty i oparcia. Dosyć więcej i staje się bałagan do utrzymania.

Zamierzamy użyć długiej serii zagnieżdżonych instrukcji if-else - bardzo niechlujnie, wiem. Ale powiem ci, jakie są tego powody! Każdy tył ma inną pozycję początkową i kierunek przejścia. W skrócie, nie możesz użyć pojedynczej pętli for do przesuwania wszystkich obiektów MovieClip, chyba że masz jedną instrukcję if, aby sprawdzić, które z powrotem się porusza, inną, aby ustawić oś ruchu (x lub y), a trzecią ustawić prędkość (dodatnia lub ujemna). Okay, możemy przechowywać wszystkie te informacje we właściwościach kwadratów lub coś podobnego, ale myślę, że jest to podejście, w którym zastosowanie ma "Keep It Simple, Stupid".

			if(activeBack == back0){
				if(back0.x < 0){
					back0.x += speed;
				}
			}else{
				if(back0.x > -600){
					back0.x -= speed;
				}
			}
			if(activeBack == back1){
				if(back1.y < 0){
					back1.y += speed;
				}
			}else{
				if(back1.y > -300){
					back1.y -= speed;
				}
			}
			if(activeBack == back2){
				if(back2.y > 0){
					back2.y -= speed;
				}
			}else{
				if(back2.y < 300){
					back2.y += speed;
				}
			}
			if(activeBack == back3){
				if(back3.x > 0){
					back3.x -= speed;
				}
			}else{
				if(back3.x < 600){
					back3.x += speed;
				}
			}

Kod jest łatwy do zrozumienia; patrzy na każde plecy i przesuwa je na scenę lub ze sceny, we właściwym kierunku, w zależności od tego, czy jest aktywne.

Krok 7b: Finishing Design 2

Gratulacje, wybrałeś Design 2! Ten projekt jest o wiele bardziej elastyczny i sprawia, że jest o wiele łatwiej, jeśli chodzi o dodawanie kolejnych kopii i używanie mniejszej ilości kodu. W tym projekcie użyjemy kolejnej pętli do zbadania każdego z powrotem w backsArray:

			for each (var back in backsArray){
				if(back == activeBack){
					if(back.y > 0){
						back.y -= speed;
					}
				}else{
					if(back.y < 300){
						back.y += speed;
					}
				}
		 	}

Teraz powinno to być dość łatwe do zrozumienia. Cykle w plecy i sprawdza każdy, czy jest aktywny. Jeśli tak, kod przesuwa go w górę na stół montażowy i przestaje go przenosić, gdy zostanie całkowicie włączony (to znaczy, gdy osiągnie wartość y=0 lub wyższą). Jeśli tył nie jest aktywny, kod przesuwa go z powrotem, aż osiągnie pozycję wyjściową.

Wniosek

Oto wyzwanie: biorąc pod uwagę 16 kwadratów (i 16 pleców), możesz zrobić to tak, aby kwadraty 1, 5, 9 i 13 tworzyły odpowiednie przejścia od lewej strony, kwadraty 2, 6, 10 i 14 powodują przejście od góry i tak dalej? Będziesz musiał połączyć oba podejścia, a także sprawdzić pozycję aktywnego kwadratu/tyłu w swojej tablicy.

Dziękujemy za poświęcenie czasu na przeczytanie tego samouczka. Mam nadzieję, że podobał ci się gotowy produkt i nauczyłeś się czegoś o tworzeniu aktywnych, elastycznych menu!