Puzzle wersja 2

2001-08-11 00:08

Autor: Artur Kaczmarczyk

pobierz przykład  zobacz przykład

Właściwie opis tej gry powinienem zacząć od wyjaśnienia kwestii dlaczego i po co zacząłem zmieniać coś co już istnieje i jest dostępne na FlashZone.pl jako Puzzle v1.
Otóż korzystając z tutoriala Puzzle v1 zrobiłem dla swojego dziecka puzzle składające się z 12 elementów. Szybko jednak okazało się że muszę przygotować następne puzzle z nowym obrazkiem. Ponieważ ręczne wprowadzanie współrzędnych w każdym z elementów było nieco czasochłonne, przy piątej grze postanowiłem ułatwić sobie pracę i napisać skrypt który będzie uniwersalny i niezależny od rozmiarów i położenia elementów układanki, skrypt który umożliwi mi masową produkcję puzzli i to w czasie nie przekraczającym 15 minut dla jednej układanki. Dlatego też przygotowałem Puzzle v2.

OPIS GRY

CZĘŚĆ GRAFICZNA.

Przykładowy film składa się z 6 warstw. Użyłem aż tylu aby uzyskać większą przejrzystość projektu.
Warstwa "elementy" zawiera elementy przeciągane, z których trzeba ułożyć puzzle, natomiast warstwa "calosc" zawiera gotową układankę. Zawartości pozostałych warstw myślę że nie trzeba wyjaśniać, nazwy mówią same za siebie.

1. Importujemy rysunek (File/Import) lub tworzymy element graficzny używając narzędzi "Rectangle Tool" lub "Oval Tool".
2. Jeżeli importowaliśmy plik graficzny zanim przystąpimy do jego "pocięcia" musimy rozbić go na wypełnienia poleceniem Modify/Break Apart (Ctrl+B).
3. Za pomocą narzędzia "Lasso" tniemy nasz obrazek na dowolną ilość części (w przykładzie 9). Zanim zmienimy położenie odciętego elementu warto skorzystać z panelu "Info" i odpisać jego współrzędne - ułatwi to nam późniejsze poskładanie rysunku w całość. Każdy odcięty fragment konwertujemy na symbol wciskając F8, nazywamy "el_b1", "el_b2" itd. i wybieramy zachowanie "Button".
4. Następnie zaznaczamy każdy guzik (el_b1, el_b2...) i tworzymy z niego klipy filmowe, wciskając F8 i wybierając zachowanie "Movie Clip". Filmy nazywamy kolejno "el_m1", "el_m2" itd.
5. Mając wszystkie potrzebne symbole czyścimy zawartość całej sceny.
6. Dodajemy 5 nowych warstw które nazywamy jak na rysunku nr 1.
7. Otwieramy bibliotekę symboli (Ctrl+L) i na warstwę "calosc" kopiujemy symbole "el_b1", "el_b2"... W panelu "Frame" wybieramy zakładkę "Instance" (Ctrl+I), zmieniamy ich zachowanie na "Movie Clip" i nazywamy odpowiednio "el_ok1", "el_ok2" itd. Teraz ustawiamy elementy tak aby tworzyły gotową układankę, możemy (a nawet powinniśmy) skorzystać z odpisanych wcześniej współrzędnych. Blokujemy warstwę.
8. Na warstwę "elementy" kopiujemy symbole "el_m1", "el_m2"... i nazywamy "el1", "el2"...
9. Za pomocą "Rectangle Tool" lub "Oval Tool" (w zależności od kształtu układanki) z wyłączonym wypełnieniem tworzymy kontur całości i umieszczamy go na warstwie "Kontur".
10. Warstwa "Gratulacje" - klatkę pierwszą zostawiamy pustą, w klatce drugiej wciskamy F7 (Insert/Blank Keyframe) i wpisujemy tekst gratulacyjny.

CZĘŚĆ ACTION SCRIPT.

Aby otworzyć okno edytora skryptów użyj przycisku Show Actions.
Warstwa akcje.

Akcja "Stop()" zatrzymuje odtwarzanie filmu w klatce nr 1.
Zmienna "il_el" przechowuje liczbę elementów układanki - należy ją wprowadzić ręcznie.
Zmienna "licznik" jest zwiększana o 1 za każdym razem gdy prawidłowo ułożymy fragment układanki.
W linii 4 i 5 za pomocą konstruktora "new Array()" definiujemy tablice o nazwach "tabOk_x" i "tabOk_y" które posłużą nam do przechowywania współrzędnych elementów puzzli.
Pętla "for" zawiera stan początkowy licznika "count=1", warunek powtórzenia pętli "count<=il_el" (to znaczy, że pętla będzie wykonywana do momentu w którym "count" nie osiągnie wartości większej od "il_el") oraz wartość przyrostu "count++" (która zwiększa licznik po wykonaniu pętli).

