🔠 🧒🏿 ⚫️ CanvasでのEasel.jsとBox2dの組み合わせ ⛱️ 💭 🧕

ゲームを作成する上で最も難しい面の1つは、 Easel.jsとBox2dWebの 2つの非常にクールなライブラリを組み合わせることです。この記事では、box2dサイズをX、Yシステムに変換できるように、ゲームのメインゲームオブジェクトを作成する基本と、ディスプレイ上のオブジェクトの回転のパラメーターをイーゼルで検討します。

この記事を始める前に、box2dとeaselがどのように機能するかについての基本的な知識があることを前提としています。 box2dの世界の仕事に慣れていない場合は、Seth Ladのbox2d 資料をお読みください。イーゼルに慣れていない場合は、ドキュメントに精通して、オブジェクトをシーンに追加し、表示階層全体を学習する方法を理解する必要があります（ヒント：Flashプログラミングではいくつかの共通点があります）。

さて、詳細を掘り下げましょう。ピンク色の鳥の落下の簡単なデモを作成します。

ブラウザで表示 - ソースをダウンロード

EaselとBox2dの基本をすでに理解しているので、インストールコードをスキップして、2つのライブラリを結合するプロセスを掘り下げます。情報を思い出したい場合は、デモzipアーカイブをダウンロードするか、デモページでソースコードを表示してください。

Easelでは、特定の位置のシーンにオブジェクトを追加するのは非常に簡単です。これは、周期関数に基づいて鳥を画面に追加する方法です。

以下のすべてのコード挿入は、demo.jsからの機能しない抜粋であることに注意してください。動作するコードを取得するには、 zipアーカイブをダウンロードする必要があります。

var tick = function(dt, paused) { birdDelayCounter++; if(birdDelayCounter % 10 === 0) { // ,       birdDelayCounter = 0; birds.spawn(); } }

 var spawn = function() { var birdBMP = new Bitmap("images/bird.png"); birdBMP.x = Math.round(Math.random()*500); birdBMP.y = -30; birdBMP.regX = 25; //        birdBMP.regY = 25; stage.addChild(birdBMP); }

これは十分に馴染みがあるようです。このコードを使用すると、キャンバスの上部のランダムな位置Xで鳥がシーンに追加されます。オブジェクト自体は非常に汎用性があります。その位置をコピーしたり、移動したりできます。ただし、物理法則をオブジェクトに適用する場合は、box2dに送信する必要があります。

regXおよびregY（開始点）は、イーゼルオブジェクトをbox2dにスナップするときに重要です。これは、イーゼルオブジェクトの左上の位置とは対照的に、box2dオブジェクトの初期位置が中央にあるという事実によるものです。

オブジェクトはすでにシーンに追加されているので、さらに印象的なアクションのためにそれらをbox2dに送信します。

 box2d.createBird(birdBMP);

 var createBird = function(skin) { var birdFixture = new b2FixtureDef; birdFixture.density = 1; birdFixture.restitution = 0.6; birdFixture.shape = new b2CircleShape(24 / SCALE); //  bird.png       var birdBodyDef = new b2BodyDef; birdBodyDef.type = b2Body.b2_dynamicBody; birdBodyDef.position.x = skin.x / SCALE; //  skin x  y  box2d      birdBodyDef.position.y = skin.y / SCALE; var bird = world.CreateBody(birdBodyDef); bird.CreateFixture(birdFixture); bodies.push(bird); }

上記のコードを使用して、ビットマップと同じ位置に同じサイズの丸いbox2dボディが作成されます。残念ながら、鳥の画像はbox2dオブジェクトに添付されていません。デバッグキャンバスがないと、丸いbox2dオブジェクトを見ることができず、鳥は動かないままになります。 box2dの体の位置に画像を追従させるにはどうすればよいですか？

...俳優！アクターは、視覚的なbox2dデモの主要部分です。基本的に、ゲームサイクル中に移動を強制され、box2dボディのメトリック位置をピクセル座標に変換します。作成しましょう。

 var actor = new actorObject(bird, skin); bird.SetUserData(actor); //  actor     ,       ,

 var actorObject = function(body, skin) { this.body = body; this.skin = skin; this.update = function() { //  box2d    this.skin.rotation = this.body.GetAngle() * (180 / Math.PI); this.skin.x = this.body.GetWorldCenter().x * SCALE; this.skin.y = this.body.GetWorldCenter().y * SCALE; } actors.push(this); }

これはアクターオブジェクトの基本的な例です。必要に応じて、ほぼすべてのインジケーター（識別子など）を使用して展開できます。 box2dオブジェクトの参加者を特定しました。物理サイクル中に更新する必要があります。

 //  world.step for(var i=0, l=actors.length; i<l; i++) { actors<i>.update(); }

画像には、物理プロセスのシミュレーションの一部として、box2dボディが行うすべてが表示されます。

特定のポイントでボディとその画像を削除する場合は、ボディを配列に追加できます。各ステップの前にボディを削除する必要があります。

 //  world.step for(var i=0, l=bodiesToRemove.length; i<l; i++) { removeActor(bodiesToRemove<i>.GetUserData()); // get the actor object in the user data of the body and send to removeActor function bodiesToRemove<i>.SetUserData(null); world.DestroyBody(bodiesToRemove<i>); } //  world.step if(bodies.length > 30) { bodiesToRemove.push(bodies[0]); bodies.splice(0,1); }

 var removeActor = function(actor) { stage.removeChild(actor.skin); actors.splice(actors.indexOf(actor),1); }

最後にやった！衝突、帯域外検出などでbox2dフィルターがどのように機能するかを理解すれば、多くの重要な手順を実行できます。将来、この資料に精通することを願っています。

ブラウザで表示 - ソースをダウンロード

著者ジャスティン・シュレーダー

www.luxanimals.com/blog/article/combining_easel_box2d

CanvasでのEasel.jsとBox2dの組み合わせ

More articles: