Getting gang med EaselJS: A Flash-lignende grensesnitt for HTML5 Canvas
Del
Del
28
Share
Dette Cyber mandag Envato Tuts + kurs vil bli redusert til bare $ 3. Ikke gå glipp av
. Det har vært en viss motstand fra Flash-utviklere til vår nye HTML5-innhold. I denne artikkelen - rettet mot erfarne AS3 programmerere - vi skal se på EaselJS, en Javascript-bibliotek som gjør arbeidet med HTML5 lerret svært lignende til å jobbe med Flash-skjerm liste
senere endringer i teknikker og amp;. Programvare
Visse aspekter av programmer eller teknikker som brukes i denne opplæringen har endret seg siden den opprinnelig ble publisert. Dette kan gjøre det litt vanskelig å følge med. Vi vil anbefale å se på disse nyere veiledninger om samme tema:
Lær CreateJS ved å bygge en HTML5 pong spill
Den HTML5 Scene Anmeldelser
"krig" mellom Flash og HTML5 er ikke nyheter for alle som er involvert i nettleseren eller mobil utvikling og som Michael påpeker det er ingen skade i å lære HTML5 selv om du vet Flash og Actionscript.
HTML5 er en ny og utviklende teknologi, og det er for tiden ingen fullverdig verktøy helt som Flash IDE dekker hele arbeidsflyten for å lage spill eller programmer, men hvis du er kjent med Flash Builder eller FlashDevelop det bør ikke være vanskelig å kode i noen tekstredigeringsprogram bruker eksterne filer som dine eiendeler
(Red.anm:. Det er nok av Javascript og HTML redaktører, selv om - ta en titt på JetBrains WebStorm for et godt eksempel). Heldigvis for oss, Grant Skinner har utviklet et Javascript-bibliotek som vil gjøre vår læring mindre komplisert. I hans egne ord: Den nye Canvas element i HTML5 er kraftig, men det kan være vanskelig å jobbe med. Den har ingen intern begrepet diskrete visningselementene, slik at du er pålagt å administrere oppdateringer manuelt. Javascript Easel biblioteket gir et beholdt grafikk-modus for lerret inkludert en full, hierarkisk visning liste, en kjerne samhandlingsmodell, og hjelperen klasser for å gjøre arbeidet med Canvas mye enklere EaselJS bruker et lignende syntaks til Actionscript.; den har en skjerm List, Stage, grafikk og enda Filters, dette vil gjøre arbeidet med lerretet lettere for oss Flash-utviklere. I tillegg kan vi fullføre vår staffeli utvikling med TweenJS og SoundJS scripts som, som navnene foreslår, håndtere animasjoner og lyd Vis liste fungerer veldig lik Action. I denne koden er myStage variabel den koblede referanse av lerretet til Stage klasse i EaselJS. Mer om det i eksempelet på slutten av denne opplæringen Den måten å legge mus hendelser kunne ikke vært enklere. Denne koden legger et tekstobjekt og plasserer det i den fasen Den Ticker klassen gir en sentralisert tick eller hjerteslag, kringkaste på et sett intervall; flåtten () hendelse kan brukes som en erstatning for en AS3 Timer eller enterframe hendelsen. Følgende kode setter bildefrekvens på 30 og deines scenen som lytteren for flått. Tween klassen er et eksternt tillegg til EaselJS som er tilgjengelig ved å legge til TweenJS manuset til vårt dokument. Det fungerer svært likt tween motorer i Action Vi kan spille av en lyd ved å legge til SoundJS script til vårt dokument og skrive inn følgende kode: En introduksjon til et programmeringsbibliotek ville ikke være komplett uten et hello world eksempel! Følg disse trinnene for å lage en veldig enkel HTML5 Canvas Hello World inneholder bilder, mus hendelser, tekst og mer La oss forberede vår HTML-dokument, er det en enkel html struktur for å begynne å skrive vår app La oss legge en liten bit av CSS også: denne linjen vil fjerne standard høydepunkt når du trykker på et element ved hjelp av en mobil nettleser; uten denne mobil erfaringen ville redusere drastisk Følgende kode legger de nødvendige Javascript-biblioteker for vår app til å jobbe I de neste linjene vi kaller vår konstruktør, er dette den viktigste funksjonen som vil bli opprettet senere i vår javascript . kode Canvas er lagt i denne linjen, vi tildele en ID for å referere til den senere, og også sette bredden og høyden . La oss begynne vår app skapelse Åpne din foretrukne Javascript editor (en enkel tekst editor vil fungere , men du vil ikke ha syntaks utheving) og forberede seg til å skrive din kjempebra app. Husk å lagre filen med et js Vi vil starte med å definere all grafikken og logiske variabler. De neste variablene representerer HTML canvas-elementet og scenen som vil være knyttet til det. scenen Denne variable butikker bakgrunnsbildet Twitter /* Bakgrunn * /var bgSrc = new Image (); //dette vil lagre bildedata for kilde pngvar bg; //Bitmap objekt med easeljs En annen variabel til å lagre knappbildet Twitter /* Button * /var btnSrc = new bilde (); Var btn; Dette er de variablene vi vil bruke, lese kommentarene i koden for å vite mer om dem: Twitter /* Variabler * /var centerX = 275; //sentrum av stagevar centery = 150; Var gfxLoaded = 0; //vil tjene som preloader flagget Konstruktøren er en funksjon som kjøres når et objekt er opprettet fra en klasse; denne funksjonen vil være den første til å utføre når nettsiden er lastet Denne koden får HTML canvas ID og knytter det til EaselJS Stage klassen. Dette vil gjøre det stadiet variable oppfører seg som Stage klasse i AS3 Twitter /* Link Lerret * /lerret = document.getElementById ('Helloworld');. Scenen = ny Stage (lerret); Mus Hendelser er deaktivert som standard i EaselJS å forbedre ytelsen. Siden vi trenger de i søknaden, vil vi legge til følgende linje: Denne koden brukes til å forhåndslaste grafikken ved hjelp av en funksjon som vi skal skrive senere. Det setter bildeobjektet vi laget før til kilden PNG-fil i vår dokumentmappe. Et navn er gitt å finne ut hvilket bilde er lastet og til slutt funksjon som håndterer lastet bilder kalles Twitter /* Load GFX * /bgSrc.src = 'bg.png.'; bgSrc.name = 'bg'; bgSrc.onload = loadGfx; btnSrc.src = 'button.png'; btnSrc.name = 'knappen'; btnSrc.onload = loadGfx; Du må laste ned bildene fra oven (eller lage din egen) for at dette skal fungere TweenJS klassen vil lytte til denne flåtten å utføre animasjoner. Twitter /* Ticker * /Ticker .setFPS (30); Ticker.addListener (scene); Hver gang en grafisk er lastet denne funksjonen vil kjøre. Det vil tildele hvert bilde til et bitmap objekt og sjekk at alle elementene er lastet før du fortsetter Denne koden legger grafikken på scenen og legger en mus lytter til knappen Funksjonen som skal kjøre når du trykker på knappen, forklarte i koden kommentaren Det er det! Klikk her for å se denne enkle demo i aksjon. Gratulerer! Du har nettopp laget en HTML5 lerret søknad kompatibel med alle de store nettleserne, inkludert mobil. Stay tuned for mer her på Activetuts +. Jeg håper du likte denne opplæringen, takk for lesing!
Innføring EaselJS, Tween JS og SoundJS
Visningsliste
myStage.addChild (myChild);
Muse Arrangementer
MyChild.onPress = myFunctionmyFunction () {console.log ('trykket');}
Tekst
Var myText = ny tekst ('Activetuts +. ',' Fet 15px Helvetica ", #FFF); myText.x = 25; myText.y = 25; myStage.addChild (myText); myStage.update ();
Tickers
Ticker. setFPS (30); Ticker.addListener (myStage);
Tweens
Tween.get (myChild) .til (x: 150);.
Lyder
SoundJS.add ('MySound', 'mySound.mp3', 1); SoundJS.play ('MySound');
Hello World!
Trinn 1:. HTML Struktur
. <! DOCTYPE html > < html > < head > < title > Hello World < /title > < /head > < body > < /body > < /html >
Trinn 2: Hide Mobile Marker
. <! DOCTYPE html > < html > < head > < title > Hello World < /title > < style > * {- WebKit-tap-høydepunkt-color: RGBA (0, 0, 0, 0);} < /style > < /head > < body > < /body > < /html >
Trinn 3:.! Script biblioteker
<! DOCTYPE html > < html > < head > < title > Hello World < /title > < style > * {- WebKit-tap-høydepunkt-color: RGBA (0, 0, 0, 0);} < /style > < script src = "easel.js" > < /script > < script src = "Tween.js" > < /script > < script src = "HelloWorld.js" > < /script > < /head > < body > < /body > < /html >
Trinn 4: Ring Main Funksjon
<! DOCTYPE html > < html > < head > < title > Hello World < /title > < style > * {- WebKit-tap-høydepunkt-color: RGBA (0, 0, 0, 0);} < /style > < script src = "easel.js" > < /script > < script src = "Tween.js" > < /script > < script src = "HelloWorld.js" > < /script > < /head > < body onload = "main ();" > < /body > < /html >
Trinn 5: Canvas Tag
<! DOCTYPE html > < html > < head > < title > Hello World < /title > < style > * {- WebKit-tap-høydepunkt-color: RGBA (0, 0, 0, 0);} < /style > < script src = "easel.js" > < /script > < script src = "Tween.js" > < /script > < script src = "HelloWorld.js" > < /script > < /head > < body onload = "main ();" > < lerret id = "Helloworld" width = "480" height = "320" > < /lerret > < /body > < /html >
Trinn 6: Javascript
forlengelse i prosjektmappen
Trinn 7:. Definer Canvas
variabel vil oppføre seg på en lignende måte til AS3 scenen Twitter /* Definer Canvas * /var lerretet; Var scenen;
Trinn 8:. Bakgrunn
Trinn 9:. Button
Trinn 10: Variabler
Trinn 11: Constructor
funksjonen main () {//code...}
Step. 12: Link Lerret
Trinn 13 : Aktiver mus hendelser
stage.mouseEventsEnabled = true;
Trinn 14: Laste Graphics
Trinn 15:. Set Ticker
< p> Følgende kode setter bildefrekvens på 30 og definerer scenen som lytteren for flått.
Trinn 16: Preload Graphics
funksjon loadGfx (e) {if (e.target.name = 'bg') {bg = new Bitmap (bgSrc.); } if (e.target.name = 'knappen') {btn = new Bitmap (btnSrc);} gfxLoaded ++; /* Grafisk før alle av dem er lastet * /if (gfxLoaded == 2) {buildInterface (); }}
Trinn 17:. Bygg Interface
funksjon buildInterface () {btn.x = centerX - 40; btn.y = centery - 12; stage.addChild (bg, BTN); stage.update (); //Very Important /* Legg knapp lytteren * /btn.onPress = showText;}
Trinn 18: Vis tekst
funksjon showText () {console.log ('Dette fungerer som spor!.'); /* Fjern List * /btn.onPress = null; /* Lag Tekst * /var msg = ny tekst («Bold 25px Arial ',' #EEE '' Hello World! '); msg.x = centerX - 70; msg.y = Centery; stage.addChild (msg); msg.alpha = 0; /* Animasjon * /Tween.get (BTN) .til ({y: centery + 50}, 300); Tween.get (msg) .wait (400) .til ({alpha: 1}, 400);}
Konklusjon