curlingthebrackets / flash / flash-emne / as3 /

• Mix
• tech
• web
• flash
• M1
• M2
• M4
• M5
• WP
• About

Keyboard – kort men hakkende

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(e:KeyboardEvent) {
	if (e.keyCode == Keyboard.RIGHT) {
		mc.x +=5;
	}
	if (e.keyCode == Keyboard.LEFT) {
		mc.x -=5;
	}
	if (e.keyCode == Keyboard.UP) {
		mc.y -=5;
	}
	if (e.keyCode == Keyboard.DOWN) {
		mc.y +=5;
	}
}

Se også: Keyboard – lang men flydende

Keyboard – lang men flydende

Alle de keys man har brug for i form af booleans

var rightArrow:Boolean=false;
var leftArrow:Boolean=false;
var upArrow:Boolean=false;
var downArrow:Boolean=false;

KEY_DOWN listeneren sætter dem til true

stage.addEventListener(KeyboardEvent.KEY_DOWN, keyPressed);
function keyPressed(e:KeyboardEvent) {
	if (e.keyCode == Keyboard.RIGHT) {
		rightArrow = true;
	}
	if (e.keyCode == Keyboard.LEFT) {
		leftArrow = true;
	}
	if (e.keyCode == Keyboard.UP) {
		upArrow = true;
	}
	if (e.keyCode == Keyboard.DOWN) {
		downArrow = true;
	}
}

KEY_UP listeneren sætter dem til false

stage.addEventListener(KeyboardEvent.KEY_UP, keyReleased);
function keyReleased(e:KeyboardEvent) {
	if (e.keyCode == Keyboard.RIGHT) {
		rightArrow = false;
	}
	if (e.keyCode == Keyboard.LEFT) {
		leftArrow = false;
	}
	if (e.keyCode == Keyboard.UP) {
		upArrow = false;
	}
	if (e.keyCode == Keyboard.DOWN) {
		downArrow = false;
	}
}

ENTER_FRAME listeneren reagerer på dem prompte

stage.addEventListener(Event.ENTER_FRAME, MOVE);
function MOVE(e:Event) {
	if (rightArrow) {
		mc.x += 5;
		mc.play();
	}
	if (leftArrow) {
		mc.x -= 5;
		mc.play();
	}
	if (upArrow) {
		mc.y -= 5;
		mc.play();
	}
	if (downArrow) {
		mc.y += 5;
		mc.play();
	}
	if (!rightArrow && !leftArrow && !upArrow && !downArrow) {
		mc.stop();
	}
}

Se også: Keyboard – kort men hakkende

Drop_and_Catch 1

2 movieClips oprettes, frugt_mc og kurv_mc.
Ind på scenen med dem på et lag kaldet graphics.
På actionScript lages indledes på sædvanlig vis med variabler og startværdier:

stop();
Mouse.hide();
 
var winScore:Number = 3;
var score:Number = 0;
var speed:Number = 10;
var stageH:Number = stage.stageHeight;
var stageW:Number = stage.stageWidth;
 
score_txt.text = "Get: " + winScore + " fruits";

score_txt er et tekstfeldt du tegner med tekstværktøjet på et tekst-lag. I property-panelet kan du indstille det til at være dynamisk, give det dets nævnte instancenavn, og formatere det på noget prøvetekst, som du så sletter igen bagefter. Teksten blir alligevel straks erstattet af værdien ovenfor.

Så til den konstante bevægelse:

addEventListener(Event.ENTER_FRAME, MOVE);
function MOVE(e:Event):void {
    kurv_mc.x = mouseX;
    frugt_mc.y += speed;
    if (frugt_mc.y > stageH) {
        frugt_mc.y = 0;
        frugt_mc.x = Math.random()*stageW;
        speed++;
    }
}

Følgende foregår konstant, på den valgte frame-rate:
kurv_mc følger musens x-værdi.
frugt_mc bevæger sig nedaf positivt på y-aksen, og hvis den rammer bunden, lægges den straks op igen på en tilfældig x-værdi, og farten øges en smule til næste himmelfald.
Bemærk Math.random(), som udgør en random værdi mellem 0 og 1 , og derfor skal ganges med max-værdien stageW, for at udgøre en random værdi mellem 0 og hele scenebredden.

Hvis man fanger den med kurv_mc (skrives indenfor MOVE, før dens afsluttende '}'):

    if (kurv_mc.hitTestObject ( frugt_mc)) {
        score++;
        score_txt.text = "your score is: " + score + " fruits";
        frugt_mc.y = 0;
        frugt_mc.x = Math.random () * stageW;
        speed++;
        if (score >= winScore) {
            RESUME("win");
        }
    }

