curlingthebrackets / flash / flash-emne / as3 /

• Mix
• tech
• web
• flash
• M2
• M5
• WP
• M10a
• About

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,
        // points variabler nulstilles,
        // mouse.show(), hvis den har stået på hide(), osv.
         gotoAndStop("win");
    }
    if (points == loseScore) {
        // også her slukkes for kørende ENTER_FRAME listeners
        // points variabler nulstilles,
        // mouse.show(), hvis den har stået på hide(), osv.
        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 dem 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å bevæger animationer sig mere flydende.
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, hvor start-variabler hører hjemme:

    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.

xBallSpeed værdien lægges til ball_mc’s x-koordinat og bevæger den frem når den er positiv, og tilbage når den er negativ.
ball_mc skal standses af filmens kant og kastes tilbage på scenen.
HVIS der rammes en bestemt kant, kan xBallSpeed værdien få vendt fortegnene, og derfor fortsætte i den stik modsatte retning…
Skriv indenfor stuff_mover:

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

stage.stageWidth er flash scenens egne 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 fordi der kan spares flere linier kode. Værdierne kan også nemmere ændres og varieres, samt give større overblik, med de navne man selv giver funktioner og variabler.

Filmens kant-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 kan erstattes med et tal, hvis du får problemer med den under upload.)
Variablerne og funktionen kan nu erstatte koden i stedet for 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 bliver 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);

Nederst i alle de betingelser, som udgør situationer hvor man springer videre til en anden frame og forlader stuff_mover, skal du fjerne ENTER_FRAME først, og derefter gå videre til en anden. Hvis der står mere kode tilbage i den funktion, vil flash udføre det resterende. Når det ikke er nødvendigt at udføre den, eller uhensigtsmæssigt fordi det fx. genererer en fejl – så kan du forlade funktionen med: return;. Så vil den omtalte fejl være forsvundet.

    e.target.removeEventListener(Event.ENTER_FRAME, stuff_mover);
    gotoAndStop("lose");
    /// andre afsluttende rutiner, fx. Mouse.show();
    return;

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.

Playback af MovieClips

Dette er anden del af en øvlsesserie. Første del er Animationer i movieClips
Formålet er at lave knapper og kontrolere hvert movieclips tidslinie, med simple knapfunktioner i actionscript3.
.

Knapper

Der oprettes nye symboler af typen “button” (i eksemplet er der lavet 2: en kaldt “play” , en kaldt “stop”).
I eksemplet genbruges samme knap-symboler for hvert movieclip, men der må også gerne laves flere, hvis de skal se forskellige ud.

Knappers tidslinie er begrænset til det strængt nødvendige: det umiddelbare udseende. Knappers funktionalitet, scripter man sig til.
Knappers frames er fordelt på up-, over- og down-stadier. Hit-stadiet bruges kun til at aftegne det “musefølsomme” areal med en shape, som ikke vil kunne ses.
Den ønskede grafik placeres på de relevante stadier i keyframes.
Grafik kan også på knapper, med fordel opbygges i lag – særligt hvis grafiken er kompliceret.

Alle play og stop knapper skal derefter arrangeres ud på hovedscenen – på deres eget lag: knapper.
Selvom der endnu ikke er scriptet noget funktionalitet, kan der med fordel testes, og man vil kunne se at man med musen får en “hånd” over knappen, med den grafik man indsatte på en keyframe i over-stadiet.

Instance navne

Skal man kunne nævne knap- eller movieclip-instances i sit script, og det skal man for at kunne igangsætte hver handling med et klik, så skal de have unikke navne.

Marker på hovedscenen hvert movieclip-instans og hver knap-instans individuelt – og navngiv det fra property-panelet.
De kan i princippet hedde hvad du vil, bare overhold web-navngivnings-konventionerne.

Det er smart at have et navngivnings system, som du – og andre – kan gennemskue.
Prøv at se om du kan gennemskue dette system:

Actions

Stil dig på hovedscenens eneste frame på et nyt lag øverst oppe, som du passende har døbt actions.
Actions panelet åbnes (find det i window-menuen, eller tryk f9, eller højreklik.) – og der tastes.

NB: Vær opmærksom på, at alle kommandoer skrives på samme linie indtil tuborgklammer eller afsluttende semikolon!

Knap funktioner – og fejlmeldinger

Får du en fejlmelding i et output vindue, så læs den og ret den. Det er ligesom med validering bare værre: Intet virker.
Her kommer et par hurtige tips til de mest ofte-forekommende forseelser:

Hver knap har sit eget instance-navn (chek det).
Hver funktion knappen kalder, har også sit eget navn (chek det).
Hver movieclip-instance, hvis tidslinie kontrolleres i funktionen har også sit eget navn (chek også det).
Navne i actionscript skal selvfølgelig staves præcis ligesom objekternes “døber” har skrevet dem i property-panelet.

 
knapNavn.addEventListener(MouseEvent.CLICK, FUNKTIONSNAVN);
function FUNKTIONSNAVN(e:MouseEvent){
	movieClipNavn.play();
}

Her er funktionernes navn stavet med store bogstaver, for at vi nemmere kan se forskel på objekter og funktioner.
MOTIONPLAY refererer til den funktions faktiske gerning: motion_mc’s tidslinie sættes i gang, MOTIONSTOP får samme tidslinie til at stoppe.
Funktionerne for at kontrollere shape_mc’s tidslinie kan du kalde hvad du vil, men det vil være konsekvent at kalde dem for SHAPEPLAY, osv., osv.

Fra AS2 til AS3 – Kort og Groft

Strict scripting: Type definitioner

var untyped:*; // (or no typing) undefined
var boolean:Boolean; // false
var number:Number; // NaN
var integer:int; // 0
var unsignedInteger:uint; // 0
var string:String; // null
var object:Object; // null

Ingen acctionscripting direkte på knapper
Actionscripting på hovedtidslinien – og helst på første frame – eller i classes.

Knap-actions:

// event
home_button.addEventListener(MouseEvent.CLICK, home_button_handler);
 
// handler
function home_button_handler(event:MouseEvent):void {
gotoAndStop("homeLabel");
}

Properties

Tutorials php

Dynamisk data

Tilsammen udgør disse 2 tutorials en gennemgang af flash kommunikation med alt fra tekstiler til databaser. Skrevet af amfPHP’s egen far.
flash-db’s alt om at loade data til flash
og flash-db’s store gemme data tutorial

Email formular

Enkelt formular email-contact-form-as3-php
Med classes og database thetechlabs.com: how-to-create-a-simple-flashphp-mail-contact-form-with-as3-and-mysql

Tutorials spil

Eksempler, variationer og supplerende tutorials til de gennemgåede spil-øvelser – i form af links.
Se også i kommentarerne.

Interaktive øvelser

edutechwiki: interactive_objects_tutorial

Puslespil

riacodes.com: drag-the-pieces-of-the-puzzle
monkeyflash.com flash-drag-and-drop
pixel2life.com: create_a_drag_and_drop_puzzle_in_actionscript_3_0 (classes)

Brickbreaker

En variation/udviddelse af squash-spillet
mrsunstudios.com: create-a-brick-breaker-game-in-as3

Andet

active.tutsplus.com: build-a-mini-golf-game-with-actionscript-3-0
Create-a-Scratch-card-in-AS3

Avanceret

Her er spillet ofte bygget op med classes
mrsunstudios.com/tutorials/
gamedev.michaeljameswilliams.com: avoider-game-tutorial