Clever Geek Handbook

Lohnt es sich, in Spielen nur den Teil von CANVAS neu zu zeichnen, der sich geändert hat? Oder ist es einfacher, alles zu löschen und wieder zu malen?

Hallo. Ich heiße Alexander Ptichkin. Seit 8 Jahren unterrichte ich das Erstellen von Cartoons und Animationen. Ich habe 3 Jahre damit verbracht, meine eigene 2.5D HTML5-Spiel-Engine namens PointJS zu entwickeln. Für 8 Jahre Rotation in dieser Branche habe ich viel Material gesammelt, das ich hier im Blog mit Ihnen teilen möchte. Dies ist mein erster Beitrag auf Habr. Richten Sie streng :) Ihre Vorschläge zur Verbesserung weiterer Artikel schreiben Sie in den Kommentaren. Gehen!





Ich werde oft gefragt, warum ich das gesamte CANVAS in meiner PointJS-Spiel-Engine neu zeichne und nicht nur den Teil aktualisiere, in dem die Änderungen vorgenommen wurden.





In diesem Artikel gebe ich nicht vor, absolute Wahrheit zu sein - wie sie sagen, wie viele Menschen so viele Meinungen haben. Ich werde nur meine Gedanken, Ideen und Entwicklungen teilen, die mich dazu veranlasst haben, mich zu einer vollständigen Neugestaltung von CANVAS zu neigen. Ich würde mich freuen, Ihre Meinung dazu in den Kommentaren zu hören, um den darauf basierenden Motor zu optimieren. In der Kommunikation wird in der Tat die Wahrheit geboren.





Klingt zunächst sehr logisch. Irgendwo am Rand des Bildschirms lief ein feindlicher Charakter und nur der Teil von CANVAS, den wir neu zeichnen möchten, um Ressourcen zu sparen. Es war so glaubwürdig, dass ich über Nacht ein A4-Blatt gezeichnet habe, um die beste Lösung für dieses Problem zu finden. Und hier ist was passiert.





Wir können den CANVAS-Teil nur neu zeichnen, wenn zwei Bedingungen erfüllt sind:





  1. Der Spielhintergrund muss in Teile geteilt werden und darf kein ganzes Bild sein. Überzeugen Sie sich selbst: Wenn der Hintergrund ein ganzes Bild ist, muss er noch irgendwo neu gezeichnet werden. Und da es ganzheitlich ist, muss es komplett neu gezeichnet werden, was bedeutet, dass von einem erneuten Zeichnen eines separaten Teils von CANVAS keine Rede sein kann. Später in diesem Artikel werden Sie verstehen, was ich meine und warum.





  2. Die Kamera muss im Spiel sein. Denn wenn sich die Kamera bewegt, bewegt sich die gesamte Szene, was bedeutet, dass die gesamte Szene neu gezeichnet werden muss.





Bereits diese beiden oben genannten Bedingungen haben viele Spiele und Mechaniken abgeschnitten. Und wir haben noch nicht einmal begonnen, es herauszufinden.





Also haben wir uns für den Hintergrund des Spiels entschieden. Wie man es vorbereitet, sage ich dir jetzt.





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







Nun, damit ist mein erster Artikel abgeschlossen. Ich hoffe du bist nicht sehr müde. Wenn Sie eine Meinung zu dem oben genannten haben - schreiben Sie in die Kommentare, wir werden diskutieren. Ich wiederhole, die Wahrheit wird in der Kommunikation geboren. Und es wird benötigt, um den Motor zu verbessern. Vielen Dank an alle und wir sehen uns in neuen Artikeln.





Der Autor des Textes und aller Materialien des Artikels: Alexander Ptichkin, Gründer des Bildungsprojekts Mult-uroki. Speziell für habr.com geschrieben. Das Kopieren oder sonstige Verwenden des Materials ohne schriftliche Genehmigung des Autors ist untersagt.







More articles:


All Articles