Hvis man rammer, er der pointstigning, og det vises i tekstboksen. Så blir frugt_mc’s y-værdi nulstillet påny et tilfældigt sted på indenfor bredden og farten øges til kommende tur ned.
Og derefter blir der vurderet om man er nået til vinder-stadiet og functionen RESUME(med vedhæftet parameter “win”) blir kaldt.

Se bort fra denne forklaring lige efter du har læst og forstået den, se på koden og lev dig ind i den – og skriv så en /*kommentar*/ med helt egne ord og din egen forklaring udfra helt egen forståelse.

Nedenunder MOVE defineres RESUME (som ber om et vedhæftet parameter, som den jo også får, og som den skal bruge til videre behandling):

function RESUME(where:String):void {
    Mouse.show();
    removeEventListener(Event.ENTER_FRAME, MOVE);
    gotoAndStop(where);
}

Et parameter er en variabel, der videresendes fra funktion til funktion, fordi dens værdi kendes i den ene, og bruges i den anden. RESUME definerer en variabel i sin parenthes, og MOVE gir den en værdi i sin parenthes. Der kan være mange parametre i en enkelt function og de adskilles med komma.

Forslag til udbygning:
//random speed
//mere frugt fra himlen, individuel point-værdi, individuel speed
//POSITION, EVALUATE functions
//sidelæns spil
//undgå i stedet for at fange
//splash, og lose + grafik
//animationer på mc’erne
//lyd

se evt. Drop_and_Catch 2

mcStatus mekanik

mc er movieclippet med den sektionerede timeline og relevante labels. Dens labels har her samme navne som de mcStatus værdier den skal reagere på! De behøver ikke at være de samme, men det er smart.
mcStatus er en variabel, der får værdi af tilstande, som indgår i en logisk rækkefølge. Hvert trin betinger det næste (erstat navne med dem du arbejder med).

Start med at få overblik over de forskellige mcStatus værdier

/*mcStatus værdier: sleep, awake, dressup */

Og definer så en startværdi for mcStatus

var mcStatus:String = "sleep";

Kombinationer

Andre objekter ændrer mcStatus:

alarm_mc.buttonMode = true;
alarm_mc.addEventListener(MouseEvent.CLICK, alarm_HANDLER);
function alarm_HANDLER (e:MouseEvent):void {
	if (mcStatus == "sleep") {
		mcStatus = "awake";
	}
}
dress_mc.buttonMode = true;
dress_mc.addEventListener(MouseEvent.CLICK, dress_HANDLER);
function dress_HANDLER (e:MouseEvent):void {
	if (mcStatus == "awake") {
		mcStatus = "dressup";
	}
}

mc aktiveres ved direkte klik (hvis den ikke har været der):

