Share
In questo tutorial esploreremo la suite di librerie CreateJS. CreateJS è una suite di librerie e strumenti JavaScript per creare esperienze interattive complete con HTML5. La suite CreateJS è divisa in quattro librerie.
La prima libreria che esamineremo è EaselJs. Iniziamo!
EaselJS è una libreria per lavorare con la tela HTML5. Consiste in un elenco di visualizzazione completo, gerarchico, un modello di interazione core e classi helper per semplificare il lavoro con Canvas. Alzarsi e correre con EaselJS non potrebbe essere più facile. Dovrai definire un elemento canvas nel tuo codice HTML e farne riferimento nel tuo JavaScript. EaselJS utilizza la nozione di uno stage che è il contenitore di livello superiore per l'elenco di visualizzazione (lo stage sarà il tuo elemento canvas). Di seguito è riportato un frammento HTML e il codice JavaScript corrispondente necessari per l'installazione di EaselJS.
Per fare riferimento alla tela di cui sopra si utilizzerà il seguente.
Accentsconagua
var canvas = document.getElementById ("testCanvas"); var stage = new createjs.Stage (canvas); EaselJS viene fornito con una classe Graphics che espone un'API facile da usare per generare istruzioni di disegno vettoriale e disegnarle in un contesto specifico. I comandi sono molto simili al normale Canvas HTML5, mentre EaselJs aggiunge anche alcuni dei suoi nuovi comandi. Se non hai familiarità con la tela di HTML 5 e i comandi di disegno, potresti voler guardare il corso Canvas Essentials rilasciato di recente. Normalmente non si usa la classe Graphics da sola, ma si accede piuttosto alla classe Shape. Di seguito c'è un JSFiddle che usa quella classe Shape per fare un disegno.
Come puoi vedere nel codice sopra i comandi sono concatenabili ShapeObject.graphics.setStrokeStyle (1) .beginStroke ( "RGBA (0,0,0,1) ecc. Potresti aver notato una chiamata a stage.addChild () all'interno delle funzioni. Ogni volta che vuoi mettere qualcosa sulla tela, devi chiamare stage.addChild (). All'interno del drawShapes () funzione, c'è una chiamata a stage.update (). Per poter vedere le tue modifiche, devi chiamare stage.update () dopo ogni modifica alla tela. C'è un modo per non dover chiamare ripetutamente stage.update () e cioè usando la classe Ticker. Il Ticker fornisce un tick centralizzato o un battito cardiaco trasmesso a intervalli regolari. Gli ascoltatori possono iscriversi all'evento di tick per essere avvisati quando è trascorso un intervallo di tempo prefissato. Di seguito è riportato come si utilizza la classe Ticker per aggiornare automaticamente lo stage.
createjs.Ticker.addEventListener ("tick", handleTick); function handleTick (event) stage.update () La classe Shape è dotata di un gran numero di proprietà che puoi regolare come x, y posizioni, alfa, scaleX, scaleY e parecchi altri. Di seguito una demo che mostra alcune di queste proprietà.
All'interno del drawTheShapes () generiamo 15 cerchi con una linea disegnata attraverso di essi, essendo in grado di concatenare i comandi di disegno rende questo semplice morto. Quindi randomizziamo la posizione delle forme, la scala, la rotazione e l'alfa.
È possibile allegare eventi alle forme come clic, mousedown / sopra / out, ecc., usando il sopra() metodo. In questa demo quando si fa clic su una delle forme viene generato un avviso e al passaggio del mouse viene registrato un messaggio nella console. Per consentire eventi del mouse sul palco mousedown / sopra / out ecc., devi chiamare stage.enableMouseOver (frequenza) dove frequenza è il numero di volte al secondo per trasmettere gli eventi del mouse. Questa operazione è costosa, quindi è disabilitata per impostazione predefinita.
EaselJS viene fornito con una classe Text che semplifica la creazione di testo e la modifica delle proprietà su quel testo. Chiami il costruttore che passa il testo, un font e un colore i.e. new createjs.Text ("Hello World", "20px Arial", "# ff7700") Come la classe Shape, viene fornito con una varietà di proprietà e metodi. Di seguito è una demo che utilizza la classe di testo.
Simile all'ultima demo, creiamo 25 campi di testo e applichiamo alcuni valori casuali alle loro proprietà.
La seguente demo è un gioco dell'impiccato creato usando la classe Shape e Text che abbiamo discusso finora in questo tutorial.
Per disegnare il boia usiamo una combinazione su lineTo (), moveTo (), e per la testa usiamo il arco() metodo. All'interno del drawCanvas () funzione, chiamiamo il chiaro() metodo sul hangmanShape.graphics che cancella qualsiasi disegno precedente che abbiamo fatto in questa forma. Cambiamo il colore dei campi di testo a seconda che il giocatore abbia vinto o perso la partita.
È possibile utilizzare le immagini utilizzando la classe Bitmap. Una bitmap rappresenta un'immagine, una tela o un video nell'elenco di visualizzazione, può essere istanziata utilizzando un elemento HTML esistente o una stringa (Base64). Per esempio new createjs.Bitmap ("imagePath.jpg").
<
Molto simile alle demo precedenti, creiamo qui tre bitmap e forniamo loro alcune proprietà casuali.
Usiamo la classe Shadow per creare alcune ombre. La classe shadow prende come parametri, il colore, offsetX, offsetY e dimensione dell'effetto sfocatura ecc. myImage.shadow = new createjs.Shadow ("# 000000", 5, 5, 10). È possibile applicare ombre a qualsiasi oggetto di visualizzazione in modo che funzioni anche per il testo.
A Sprite visualizza una trama o una sequenza di fotogrammi (come un'animazione) da un'istanza di SpriteSheet. Un foglio sprite è una serie di immagini (in genere frame di animazione) combinate in un'unica immagine. Ad esempio, un'animazione composta da otto immagini 100x100 può essere combinata in un foglio sprite 400x200 (quattro fotogrammi su due alti). È possibile visualizzare singoli fotogrammi, riprodurre fotogrammi come un'animazione e persino animazioni in sequenza. Per inizializzare un'istanza di Sprite, si passa in SpriteSheet e il numero di fotogramma o l'animazione facoltativi da riprodurre, ad esempio, new createjs.Sprite (spriteSheet, "run"). I dati passati al costruttore SpriteSheet definiscono tre informazioni critiche:
Di seguito è riportato un codice di esempio che inizializza uno sprite "carattere".
var data = new createjs.SpriteSheet ("images": ["percorso / a / immagine.png"], "frame": "regX": 0, "altezza": 96, "conteggio": 10, "regY ": 0," larghezza ": 75," animazioni ": " cammina ": [0, 9]); character = new createjs.Sprite (data, "walk"); character.play (); Ecco una demo che utilizza la classe Sprite e SpriteSheet. È necessario fare clic sul palco, e quindi è possibile utilizzare "A" per spostarsi a sinistra e "D" per spostarsi a destra. Una cosa da notare su questa demo è che Base64 ha codificato le immagini e sono incluse nella risorsa esterna "imagestrings.js". Poiché utilizziamo uno SpriteSheet e interagiamo con il mouse, la tela viene macchiata dalla politica delle immagini del dominio incrociato (CORS). Usando le stringhe Base64 possiamo superare questo. Se questo fosse ospitato sul tuo dominio, useresti la classe Bitmap come al solito passando un elemento o percorso.
All'interno del impostare() funzione stiamo creando il spritesheet. Per il tasto "immagini" sto passando characterImage che è una stringa codificata Base64. Per il tasto "cornici" le immagini dei caratteri sono alte 96 pixel, larghe 75 pixel e sono presenti dieci fotogrammi (immagini separate). Di seguito è l'immagine che stiamo utilizzando per il spritesheet in modo da poter visualizzare ciò che sembra.
Per il tasto "animazione" definiamo un'animazione "run" che va da "frame" zero a nove. Infine, creiamo il personaggio dal spritesheet.
Quando sposti il personaggio a sinistra oa destra, chiamiamo character.play (). e quando smetti di muovere il personaggio che chiamiamocharacter.gotoAndStop (0). Dal momento che abbiamo solo una "animazione", possiamo semplicemente chiamare giocare() e gotoAndStop () se tu avessi un numero di animazioni useresti una combinazione di questi due plus gotoAndPlay ().
La classe contenitore è un elenco di visualizzazione nestable che consente di lavorare con elementi di visualizzazione composti. Ad esempio, è possibile raggruppare insieme le istanze Bitmap di braccio, gamba, busto e testa in un contenitore Persona e trasformarle come gruppo, pur continuando a spostare le singole parti l'una rispetto all'altra. I figli dei contenitori hanno le loro proprietà di trasformazione e alfa concatenate con il contenitore principale. Di seguito è una demo che utilizza la classe contenitore. Fai clic sul palco per spostare il contenitore di 20 pixel.
Qui stiamo creando tre bitmap e aggiungendoli al contenitore, siamo quindi in grado di spostarli tutti in una volta spostando il file contenitore, e anche se sono in un contenitore, puoi comunque spostarli ciascuno individualmente.
Il metodo cache () dell'oggetto di visualizzazione disegna l'oggetto di visualizzazione in una nuova area di disegno, che viene quindi utilizzata per i disegni successivi. Per contenuti complessi che non cambiano frequentemente (ad esempio un contenitore con molti bambini che non si muovono o una forma vettoriale complessa), questo può fornire un rendering molto più veloce perché il contenuto non deve essere ripetuto ogni volta.
L'oggetto di visualizzazione memorizzato nella cache può essere spostato, ruotato, sbiadito, ecc liberamente, tuttavia se il suo contenuto cambia, è necessario aggiornare manualmente la cache chiamando updateCache () o cache () ancora. È necessario specificare l'area della cache tramite i parametri x, y, w e h. Questo definisce il rettangolo che sarà reso e memorizzato nella cache usando le coordinate di questo oggetto di visualizzazione. Il caching non dovrebbe normalmente essere usato su Bitmap di classe in quanto può degradare le prestazioni, tuttavia se si desidera utilizzare un filtro su a Bitmap quindi deve essere memorizzato nella cache.
A causa delle restrizioni sulle dimensioni degli embri di JSFiddle, non fornirò una demo per questo metodo, ma ti collegherò a una demo sul sito Web di CreateJs.
La classe Filter è la classe base da cui tutti i filtri dovrebbero ereditare. I filtri devono essere applicati agli oggetti che sono stati memorizzati nella cache utilizzando il metodo cache. Se un oggetto cambia, dovrai salvarlo nuovamente nella cache o usarlo updateCache (). Si noti che i filtri devono essere applicati prima caching. EaselJS viene fornito con una serie di filtri predefiniti. Si noti che i singoli filtri non sono compilati nella versione ridotta di EaselJS. Per usarli, devi includerli manualmente nell'HTML.
La demo qui sotto utilizza il filtro colorato, quando si fa clic sul palco si rimuove il canale verde dall'immagine. Il Filtro colore ha i seguenti parametri.
ColorFilter ([redMultiplier = 1] [greenMultiplier = 1] [blueMultiplier = 1] [alphaMultiplier = 1] [redOffset = 0] [greenOffset = 0] [blueOffset = 0] [alphaOffset = 0])
Ci si aspetta che i moltiplicatori rosso, verde, blu e alfa siano un numero compreso tra zero e uno, e che gli offset rosso, verde, blu e alfa siano un numero compreso tra 255 e 255.
Creiamo un oggetto bitmap regolare, applichiamo il filtro e la cache la bitmap.
Ho creato una demo finale, che svilupperemo nella prossima parte di questa serie, aggiungendo suoni, precaricando le risorse e utilizzando le interpolazioni.
In questa demo stiamo definendo il Bitmap, Testo, e Forma, classi per creare un gioco di tipo Space Invaders. Non esaminerò tutti i passaggi qui dallo scopo solo per mostrare come legare insieme i concetti, ma se avete domande sul codice non esitate a chiedere nei commenti. Il rilevamento delle collisioni è fornito da osln tramite Github.
In questo tutorial abbiamo dato un'occhiata a EaselJS e abbiamo realizzato un paio di applicazioni demo. Spero che abbiate trovato utile questo articolo e che siate entusiasti dell'utilizzo di EaselJS. Grazie per aver letto!
