Animating Spill menyer og skjermoverganger i HTML5: A Guide for Flash Developers
Del
Del
7
Del
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
Dette innlegget er en del av en serie som heter skytespillet Up.Build en Stage3D skytespillet Up: Terrain, Enemy AI, og nivå DataActivetuts + Workshop # 5:. Frantic 2 - Kritikk
HTML5 og Flash utvikling kan ha mye til felles, men som en Flash-utvikler Jeg har likevel funnet det å være en monumental oppgave å re-lære mine gamle ferdigheter i HTML5. I denne opplæringen, vil jeg vise deg hvordan jeg laget en animert meny og skjerm overgang for en HTML5 shoot-'em-up spill.
Endelig resultat Forhåndsvisning
Ta en titt på resultatet vi skal jobbe mot:
Klikk for å prøve demoen
Legg merke til rulling bakgrunn, skipene som vises, og roterer hver side av hvert menyelement, og måten skjermen fades til svart når du velger et alternativ
Innledning
HTML5 og Javascript er lik Action på mange måter.; det er mye overlapping i syntaks, event lyttere og metoder. Men det er noen veldig tydelige forskjeller som jeg vil dekke i denne opplæringen:
tegne figurer
Tegning Images
Bruk Intervaller
Animere
Muse Arrangementer
legge til støtte for flere nettlesere
Noe å merke seg er at denne opplæringen bruker hovedsakelig bilder som kan lastes ned med kilden, eller du kan bruke din egen bilder hvis du vil (du trenger å vite bredder og høyder)
Trinn 1: Klar
Det første vi må gjøre er å legge til < lerret >.; element inne i kroppen til en HTML-fil, så lage en som heter ShootEmUp.html og sett følgende:
<! DOCTYPE html > < html > < head > < title > Shoot 'Em Up < /title > < /head > < body > < lerret id = "myCanvas" width = "480" height = "320" > < p > Nettleseren din støtter ikke HTML5 <! /p > < /lerret > < /body > < /html >
De markerte linjene sette lerretet element, noe som vil gjøre vår selve menyen. Se denne opplæringen for en guide til lerretet fra bunnen av.
Det er allerede nesten på tide å begynne koding Javascript! Vi har to alternativer til hvor koden kan gå; Det kan skrives inne i HTML innenfor < script > koder eller det kan skrives i en ekstern fil. For å holde ting enkelt vil jeg skrive all koden under < lerret > element. Men gjerne bruke en ekstern fil hvis du foretrekker; bare husk å kjelde det i
. < script type = "text /javascript" > //Javascript Goes Here < /script >
Vårt neste skritt vil være å opprette fire variabler å referere lerretet element lett.
Var lerret = document.getElementById ("myCanvas"); Var sammenheng = canvas.getContext ("2d"); Var width = canvas.getAttribute ('bredde'); Var height = canvas.getAttribute ('høyde');
Vi først refererte myCanvas variabel og sette den til å peke på HTML canvas-elementet. En annen variabel som heter sammenheng ble opprettet for å få lerretet dimensionality (2D). I likhet med Flash vi skaper de siste to variabler, bredde og høyde, for å forenkle prosessen med å få tilgang til bredde og høyde egenskaper lerretet er
Trinn 2:. Lasting og Tegne Images
Som i Action skal vi opprette forekomster av våre Images Var bgImage = new Image ();. Var logoImage = new Image (); Var playImage = new Image (); Var instructImage = new Image (); Var settingsImage = new Image (); Var creditsImage = new Image (); Var shipImage = new Image ();
Vi mangler en viktig del av koden for hver forekomst - kildebanen! Jeg lagret alle bildene i mappen 'Bilder' i samme mappe som HTML-filen, slik:
shipImage.src = "Images /ship.png"; bgImage.src = "Bilder /Background.png"; logoImage.src = "Images /logo.png"; playImage.src = "Images /play.png"; instructImage.src = "Images /instructions.png"; settingsImage. src = "Images /settings.png"; creditsImage.src = "Images /credits.png";
Før vi trekke bildene til lerretet la oss lage fire arrays for å holde posisjoner og størrelser av knappene (playImage, instructImage , settingsImage, creditsImage). Disse arrays vil bli brukt senere for å lage en mus over funksjon
Var buttonX = [192110149160];. Var buttonY = [100140180220]; Var buttonWidth = [96260182160]; Var buttonHeight = [40,40,40,40];
Nå kan vi trekke bildene til lerretet; dette kan gjøres i en onload funksjon for hvert bilde, men en onload funksjon trenger ikke å være med - vi kan bare bruke drawImage ()
bgImage.onload = function () {context.drawImage (bgImage, 0,. 0);}; logoImage.onload = function () {context.drawImage (logoImage, 50 -10,);} playImage.onload = function () {context.drawImage (playImage, buttonX [0], buttonY [0]);} instructImage.onload = function () {context.drawImage (instructImage, buttonX [1], buttonY [1]);} settingsImage.onload = function () {context.drawImage (settingsImage, buttonX [2], buttonY [2 ]);} creditsImage.onload = function () {context.drawImage (creditsImage, buttonX [3], buttonY [3]);}
Hvis testet nå, bør du se et statisk bilde av en meny som vi vil snart puste liv i. Skipet ble ikke trukket inn med resten av bildene fordi vi kommer til å trekke det senere i en mus hendelse. Forresten, hvis du ikke har gjort dette så langt, holde variabler gruppert sammen på toppen og gjøre det samme med funksjoner
Trinn 3:. Animere Gjennom Intervaller
Java mangler en onEnterFrame () tilsvarende, men kan vi enkelt lage vår egen gjennom bruk av et intervall (timer)
Var bilder = 30;. Var timerId = 0; timerId = setInterval (oppdatering, 1000 /rammer);
Du kan bli forvirret med hensyn til hvordan intervallet fungerer slik jeg vil forklare i korte trekk. Intervallet kaller funksjonen oppdateringen () hver (1000 /rammer) millisekunder å skape en jevn oppdateringsfrekvens. Verdien av rammer styrer fps; hvis rammer er 25 så leseren vil forsøke å kalle oppdateringen () hver (1000/25 =) 40 millisekunder.
Vårt neste åpenbare steg er å lage funksjonen oppdateringen ()
funksjon oppdatering () { klar(); bevege seg(); tegne ();}
Tre flere funksjoner ble bare kalt. klar () brukes til å fjerne lerretet fordi i motsetning til flash lerretet fungerer som å sette klistremerker på et bord; bildene kan ikke flyttes etter at de har blitt plassert. Den neste funksjonen, flytt (), brukes for å endre variabelverdiene som brukes sammen med bildene. Endelig tegne () kalles for å plassere disse "klistremerker"
funcion klart () {context.clearRect (0, 0, bredde, høyde);}.
Enkelt sagt, sletter denne koden alt innenfor rektangelet som er størrelsen på lerretet, og er trukket fra (0,0), øverst i venstre hjørne. Det betyr at det klarner hele synlige lerretet.
Før vi går videre til neste funksjonen, to variabler bør innføres. backgroundY vil være variabel for bakgrunnsbildet er y-posisjon og hastighet vil bli brukt til å trekke fra backgroundY hver oppdateringssyklus
Var backgroundY = 0;. Var hastighet = 1;
Effekten at vi kommer til å produsere er en kontinuerlig rulling bakgrunn. Bildet består av to identiske Star bilder, den ene over den andre, i større bilde (bilde er to ganger høyden av lerretet). Vi vil sakte flytte bildet opp før i andre halvdel er helt i sikte, og da vil vi nullstille plasseringen av bildet tilbake til første halvdel
funksjon flytte () {backgroundY - = hastighet.; if (backgroundY == -1 * høyde) {backgroundY = 0; }}
Til slutt har vi uavgjort () -funksjonen. Alle bildene vil bli tegnet på nytt, men en endring å legge merke til er at bgImage er y-verdien har blitt erstattet med variabelen backgroundY
context.drawImage (bgImage, 0, backgroundY);. Context.drawImage (logoImage, 50, - 10), context.drawImage (playImage, buttonX [0], buttonY [0]); context.drawImage (instructImage, buttonX [1], buttonY [1]); context.drawImage (settingsImage, buttonX [2], buttonY [ ,,,0],. 2]); context.drawImage (creditsImage, buttonX [3], buttonY [3]);
Test nå og beundre jevn rulling bakgrunnen
Trinn 4: Kontrollere Mus Plasser
En ting HTML5 < lerret > mangler er støtte for bilde hendelsen lyttere, noe som betyr at vi kan ikke bare skrive playImage.mouseover = function () {}. I stedet må vi få posisjon på musen i forhold til lerretet, og finne ut om det er over et objekt
Var mouseX;. Var mousey; canvas.addEventListener ("mousemove", checkPos);
De to variabler introdusert kommer til å bli brukt til å få den nåværende posisjon av musen. Vi har lagt til en hendelse lytteren, som i Actionscript, som kaller funksjonen checkPos () hver gang musen beveger
funksjons checkPos (mouseEvent) {mouseX = mouseEvent.pageX - this.offsetLeft.; mousey = mouseEvent.pageY - this.offsetTop;}
Hvis du varslet verdiene av mouseX og mousey hver gang du flyttet musen du vil få riktig posisjon. Men det er ett problem: ikke alle moderne nettlesere støtter denne metoden. For å bøte på dette problemet kan vi bruke litt hack stedet:
if (mouseEvent.pageX || mouseEvent.pageY == 0) {mouseX = mouseEvent.pageX - this.offsetLeft; mousey = mouseEvent.pageY - this.offsetTop;} else if (mouseEvent.offsetX || mouseEvent.offsetY == 0) {mouseX = mouseEvent.offsetX; mousey = mouseEvent.offsetY;}
Dette sjekker om nettleseren bruker "side" eller "offset" egenskaper for å gå tilbake posisjonen til musen, og justerer verdiene (om nødvendig) for å få muse posisjon i forhold til lerretet.
Nå må du huske at skipet vi instanced, men ikke tegne? Vi kommer til å ta det statiske bildet, spinne det og gjøre det synes når vi musen over knappene
Var ShipX = [0,0];! Var shipY = [0,0]; Var shipWidth = 35; Var shipHeight = 40; Var shipVisible = false; Var shipSize = shipWidth; Var shipRotate = 0;
De fire første variablene er de samme som før (vi har to stillinger fordi det vil være to skip). Den shipVisible variable vil bli satt sant når musen er over en knapp. Som for shipSize og shipRotate, vil de bli brukt til å skalere skipet vertikalt og flytte den til å gi en illusjon av at det er spinning. Husk at bildene skaleres høyre til venstre
for. (I = 0; i < buttonX.length; i ++) {if (mouseX > buttonX [i] & & mouseX < buttonX [i] + buttonWidth [i]) {if (mousey > buttonY [i] & & mousey < buttonY [i] + buttonHeight [i]) {}} else {}}
Legg inn koden i checkPos () funksjon. Først vi sykle gjennom knappene er det (jeg funnet ut verdien med buttonX.length). Neste vi sammenligner mouseX å se om den er større enn dagens knappens buttonX og mindre enn sin buttonX + buttonWidth - dvs. innenfor de horisontale grensene av-knappen. Vi deretter gjenta prosessen i et annet hvis setningen for Y-verdier. Hvis dette er sant, så musen må være over en knapp, så sett shipVisible til stede:
shipVisible = true;
Og innen den tomme annet utsagn sette den til false; det vil da bli kalt når du muse ut på en knapp:
shipVisible = false;
Under shipVisible = sant vi vil sette startverdiene for ShipX og shipY, og utføre alle skalerings innenfor farten og trekke . funksjoner
ShipX [0] = buttonX [i] - (shipWidth /2) - 2; shipY [0] = buttonY [i] + 2; ShipX [1] = buttonX [i] + buttonWidth [i] + (shipWidth /2); shipY [1] = buttonY [i] + 2;
For første ShipX, som vi ønsker rett til venstre for knappen, setter vi verdien til (gjeldende knappens X - halvparten av skipet bredde), og Jeg flyttet den over 2 piksler til venstre for å gjøre det ser bedre. En lignende prosess blir gjentatt for første shipY. For det andre ShipX vi stilling ved (nåværende knappens X + at knappens bredde + halve skipet bredde), og deretter setter vi Y som før.
Den vanskelige delen kommer nå. Vi må skalere skipet og flytter den over til å kompensere for skalering. Innenfor farten () -funksjonen skrive dette hvis uttalelsen
if (shipSize == shipWidth) {shipRotate = -1;}. If (shipSize == 0) {shipRotate = 1;} shipSize + = shipRotate;
kode begynner å subtrahere verdien av shipSize, som vil bli benyttet til å skalere bildet når vi trekke den; når den når null prosessen reverserer før den er full skala igjen.
Nå kan vi flytte inn i trekningen () -funksjonen. Under alle de andre trekke metoder legge til følgende hvis setningen
if (shipVisible == true) {context.drawImage (shipImage, ShipX [0] - (shipSize /2), shipY [0], shipSize, shipHeight).; context.drawImage (shipImage, ShipX [1] - (shipSize /2), shipY [1], shipSize, shipHeight);}
Skipene blir trukket normalt med unntak av X stillinger blir kompensert ved å trekke halvparten av . gjeldende skala
Trinn 5:. Ser etter museklikk
Legg til en annen hendelse lytteren for mouseup og opprette en ny variabel for en andre intervall vil vi skape
Var fadeId = 0; canvas.addEventListener ("mouseup", checkClick);
Lag funksjonen checkClick ()
funksjon checkClick (mouseEvent) {for. (i = 0; i < buttonX.length; i ++) {if (mouseX > buttonX [i] & & mouseX < buttonX [i] + buttonWidth [i]) {if (mousey > buttonY [i] & & mousey < buttonY [i] + buttonHeight [i ]) {}}}}
Som før, sjekker vi om posisjonen til musen er riktig. Nå må vi lage nytt intervall, og stoppe de andre intervall og event lyttere
fadeId = setInterval ("fadeout ()", 1000 /rammer),. ClearInterval (timerId); canvas.removeEventListener ("mousemove", checkPos ), canvas.removeEventListener ("mouseup", checkClick);
Ikke noe nytt her, bortsett fra at vi må lage en funksjon kalt fadeout (). Vi trenger også å opprette en ny variabel kalt tid
Var time = 0,0;. Funksjon fadeout () {context.fillStyle = "RGBA (0,0,0, 0,2)"; context.fillRect (0, 0, bredde, høyde); tid + = 0,1; if (tid > = 2) {clearInterval (fadeId); tid = 0; timerId = setInterval ("Update ()", 1000 /rammer); canvas.addEventListener ("mousemove", checkPos); canvas.addEventListener ("mouseup", checkClick); }}
Det har noen nye metoder, men det er ganske enkelt. Siden vi stoppet alle hendelsen lyttere og det andre intervallet vår meny er helt statisk. Så vi repeatively tegne en gjennomsiktig sort rektangel på toppen av menyen - uten å tømme den -. For å gi illusjon av falming ut
Den variable tid økes hver gang funksjonen kalles, og når den når en viss verdi (én gang 20 "frames" har passert, i dette tilfellet) for å fjerne vi den aktuelle intervall. Her null jeg på menyen, men dette er hvor du vil tegne en ny del av menyen.
En siste ting å merke seg er at når du tegner figurer på lerretet den fillStyle settes med rgb (rød, grønn, blå) verdi. Når du ønsker å trekke gjennomsiktige former, bruker du RGBA (rød, grønn, blå, alfa).
Jeg håper det er avmystifisert litt av læringsprosessen for å bytte fra enkel AS3 programmering til enkle lerret programmering. Legg inn en kommentar hvis du har noen spørsmål! Anmeldelser