mc.buttonMode = true;
mc.addEventListener(MouseEvent.CLICK, mc_HANDLER);
function mc_HANDLER (e:MouseEvent):void {
if (mc.currentLabel!= mcStatus){
	mc.gotoAndPlay(mcStatus);
	}

Andre objekter ændrer mcStatus og aktiverer mc:

dress_mc.buttonMode = true;
dress_mc.addEventListener(MouseEvent.CLICK, dress_HANDLER);
function dress_HANDLER (e:MouseEvent):void {
	if (mcStatus == "awake") {
		mcStatus = "dressup";
		mc.gotoAndPlay (mcStatus);
	}
}

Points – score

Hermed beskrivelsen og en anvendelsesprocedure for implementering i eksisterende scripts.

Princippet i trin

1. at definere variabler til points, maximum-værdi, minimum-værdi og start-værdi
2. at ændre værdierne på passende tidspunkt
3. at vise værdierne for bruger
4. at chekke om værdierne har nået den afgørende værdi
5. at udføre konsekvenserne deraf

Det er meget muligt, at du har brug for kun at tælle opad – eller nedad, men her går eksempel i begge retninger, som du kan tilpasse. Eksemplet kan udbygges til også at tælle liv.

Foreslået fremgangs-rækkefølge

Nogle ’sigende’ variabler

(hører til i øverste del af et script, for nemt at kunne ’skrues’ på) :

var winScore:Number = 10;
var loseScore:Number = -10;
 
var points:Number=0;

Et dynamisk tekstfelt til display

(På et score-lag i spil.scenariet med instancenavnet ’score_txt’).
Det kan tegnes med tekstværktøjet og indstilles til dynamisk i property panelet, hvor det også formateres med lidt prøve-tekst i. Det skal være tomt for tekst når du er færdig, for teksten blir scriptet frem.

Tekst-feltet kan evt. starte ud med en forklaring:

score_txt.text = "Get "+ winScore.toString() + " points!";

Ændring af værdier

Så stilles spørgsmålet:
Hvornår eller under hvilke omstændigheder skal points- værdien stige?

Det kunne fx. være hvis noget rammer noget andet, eller hvis en status-variabel er opfyldt, eller en boolean er blevet sat til true.
I den øskede situation, som regel inden for en if-condition, øges points med den ønskede værdi:

points += 1; 
// eller points=points+1; // eller points+1;

Hvornår eller under hvilke omstændigheder skal points- værdien falde?
Samme overvejelser for mistede points, og hvormange af gangen:

points - -; 
// eller med kompleksitet fx. points/(en brøkdel af den tid der er gået);

Nye spørgsmål:
Hvornår skal points’ene vises?
Tekstfeltet påkaldes, som vist nedenfor, fx. hver gang points’ene ændres.
Hvornår har man vundet eller tabt?
Eller som i dette eksempel: Hvilke top- eller bund- værdier skal points’ene sammenlignes med?
Hvad skal der ske hvis sammenligningen passer?

Eksempel

I simpel rækkefølge

points += 2;
score_txt.text = "Your points =  "+ points.toString() ;
if (points == winScore) {
// her slukkes for evt. igangsatte ENTER_FRAME listeners
    gotoAndStop("win");
}

- Og tilsvarende for minus-points.

I en udregnende function

//////////////
points += 2;
EVALUATE();
//////////////
points --;
EVALUATE();
//////////////
function EVALUATE():void {
    score_txt.text = "Your points =  "+ points.toString() ;
    if (points == winScore) {
        // her slukkes for evt. igangsatte ENTER_FRAME listeners
         gotoAndStop("win");
    }
    if (points == loseScore) {
        // også her slukkes for kørende ENTER_FRAME listeners
        gotoAndStop("lose");
    }
}

Bat_Ball

Læs det hele før du går i gang.
Du lærer mest ved at stave dig igennem koden og teste filmen ofte. Gem også ofte. Gem flere versioner, så du eksperimenterer frit med koden i en teste-fil.
Hvis du alligevel kopierer kodebidder herfra, så pas meget på anførelsestegnene – de “driller”.

Tegn og bevæg

Lav en movieclip til bat, og en movieclip til ball.
Træk den ind på scenen i hvert sit navngivet lag og kald dem:

bat_mc
ball_mc

I et nyt AS lag skrives scriptet:

    stop();
    Mouse.hide();
 
    stage.addEventListener(Event.ENTER_FRAME, stuff_mover);
    function stuff_mover(e:Event) :void {
    bat_mc.x = mouseX;
    }

Gem og test
Bat følger musen. (markøren er skjult)
Selve filmens framerate kan du sætte op til 32 fp, så glider det bedre.
Bemærk Event.ENTER_FRAME, som ikke er en MouseEvent, og som sørger for konstant genudførelse af scriptet, i den framerate der er sat.

I stuff_mover funktionen (dvs. før dens afsluttende }) tilføjes:

    ball_mc.x += xBallSpeed;

Men xBallSpeed skal lige defineres for at kunne bruges her.
Tilføj over stop(); dvs. i den øverste afdeling af scriptet som er til start variabler:

    var xBallSpeed:Number = 10;

Test filmen. Nu bevæger bolden sig på x-linien med værdien 10px for hver frame i den rate du har sat den til.

ball_mc skal standses af kanten og kastes tilbage. Derfor vender vi fortegnene på den xBallSpeed værdi, som bevæger ball_mc frem når den er positiv, og tilbage når den er negativ! Dette gøres HVIS der rammes en bestemt kant.
Skriv indenfor stuff_mover:

    if (ball_mc.x >= stage.stageWidth) {
        xBallSpeed = -xBallSpeed;
    }
    if (ball_mc.x <= 0) {
        xBallSpeed = -xBallSpeed;
    }

stage.stageWidth er flash scenens egene tal for x-værdien af scenens højre kant. Venstre kant er jo bare 0.

Den kritiske iagttager vil bemærke at bolden først ‘rammer’ kanterne når den er lidt forbi. Det skyldes dens præcise x-punkt, der formodentlig ligger i dens centrum.
Hvis effekten er uønsket, må man have dens halve bredde med i beregningerne:

    if (ball_mc.x  >= stage.stageWidth - (ball_mc.width / 2)) {
        xBallSpeed = -xBallSpeed;
    }
    if (ball_mc.x <=  0 + (ball_mc.width / 2) ) {
        xBallSpeed = -xBallSpeed;
    }

