2011年12月31日土曜日

enchant.js物理シミュレーションプラグインPhySpriteを作ってみた

enchant.js用の物理シミュレーションプラグインを作りました。

物理シミュレーションにはBox2dWebを用いてます。

PhySprite.enchant.jsのダウンロード
ダウンロード
リファレンス


github



またBox2dWebのサイトから「Box2dWeb-○○○.js」の最新版をダウンロードして、「PhySprite.enchant.js」と同じフォルダに入れてください。



使い方


・プラグインの読み込み

index.htmlでenchant.jsの後に以下のファイルを読み込んでください
・Box2DWeb-○○○.js
・PhySprite.enchant.js
    
    <script type="text/javascript" src="enchant.js"></script>
    <!-- プラグイン読み込み -->
    <script type="text/javascript" src="Box2dWeb-2.1.a.3.js"></script>
    <script type="text/javascript" src="PhySprite.enchant.js"></script>


・ワールド生成
    
    //物理シミュレーションの世界を設定(y軸方向に重力 9.8[m/s^2])
    physicsWorld = new PhysicsWorld(0, 9.8);


・物理シミュレーション用Spriteの生成
    
    //ボール生成
    var phyBall = new PhyCircleSprite(8, DYNAMIC_SPRITE, 1.0, 0.5, 0.2, true);
    phyBall.image = game.assets["icon1.png"];
    phyBall.position = { x: 160, y: 10 };
    game.rootScene.addChild(phyBall); // シーンに追加

    //床生成
    var floor = new PhyBoxSprite(256, 16, STATIC_SPRITE, 1.0, 0.5, 0.3, true);
    floor.image = game.assets["floor.gif"];
    floor.position = { x: 160, y: 300 };
    game.rootScene.addChild(floor);


・毎フレームの処理
    
    //毎フレーム処理
    game.rootScene.addEventListener(enchant.Event.ENTER_FRAME, function (e) {
        physicsWorld.step(game.fps); //物理シミュレーション内の時間を進める
    });

PhyCircleSpriteは円、PhyBoxSpriteは四角の物理シミュレーションSpriteです
enchant.Spriteを継承しています

生成時の引数は
 
    PhyBoxSprite(width, height, staticOrDynamic, density, friction, restitution, isSleeping);
    PhyCircleSprite(radius, staticOrDynamic, density, friction, restitution, isSleeping);

引数の説明
width:Spriteの横幅.
height:Spriteの高さ.
radius:Spriteの半径.
staticOrDynamic:静止物体か動体か。STATIC_SPRITEの時、動かない物体。DYNAMIC_SPRITEの時、動く物体
density:Spriteの密度.
friction:Spriteの摩擦.
restitution:Spriteの反発.
isSleeping:Spriteが初めから物理演算を行うか.


では、サンプルプログラム1
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <title>PhySprite demo</title>
    <script type="text/javascript" src="enchant.js"></script>
    <!-- プラグイン読み込み -->
    <script type="text/javascript" src="Box2dWeb-2.1.a.3.js"></script>
    <script type="text/javascript" src="PhySprite.enchant.js"></script>
    <script type="text/javascript">
        enchant();
        window.onload = function () {
            var game = new Game(320, 320);
            game.fps = 24;
            game.preload("icon1.png", "floor.gif");

            game.rootScene.backgroundColor = "black";
            game.onload = function () {
                //物理シミュレーションの世界を設定(y軸方向に重力 9.8[m/s^2])
                var physicsWorld = new PhysicsWorld(0, 9.8);

                //ボール生成
                var phyBall = new PhyCircleSprite(8, DYNAMIC_SPRITE, 1.0, 0.5, 0.2, true);
                phyBall.image = game.assets["icon1.png"];
                phyBall.position = { x: 160, y: 10 };
                game.rootScene.addChild(phyBall); // シーンに追加

                //床生成
                var floor = new PhyBoxSprite(256, 16, STATIC_SPRITE, 1.0, 0.5, 0.3, true);
                floor.image = game.assets["floor.gif"];
                floor.position = { x: 160, y: 300 };
                game.rootScene.addChild(floor);

                game.rootScene.addEventListener(enchant.Event.ENTER_FRAME, function (e) {
                    physicsWorld.step(game.fps); //物理シミュレーション内の時間を進める
                });
            };
            game.start();   // ゲームスタート
        }
            
    </script>
    <style type="text/css">
        body
        {
            margin: 0px;
        }
    </style>
</head>
<body>
</body>
</html>


PhySprite.enchant.jsのサンプル2




リファレンス