Cómo usar createjs para escribir animaciones TweenJS y Tick de juegos HTML5

No entraré en el origen y el conocimiento básico de createJs, solo hablaré sobre el 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 complementaria). Para descargar, le recomendamos que descargue dos archivos, uno es una versión comprimida para referencia del proyecto y luego descargue 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

Luego realice la inicialización de la etapa:

función init(){

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

C_W = etapa.canvas .width;

C_H = etapa . canvas.height;

var manifest = [

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

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

{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, colocar el archivo de imagen que se va a cargar en el manifiesto y cargarlo. Luego llame a la devolución de llamada después de que 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"),