Fleksibilitet

Spillet bliver mere fleksibelt af at lægge forekommende værdier og udregninger ind i variabler, og tilbagevendende handlinger i funktioner. Dels fordi koden evt. kan genbruges, eller/og spare flere linier kode, Væedierne kan også nemmere ændres eller varieres, samt give større overblik, med de navne man selv giver funktioner og variabler.

Filmens grænser ville være oplagte at lægge i variabler – det kunne jo tænkes man ville variere med en mindre bane. Fx. ‘leftLimit’ og ‘rightLimit’.
Den tilbagevendende omvendelse af xBallSpeed-værdien kunne passende være en funktion kaldt: ‘X_BOUNCE()’.
Altså 2 nye var-deklarationer henimod toppen af scriptet:

    var leftLimit:Number = 0;
    var rightLimit:Number = stage.stageWidth;

(stage.stageWidth kan være lidt ‘buggy’ og må erstattes med et tal, hvis du får problemer med den under upload.)
Variablerne of funktionen kan nu erstatte koden i forrige betingelser i stuff_mover og omskrive dem til:

    if (ball_mc.x >= rightLimit - (ball_mc.width / 2)) {
        X_BOUNCE();
    }
    if (ball_mc.x <=  leftLimit + (ball_mc.width / 2)) {
        X_BOUNCE();
    }

X_BOUNCE() er den nye function vi laver nu.
Nederst, efter stuff_mover defineres den:

    function X_BOUNCE() :void {
        xBallSpeed *=  -1;
    }

Plus blir hermed vendt til minus og minus til plus! og bolden bevæger sig med den samme fartværdi, bare den modsatte vej.

Den lodrette

Prøv at lave den lodrette bevægelse selv!
(fart- og kant-Variabler øverst, bevægelse og kant-betingelser i stuff_mover, ny bounce function – eller kan man genbruge den samme?..

Ram bolden med Battet

Igen en vigtig betingelse – øverst i betingelsesrækken i stuff_mover:

    if (ball_mc.hitTestObject(bat_mc)) {
        Y_BOUNCE();
    }

Lose scenariet

Nu er det tid til at udbygge scenen lidt – så den kommer til at se nogenlunde sådan ud – bortset fra, at ‘lose’ er stavet forkert.

Start med at lave en stop(); på første lose frame, og derefter: Mouse.show();, så vi kan se hvor vi er, når vi tester.

Vi kan godt tilføje med det samme at man skal tabe i en bestemt situation, fx. når bolden rammer bundlinien.
Så skal det skrives ind i ball-rammer-bundkant-betingelsen i stuff_mover (i stedet for Y_BOUNCE();)

    gotoAndStop("lose");

I lose scenariet skal der laves lidt interface og placeres en knap, der kan sende een tilbage til spillet.

Test filmen nu!
Der opstår en fæl fejl, der bruger hele Output vinduet, og blir ved som var den en virus. Det er den igangværende ENTER_FRAME funktion, som “lever videre” og som man bør slukke efter sig før man går.
Altså: Før bruger forlader denne frame for at gå til ‘lose’ indsættes følgende:

    e.target.removeEventListener(Event.ENTER_FRAME, stuff_mover);

Hvis du så oven i købet arrangerer dine kant-betingelser således. at de står nederst i stuff_mover, og at bund-kant-betingelsen er den nederste, så får du ikke flere fejl.

Forslag til at komme videre

Lyd på. Importer mindre lyde til library, og læg forskellige lyde på game og lose (lydlaget). I property panelet indstilles de først og fremmest til ‘event’. Du kan redigere dem sporadisk gennem edit. Du kan også lægge smålyde indeni knappen på “lose”.

Du kan øge farten på ball_mc – så det bliver sværere at ramme.
Der er i forvejen betingelser og situationer du kan bruge til acceleration og hvor du kan øge speed-vardierne med et tal:
fx. Når man rammer med battet, hvergang bolden rammer kanterne, eller bare ved hver frame..
Bolden kunne også ramme skævere ved at øge værdierne forskelligt.
Bolden kunne blive mindre.. eller battet-
Bolden kan få en unge! I så fald må det nuværende niveau have den extra bold parkeret udenfor scenen og benytte en form for tæller, før den skal komme frem. (Google eller swat)
At bolden rammer en kant og at den rammer battet kunne udløse en animation for både bat og bold. En sektioneret tidslinie på fx. en bold kan jo også indeholde forskellige lyde.