Clever Geek Handbook

変更されたCANVASの一部のみをゲームで再描画する価値はありますか？それとも、すべてを消去して再度ペイントする方が簡単ですか？

こんにちは。私の名前はアレクサンダー・プティキンです。私は8年間、漫画とアニメーションの作成を教えてきました。私は3年間、PointJSと呼ばれる独自の2.5DHTML5ゲームエンジンを開発しました。この業界での8年間のローテーションで、ブログで共有したい多くの資料を蓄積してきました。これはHabrに関する私の最初の投稿です。厳密に判断してください:)さらなる記事を改善するためのあなたの提案はコメントに書いてください。行く！





変更が行われた部分だけを更新するのではなく、PointJSゲームエンジンでCANVAS全体を再描画する理由をよく尋ねられます。





この記事では、私は絶対的な真実であるふりをしません-彼らが言うように、何人の人々が非常に多くの意見を持っていますか。CANVASの完全な再描画に傾倒するきっかけとなった私の考え、アイデア、開発のみを共有します。それらに基づいてエンジンを最適化するために、コメントでこれについてのあなたの意見を聞いてうれしいです。確かに、コミュニケーションでは、真実が生まれます。





最初は非常に論理的に聞こえます。画面の端のどこかで敵のキャラクターが走り、CANVASのその部分だけを再描画して、リソースを節約します。私はこの問題の最善の解決策を探して一晩A4シートを描いたのはとても信じられました。そして、これが起こったことです。





次の2つの条件が満たされた場合にのみ、CANVASパーツを再描画できます。





  1. ゲームの背景は、画像全体ではなく、部分に分割する必要があります。自分で判断してください。背景が画像全体である場合でも、どこかに再描画する必要があります。そして、それは不可欠であるため、完全に再描画する必要があります。つまり、CANVASの別の部分を再描画するという話はありません。記事の後半で、私が何を意味し、その理由を理解するでしょう。





  2. カメラはゲーム内にある必要があります。カメラが動いている場合は、シーン全体が動いているため、シーン全体を再描画する必要があります。





すでに上記の2つの条件により、多くのゲームとメカニズムが遮断されています。そして、私たちはまだそれを理解し始めていません。





そこで、ゲームの背景を決めました。作り方、今からお話しします。





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







さて、これで私の最初の記事は終わりです。あまり疲れていないことを願っています。上記についてご意見がございましたら、コメント欄にご記入の上、ご相談させていただきます。繰り返しますが、真実はコミュニケーションから生まれます。そして、エンジンを改善する必要があります。みなさん、ありがとうございました。新しい記事でお会いしましょう。





テキストと記事のすべての資料の著者：教育プロジェクトMult-urokiの創設者であるAlexanderPtichkin。habr.comのために特別に書かれました。著者の書面による許可なしに資料を複製またはその他の方法で使用することは禁じられています。







More articles:


All Articles