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

Åben Flash og start et nyt dokument som har standard størrelsen 550x400 pixels og sæt FrameRaten til 24.
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).
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.
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.
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".
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.
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.
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).
Lav nu et sidste Movieclip som du kalder "action" hvori du skriver "ActionScript".
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.
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();
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. }
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

kommentar 11	Skrevet af carl bordum 23/11-2008
hvis der er nogen der mangler et sted til spil så send en email til carl@bordum.dk også kommer de ind på bordum.dk

kommentar 10	Skrevet af Martin 22/10-2008
Er det muligt at lave spillet i classes så det passer berde til Actionscript 3

kommentar 9	Skrevet af jweber 24/6-2008
Tag at start med nogle af de lidt nemmere så, det ville du måske få mere ud af i starten, så kan du altid gå tilbage til de lidt sværere igen bagefter.

kommentar 8	Skrevet af Natalie 24/6-2008
Er helt nyebgynder i flash, har kun haft grundlæggende timer i det, og--- øv jeg kan desværre slet ikke få det til at virke :(

kommentar 7	Skrevet af AznGirl 23/3-2008
Lol nu kan jeg endelig lave en slags fødselsdags gave til min søster xD.. Ved I forresten hvordan man laver madspil. I ved, man får en opskrift og skal putte de rigtige ting i skålen og når tiden er gået ser man hvor mange madretter man kunne lave.. Jeg har nu arbejdet med flash i snart et år(jeg bliver snart 13 :D) og jeg kan stadig ikke find eud af at lave madspil :/

kommentar 6	Skrevet af mikkel 20/3-2008
Jeg er selv kun begynder i flash og føldte det lærenemt og interresant at læsse denne trin for trin guide men jeg har bare et enkelt spørgsmål er der nogen af jerg der kender et gratis flash program eller hvertfald et program hvor der er muglighed for programering mvh. Mikkel

kommentar 5	Skrevet af katrine 27/7-2007
jeg syns det var rigtig sjovt men jeg kan desvære ikke lave et selv fordi den der flash den koster alt for meget den koster jo 4000 kr

kommentar 4

Skrevet af ?

Tak for den Weber. Fedt med alle kommentarerne inde i actionsscriptet, når man ikke er 100% hjemme i Flash endnu.
Gør det meget lettere selv at eksperimentere, og det er oftest det der giver læringen.

Fandt dog en mindre uregelmæssighed:

\"// der findes et tilfældigt tal mellem 0 og 7 da der er
//8 ænder
nummer = int(Math.random()*7);\"

Instance numrerne på ænderne går fra 1-8, så nummer 8 bliver aldrig vist.
Jeg måtte derudover sætte Math.Random op til 9 før, jeg begyndte at få nummer 8 vist. Kan det være fordi Math.random finder decimaltal MELLEM 1 og 9, og at int altid runder ned?

Mvh Niels

kommentar 3	Skrevet af ?
Det virker helt sikkert jo, men det kan være at du har lavet en mindre fejl et sted. Hvis du kontakter mig via mail med dit problem skal jeg gerne prøve at hjælpe dig. Mvh jweber

kommentar 2	Skrevet af ?
det virker ikke!!!!!

kommentar 1	Skrevet af ?
Ikke helt så godt forklaret som de andre artikler. Mvh. Andreas

Få hjælp i forummet

Download FLA

Vurdering (17 stemmer) 4.5

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

Skriv din kommentar til denne tutorial (eller gå til forummet)
Navn	Kodeflet

Partnere Officeguide.dk PageRank Google Gratis spil Gamle Online Spil mySiteChart.dk AGF svømning IT-Corner.dk Tilskudsbasen.dk