Clever Geek Handbook

Vale a pena redesenhar nos jogos apenas a parte do CANVAS que mudou? Ou é mais fácil apagar tudo e pintar novamente?

Olá. Meu nome é Alexander Ptichkin. Há 8 anos venho ensinando criação de desenhos animados e animação; Passei 3 anos desenvolvendo meu próprio mecanismo de jogo HTML5 2.5D chamado PointJS. Há 8 anos de rodízio neste setor, acumulei muito material que quero compartilhar aqui no blog. Esta é a minha primeira postagem no Habr. Julgue estritamente :) Suas sugestões para melhorar outros artigos escrevem nos comentários. Vai!





Muitas vezes me perguntam por que redesenho todo o CANVAS em meu mecanismo de jogo PointJS, e não atualizo apenas a parte onde as mudanças ocorreram.





Neste artigo, não pretendo ser a verdade absoluta - como dizem, quantas pessoas têm tantas opiniões. Eu apenas compartilharei meus pensamentos, ideias e desenvolvimentos que me levaram a um redesenho completo do CANVAS. Eu ficaria feliz em ouvir suas opiniões sobre isso nos comentários, a fim de otimizar o motor com base neles. Na verdade, na comunicação, nasce a verdade.





Parece muito lógico no início. Em algum lugar na borda da tela, um personagem inimigo correu, e apenas aquela parte da CANVAS que queremos redesenhar, economizando recursos. Era tão verossímil que desenhei uma folha A4 da noite para o dia em busca da melhor solução para esse problema. E aqui está o que aconteceu.





Podemos redesenhar a parte CANVAS apenas se duas condições forem atendidas:





  1. O fundo do jogo deve ser dividido em partes e não uma imagem inteira. Julgue por si mesmo: se o fundo é uma imagem inteira, então ainda terá que ser redesenhado em algum lugar. E, uma vez que é integral, terá de ser completamente redesenhado, o que significa que não se pode falar de redesenho de uma parte separada do CANVAS. Mais adiante neste artigo, você entenderá o que quero dizer e por quê.





  2. A câmera deve estar no jogo. Porque se a câmera está se movendo, então toda a cena está se movendo, o que significa que toda a cena precisa ser redesenhada.





Essas duas condições acima já cortaram muitos jogos e mecânicas. E ainda nem começamos a descobrir.





Portanto, decidimos o pano de fundo para o jogo. Como preparar, eu vou te dizer agora.





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? , - , , . , , , !







Bem, isso conclui meu primeiro artigo. Espero que não esteja muito cansado. Se você tem alguma opinião sobre o acima - escreva nos comentários, nós discutiremos. Repito, a verdade nasce da comunicação. E é preciso melhorar o motor. Obrigado a todos e até os novos artigos.





O autor do texto e de todo o material do artigo: Alexander Ptichkin, fundador do projeto educacional Mult-uroki. Escrito especificamente para habr.com. É proibida a cópia ou outro uso do material sem a permissão por escrito do autor.







More articles:


All Articles