enchant.js ゲーム制作 Tips – マウスクリックやタッチでプレイヤーを移動させてみよう!!

※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

このエントリーをはてなブックマークに追加
Pocket

前回書いた『enchant.js 用プラグイン DummySprite を作ってみた.』に引き続き enchant.js についてのエントリーです.

今回はマウスクリック, タッチによるプレイヤー移動についてのサンプルを制作しました. キーボードやマウスクリック, タッチによる挙動はゲームを作る際の根幹となる部分なのでぜひ参考にしてみてください.

Sample And Data

今回制作したサンプルです.

マウスクリック or タッチすると DummySprite が動くという点は同じですが, 少しずつ動きが違います. 詳しくは下の Tips へ.

Download はこちらからできます.

Code

今回のテストプログラム, Sample 02 全体のコードです.

75 行程度ですが, このサンプルに敵を避けるなどの処理をちょっと加えるだけでゲームっぽくなったりしますね. 

<!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>Sample 02 - マウスクリック or タッチした位置に一定の速度で近づけてみよう!!</title>
        <style>
            * {
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script charset="UTF-8" src="enchant.js"></script>
        <script charset="UTF-8" src="dummysprite.enchant.js"></script>
        <script charset="UTF-8">
            // 使いやすくするおまじない
            enchant();
            // 初期化時処理
            window.onload = function() {
                var game = new Game(320, 320);
                var isTouch = false;    // タッチフラグ(タッチ中のみ true にする)
                var touchX  = null;     // タッチX座標
                var touchY  = null;     // タッチY座標
                var speed   = 8;        // 移動スピード
                
                game.onload = function() {
                    this.rootScene.backgroundColor = "black";
                    // ダミースプライト生成
                    var dummySprite = new DummySprite(20, 20, "red");
                    dummySprite.moveTo(160-10, 160-10);
                    this.rootScene.addChild(dummySprite);
                    
                    // タッチイベントを登録
                    this.rootScene.addEventListener("touchstart", function(e) { isTouch = true; }); // タッチ開始
                    this.rootScene.addEventListener("touchend", function(e) { isTouch = false; });  // タッチ終了
                    this.rootScene.addEventListener("touchmove", function(e) {
                        // タッチ位置をセット
                        touchX = e.localX;
                        touchY = e.localY;
                    });
                    
                    // エンターフレーム処理を登録(毎フレームよばれるやつ)
                    this.rootScene.addEventListener("enterframe", function(){
                        // タッチ中は移動させる
                        if (isTouch === true) {
                            // ダミースプライトからタッチした位置へのベクトル
                            var vx = touchX - dummySprite.x;
                            var vy = touchY - dummySprite.y;
                            // ベクトルの長さ(ダミースプライトからタッチした位置までの距離)の２乗を求める
                            var lengthSquared = (vx*vx + vy*vy);
                            // 近すぎる場合は無視する
                            if (lengthSquared > speed*speed) {
                                // 純粋な長さを求める
                                var len = Math.sqrt(lengthSquared);
                                // 正規化(ベクトルの長さを 1 にする)
                                vx /= len;
                                vy /= len;
                                // ベクトルを1/10した値分タッチした位置に近づく
                                dummySprite.x += vx*speed;
                                dummySprite.y += vy*speed;
                            }
                        }
                    });
                };
                game.start();
            };
        </script>
    </head>
    <body>
        <h1>Sample 02 - マウスクリック or タッチした位置に一定の速度で近づけてみよう!!</h1>
    </body>
</html>

Tips

Sample 00 – マウスクリック or タッチした位置に移動させてみよう!!

enchant.js はマウスイベントとタッチイベントの差異を吸収してくれているので同じ処理でマウス, タッチの両方に対応することができます.

タッチした位置はタッチ系イベント(touchstart, touchmove, touchend)の第一引数のプロパティlocalX, localY で取得できます. 

this.rootScene.addEventListener("touchstart", function(e){
    // タッチした位置を取得
    var x = e.localX;
    var y = e.localY;
});

Sample 00 では単純にタッチした位置を Sprite の x, y座標にセットしているだけです.

Sample 01 – マウスクリック or タッチした位置に徐々に近づかせてみよう!!

Sample 01 では現在位置からタッチした位置へのベクトルを求めて, そのベクトルを一定値で割った値を現在位置に足すことで, 徐々にタッチした位置に近づく処理を行なっております. 

// ダミースプライトからタッチした位置へのベクトル
var vx = touchX - dummySprite.x;
var vy = touchY - dummySprite.y;
// ベクトルを1/10した値分タッチした位置に近づく
dummySprite.x += vx*0.1;
dummySprite.y += vy*0.1;

画面遷移時のUIのアニメーションなんかによく使わる処理です.

Sample 02 – マウスクリック or タッチした位置に一定の速度で近づけてみよう!!

Sample 01 と似ていますが, Sample 02 はもうちょっと実用性があります.

やっていることは, (Sample 01 と同じく)タッチした位置へのベクトルを求めてその長さを一旦正規化(長さを1に)して, 最後に speed を掛けた値を現在位置に足しています. 

// ダミースプライトからタッチした位置へのベクトル
var vx = touchX - dummySprite.x;
var vy = touchY - dummySprite.y;
// ベクトルの長さ(ダミースプライトからタッチした位置までの距離)の２乗を求める
var lengthSquared = (vx*vx + vy*vy);
// 近すぎる場合は無視する
if (lengthSquared > speed*speed) {
    // 純粋な長さを求める
    var len = Math.sqrt(lengthSquared);
    // 正規化(ベクトルの長さを 1 にする)
    vx /= len;
    vy /= len;
    // ベクトルを1/10した値分タッチした位置に近づく
    dummySprite.x += vx*speed;
    dummySprite.y += vy*speed;
}

注意点は, プレイヤーからタッチした位置までの長さが speed 以下の場合は移動させないようにしている点です. このチェックを行わないと近すぎるときにガタガタに動いてしまいます.

speed の値を変えるとプレイヤーの動く速度が変わるのが分かるかと思います. この方法であればキーボードと同じような動作を実装することができるので, キーボードでもマウス, タッチでも同じ難易度のゲームを作ることができます.

シューティングゲームのプレイヤー移動などにお使い下さい.

次回はenchant.js でキーボードによるプレイヤー移動の実装について書きます.

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT