日: 2018年2月16日

センサー　回転軸

cf307 / / 覚え, 辞書

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

今回の課題は以下です。

// 端末の回転軸を取得しよう
    // 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();
}