Clever Geek Handbook

Vaut-il la peine de redessiner dans les jeux uniquement la partie de CANVAS qui a changé? Ou est-il plus facile de tout effacer et de peindre à nouveau?

Salut. Je m'appelle Alexander Ptichkin. Depuis 8 ans maintenant j'enseigne la création de dessins animés et l'animation; J'ai passé 3 ans à développer mon propre moteur de jeu HTML5 2.5D appelé PointJS. Pendant 8 ans de rotation dans cette industrie, j'ai accumulé beaucoup de matériel que je souhaite partager ici avec vous dans le blog. Ceci est mon premier article sur Habr. Jugez strictement :) Vos suggestions pour améliorer d'autres articles écrivent dans les commentaires. Aller!





On me demande souvent pourquoi je redessine la totalité de CANVAS dans mon moteur de jeu PointJS, et ne mets pas à jour uniquement la partie où les changements ont eu lieu.





Dans cet article, je ne prétends pas être la vérité absolue - comme on dit, combien de personnes ont tant d'opinions. Je ne partagerai que mes réflexions, idées et développements qui m'ont poussé à me pencher vers une refonte complète de CANVAS. Je serais heureux d'entendre vos opinions à ce sujet dans les commentaires, afin d'optimiser le moteur en fonction de ceux-ci. En effet, dans la communication, la vérité est née.





Cela semble très logique au début. Quelque part sur le bord de l'écran, un personnage ennemi a couru, et seule cette partie de CANVAS que nous voulons redessiner, économisant des ressources. C'était tellement crédible que j'ai dessiné une feuille A4 pendant la nuit à la recherche de la meilleure solution à ce problème. Et voici ce qui s'est passé.





On ne peut redessiner la partie CANVAS que si deux conditions sont remplies:





  1. L'arrière-plan du jeu doit être divisé en parties et non être une image complète. Jugez par vous-même: si l'arrière-plan est une image entière, il faudra encore le redessiner quelque part. Et comme il est intégral, il devra être complètement redessiné, ce qui signifie qu'il ne peut être question de redessiner une partie distincte de CANVAS. Plus loin dans l'article, vous comprendrez ce que je veux dire et pourquoi.





  2. La caméra doit être dans le jeu. Parce que si la caméra bouge, alors toute la scène est en mouvement, ce qui signifie que toute la scène doit être redessinée.





Déjà ces deux conditions ci-dessus coupent beaucoup de jeux et de mécaniques. Et nous n'avons même pas encore commencé à comprendre.





Nous avons donc décidé de l'arrière-plan du jeu. Comment le préparer, je vais vous le dire maintenant.





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







Eh bien, ceci conclut mon premier article. J'espère que vous n'êtes pas très fatigué. Si vous avez des opinions sur ce qui précède - écrivez dans les commentaires, nous en discuterons. Je le répète, la vérité naît dans la communication. Et il est nécessaire d'améliorer le moteur. Merci à tous et à bientôt dans de nouveaux articles.





L'auteur du texte et de tous les matériaux de l'article: Alexander Ptichkin, fondateur du projet éducatif Mult-uroki. Écrit spécifiquement pour habr.com. La copie ou toute autre utilisation du matériel sans l'autorisation écrite de l'auteur est interdite.







More articles:


All Articles