Clever Geek Handbook

¿Vale la pena volver a dibujar en los juegos solo la parte de CANVAS que ha cambiado? ¿O es más fácil borrar todo y volver a pintar?

Hola. Mi nombre es Alexander Ptichkin. Desde hace 8 años imparto clases de creación de dibujos animados y animación; 3 años de los cuales los dediqué al desarrollo de mi propio motor de juego 2.5D HTML5 llamado PointJS. Durante 8 años de rotación en esta industria, he acumulado una gran cantidad de material que quiero compartir aquí con ustedes en el blog. Esta es mi primera publicación sobre Habr. Juzgue estrictamente :) Sus sugerencias para mejorar más artículos se escriben en los comentarios. ¡Vamos!





A menudo me preguntan por qué redibujo todo el CANVAS en mi motor de juego PointJS y no actualizo solo la parte donde se llevaron a cabo los cambios.





En este artículo, no pretendo ser la verdad absoluta, como dicen, cuántas personas tienen tantas opiniones. Solo compartiré mis pensamientos, ideas y desarrollos que me impulsaron a inclinarme hacia un rediseño completo de CANVAS. Me encantaría escuchar sus opiniones al respecto en los comentarios, para optimizar el motor en base a ellos. De hecho, en la comunicación nace la verdad.





Suena muy lógico al principio. En algún lugar del borde de la pantalla corrió un personaje enemigo, y solo esa parte de CANVAS que queremos volver a dibujar, ahorrando recursos. Era tan creíble que dibujé una hoja A4 durante la noche buscando la mejor solución a este problema. Y esto es lo que sucedió.





Podemos volver a dibujar la parte CANVAS solo si se cumplen dos condiciones:





  1. El fondo del juego debe dividirse en partes y no ser una imagen completa. Juzgue usted mismo: si el fondo es una imagen completa, tendrá que volver a dibujarla en alguna parte. Y dado que es integral, tendrá que volver a dibujarse por completo, lo que significa que no se puede hablar de volver a dibujar una parte separada de CANVAS. Más adelante en el artículo comprenderá a qué me refiero y por qué.





  2. La cámara debe estar en el juego. Porque si la cámara se está moviendo, entonces toda la escena se está moviendo, lo que significa que toda la escena debe volver a dibujarse.





Estas dos condiciones anteriores ya cortan muchos juegos y mecánicas. Y ni siquiera hemos comenzado a resolverlo todavía.





Entonces, hemos decidido el fondo del juego. Te diré cómo prepararlo.





Maya (, Autodesk Maya, 2D). . .





, , . 3000 3000px.





png-, . , , Maya, . php. 2786 1998. , , , Photoshop, . Photoshop, php :)





( ). , Diablo 2 . (), 3D. . 10000px 10000px, 1920 1080px ( ). .. , , . - ( ). , , .





, - . Anime Studio Pro (Moho) , 1920 1080 ( , , , - ). 300 300px. ...





Photoshop (, ). , 8 8 . 8*8 = 64 348 250px. Photoshop, .





gif, , , . javascript .





, , 1 0 ( .) 1, , 0, 0 , 1. , - 21 . MAC Book Name Manager. , img. , Rename.





, ! Photoshop , , , . -, . ( ), . Javascript , , . : 0 64 – , 64 .





javascript , .





fon = [], , xy, (xy ).





var xy = 0, fon = [];

, X , - Y, .





for (var x=0; x<8; x++) {
	for (var y=0; y<8; y++) {
  }
}

x<8 , 8 . y - 8 . 8 8, img. 64.





xy fon .





xy++;
fon.push(1);

PointJS , game.newImageObject({ });



. , , , . , fon game.newImageObject.





:





var xy = 0, fon = []; 
for (var x=0; x<8; x++) {
	for (var y=0; y<8; y++) {
  xy++;
    fon.push(
      game.newImageObject({ 
        file : "img/" + xy + ".gif", //   
         x : 0 + 348*y, // y  .     x  400,   400*2   400*3
         y : 0 + 250*x, //      y
         w : 348, 
         h : 250
      })
    )
  }
};

file : "img/" + xy + ".gif"



. , xy , 1, :





file : "img/" + xy + ".gif", //    // 

//   
file : "img/" + 1 + ".gif"// img/1.gif 
file : "img/" + 2 + ".gif"// img/2.gif
file : "img/" + 3 + ".gif"// img/3.gif
file : "img/" + 4 + ".gif"// img/4.gif
//  ...

.





w=346, h=248. , 2px, , .





var xy = 0, fon = []; 
for (var x=0; x<8; x++) {
	for (var y=0; y<8; y++) {
  xy++;
    fon.push(
      game.newImageObject({ 
        file : "img/" + xy + ".gif", //   
         x : 0 + 348*y, // y  .     x  400,   400*2   400*3
         y : 0 + 250*x, //      y
         w : 346, 
         h : 248
      })
    )
  }
};

, , . - . : . - , (.. ). , , , , draw();



. :





for (var i in fon) {
if (fon[i].isInCamera()) fon[i].draw();
}

, . , ( ), . . , - , , . , , After Effects. .





, , - CANVAS? ?. , . : , .





. : , . : , , . ( ). , ( ):





, . .





, ( ). , . , , ?





. , / . , . , StaticBox()



? , getStaticBox();



- , . , , StaticBox();



. , fon = [];? , ? fon. , obj, . , :





var collisionFon = []; //            
var collisionObj = []; //            obj 

for (var i in fon) {
	if (player2.isStaticIntersect(fon[i].getStaticBox())) {
		collisionFon.push(fon[i])
  }
}
for (var i in obj) {
	if (player2.isStaticIntersect(obj[i].getStaticBox())) {
		collisionObj.push(obj[i])
  }
}

. . , , . ? : , , ,





:



!





, , -. .. , collisionFon collisionObj, , , - . Z. Z Y, . , , . , , , Y, , , . , . , : , CANVAS . , , , MMORPG-, . ( ) , .





, . , , , . ! , CANVAS. , , CANVAS? , - , , . , , , !







Bueno, esto concluye mi primer artículo. Espero que no estés muy cansado. Si tiene alguna opinión sobre lo anterior, escriba en los comentarios, la discutiremos. Repito, la verdad nace en la comunicación. Y es necesario mejorar el motor. Gracias a todos y nos vemos en nuevos artículos.





El autor del texto y todos los materiales del artículo: Alexander Ptichkin, fundador del proyecto educativo Mult-uroki. Escrito específicamente para habr.com. Está prohibido copiar u otro uso del material sin el permiso por escrito del autor.







More articles:


All Articles