Share
Nella prima parte di questa serie sull'uso di CreateJs, abbiamo esaminato EaselJs. In questa seconda e ultima parte, vedremo PreloadJs, SoundJs e TweenJs.
PreloadJS è una libreria che ti consente di gestire e coordinare il caricamento delle risorse. PreloadJS facilita il precaricamento delle risorse, come immagini, suoni, JS, dati e altro. Usa XHR2 per fornire informazioni reali sui progressi quando disponibili o ripiega sul caricamento dei tag e agevola il progresso quando non lo è. Consente più code, più connessioni, interrompendo code e molto altro.
In PreloadJS, la classe LoadQueue è l'API principale per il precaricamento del contenuto. LoadQueue è un gestore di carico, che può precaricare un singolo file o una coda di file. var queue = new createjs.LoadQueue (true);, passare false potrebbe forzare il tag-caricamento laddove possibile. LoadQueue ha diversi eventi a cui puoi iscriverti:
È possibile caricare singoli file chiamando loadfile ("percorso per file") o caricare più file chiamando loadManifest () e passando una serie di file che si desidera caricare.
I tipi di file supportati di LoadQueue include il seguente.
Ecco un esempio di utilizzo di PreloadJS da caricare in un file JavaScript, alcuni PNG e un MP3.
Accentsconagua
var canvas = document.getElementById ("Canvas"); var stage = new createjs.Stage (canvas); var manifest; var preload; var progressText = new createjs.Text ("", "20px Arial", "# 000000"); progressText.x = 300 - progressText.getMeasuredWidth () / 2; progressText.y = 20; stage.addChild (progressText); stage.update (); function setupManifest () manifest = [src: "collision.js", id: "myjsfile", src: "logo.png", id: "logo", src: "ForkedDeer.mp3", id : "mp3file"]; per (var i = 1; i<=13;i++) manifest.push(src:"c"+i+".png") function startPreload() preload = new createjs.LoadQueue(true); preload.installPlugin(createjs.Sound); preload.on("fileload", handleFileLoad); preload.on("progress", handleFileProgress); preload.on("complete", loadComplete); preload.on("error", loadError); preload.loadManifest(manifest); function handleFileLoad(event) console.log("A file has loaded of type: " + event.item.type); if(event.item.id == "logo") console.log("Logo is loaded"); //create bitmap here function loadError(evt) console.log("Error!",evt.text); function handleFileProgress(event) progressText.text = (preload.progress*100|0) + " % Loaded"; stage.update(); function loadComplete(event) console.log("Finished Loading Assets"); setupManifest(); startPreload(); All'interno del setupManifest () funzione stiamo aggiungendo un file JavaScript, un MP3 e un file PNG. Passiamo un oggetto con le chiavi "src" e "id". Utilizzando "id" saremo in grado di identificare la risorsa una volta caricata. Infine, passiamo in loop e aggiungiamo altre 13 immagini nell'array. Non avrai sempre bisogno di un "id" se vuoi solo assicurarti che alcune risorse vengano caricate.
Stiamo ascoltando gli eventi "fileload", "progress" e "complete". L'evento fileload si attiva quando viene caricato un singolo file, lo stato di avanzamento è per ottenere lo stato di avanzamento di loadQueue e il completamento viene eseguito quando tutti i file sono stati caricati. Nel handleFileLoad () funzione stiamo registrando il tipo di file, che può essere molto utile. Controlliamo anche l'articolo id, è così che puoi tenere traccia dei precarichi e fare qualcosa di appropriato con le risorse.
Nota: per poter caricare il suono, devi chiamare installPlugin (createjs.Sound) che abbiamo fatto all'interno del startPreload funzione.
La libreria TweenJS è per il tweening e l'animazione di proprietà HTML5 e JavaScript. Fornisce un'interfaccia tweening semplice ma potente. Supporta il tweening di entrambe le proprietà degli oggetti numerici e le proprietà di stile CSS e consente di concatenare interpolazioni e azioni per creare sequenze complesse.
Per configurare un Tween, si chiama il Tween (target, [props], [pluginData]) costruttore con le seguenti opzioni.
Le proprietà Tween tweens di proprietà per un singolo target. I metodi di istanza possono essere concatenati per semplificare la costruzione e il sequenziamento. Non è una classe molto grande e ha solo pochi metodi, ma è molto potente.
Il a (puntelli, durata, facilità) metodo, accoda un'interpolazione dai valori correnti alle proprietà di destinazione. Imposta la durata a 0 per saltare immediatamente al valore. Le proprietà numeriche verranno interpolate dal loro valore corrente nell'interpolazione sul valore di destinazione. Le proprietà non numeriche verranno impostate alla fine della durata specificata.
Il attendere (durata, passiva) mette in coda un'attesa (essenzialmente un'interpolazione vuota).
Il chiamata (richiamata, params, scope) metodo Mette in coda un'azione per chiamare la funzione specificata
TweenJS supporta un gran numero di eases forniti dalla classe Ease.
Nella demo seguente, puoi fare clic sul palco per vedere la demo.
In questa demo, creiamo Bitmap e Testo oggetti. Abbiamo messo il logo fuori dalla parte superiore del palco e quando l'utente fa clic sul palco lo tocchiamo al centro del palco mentre cambiamo la sua scala X e Y. Noi usiamo il aspettare() metodo per dare un secondo di ritardo, quindi usiamo il chiamata() metodo per interpolare il testo. Nell'interpolazione di testo, cambiamo l'alfa, eseguiamo una rotazione di 360 gradi, l'interpolazione a sinistra dello stage.
TweenJS è molto divertente, prova a utilizzare alcune delle altre proprietà degli oggetti di visualizzazione
SoundJS è una libreria che fornisce una semplice API e potenti funzionalità per rendere il lavoro con l'audio un gioco da ragazzi. La maggior parte di questa libreria viene utilizzata in modo statico (non è necessario creare un'istanza). Funziona tramite plugin che astraggono l'effettiva implementazione audio, quindi la riproduzione è possibile su qualsiasi piattaforma senza una conoscenza specifica dei meccanismi necessari per riprodurre i suoni.
Per utilizzare SoundJS, utilizzare l'API pubblica nella classe Sound. Questa API è per:
Riproduzione di suoni crea SoundInstance istanze, che possono essere controllate individualmente. Puoi:
Di seguito è riportato il codice minimo necessario per riprodurre un file audio.
createjs.Sound.initializeDefaultPlugins (); createjs.Sound.alternateExtensions = ["ogg"]; var myInstance = createjs.Sound.play ("IntoxicatedRat.mp3"); Tuttavia, non potevo farlo funzionare sulla mia macchina in Firefox e Chrome, sebbene quanto sopra funzionasse in IE. Il plug-in predefinito era predefinito su WebAudio, dovevo registrarlo per utilizzare HTMLAudio come di seguito.
createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); console.log (createjs.Sound.activePlugin.toString ()); createjs.Sound.alternateExtensions = ["ogg"]; var mySound = createjs.Sound.play ("IntoxicatedRat.mp3"); Nelle sezioni di codice sopra, usiamo il alternateExtensions proprietà che tenterà di caricare il tipo di file OGG se non può caricare MP3.
Con le nozioni di base, creeremo un lettore MP3. Guarda la demo e la schermata qui sotto.
Per prima cosa chiamiamo registerPlugins () utilizzare HTMLAudio e impostare l'estensione alternativa in modo che proverà a caricare OGG se il browser non supporta MP3.
createjs.Sound.registerPlugins ([createjs.HTMLAudioPlugin]); createjs.Sound.alternateExtensions = ["ogg"];
All'interno del riprodurre l'audio() funzione, chiamiamo il giocare() metodo che riproduce uno dei file audio dal brani array. Impostiamo il volume dei suoni usando il setVolume () metodo, usiamo l'ascoltatore "completo" per essere allarmato quando il suono corrente è finito.
theMP3 = createjs.Sound.play ("./ sounds /" + tracks [currentSong] + ". mp3"); theMP3.setVolume (vol); theMP3.on ( "completo", songFinishedPlaying, null, false); Per tutto il resto del codice, usiamo il giocare(), Stop(),pausa() e curriculum vitae() metodi.
theMP3.play (); theMP3.stop (); theMP3.pause (); theMP3.resume ();
Non ho dato una spiegazione linea per linea del lettore MP3, ma se avete domande, non esitate a chiedere nei commenti.
Come menzionato nella prima parte di questo tutorial, ecco una demo del gioco Space Invaders con pre-caricamento, audio e tweens aggiunti in.
Questo conclude il nostro tour di CreateJS. Si spera che dai due articoli precedenti, hai visto quanto sia facile creare una ricca applicazione interattiva con CreateJS.
La documentazione è di prim'ordine e contiene una grande quantità di esempi, quindi assicurati di verificarli.
Spero che tu abbia trovato questo tutorial utile e che tu sia entusiasta dell'uso di CreateJS. Hanno appena annunciato sul loro blog che il supporto beta per WebGL è ora disponibile pure. Grazie per aver letto!
