Clever Geek Handbook

Is it worth redrawing in games only the part of CANVAS that has changed? Or is it easier to erase everything and paint again?

Hello. My name is Alexander Ptichkin. For 8 years now I have been teaching the creation of cartoons and animation; 3 years of which I devoted to the development of my own 2.5D HTML5 game engine called PointJS. For 8 years of rotation in this industry, I have accumulated a lot of material that I want to share here with you in the blog. This is my first post on Habr. Judge strictly :) Your suggestions for improving further articles write in the comments. Go!





I am often asked why I redraw the entire CANVAS in my PointJS game engine, and not update only the part where the changes took place.





In this article, I do not pretend to be an absolute truth - as they say, how many people have so many opinions. I will only share my thoughts, ideas and developments that prompted me to lean towards a complete redrawing of CANVAS. I would be glad to hear your opinions on this in the comments, in order to optimize the engine based on them. Indeed, in communication, truth is born.





Sounds very logical at first. Somewhere on the edge of the screen an enemy character ran, and only that part of CANVAS we want to redraw, saving resources. It was so believable that I drew A4 sheet overnight looking for the best solution to this problem. And here's what happened.





We can redraw the CANVAS part only if two conditions are met:





  1. The game background should be split into parts and not be a whole image. Judge for yourself: if the background is a whole image, then it will still have to be redrawn somewhere. And since it is integral, then it will have to be redrawn completely, which means that there can be no talk of any redrawing of a separate part of CANVAS. Later in the article you will understand what I mean and why.





  2. The camera must be in the game. Because if the camera is moving, then the whole scene is moving, which means that the whole of it needs to be redrawn.





Already these two conditions above cut off a lot of games and mechanics. And we haven't even begun to figure it out yet.





So, we have decided on the background for the game. How to prepare it, I'll tell you now.





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







Well, this concludes my first article. I hope you are not very tired. If you have any opinions on the above - write in the comments, we will discuss. I repeat, the truth is born in communication. And it is needed to improve the engine. Thank you all and see you in new articles.





The author of the text and all materials of the article: Alexander Ptichkin, founder of the educational project Mult-uroki. Written specifically for habr.com. Copying or other use of the material without the written permission of the author is prohibited.







More articles:


All Articles