Hvordan man bygger animasjon med simpleGame. js HTML5-spillet ditt - dummies

Det er mulig å bygge et bibliotek som forenkler alle de forskjellige HTML5-spillmotorens funksjoner. Vurder bruk av biblioteket: simpleGame. js. Dette biblioteket er enkelt å bruke og er fullt i stand til sofistikert spillutvikling. For å komme i gang, trenger du virkelig å forstå bare to objekter:

• Scenen: Dette objektet starter med et HTML-lerretobjekt og legger til hovedløkken. Scenen er det samlende objektet som styrer spillet.

• Sprites: Disse objektene er elementene som beveger seg rundt på skjermen. De fleste av spillelementene er sprites. Hver sprite må tilhøre en enkelt scene, men du kan ha så mange sprites som du vil. En sprite er basert på et bilde.

  

Denne koden er faktisk mye mer sofistikert enn den ser ut. Her er hva det gjør:

• Det legger til et lerret på siden. Det grå rektangel er faktisk et lerretskilt som automatisk er lagt til siden.

• Det starter en spillsløyfe. Dette programmet har en spillsløype som allerede kjører med 20 bilder per sekund.

• Den inneholder en sprite. Ballbildet er et sprite, som har evnen til å bevege en hvilken som helst hastighet i alle retninger og andre interessante funksjoner som kollisjonsdeteksjon innebygd.

• Bollen beveger seg. Den vikles automatisk til den andre siden av skjermen når den forlater den ene siden.

Her er hele kodeoppføringen:

redBall. html // enkelt spill med en eneste bevegelige ball var scene; var ball; funksjon init () {scene = ny scene (); ball = ny Sprite (scene, "redBall. png", 50, 50); ball. setMoveAngle (180); ball. setSpeed ​​(3); scene. start ();} // end init-funksjon oppdatering () {scene. klar(); ball. oppdatering ();} // sluttoppdatering

Du starter med en grunnleggende HTML5-side og legger til noen få funksjoner for å gjøre det til et spillmiljø.

Slik bygger du spillesiden din

Begynn med å bygge den underliggende siden:

1. Begynn med en HTML5-side.

   Du kan bruke de samme verktøyene du har brukt til din andre webutvikling. Bygg en grunnleggende HTML5-mal som du gjør for et annet HTML5-dokument.

2. Importer SimpleGame. js bibliotek.

   Dette biblioteket er tilgjengelig gratis fra nettsiden. Bruk en tagg for å importere biblioteket. Angi src-egenskapen til navnet på biblioteket (simpleGame. Js).

3. Hold HTML enkelt.

   Du trenger ikke mye. Spillmotoren vil skape et lerret som inneholder scenen. Du kan sette inn en tittel, instruksjoner eller andre verktøy som resultattavler på siden, men spillmotoren vil gjøre det meste av arbeidet.

4. Ring init () når kroppen laster.

   Det er veldig vanlig å ha en funksjon som kalles når kroppen laster. Legg til onload = "init ()" til kroppsmerket for å ringe init () -metoden.

5. Lag et nytt skriptmerke for å inneholde koden din.

   Du må ha en andre skriptetikett for egendefinert kode. Plasser dette etter taggen som importerer biblioteket.

6. Plasser to funksjoner i skriptet ditt.

   Alle simpleGame-programmer vil ha minst to funksjoner: init () skjer ved oppstart, og oppdatering () skjer en gang per ramme.

Slik starter du spillet ditt

Initialiseringsdelen av spillet skjer som siden laster. Det er hovedsakelig opptatt med å sette opp sprites og andre ressurser. Her er koden:

var scene; var ball; funksjon init () {scene = ny scene (); ball = ny Sprite (scene, "redBall. png", 50, 50); ball. setMoveAngle (180); ball. setSpeed ​​(3);} // end init

De fleste spill vil bruke en lignende initialiseringsstil. Slik konfigurerer du spillet:

1. Definer en variabel som inneholder scenen.

   Hvert simpleGame-spill vil ha minst ett scenobjekt. Definer scenen utenfor noen funksjoner, så den er tilgjengelig for alle. Du vil faktisk lage scenen inne i init () -funksjonen.

2. Definer en variabel for hvert sprite.

   Hver sprite i spillet må også tilhøre en global variabel. Du oppretter sprites i init () -funksjonen, men du må gjøre variabelen tilgjengelig for alle funksjoner.

3. Bygg init () -funksjonen.

   Denne funksjonen kalles av body onload. Det vil løpe etter at siden har lastet inn i minnet.

4. Lag scenen.

   For å bygge scenen, opprett en forekomst av sceneklassen. Hva du egentlig sier er "Gjør meg en sceneobjekt og ring til denne spesielle forekomsten" -scenen. '"Scenen krever ikke noen parametere.

5. Opprett ballsprite.

   Bollen er en Sprite-forekomst. For å lage en sprite trenger du noen få biter av informasjon. Du trenger en scene, et bilde filnavn, bredde og høyde.

6. Still ballens bevegelsesvinkel.

   Du kan endre vinkelen ballen beveger seg. Vinklene måles i grader som på et kart.

7. Still ballens bevegelseshastighet.

   Du kan også bestemme hastigheten på ballen.

8. Start scenen.

   Når du er ferdig med å sette alt opp, fortell scenen å starte.

Oppdater spillanimasjonen

Etter at du har startet scenen, begynner en timer. Tjue ganger i sekundet, vil det ringe en funksjon på siden din som heter oppdatering (). Så, du må ha en slik funksjon, og det må ha kode for at spillet skal løpe.

Oppdateringen () -funksjonen er heller ikke veldig vanskelig.

funksjon oppdatering () {scene. klar(); ball. oppdatering ();} // end oppdatering

Oppdateringen () -funksjonen gjør vanligvis tre ting:

• Rydder forrige skjermbilde: Den første rekkefølgen av virksomheten er å rydde opp et rot som skyldes den siste skjermen. Scene-objektet har en klar () -funksjon for nøyaktig denne hensikten.

• Kontroller for hendelser: Vanligvis ser du etter hendelser, som brukerinngang, sprites krasjer i hverandre, sprites forlater skjermen, eller hva som helst.For denne enkle animasjonen er den eneste hendelsen en sprite som forlater skjermen, og atferden knyttet til denne handlingen er blitt automatisert.

• Oppdaterer hver sprite: Den siste delen av skjermoppdateringen oppdaterer sprites. Når du oppdaterer et sprite, vil det trekke i sin nye posisjon.

Dette skjer hvis du ikke fjerner skjermen. Alle spritbevegelsene blir trukket på lerretet, og det ser ut som et stort smør fremfor en bevegelig ball.