Flash tutorial - Spil 2 (shooter)

Dette er tutorial nummer to omkring udvikling af spil i Flash. I denne tutorial vil emnet være skydespil, og der vil blive gennemgået hvordan hitTesten kan bruges i skydespil, og hvordan man også kan få en lille smule navigation med i sine skydespil.

Spillet skal fungere i samme stil som det gamle Deer hunter. Brugeren kan navigere rundt til højre og venstre og skal så forsøge at skyde så mange dyr som muligt.

Tilbage

1. Åben Flash og start et nyt dokument som har standard størrelsen 550x400 pixels og sæt FrameRaten til 24.
   
   
2. Det første vi skal have lavet er tre Movieclips som hedder "trae", "busk" og "bjerg", og som skal indeholde henholdsvis træer, buske og et bjerg.
   
   Da man skal kunne dreje til siderne skal disse Movieclips derfor være breddere end selve scenen som er 550 pixels. Jeg har valgt at lave dem ca. 1700 pixels bredde. Nedenunder ses tre billeder af hvordan jeg har tegnet mine Movieclips (dine behøves naturligvis ikke forestille en skov, dem kan du tegne som du har lyst).
   
   
   
   
   
   
   
   
3. Efter at have lavet selve kulisserne skal vi have lavet målet som man skal ramme. Her har jeg forsøgt at tegne en and, eller i hvertfald noget lignende. Start med at give Movieclippet navnet "and", og lav så dit Movieclips timeline så den ser ud som herunder.
   
   
   
   Frame 1 skal være tom og blot indeholde en stop(); funktion.
   
   Frame 2 til 24 skal indeholde anden (jo flere frames jo længere tid bliver anden vist under spillet og jo nemmere bliver det).
   
   Frame 25 skal igen være tom og skal have en gotoAndStop(1); funktion.
   
   Til sidst skal frame 30 og 31 indeholde anden som der skal se ud når den er blevet ramt.
   
   
   
   
4. Det sidste grafik vi mangler at lave er et sigtekorn. Lav et nyt Movieclip som du kalder "sigtekorn" og tegn i frame 1 et sigtekorn og i frame 2 til 3 et sigtekorn som skyder. Lav så en stop(); funktion i frame 1.
   
   
   
   
5. Da vi nu har lavet alt grafikken skal vi have placeret det på scenen. Lav fire nye layers så du har fem og kald dem, i nævnte rækkefølge:
   
   trae
   and_trae
   busk
   and_busk
   bjerg
   
   På de tre layers "trae", "busk" og "bjerg" højreklikker du i frame 2 og vælger "Insert frame".
   
   
6. Træk så en instance af dit "trae" Movieclip ind på dit "trae" layer og centrere det horizontalt via Align panelet (Ctrl+k). Giv til sidst din instancenavnet "trae".
   
   Gentag dette med dit "busk" og dit "bjerg" Movieclipså de også bliver placeret på deres layer.
   
   
7. Nu skal vi have placeret vores ænder. Træk 5 instancer af din "and" ind på dit "and_trae" layer og giv dem instancenavnene "and1", "and2", ... "and5", og gem den så bag nogle af trærne.
   
   Træk så 3 instancer af din "and" ind på dit "and_busk" layer, giv dem instancenavnene "and6", "and7" og "and8", og gem dem bag nogle af buskene.
   
   
8. Lav et nyt layer som ligger over dit "trae" layer og giv det navnet "tekst + sigtekorn". Højreklik i frame 2 og tryk F7 for at lave en tom Keyframe.
   
   Lav to tekstfelter på dit nye layer i frame 1 og gør dem dynamiske nede i Properties (Ctrl+F3), giv dem også instancenavnene "visPoint" og "visSkudTilbage". Flyt dem tilsidst ud i øverste højre hjørne vha. Align panelet (Ctrl+k).
   
   Træk så en instance af dit sigtekorn ind på samme layer og giv det instancenavnet "sigtekorn".
   
   I frame 2 laver du et statisk tekstfelt hvori du skriver "Game over" samt et dynamisk tekstfelt som du giver instancenavnet "resultat". Centrere disse tekstfelterne vha. Align panelet (Ctrl+k).
   
   
9. Lav nu et sidste Movieclip som du kalder "action" hvori du skriver "ActionScript".
   
   
10. Lav igen et nyt layer som du også kalder "action". Højreklik i frame 2 og tryk F7 for at lave en tom keyframe og træk derefter en instance af dit nye "action" Movieclip ind på dette layer i frame 1.
    
    
11. Nu mangler vi så at skrive selve programmeringen. Skriv følgende ActionScript i frame 1 på dit "action" layer:
    
    
    1. score = 0; //sætter start scoren til 0
    2. skud = 25; //sætter det antal skud man starter med
    3. stop();
    
    
    Skriv følgende ActionScript i frame 2 på dit "action" layer:
    
    
    1. // viser igen musemarkøren
    2. Mouse.show();
    3. //viser resultatet i tekstfeltet "resultat"
    4. _root.resultat.text = "Point: "+_root.score;
    5. stop();
    
    
    
