このエントリーをはてなブックマークに追加
Facebook にシェア
[`evernote` not found]
LINEで送る

JavaScriptの物理演算といえばBox2dというのが有名ですが、それをenchant.jsから簡単に操作できるプラグインが
作成されていたので紹介します。

【ダウンロード先と説明】
http://kassymemo.blogspot.com/2011/12/enchantjsphysprite.html

上記のサイトからプラグインと使い方の簡単な説明があります。
では早速使ってみましょう。index.htmlでPhySprite.enchant.jsとBox2dWeb-2.1.a.3.jsを読み込みgame.jsに以下のように記入します。

enchant();
window.onload = function() {
	game = new Game(320, 320);
	game.onload = function() {
	
	//物理シミュレーションの世界を設定(y軸方向に重力 9.8[m/s^2])
    World = new PhysicsWorld(0, 9.8);
    
    //赤ブロック作成
    var redBlock = new PhyBoxSprite(16,16, DYNAMIC_SPRITE, 1.0, 0.5, 0.2, true);
    redBlock.position = { x: 160, y: 10 };
    redBlock.backgroundColor = "#ff0000";
    game.rootScene.addChild(redBlock); // シーンに追加
      
    //青ブロック生成
    var blueBlock = new PhyBoxSprite(32,16, DYNAMIC_SPRITE, 1.0, 0.5, 0.5, true);
    blueBlock.position = { x: 130, y: 10 };
    blueBlock.backgroundColor = "#0000ff";
    game.rootScene.addChild(blueBlock); // シーンに追加
    

    
    //床生成
    var floor = new PhyBoxSprite(256, 16, STATIC_SPRITE, 1.0, 0.5, 0.3, true);
    floor.position = { x: 160, y: 300 };
    floor.backgroundColor = "#00ff00";
    floor.flag = 1;
    game.rootScene.addChild(floor);
    
    //毎フレーム処理
    game.rootScene.addEventListener("enterframe", function (e) {
        World.step(game.fps); //物理シミュレーション内の時間を進める
    });
	
	}
game.start(); 
}

赤と青のブロックが落下していき、緑のブロックにぶつかって跳ねると思います。
この際青のブロックの方が反発力を高めに設定しているので高く跳ねます。

【ブロックにジャンプさせてみる】
では物理演算っぽくブロックを動かしてみましょう。赤ブロックを生成後に、以下のコードを追加してください。

    //タッチしたときに上方向に運動する。
    redBlock.addEventListener("touchstart", function (e) {
    	this.applyImpulse({x:0,y:-2});
    });

これで赤ブロックをクリックした際に赤ブロックが上方向に飛び跳ねると思います。
ＸとＹの値を変えることでいろんな方向に飛び跳ねます。

【ブロックを持ち上げる】
青のブロックをドラッグで移動させてみましょう。この際注意が必要なのは、物理演算を一時的に無効にしておかないと
移動中も物理演算が行われるのでドラッグした先から下に落ちてしまいます。
以下のコードを青ブロック生成後に貼り付けてください。

    //タッチしたときの処理
    blueBlock.addEventListener("touchstart", function (e) {
		this.setAwake(false);				//物理演算をストップ
    });
    
    //ドラッグ中の処理
     blueBlock.addEventListener("touchmove", function (e) {
        this.position = {x:e.x,y:e.y};		//現在のマウス座標をスプライトに通知
    });
    
    //タッチを離したときの処理 
    blueBlock.addEventListener("touchend", function (e) {
        this.setAwake(true);				//物理演算を開始
    });

これで青ブロックをクリックした状態でマウスを動かすとそれに併せてブロックも動きます。
高いところに移動して離すとそのまま落下していきます。
このように簡単に物理演算が処理できるのは楽しいですね。何か簡単なゲームが作れそうです。