Share
I den här handledningen utforskar vi CreateJS-paketet i bibliotek. CreateJS är en serie med JavaScript-bibliotek och verktyg för att bygga rika interaktiva upplevelser med HTML5. CreateJS-sviten är uppdelad i fyra bibliotek.
Det första biblioteket vi kommer att titta på är EaselJs. Låt oss börja!
EaselJS är ett bibliotek för att arbeta med HTML5-kanalen. Den består av en fullständig hierarkisk visningslista, en kärninteraktionsmodell och hjälparklasser för att göra arbetet med Canvas mycket enklare. Att komma igång med EaselJS kunde inte bli enklare. Du måste definiera ett dukelement i din HTML och referera det till i JavaScript. EaselJS använder begreppet ett steg som är toppnivå Container för visningslistan (scenen blir ditt dukelement). Nedan finns ett HTML-fragment och motsvarande JavaScript som behövs för att konfigurera EaselJS.
För att hänvisa till ovanstående duk kan du använda följande.
Accentsconagua
var kanvas = document.getElementById ("testCanvas"); varstadiet = nya createjs.Stage (kanfas); EaselJS levereras med en grafikklass som exponerar ett lättanvänt API för att generera vektorritningsinstruktioner och rita dem i ett visst sammanhang. Kommandona är mycket lik den vanliga HTML5 Canvas, medan EaselJs lägger till några egna egna kommandon. Om du inte är bekant med HTML 5-duk och ritningskommandon kanske du vill titta på kanalen Essentials-kursen som nyligen släpptes. Du brukar inte använda Graphics-klassen själv utan brukar använda den via Form-klassen. Nedan finns en JSFiddle som använder den Form-klassen för att göra en del ritning.
Som du kan se i ovanstående kod är kommandon kedjbara ShapeObject.graphics.setStrokeStyle (1) .beginStroke ( "RGBA (0,0,0,1) etc ... Du kan också ha märkt ett samtal till stage.addChild () inom funktionerna. När som helst du vill sätta något på duken måste du ringa stage.addChild (). Inom drawShapes () funktion, det finns ett samtal till stage.update (). För att kunna se dina ändringar måste du ringa stage.update () efter varje byte till duken. Det finns ett sätt att inte behöva ringa upprepade gånger stage.update () och det är med hjälp av Ticker-klassen. Ticker-systemet ger en centraliserad fästning eller hjärtslags-sändning vid ett bestämt intervall. Lyssnare kan prenumerera på fälthändelsen som ska meddelas när ett angivet tidsintervall har förflutit. Nedan följer hur du använder Ticker-klassen för att automatiskt uppdatera scenen.
createjs.Ticker.addEventListener ("tick", handleTick); funktion handtagTick (händelse) stage.update () Form-klassen levereras med en hel massa egenskaper du kan anpassa, till exempel x, y positioner, alfa, scaleX, scaleY och en hel del andra. Nedan visas en demo som visar några av dessa egenskaper.
Inom drawTheShapes () vi genererar 15 cirklar med en linje dras genom dem, att kunna kedja ritningskommandon gör denna död enkel. Sedan randomiserar vi formernas position, skala, rotation och alfa.
Du kan bifoga händelser till former som klick, mousedown / över / ut, etc, genom att använda på() metod. I den här demo när du klickar på en av formerna raderas en varning, och på mouseout loggar vi ett meddelande till konsolen. För att tillåta mushändelser på scenen mousedown / över / ut etc, du måste ringa stage.enableMouseOver (frekvens) där frekvens är antalet gånger per sekund för att sända mushändelserna. Denna operation är dyr, så den är vanligtvis avstängd.
EaselJS skickas med en text klass som gör det väldigt lätt att skapa text och ändra egenskaper på den texten. Du ringer konstruktören som passerar i texten, ett teckensnitt och en färg, dvs. ny createjs.Text ("Hello World", "20px Arial", "# ff7700") Liksom Shape-klassen kommer den med en mängd olika egenskaper och metoder. Nedan är en demo som använder Text-klassen.
På samma sätt som den sista demo skapar vi 25 TextFields och tillämpar några slumpmässiga värden på deras egenskaper.
Följande demo är ett hangman-spel skapat med den form och textklass vi hittills har diskuterat i denna handledning.
För att rita hangman använder vi en kombination på lineTo (), flytta till(), och för huvudet använder vi båge() metod. Inom drawCanvas () funktion, vi kallar klar() metod på hangmanShape.graphics vilket rensar bort några tidigare ritningar vi har gjort i denna form. Vi ändrar TextFields färg beroende på om spelaren har vunnit eller förlorat sitt spel.
Du kan använda bilder genom att använda Bitmap-klassen. En bitmapp representerar en bild, kanfas eller video i visningslistan, den kan ordnas med ett befintligt HTML-element eller en sträng (Base64). Till exempel ny createjs.Bitmap ("imagePath.jpg").
<
Mycket som tidigare demos skapar vi tre bitmappar här och ger några slumpmässiga egenskaper till dem.
Vi använder skuggklassen för att skapa några skuggor. Skuggklassen tar som parametrar, färgen, offsetX, offsetY och storleken på suddseffekten etc. myImage.shadow = new createjs.Shadow ("# 000000", 5, 5, 10). Du kan använda skuggor till något visningsobjekt så det skulle fungera för text också.
En Sprite visar en ram eller en sekvens av ramar (som en animering) från en SpriteSheet-instans. Ett spritark är en serie bilder (vanligtvis animationsramar) kombinerad i en enda bild. Till exempel kan en animering bestående av åtta 100x100 bilder kombineras till ett 400x200 sprite-ark (fyra bilder över två höga). Du kan visa enskilda ramar, spela ramar som en animering och till och med sekvens animeringar tillsammans. För att initiera en Sprite-instans passerar du i ett SpriteSheet och valfritt ramnummer eller animering för att spela, till exempel, nya createjs.Sprite (spriteSheet, "run"). Data som skickas till SpriteSheet-konstruktorn definierar tre kritiska delar av information:
Nedan finns några exempelkod som skulle initiera ett "tecken" sprite.
var data = new createjs.SpriteSheet ("images": ["path / to / image.png"], "frames": "regX": 0, "höjd": 96, "count": 10, "regY ": 0," bredd ": 75," animeringar ": " walk ": [0, 9]); karaktär = ny createjs.Sprite (data, "walk"); character.play (); Här är en demo som använder Sprite och SpriteSheet Class. Du måste klicka på scenen och då kan du använda "A" för att flytta till vänster och "D" för att flytta till höger. En sak att notera om denna demo är att jag har Base64 kodade bilderna och de ingår i "imagestrings.js" extern resurs. Eftersom vi använder ett SpriteSheet och interagerar med musen, blir kanfasen besviken från cross-domain images policy (CORS). Genom att använda Base64-strängar kan vi övervinna detta. Om detta var värd på din egen domän skulle du använda Bitmap-klassen som vanligt genom att skicka ett element eller en sökväg.
Inom inrätta() funktion vi skapar spritesheet. För "bilder" nyckeln passerar jag in characterImage vilken är en Base64 kodad sträng. För "ramar" -tangenten är teckenavbildningarna 96 pixlar höga, 75 pixlar breda och det finns tio bildrutor (separata bilder). Nedan är bilden vi använder för spritesheet så du kan visualisera hur det ser ut.
För "animering" nyckeln definierar vi en "run" -animation som är från "ram" noll till nio. Slutligen skapar vi karaktär från spritesheet.
När du flyttar tecknet vänster eller höger vi ringer character.play (). och när du slutar flytta karaktären vi ringercharacter.gotoAndStop (0). Eftersom vi bara har en "animering" kan vi bara ringa spela() och gotoAndStop () Om du hade ett antal animeringar skulle du använda en kombination av dessa två plus gotoAndPlay ().
Containerklassen är en nestbar visningslista som låter dig arbeta med sammansatta visningselement. Till exempel kan du gruppera arm-, ben-, torso- och huvudbitmap-instanser tillsammans i en personbehållare, och omvandla dem som en grupp, samtidigt som du fortfarande kan flytta de enskilda delarna i förhållande till varandra. Behållarkolon har sina transformations- och alfaegenskaper sammankopplade med deras föräldrakontainer. Nedan följer en demo som använder Containerklassen. Klicka på scenen för att flytta behållaren med 20 pixlar.
Här skapar vi tre bitmappar och lägger till dem i behållare, vi kan sedan flytta dem på en gång genom att flytta behållare, och även om de är i en behållare kan du fortfarande flytta dem var och en för sig.
Metoden cache () i visningsobjektet drar visningsobjektet i en ny duk, som sedan används för efterföljande dragningar. För komplext innehåll som inte ändras ofta (t.ex. en behållare med många barn som inte rör sig eller en komplex vektorform) kan detta ge mycket snabbare återgivning eftersom innehållet inte behöver återställas varje kryss.
Det cachade visningsobjektet kan flyttas, roteras, blekas, etc. fritt, men om innehållet ändras måste du manuellt uppdatera cacheminnet genom att ringa updateCache () eller cache () igen. Du måste ange cachegivaren via parametrarna x, y, w och h. Detta definierar rektangeln som kommer att göras och cachas med hjälp av det här visningsobjektets koordinater. Cachning ska normalt inte användas på Bitmap klass eftersom det kan försämra prestanda, men om du vill använda ett filter på en Bitmap då måste det cachas.
På grund av storleksbegränsningar på JSFiddle-tjänsten kommer jag inte att ge demo för den här metoden, men länkar dig till en demo på CreateJs webbplats.
Filterklassen är basklassen som alla filter ska ärva från. Filter måste tillämpas på objekt som har cachats med cachemetoden. Om ett objekt ändras måste du cache det igen, eller använda updateCache (). Observera att filtren måste tillämpas innan caching. EaselJS levereras med ett antal förbyggda filter. Observera att enskilda filter inte är sammanställda i den minifierade versionen av EaselJS. För att kunna använda dem måste du inkludera dem manuellt i HTML.
Demon nedan använder färgfiltret, när du klickar på scenen tar det bort den gröna kanalen från bilden. De Färgfilter har följande parametrar.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphaMultiplier = 1] [redOffset = 0] [greenOffset = 0] [blueOffset = 0] [alphaOffset = 0])
De röda, gröna, blåa och alf multiplikatorer förväntas vara ett tal från noll till en och den röda, gröna, blå och alfas offset förväntas vara ett tal från 255 till 255.
Vi skapar ett regelbundet bitmappsobjekt, tillämpar filtret och cachen i bitmappen.
Jag har skapat en sista demo som vi kommer att bygga på i nästa del av denna serie, genom att lägga till ljud, förinställa tillgångarna och använda tweens.
I denna demo utliserar vi Bitmap, Text, och Form, klasser för att skapa ett Space Invaders typspel. Jag kommer inte att gå över varje steg här eftersom ändamålet bara för att visa hur man knyter koncepten samman, men om du har några frågor om koden kan du fråga i kommentarerna. Kollisionsdetektering tillhandahålls av osln via Github.
I denna handledning har vi tittat på EaselJS och gjort ett par demo-applikationer. Jag hoppas att du har hittat den här artikeln och att du blir glad över att använda EaselJS. Tack för att du läser!
