センサー 回転軸

センサーを使って、表示された矢印を三方向の傾きによって動かします。

今回の課題は以下です。

// 端末の回転軸を取得しよう
    // 1.デバイスの向きを変えても起動時の方角を指すよにしよう
    // 2.デバイスを縦に傾けた時、矢印が上下に移動するようにしよう
    // 3.デバイスを横に傾けた時、矢印が左右に移動するようにしよう

e.alpha: 机に置いて、水平のまま回転させたときの角度(0〜360)

e.beta:縦方向(首を上に向ける、天井を見る)方向に傾けたときの角度(-180〜180)

e.gamma:横方向(左右に傾ける方向)に傾けたときの角度(-90〜90)

(先生の記述とはbetaとgammaが逆のようです。端末によって異なるそうです)

それぞれ、角度が表示されるように、ラベルを用意します。

 //ラベルを用意する
    var labelA = new Label();
    labelA.x = 10;
    labelA.y = 10;
    labelA.text = "*";
    scene.addChild(labelA);
 
    var labelB = new Label();
    labelB.x = 10;
    labelB.y = 40;
    labelB.text = "*";
    scene.addChild(labelB);
 
    var labelC = new Label();
    labelC.x = 10;
    labelC.y = 80;
    labelC.text = "*";
    scene.addChild(labelC);

回転軸を取得するイベントをつけて、それぞれの方向の値(horizontal, vartical, rotation)をe.beta, egamma, e.alphaとすれば、矢印がそれぞれの傾きに反応して、課題のとおりに動きました。

// 端末の回転軸を取得しよう
    window.addEventListener("deviceorientation", function(e){
        labelA.text = e.alpha;// 向き(角度)
        labelB.text = e.beta; // 縦の傾き(ipadでは横移動)
        labelC.text = e.gamma;// 横の傾き(ipadでは縦移動)

        // 水平方向の位置
        var horizontal = e.beta;// 横移動
        arrow.centerY = scene.height / 2 + horizontal;
                        // horizontal(e.beta)の分だけ横方向に移動する
        // 垂直方向の位置
        var vertical = e.gamma;// 縦移動
        arrow.centerX = scene.width / 2 + vertical;
                        // vartical(e.gammma)の分だけ縦方向に移動する
        // 角度(矢印の向き)
        var rotation = e.alpha;// 向きだからここにe.alpha
        arrow.rotation = rotation;// rotation(e.alpha)の分だけ回転する
    });

ソースコード

/*
    // 端末の回転軸を取得しよう
    // 1.デバイスの向きを変えても起動時の方角を指すよにしよう
    // 2.デバイスを縦に傾けた時、矢印が上下に移動するようにしよう
    // 3.デバイスを横に傾けた時、矢印が左右に移動するようにしよう

    イベントターゲット: window
    イベント: deviceorientation
    イベント情報:
        e.alpha : デバイスの向き 角度
        e.beta  : デバイスの縦の傾き (水平方向)
        e.gamma : デバイスの横の傾き (垂直方向)

    
    ※端末によっては向きが異なる場合があります。

*/

var arrowImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAgCAYAAAAbifjMAAAAfklEQVRIS+2TwQ7AIAhD8f8/ekY3DHYtO3gcuy0tL1CwWf5dj9yUTQpm5sVeS70KgMUSwgCqmEIQEIuHFjNAbQIjgBkwxJfHAZQOHfgImze2iR2Nf7XGBcE5cd3ZHUzNAV/rlHp2SNkIq9MC7JfIXuzRc64t3JFWiJXBX+6gA+0eLB5r+K8XAAAAAElFTkSuQmCC";

var assets = [
    arrowImage
];

function gameStart(){// ゲーム画面
    scene = gameManager.createGameScene();
    core.replaceScene(scene); core.resume();

    //==========
    // ここから
    //==========

    var arrow = new Sprite(16, 32);
    arrow.image = core.assets[arrowImage];
    arrow.centerX = scene.width / 2;
    arrow.centerY = scene.height / 2;
    scene.addChild(arrow);
    
    //ラベルを用意する
    var labelA = new Label();
    labelA.x = 10;
    labelA.y = 10;
    labelA.text = "*";
    scene.addChild(labelA);

    var labelB = new Label();
    labelB.x = 10;
    labelB.y = 40;
    labelB.text = "*";
    scene.addChild(labelB);

    var labelC = new Label();
    labelC.x = 10;
    labelC.y = 80;
    labelC.text = "*";
    scene.addChild(labelC);
     

    // 端末の回転軸を取得しよう
    window.addEventListener("deviceorientation", function(e){
        //alpha
        labelA.text = e.alpha;// 向き(角度)
        labelB.text = e.beta; // 縦の傾き(ipadでは横移動)
        labelC.text = e.gamma;// 横の傾き(ipadでは縦移動)

        // 水平方向の位置
        var horizontal = e.beta;// 横移動
        arrow.centerY = scene.height / 2 + horizontal;
        // 垂直方向の位置
        var vertical = e.gamma;// 縦移動
        arrow.centerX = scene.width / 2 + vertical;
        // 角度(矢印の向き)
        var rotation = e.alpha;// 向きだからここにe.alpha
        arrow.rotation = rotation;
    });

    //==========
    // ここまで
    //==========
}

function getRandom(start, end) {
    return start + Math.floor( Math.random() * (end - start + 1));
}

function titleStart(){// タイトル画面
    var scene = gameManager.createTitleScene();
    core.replaceScene(scene); core.pause();
    scene.on(enchant.Event.TOUCH_START, function(){gameStart();});
}

//==========
// EnchantJS
enchant();
var gameManager;
var core;
var scene;
window.onload = function(){
    gameManager = new common.GameManager();
    core = gameManager.createCore(320, 480);
    assets.push("images/title.png");
    core.preload(assets);
    core.onload = function(){titleStart();};
    core.start();
}

コメントを残す

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