Flash MX (6) Tutorial – Tic Tac Toe Spiel erstellen
Benutze Funktionen:
SetProperty();
Variablen
If() else if()
Zum Anfang benötigen wir erst einmal eine Ebene für den Hintergrund (Der Hintergrund soll das Spielfeld darstellen also in einer Gitter form Zeichen, ein Bild wie es aussehen könnte ist weiter unten):
Bild #1
Ich habe die Ebene „BG“ genannt (Der Teil mit dem Tween kann ignoriert werden, das Spiel habe ich für meine HP gemacht und da ist halt ein einblend Tween) Die „BG“ Eben hat insg. 7 Frames in dieser Reihenfolge 1. Frame = KeyFrame, 2. + 3. Frame = Frames, 4. + 5. + 6. + 7. Frame = KeyFrames. In das Erste KeyFrame kommt dieser Actionscript (Blau Markiert):
feld1a="0";
feld2a="0";
feld3a="0";
feld1b="0";
feld2b="0";
feld3b="0";
feld1c="0";
feld2c="0";
feld3c="0";
curturn="pl1";
Der AS Code bewirkt das alle die Variablen feld1a – feld3c auf 0 gesetzt werden, und die Variable curturn auf pl1. Die Variablen feldXX sind dafür da damit das AS weis welche Figur nachher auf einem Feld liegt. Die Variable curturn gibt an welcher Spieler gerade dran ist pl1 bedeutet „Pl“ayer 1 und pl2 „Pl“ayer 2.
In Die letzten 4 Keyframes der Ebene BG kommt jeweils dieser AS Code:
stop();
Dann brauchen wir noch eine Ebene für den Text (Dieser wird Später anzeigen wer gewonnen hat oder ob es ein unentschieden ist), ich habe diese Ebene „Text“ genannt. Diese Eben hat auch insg. 7 Frames, in dieser Reihenfolge 1. – 4. Frame = Frames, 5. + 6. + 7. Frame = KeyFrames (Im Bild oben ist der Erste Frame auch ein KeyFrame weil davor ein Tween, ist müsst ihr nicht so machen). In das Erste KEYFRAME (5. Frame) schreibt ihr jetzt so was wie „Spieler 1 hat gewonnen“, im 2. KEYFRAME (6. Frame) schreibt ihr das selbe nur mit Spieler 2 hat gewonnen, und im 3. KEYFRAME (7. Frame) schreibt ihr „Unentschieden“. Wenn ihr wollt könnt ihr noch einen Button in die Frames machen damit man noch mal spielen kann. Wenn ihr einen Button machen wollt benutzt diesen AS Code dafür :
on(release){
gotoandplay (1)
}
Jetzt Benötigt ihr noch eine neue Ebene „Pictures-Player-1“ heißt Sie bei mir. Diese Ebene hat 4 Frames, wobei das erste ein Leeres KeyFrame ist (Wie im Bild Oben zu sehen ist). Jetzt macht ihr erst mal ein neues Symbol ( Ctrl+F8, dann „MovieClip“ auswählen“) dort Zeichnet ihr euch ein Spielstein, die Größe sollte so sein das der Spielstein in die Felder passt (Bild unten).
Bild #2
Das Bild Zeigt den Hintergrund, (Mit dem Spielfeld, hier in Form von Bambus stangen) und die Spielsteine für Spieler 2.
Jetzt geht ihr in das 2. Frame in der „Pictures-Player-1“ Ebene und setzt in jedes Feld einen Spielstein. Ganz oben links der Spielstein bekommt den Instanznamen „eis1a“ wobei das 1a die Position angibt, damit man nachher nicht so verwirrt ist ;). Dann oben in der mitte der Spielstein bekommt den Instanznamen eis2a, oben rechts eis3a usw.
[1a]-[2a]-[3a]
[1b]-[2b]-[3b]
[1c]-[2c]-[3c] <- Das sind die Positionen der Spielsteine
Damit die Spielstein aber nicht von anfang an sichtbar sind müssen wir folgenden AS Code noch in das Frame einfügen:
setProperty("eis1a", _visible, false);
setProperty("eis2a", _visible, false);
setProperty("eis3a", _visible, false);
setProperty("eis1b", _visible, false);
setProperty("eis2b", _visible, false);
setProperty("eis3b", _visible, false);
setProperty("eis1c", _visible, false);
setProperty("eis2c", _visible, false);
setProperty("eis3c", _visible, false);
setProperty(); setzt die Einstellungen in diesem fall _visible auf false also nicht sichtbar.
Jetzt machen wir wieder eine neue Ebene „Pictures-Player-2“ die Frame Aufteilung ist die selbe wie oben 1. Frame = LeeresKeyFrame Rest Normale Frames. jetzt macht ihr wieder einen neuen MC ( Ctrl+F8, dann auf „MovieClip“) und malt einen Spielstein für Spieler 2 (Dieser sollte eine andere Farbe haben ;). Nun setzt ihr die Spielstein wie oben auch in jedes Feld und gebt ihnen Instanznamen, aber diesmal sollen sie baer1a , baer2a , baer3a , baer1b usw. heissen. Damit diese dann auch unsichtbar sind am Anfang fügen wir diesen Code in das Frame ein:
setProperty("baer1a", _visible, false);
setProperty("baer2a", _visible, false);
setProperty("baer3a", _visible, false);
setProperty("baer1b", _visible, false);
setProperty("baer2b", _visible, false);
setProperty("baer3b", _visible, false);
setProperty("baer1c", _visible, false);
setProperty("baer2c", _visible, false);
setProperty("baer3c", _visible, false);
Jetzt erstellen wir eine neue Ebene “Check” mit 4 Frames. Diese Ebene hat im vorletzten Frame ein KeyFrame (Bild 1) in das wir folgenden AS Code einfügen:
if(feld1a == "pl1" && feld2a == "pl1" && feld3a == "pl1"){
gotoandstop (5)
}else if(feld1b == "pl1" && feld2b == "pl1" && feld3b == "pl1"){
gotoandstop (5)
}else if(feld1c == "pl1" && feld2c == "pl1" && feld3c == "pl1"){
gotoandstop (5)
}else if(feld1a == "pl1" && feld1b == "pl1" && feld1c == "pl1"){
gotoandstop (5)
}else if(feld2a == "pl1" && feld2b == "pl1" && feld2c == "pl1"){
gotoandstop (5)
}else if(feld3a == "pl1" && feld3b == "pl1" && feld3c == "pl1"){
gotoandstop (5)
}else if(feld1a == "pl1" && feld2b == "pl1" && feld3c == "pl1"){
gotoandstop (5)
}else if(feld3a == "pl1" && feld2b == "pl1" && feld1c == "pl1"){
gotoandstop (5)
}else if(feld1a == "pl2" && feld2a == "pl2" && feld3a == "pl2"){
gotoandstop (6)
}else if(feld1b == "pl2" && feld2b == "pl2" && feld3b == "pl2"){
gotoandstop (6)
}else if(feld1c == "pl2" && feld2c == "pl2" && feld3c == "pl2"){
gotoandstop (6)
}else if(feld1a == "pl2" && feld1b == "pl2" && feld1c == "pl2"){
gotoandstop (6)
}else if(feld2a == "pl2" && feld2b == "pl2" && feld2c == "pl2"){
gotoandstop (6)
}else if(feld3a == "pl2" && feld3b == "pl2" && feld3c == "pl2"){
gotoandstop (6)
}else if(feld1a == "pl2" && feld2b == "pl2" && feld3c == "pl2"){
gotoandstop (6)
}else if(feld3a == "pl2" && feld2b == "pl2" && feld1c == "pl2"){
gotoandstop (6)
}else if(feld1a != "0" && feld2a != "0" && feld3a != "0" && feld1b != "0" && feld2b != "0" && feld3b != "0" && feld1c != "0" && feld2c != "0" && feld3c != "0"){
gotoandstop (7)
}
Dieser AS Code überprüft ob ein Spieler Gewonnen hat oder ob es ein unentschieden ist.
Jetzt machen wir noch eine Letzte Ebene „Buttons“ diese hat 4 Frames. Im letzten Frame ist ein KeyFrame (Bild 1). Wie der Name schon sagt kommen jetzt die Buttons dazu einen neuen Button erstellen. Ihr zeichnet ihr ein Rechteck (ohne Rand) das die größe eines Spielsteins hat markiert es und drückt „F8“ in dem Menu wählt ihr dann noch „Button“ und drückt dann auf OK jetzt geht ihr nur noch unten in der Properties leiste auf Color und wählt dort Alpha aus den wert setzt ihr auf 0 damit der button nicht sichtbar ist nachher. Diesen Button legt ihr dann in dem Frame auf jeden Spielstein. Jetzt klick ihr den Button oben links an, und gebt ihm folgenden AS Code:
on(release){
if(feld1a == "0" && curturn == "pl1"){
setProperty("baer1a", _visible, true);
feld1a = "pl1"
curturn = "pl2"
gotoandplay (3)
} else if(feld1a == "0" && curturn == "pl2"){
setProperty("eis1a", _visible, true);
feld1a = "pl2"
curturn = "pl1"
gotoandplay (3)
}
}
Das bedeutet das wenn der Button gedrückt wird, das er überprüft ob das feld 1a noch leer ist ( feld1a == „0“ ) UND ( && ) das Spieler 1 dran ist ( curturn == „pl1“ ) sollte das nicht der Fall sein übergeht der den AS Code in den geschweiften Klammern und geht zum nächsten Block „else if“ hier wird auch überprüft ob das feld den noch leer ist also das die Variable feld1a gleich 0 ist UND das Spieler 2 dran ist. Wenn das so ist setzt der die Variable feld1a auf pl2, das soviel heißt wie das das feld 1a von Player 2 belegt ist. Dann lässt der AS Code noch den Spielstein sichtbar werden ( setProperty(); ). Danach Setzt der die Variable curturn „CurrentTurn“ zu pl1 was soviel heißen soll das Spieler 1 jetzt wieder darf. Danach Spielt er ab Frame 3 weiter, das ergibt dann eine Schleife die erst aufhört wenn es ein Gewinner gibt oder das es unentschieden ist
Bei dem 2. Button kommt der selbe AS Code hin mit kleinen Änderungen oben im Code hab ich diese Änderungen schon Rot Markiert, hier der Code für Button 2a:
on(release){
if(feld2a == "0" && curturn == "pl1"){
setProperty("baer2a", _visible, true);
feld2a = "pl1"
curturn = "pl2"
gotoandplay (3)
} else if(feld2a == "0" && curturn == "pl2"){
setProperty("eis2a", _visible, true);
feld2a = "pl2"
curturn = "pl1"
gotoandplay (3)
}
}
Ihr seht also da ändert sich nicht viel, bei den anderen Buttons müsst ihr nun das selbe machen wie oben. Die Rot Markierten Stellen einfach eins weiter also bei Button 3a kommt dann statt feld2a feld3a hin und statt baer2a oder eis2a kommt da baer3a oder eis3a hin.