Share
I denne opplæringen vil vi utforske CreateJS-pakken med biblioteker. CreateJS er en serie med JavaScript-biblioteker og verktøy for å bygge rike, interaktive erfaringer med HTML5. CreateJS-pakken er delt inn i fire biblioteker.
Det første biblioteket vi skal se på er EaselJs. La oss komme i gang!
EaselJS er et bibliotek for å jobbe med HTML5 lerretet. Den består av en full, hierarkisk visningsliste, en kjerneinteraksjonsmodell og hjelperklasser for å gjøre arbeidet med lærred mye lettere. Å komme seg opp med EaselJS kunne ikke vært enklere. Du må definere et lerretelement i HTML-en din og referere den til i JavaScript. EaselJS bruker begrepet et trinn som er toppnivå Container for visningslisten (scenen blir lerretelementet). Nedenfor er et HTML-fragment og det tilsvarende JavaScript som trengs for å sette opp EaselJS.
For å referere til lerretet ovenfor, bruker du følgende.
Accentsconagua
var lerret = document.getElementById ("testCanvas"); var scenen = ny createjs.Stage (lerret); EaselJS leveres med en grafikk-klasse som avslører en brukervennlig API for å generere vektortegningsinstruksjoner og tegne dem til en bestemt kontekst. Kommandoene ligner veldig på det vanlige HTML5 Canvas, mens EaselJs legger til noen av sine egne nye kommandoer også. Hvis du ikke er kjent med HTML 5 lerret og tegningskommandoene, vil du kanskje se Canvas Essentials kurset som nylig ble utgitt. Du vil normalt ikke bruke grafikklassen selv, men få tilgang til den ved hjelp av form-klassen. Nedenfor er en JSFiddle som bruker den Shape-klassen til å gjøre noen tegninger.
Som du kan se i koden ovenfor, er kommandoene kjedbare ShapeObject.graphics.setStrokeStyle (1) .beginStroke ( "RGBA (0,0,0,1) etc ... Du kan også ha lagt merke til en samtale til stage.addChild () innenfor funksjonene. Når som helst du vil sette noe på lerretet, må du ringe stage.addChild (). Innen drawShapes () funksjon, det er et anrop til stage.update (). For å kunne se endringene dine må du ringe stage.update () etter hver forandring i lerretet. Det er en måte å ikke må gjenta flere ganger stage.update () og det er ved å bruke Ticker Class. Ticker gir en sentralisert tick eller hjerteslag kringkasting med et bestemt intervall. Lyttere kan abonnere på festehendelsen som skal varsles når et angitt tidsintervall har gått. Nedenfor er hvordan du vil bruke Ticker-klassen til å automatisk oppdatere scenen.
createjs.Ticker.addEventListener ("tick", handleTick); funksjonshåndtakTrykk (hendelse) stage.update () The Shape-klassen kommer med en hel rekke eiendommer du kan justere for eksempel x, y stillinger, alfa, scaleX, Scaley og ganske mange andre. Nedenfor er en demonstrasjon som viser noen av disse egenskapene.
Innen drawTheShapes () vi genererer 15 sirkler med en linje trukket gjennom dem, å være i stand til å kjede tegningskommandoene gjør denne døde enkel. Deretter randomiserer vi figurene posisjon, skala, rotasjon og alfa.
Du kan legge ved hendelser til former som klikk, mousedown / over / ut, etc, ved å bruke på() metode. I denne demoen når du klikker på en av figurene, blir en advarsel kastet opp, og på mouseout logger vi en melding til konsollen. For å tillate museventiler på scenen mousedown / over / ut etc, må du ringe stage.enableMouseOver (frekvens) hvor frekvens er antall ganger per sekund for å kringkaste museventilene. Denne operasjonen er dyr, slik at den er deaktivert som standard.
EaselJS sendes med en tekstklasse som gjør det veldig enkelt å lage tekst, og for å endre egenskaper på teksten. Du kaller konstruktøren som passerer i teksten, en skrifttype og en farge, dvs.. ny createjs.Text ("Hello World", "20px Arial", "# ff7700") Som Shape-klassen kommer den med en rekke egenskaper og metoder. Nedenfor er en demo som bruker tekst-klassen.
I likhet med den siste demoen lager vi 25 TextFields, og bruker noen tilfeldige verdier til egenskapene sine.
Følgende demo er et hangman-spill laget ved hjelp av Shape and Text Class som vi har diskutert så langt i denne opplæringen.
Å tegne hangman bruker vi en kombinasjon på lineTo (), flytte til(), og for hodet bruker vi bue() metode. Innen drawCanvas () funksjon, vi kaller klar() metode på hangmanShape.graphics som fjerner eventuelle tidligere tegninger vi har gjort i denne formen. Vi endrer TextFields-farge avhengig av om spilleren har vunnet eller mistet spillet sitt.
Du kan bruke bilder ved å bruke Bitmap-klassen. En bitmap representerer et bilde, lerret eller video i visningslisten, det kan bli instantiated ved hjelp av et eksisterende HTML-element eller en streng (Base64). For eksempel Ny createjs.Bitmap ("imagePath.jpg").
<
Svært lik tidligere demoer oppretter vi tre bitmaps her, og gir noen tilfeldige egenskaper til dem.
Vi bruker skyggen klassen til å skape noen skygger. Skyggen klassen tar som parametere, fargen, offsetX, offsetY og størrelsen på uskarpt effekten osv. myImage.shadow = new createjs.Shadow ("# 000000", 5, 5, 10). Du kan bruke skygger til et hvilket som helst skjermobjekt, så dette vil fungere for tekst også.
En Sprite viser en ramme eller en sekvens av rammer (som en animasjon) fra en SpriteSheet-forekomst. Et sprite-ark er en serie bilder (vanligvis animasjonsrammer) kombinert til et enkelt bilde. For eksempel kan en animasjon bestående av åtte 100x100 bilder kombineres til et 400x200 sprite ark (fire bilder på tvers av to høye). Du kan vise individuelle rammer, spille rammer som en animasjon, og til og med sekvens animasjoner sammen. For å initialisere en Sprite-forekomst passerer du i et SpriteSheet og valgfritt rammenummer eller animasjon for å spille, for eksempel, ny createjs.Sprite (spriteSheet, "run"). Dataene som sendes til SpriteSheet-konstruktøren, definerer tre kritiske opplysninger:
Nedenfor er noen prøvekode som ville initialisere et "tegn" sprite.
var data = ny createjs.SpriteSheet ("images": ["path / to / image.png"], "rammer": "regX": 0, "høyde": 96, "count": 10, "regY ": 0," bredde ": 75," animasjoner ": " walk ": [0, 9]); karakter = new createjs.Sprite (data, "walk"); character.play (); Her er en demo som bruker Sprite og SpriteSheet Class. Du må klikke på scenen, og da kan du bruke "A" til å flytte til venstre, og "D" for å flytte til høyre. En ting å merke seg om denne demoen er at jeg har Base64 kodet bildene og de er inkludert av "imagestrings.js" ekstern ressurs. Fordi vi bruker et SpriteSheet og samvirker med musen, blir lerretet besvimet fra korsdomenes bilder-policy (CORS). Ved å bruke Base64-strenge kan vi overvinne dette. Hvis dette var vert på ditt eget domene, ville du bruke Bitmap-klassen som vanlig ved å sende et element eller en bane.
Innen setup () funksjonen vi skaper spritesheet. For "bildene" -tasten passerer jeg inn characterImage som er en Base64 kodet streng. For "rammer" -tasten er tegnbildene 96 piksler høye, 75 piksler brede, og det er ti rammer (separate bilder). Nedenfor er bildet vi bruker for spritesheet slik at du kan visualisere hvordan det ser ut.
For "animasjon" nøkkelen definerer vi en "run" animasjon som er fra "ramme" null til ni. Til slutt lager vi karakter fra spritesheet.
Når du flytter tegnet til venstre eller høyre vi ringer character.play (). og når du slutter å flytte tegnet vi kallercharacter.gotoAndStop (0). Siden vi bare har en "animasjon", kan vi bare ringe spille() og gotoAndStop () hvis du hadde en rekke animasjoner du ville bruke en kombinasjon av disse to pluss gotoAndPlay ().
Containerklassen er en nestbar visningsliste som lar deg arbeide med sammensatte displayelementer. For eksempel kan du gruppere arm, ben, torso og hodet Bitmap-forekomster sammen i en personbeholder, og forvandle dem som en gruppe, samtidig som de fortsatt kan flytte de enkelte delene i forhold til hverandre. Beholderbarn har sine transformasjons- og alfaegenskaper sammenhørende med deres foreldrebeholder. Nedenfor er en demo som bruker containerklassen. Klikk på scenen for å flytte beholderen med 20 piksler.
Her lager vi tre bitmaps og legger dem til container, Vi kan da flytte dem på en gang ved å flytte container, og selv om de er i en beholder, kan du fortsatt flytte dem hver for seg.
Metoden cache () i displayobjektet trekker skjermobjektet inn i et nytt lerret, som deretter brukes til senere tegninger. For komplisert innhold som ikke endres ofte (for eksempel en Container med mange barn som ikke beveger seg eller en kompleks vektorform), kan dette gi mye raskere gjengivelse fordi innholdet ikke trenger å bli gjengitt hvert kryss.
Det bufret visningsobjektet kan flyttes, roteres, falmes, etc. fritt, men hvis innholdet endres, må du oppdatere hurtigbufferen manuelt ved å ringe updateCache () eller buffer () en gang til. Du må spesifisere hurtigområdet ved hjelp av x-, y-, w- og h-parametrene. Dette definerer rektangelet som vil bli gjengitt og bufret ved hjelp av dette displayobjektets koordinater. Caching bør normalt ikke brukes på bitmap klassen som det kan nedbryte ytelsen, men hvis du vil bruke et filter på en bitmap da må den bli cached.
På grunn av størrelsesbegrensninger på JSFiddle-tjenestene vil jeg ikke gi demo for denne metoden, men vil koble deg til en demo på CreateJs nettsted.
Filterklassen er grunnklassen som alle filtre skal arve fra. Filtre må brukes på objekter som har blitt cachet ved hjelp av cachemetoden. Hvis et objekt endres, må du cache det igjen, eller bruk updateCache (). Legg merke til at filtre må påføres før caching. EaselJS leveres med en rekke forhåndsbygde filtre. Vær oppmerksom på at individuelle filtre ikke er kompilert i den oppgraderte versjonen av EaselJS. For å bruke dem må du inkludere dem manuelt i HTML-koden.
Demoen nedenfor bruker Fargepulveret, når du klikker på scenen fjerner den den grønne kanalen fra bildet. De Fargefilter har følgende parametere.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphaMultiplier = 1] [redOffset = 0] [greenOffset = 0] [blueOffset = 0] [alphaOffset = 0])
De røde, grønne, blå og alpha-multiplikatorene forventes å være et tall fra null til en, og den røde, grønne, blå og alfa-offset forventes å være et tall fra 255 til 255.
Vi lager en vanlig bitmap-objekt, bruker filteret og cachen i bitmappen.
Jeg har laget en endelig demo, som vi vil bygge på i neste del av denne serien, ved å legge til lyd, forhåndsbelaste eiendelene og bruke tweens.
I denne demoen utliserer vi bitmap, Tekst, og Form, klasser for å lage et Space Invaders type spill. Jeg vil ikke gå over hvert trinn her siden hensikten bare å vise hvordan man knytter konseptene sammen, men hvis du har noen spørsmål om koden, er du velkommen til å spørre i kommentarene. Kollisjonsdeteksjonen leveres av osln via Github.
I denne opplæringen har vi tatt en titt på EaselJS og har laget et par demo applikasjoner. Jeg håper du har funnet denne artikkelen nyttig, og at det blir deg begeistret for å bruke EaselJS. Takk for at du leste!
