Clever Geek Handbook

Apakah layak menggambar ulang dalam game hanya bagian dari CANVAS yang telah berubah? Atau lebih mudah menghapus semuanya dan mengecat lagi?

Halo. Nama saya Alexander Ptichkin. Selama 8 tahun sekarang saya telah mengajar pembuatan kartun dan animasi; Saya menghabiskan 3 tahun mengembangkan mesin game 2.5D HTML5 saya sendiri yang disebut PointJS. Selama 8 tahun rotasi di industri ini, saya telah mengumpulkan banyak materi yang ingin saya bagikan di sini dengan Anda di blog. Ini adalah posting pertama saya di Habr. Nilailah dengan ketat :) Saran Anda untuk meningkatkan artikel lebih lanjut tulis di komentar. Pergilah!





Saya sering ditanya mengapa saya menggambar ulang seluruh CANVAS di mesin game PointJS saya, dan tidak hanya memperbarui bagian di mana perubahan itu terjadi.





Dalam artikel ini, saya tidak berpura-pura menjadi kebenaran mutlak - seperti yang mereka katakan, berapa banyak orang yang memiliki begitu banyak pendapat. Saya hanya akan membagikan pemikiran, ide, dan perkembangan saya yang mendorong saya untuk bersandar pada penggambaran ulang CANVAS secara menyeluruh. Saya akan senang mendengar pendapat Anda tentang ini di komentar, untuk mengoptimalkan mesin berdasarkan itu. Memang dalam komunikasi lahir kebenaran.





Kedengarannya sangat logis pada awalnya. Di suatu tempat di tepi layar, karakter musuh berlari, dan hanya bagian CANVAS itu yang ingin kami gambar ulang, menghemat sumber daya. Sangat dapat dipercaya bahwa saya menggambar lembar A4 dalam semalam untuk mencari solusi terbaik untuk masalah ini. Dan inilah yang terjadi.





Kami dapat menggambar ulang bagian CANVAS hanya jika dua kondisi terpenuhi:





  1. Latar belakang game harus dipecah menjadi beberapa bagian dan bukan gambar utuh. Nilailah diri Anda sendiri: jika latar belakangnya adalah gambar utuh, maka itu masih harus digambar ulang di suatu tempat. Dan karena ini integral, maka itu harus digambar ulang sepenuhnya, yang berarti tidak ada pembicaraan tentang penggambaran ulang bagian terpisah dari CANVAS. Nanti di artikel ini Anda akan mengerti apa yang saya maksud dan mengapa.





  2. Kamera harus ada di dalam game. Karena jika kamera bergerak, maka seluruh pemandangan juga bergerak, yang berarti seluruh pemandangan perlu digambar ulang.





Kedua kondisi di atas sudah memotong banyak permainan dan mekanik. Dan kami bahkan belum mulai memahaminya.





Jadi, kami telah memutuskan latar belakang untuk game tersebut. Bagaimana cara mempersiapkannya, saya akan memberi tahu Anda sekarang.





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







Nah, sekian artikel pertama saya. Saya harap Anda tidak terlalu lelah. Jika Anda memiliki pendapat di atas - tulis di komentar, kami akan membahasnya. Saya ulangi, kebenaran lahir dalam komunikasi. Dan itu diperlukan untuk meningkatkan mesin. Terima kasih semua dan sampai jumpa di artikel baru.





Penulis teks dan semua materi artikel: Alexander Ptichkin, pendiri proyek pendidikan Mult-uroki. Ditulis khusus untuk habr.com. Dilarang menyalin atau menggunakan materi lainnya tanpa izin tertulis dari penulis.







More articles:


All Articles