Cómo usar createjs para escribir juegos HTML5 Introducción a EaselJS

No hablaré sobre el origen y los conceptos básicos de createJs. Vayamos directamente al uso de createJs.

Primero vaya al sitio web oficial de createJs para descargar. createJs se divide en cuatro partes: caballeteJs (animación gráfica), preloadJs (carga de archivos), soundJs (control de audio) y tweenJs (animación completa). , se recomienda descargar primero dos archivos, uno es una versión comprimida para referencia del proyecto, y luego descargar un archivo de código fuente. Descargue otro archivo de código fuente para ver el uso, API, demostración, etc. Debido a que el autor actualmente solo usa caballeteJ y preloadJ, por el momento solo uso estos dos. De hecho, estos dos son suficientes.

Empecemos a analizar el código:

Primero está la introducción del archivo js

lt script src="easeljs-0.7.1.min.js; "gt ;lt;/scriptgt;

lt;script src="preloadjs-0.4.1.min.js"gt;lt;/scriptgt;

Luego realice la inicialización de la etapa operación:

función init(){

stage = new createjs.Stage("cas");

C_W = stage.canvas .width;

C_H = stage.canvas.height;

var manifest = [

{src: "image/man.png", id: "man"},

{src: "image/bg.png", id "suelo"},

{src: "image/bg.png", id: "bg"},

{src: "image/high.jpg", id: "high"},

{src: "image/coins.png", id: "coin"}

]

loader = new createjs.LoadQueue(false);

loader.addEventListener("complete", handleComplete);

loader. loadManifest(manifest );

drawLoading();

}

La operación anterior utiliza el método en preloadJs para crear una instancia de un cargador y colocar el archivo de imagen. cargado en el manifiesto y cárguelo, luego llame a la devolución de llamada cuando se complete la carga. Función handleCompelete:

función handleComplete(){ // Ejecuta este método después de cargar el material de la imagen

var manImage = loader.getResult("man"),

terreno bajo = loader.getResult("suelo"),