12. Markér dit "action" Movieclip og giv det følgende ActionScript:
    
    
    1. //variabler og funktioner som kun køres en gang når movieclippet loades
    2. onClipEvent (load) {
    3.     //antal millisekunder mellem hver and vises
    4.     tidMellemAnd = 2000;
    5.     //getTimer() angiver tiden siden filmens start
    6.     naesteAnd = getTimer()+tidMellemAnd;
    7.     //viser scoren i visPoint-feltet og tiden i tidsfeltet
    8.     _root.visPoint.text = "Point: "+_root.score;
    9.     _root.visSkudTilbage.text = "Skud tilbage: "+_root.skud;
    10.     //Skjuler musemarkøren
    11.     Mouse.hide();
    12. }
    13. //nedenstående ActionScript udføres 24 gange i sekundet da FrameRaten i
    14. //dette tilfælde er 24
    15. onClipEvent (enterFrame) {
    16.     //sætter sigtekornes placering på x-aksen lig musens
    17.     _root.sigtekorn._x = _root._xmouse;
    18.     //sætter sigtekornes placering på y-aksen lig musens
    19.     _root.sigtekorn._y = _root._ymouse;
    20.     //hvis skkud er lig 0 er spillet slut og der skiftes til frame 2
    21.     if (_root.skud == 0) {
    22.         _root.gotoAndPlay(2);
    23.     }
    24.     //hvis den samlede tid er større end naesteAnd skal der vises
    25.     //en ny and   
    26.     if (getTimer()>=naesteAnd) {
    27.         while (true) {
    28.             // der findes et tilfældigt tal mellem 0 og 7 da der er
    29.             //8 ænder
    30.             nummer = int(Math.random()*7);
    31.             //hvis den tilfældige and er i frame 1 hvor den er
    32.             //skjult stoppes
    33.             //while sætningen, ellers findes et nyt tilfældigt tal
    34.             if (_root["and"+nummer]._currentFrame == 1) {
    35.                 break;
    36.             }
    37.         }
    38.         //viser den tilfældige and ved at skifte til frame 2
    39.         _root["and"+nummer].gotoAndPlay(2);
    40.         //sætter den næste tid hvor der skal vises en ny and
    41.         naesteAnd = getTimer()+tidMellemAnd;
    42.     }
    43. }
    44. //nedestående ActionScript udføres hvergang der klikkes med musen
    45. onClipEvent (mouseDown) {
    46.     //skifter sigtekornet til frame 2 hvor der er skud effekter
    47.     _root["sigtekorn"].gotoAndPlay(2);
    48.     //sætter variablerne x og y lig sigtekornet placering
    49.     x = _root["sigtekorn"]._x;
    50.     y = _root["sigtekorn"]._y;
    51.     //loop som løbes igennem 8 gange og tjekker om hver af de 8
    52.     //ænders placering er lig variablerne x og y
    53.     for (i=0; i<8; i++) {
    54.         //tjekker ikke ænder som er i frame 1, altså de skjulte ænder
    55.         if (_root["and"+i]._currentFrame>1) {
    56.             //hvis en ands placering er lig variablerne x og y
    57.             //skifter anden til
    58.             //frame 30 og der lægges 50 point til scoren
    59.             if (_root["and"+i].hitTest(x, y, false)) {
    60.                 _root["and"+i].gotoAndPlay(30);
    61.                 _root.score += 50;
    62.             }
    63.         }
    64.     }
    65.     //trækker 1 fra variablen skud
    66.     _root.skud--;
    67.     //opdaterer score-feltet
    68.     _root.visPoint.text = "Point: "+_root.score;
    69.     //opdaterer skud-feltet
    70.     _root.visSkudTilbage.text = "Skud tilbage: "+_root.skud;
    71. }
    72. //nedestående ActionScript udføres når venstre piletast er trykket ned
    73. on (keyPress "<Left>") {
    74.     //if sætningen tjekker for at der man ikke kan gå ud af banen
    75.     //i venstre side
    76.     if (_root.trae._x<650) {
    77.         //flytter MovieClippet trae 10 pixels til højre
    78.         _root.trae._x += 10;
    79.         _root.busk._x += 6;
    80.         _root.bjerg._x += 4;
    81.         //flytter de 5 ænder som gemmer sig bag træerne 10 pixels
    82.         //til højre ligesom træerne
    83.         for (i=0; i<5; i++) {
    84.             _root["and"+i]._x += 10;
    85.         }
    86.         //flytter de 3 ænder som gemmer sig bag buskene 6 pixels
    87.         //til højre ligesom buskene
    88.         for (i=5; i<8; i++) {
    89.             _root["and"+i]._x += 6;
    90.         }
    91.     }
    92. }
    93. //nedestående ActionScript har samme funktion som det overstående
    94. //blot i modsat retning
    95. on (keyPress "<Right>") {
    96.     if (_root.trae._x>-150) {
    97.         _root.trae._x += -10;
    98.         _root.busk._x += -6;
    99.         _root.bjerg._x += -4;
    100.         for (i=0; i<5; i++) {
    101.             _root["and"+i]._x += -10;
    102.         }
    103.         for (i=5; i<8; i++) {
    104.             _root["and"+i]._x += -6;
    105.         }
    106.     }
    107. }
    
    
    
13. Til sidst kan du lave et ekstra layer allernederst som du kan kalde "baggrund" hvor du kan tegne noget græs i forgrunden og en lyseblå farve til luften. Du kan også lave en knap som du placerer i frame 2 som har funktionen gotoAndPlay(1) så du kan starte et nyt spil.
    
    Så skulle din main timeline gerne se nogenlunde sådanne ud:
    
    
    
    Tryk Ctrl+enter for at teste filmen.
    
    
    
    Så er vi færdige.
    
    brug piletasterne til at bevæge dig fra side til side(du skal måske først klikke på spillet for at gøre det aktivt).
    
    NB. Dette var en gennemgang af hvordan man kan lave et mere eller mindre færdigt spil. Meningen med dette var at du forhåbentlig kan bruge en eller flere af metoderne til at lave dine egne spil. Godfornøjelse.

Tilbage

Optimeret til Internet Explorer og Firefox min. 1024x768 | Designet og programmeret af jweber