_root["el_ok"+count]._visible=0

ustawia widoczność elementu "el_ok" na zero, czyli obiekt jest niewidoczny. Zostanie on odsłonięty po prawidłowym ułożeniu elementu układanki.
_root - wskazuje główną listwę czasową

_root["el"+count]._alpha=70

ustawia przeźroczystość elementu "el" na 70% aby wyróżnić obiekty które nie są jeszcze ułożone.

Powyższy zapis akcji (z linii 7 i 8) w nowej notacji Flasha 5 zastępuje akcję "set Property" (która oczywiście jest nadal dostępna).

set ("Ok_x"+count, _root["el_ok"+count]._x)

tworzymy zmienne o nazwach "Ok_x1", "Ok_x2" itd., które zawierają współrzędne X elementów "el_ok" odczytanych przy pomocy właściwości "_x".

Wprowadzając tą zmienną w trybie Normal Mode musimy pamiętać o zaznaczeniu opcji "expression" dla pól "Variable" i "Value"

Teraz należy przygotować tablicę przechowującą współrzędne określające prawidłowe upuszczenie elementu układanki.
Ponieważ trafienie z dokładnością co do 1 pixela byłoby rzeczą dosyć trudną do zrobienia musimy określić pewien zakres tolerancji w granicach której element zostanie uznany za prawidłowo ułożony. Dlatego też w tablicy umieszczamy zmienne ["Ok_x"+count] powiększone i pomniejszone o 10 pixeli. Używamy funkcji "eval" ponieważ jeżeli jej argument jest zmienną lub właściwością to zwraca ona jej wartość, w przeciwnym wypadku tablica zawierała by ciąg znaków "Ok_x110".

Zmienna "Ok_y" i tablica "tabOk_y" analogicznie jak "Ok_x" i "tabOk_x".

Przeanalizujmy jeszcze raz całość skryptu w klatce 1.
"Stop()" zatrzymuje film w klatce 1, "il_el=9" określa ilość elementów puzzli, "licznik" - zlicza elementy prawidłowo ułożone, konstruktor "new Array()" definiuje tablice o nazwach "tabOk_x" i "tabOk_y", za pomocą pętli "for" określamy ilość zmiennych użytych w filmie a odpowiadającą ilości elementów puzzli. Właściwość "_visible" ukrywa wszystkie elementy gotowych puzzli a właściwość "_alpha" ustawia na 70% przeźroczystość elementów do ułożenia. Następnie odczytujemy współrzędne X i Y elementów gotowych puzzli i umieszczamy je w zmiennych ["Ok_x"+count] i ["Ok_y"+count]. Wreszcie zmienne ["Ok_x"+count] i ["Ok_y"+count] umieszczamy w tablicach i określamy tolerancję dla puszczonego elementu na +/- 10 pixeli.

Teraz akcje umieszczone w przeciąganych elementach układanki (el1, el2...).

Używając przycisku "Edit Symbols" umieszczonego w prawym górnym rogu okna wybierz element "el1" w którym wprowadzimy odpowiedni skrypt.

Opis akcji.

on(rollOver) {
   element = new String(this._name);
   indeks = element.slice(2,4)
}

Po najechaniu wskaźnikiem myszy tworzy obiekt typu "String" (obiekty typu String służą do operacji związanych z ciągami znaków i zastępują funkcje znakowe) o nazwie "element" odczytujący nazwę "_name" wskazanego elementu "this", zmienna "indeks" pobiera z nazwy wskazanego elementu za pomocą metody "slice" podciąg zaczynający się po znaku o numerze 2 do znaku o numerze 4 (czyli znaki 3 i 4). W naszym przykładzie wystarczył by tylko jeden znak o numerze 3 ale być może ktoś zechce stworzyć puzzle z 10 lub więcej elementów. Pobrany podciąg odpowiada numerowi danego elementu, czyli z nazwy np. el1 pobierany jest podciąg "1", gdyby istniał element o nazwie el29 został by pobrany podciąg "29". Dzięki temu skrypt wie z którym elementem ma do czynienia (jest to ważne przy odczytywaniu danych z tablic).

