HTML 5ゲーム開発の将Easel.jsとBox 2 dはキャンバスで結合されています



HTML 5ゲームLuxahoyを開発する際に遭遇する大きな困難の一つは、Easelをどのようにするかです.jsとBox 2 dの2つのフレームワークが結合されています.このガイドでは、box 2 dの寸法をeaselのx、y座標、および回転パラメータに変換する方法を学習するための基本的なactorオブジェクトについて説明します.
このガイドを学ぶには、box 2 dとeaselの基本的な知識を持って、それらがどのように働いているかを知る必要があります.どのようにbox 2 dを勉強したことがないのか、box 2 d orientation and tutorialsを読んでください.easelを学ぶにはdocumentationを参照して、stageにオブジェクトを追加する方法を学び、表示される階層全体を理解します.
今から始めましょう.ピンクの「鳥の雨」という簡単な例を作成します.(注:この例は、新しいバージョンのブラウザでのみ実行できます)
 
ブラウザでのプレゼンテーション–ソースコードのダウンロード
読者がbox 2 dとeaselの基本的な知識を持っていると仮定するので,コードを記述する手順をスキップし,2つのフレームワークがどのように結合されているかを直接紹介する.よく検討したい場合は、この例のzipファイルをダウンロードしたり、このページで関連コードを直接表示したりすることができます.
Easelでjsでは、stageにオブジェクトを追加するのは簡単です.次にticker関数で鳥(オブジェクト)を画面に追加する方法を見てみましょう.(注意:次のコードはdemo.jsから簡単に抜粋されたものです.これらのコードを実行したい場合はzip.)
var tick = function(dt, paused) {
	birdDelayCounter++;
	if(birdDelayCounter % 10 === 0) {  // delay so it doesn't spawn a bird on every frame
		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;   // important to set origin point to center of your bitmap
	birdBMP.regY = 25;
	stage.addChild(birdBMP);
}

これはとても似ているように見えます.これらのコードの機能は、ステージに鳥(ビットマップオブジェクト)を追加し、鳥が現れる水平位置はランダムで、垂直位置はキャンバスの先端にあります.ビットマップオブジェクトは柔軟性が高く、他のビットマップの真ん中に挿入したり、初期位置を設定したり、任意に傾けたりすることができます.
easelオブジェクトをbox 2 dオブジェクトに変換するにはregXとregY(初期位置)が重要です.なぜなら、box 2 dオブジェクトの開始座標は中心にあり、easelの開始座標は左上にあるからです.
ステージに画像を追加できる以上、box 2 dの魅力を見てみましょう.
 box2d.createBird(birdBMP);
var createBird = function(skin) {
	var birdFixture = new b2FixtureDef;
	birdFixture.density = 1;
	birdFixture.restitution = 0.6;
	birdFixture.shape = new b2CircleShape(24 / SCALE);   // half of bird.png width divided by world scale for right size
	var birdBodyDef = new b2BodyDef;
	birdBodyDef.type = b2Body.b2_dynamicBody;
	birdBodyDef.position.x = skin.x / SCALE;  // divide skin x and y by box2d scale to get right position
	birdBodyDef.position.y = skin.y / SCALE;
	var bird = world.CreateBody(birdBodyDef);
	bird.CreateFixture(birdFixture);
	bodies.push(bird);
}

以上のコードは、鳥ビットマップオブジェクトと同じサイズと位置を持つ円形box 2 d bodyを作成します.しかし残念ながら、鳥の皮膚はbox 2 dオブジェクトにマッピングされていません.デバッグ状態でなければbox 2 dの円は見えず、鳥も静止します.このように、私たちはどのようにbox 2 d bodyの位置の変化に伴って皮膚を変化させることができますか?
Actors! box 2 dの可視化例では、Actorsは欠かせない.ゲーム中にループを行う場合やbox 2 dオブジェクトのメートル位置をピクセル位置に変換する場合は、基本的にActorsが実行されます.次に、Actorを作成します.
var actor = new actorObject(bird, skin);
bird.SetUserData(actor);  // set actor as userdata of body so we can get at it later if we need to
   
var actorObject = function(body, skin) {
	this.body = body;
	this.skin = skin;
	this.update = function() { // translate box2d positions to pixels
		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);
}         actor     ,  ,           。       actor         。
// within physics loop before world.step
for(var i=0, l=actors.length; i<l; i++) {
     actors<i>.update();
}

box 2 d bodyが物理シミュレーションで発生したすべての変化について、ビットマップ皮膚がマッピングされます.
ある点のbodyを皮膚と一緒に除去したい場合は、そのbodyを「除去される」配列に加えることができます.worldを実行するたびにStepの前に、これらのbodiesは除去されなければなりません.
// before 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>);
}
// after 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         、        actors  ,           。                     。

サンプルの表示–ソースコードのダウンロード
テキストリンク:http://www.luxanimals.com/blog/article/combining_easel_box2d?utm_source=html5weekly&utm_medium=email
作者:Son Tran,発表于2012年4月22日
林建光
あなたも好きかもしれません.
ゲームでHTML 5 Canvasの潜在能力を発揮
HTML 5 CanvasによるインタラクティブなBubble Chartの作成
HTML 5—背後にある現実と炒め物(上)
HTML 5に関する11の納得しがたい事実
見つからない