on(press) {
   startDrag (this);
}

Po naciśnięciu lewego przycisku myszy zaczynamy przeciągać element.

on(release){
   ...
}

W chwili puszczenia przycisku myszy odczytujemy współrzędne X i Y przeciąganego elementu (this) i umieszczamy je w zmiennych "el_x", "el_y".
Teraz rzecz najważniejsza, czyli odczytanie zawartości tablicy.

Współrzędne umieszczone są w tablicy w następujący sposób:

                      kolumna 0              kolumna1

"el1" - wiersz 1   współrzędna+10         współrzędna-10

"el2" - wiersz 2   współrzędna+10         współrzędna-10

itd.

więc jeżeli (wiersz 1, kolumna 0)>el_x1>(wiersz 1, kolumna 1) to element został ułożony prawidłowo.
Dzięki zachowaniu konsekwencji w nazewnictwie i numeracji elementów oraz umieszczaniu wartości w tablicach (z uwzględnieniem tolerancji) cały skrypt działa prawidłowo w dowolnym elemencie.
Za pomocą warunku "if" sprawdzamy poprawność upuszczenia elementu "el" i jeżeli nam się powiodło skrypt przechodzi dalej.

this._visible=0

usuwa przeciągany obiekt

_root["el_ok"+indeks]._visible=1

odsłania element "el_ok"

with (_root.ding)
gotoAndPlay(2)

dodaje efekt dźwiękowy przechodząc do Movie Clip'a "ding" "with" - zastępuje akcję "tell Target" Flasha 4 oznaczoną przez Macromedia jako wycofywaną.

_root.licznik += 1

zwiększa zmienną "licznik" o 1

if (_root.licznik==_root.il_el){
   with (_root){
      gotoAndStop(2);
   }
}

jeżeli zmienna "licznik" jest taka sama jak zmienna "il_el" to znaczy, że ułożyliśmy prawidłowo całe puzzle więc film przechodzi do drugiej klatki głównej listwy czasowej _root i zatrzymuje się wyświetlając tekst gratulacyjny.
Jeżeli upuścimy element (release) w niewłaściwym miejscu blok "if" zostanie pominięty i wykonana zostanie akcja "stopDrag" - koniec przeciągania.
Ponieważ powyższy skrypt nie jest przypisany do konkretnego elementu wystarczy wybrać w oknie edytora skryptów tryb "Expert Mode" i poleceniem Edit/Copy (Ctrl+C) skopiować cały skrypt, następnie używając przycisku "Edit Symbols" wybrać następne symbole "el2", "el3"... i wkleić do nich poleceniem Edit/Paste (Ctrl+V) skopiowany skrypt.

Jeszcze warstwa dźwięki.
Z menu "Insert" wybieramy "New Symbol" (Ctrl+F8) nazywamy go "ding" i wybieramy zachowanie "Movie Clip". W pierwszej klatce ustawiamy akcję "Stop()" żeby dźwięk nie zaczął się sam odtwarzać. Do klatki drugiej importujemy dźwięk który będzie potwierdzał prawidłowe ułożenie elementu puzzli. Symbol "ding" umieszczamy w klatce 1 warstwy "dzwięki", do drugiej klatki importujemy dźwięk z oklaskami odtwarzanymi łącznie z tekstem gratulacyjnym po prawidłowym ułożeniu całości puzzli.

Możemy dorobić również przycisk który po ułożeniu całości układanki będzie powracał do klatki 1 i uruchamiał grę od początku, jest to na tyle proste że pominę opis jego wykonania.

Na zakończenie krótkie wyjaśnienie użytych symboli.
We Flashu 4 "Movie Clip" nie reagował na akcje myszą (ponieważ nie można było dołączyć do niego skryptu) dlatego należało połączyć dwa elementy "Button" - reagujący na mysz oraz "Movie Clip" - który można było przeciągać (przykład Puzzle v1 na FlashZone.pl).
Flash 5 dał "Movie Clipom" dodatkowe możliwości w tym reagowanie na mysz, można by więc z poszczególnych elementów układanki stworzyć tylko symbole "Movie Clipów" - umieścić je na warstwach "elementy" i "calosc" i odpowiednio nazwać.
Dlaczego więc użyłem najpierw symboli "Button"? Odpowiedź jest prosta - tylko i wyłącznie dla rączki z wyciągniętym palcem wskazującym pojawiającej się po najechaniu myszą na "Button":-).

I to chyba wszystko. Życzę udanej zabawy.
Artur Kaczmarczyk