DeviceOrientationEvent API の活用

DeviceOrientationEvent API の活用
ゲームの操作感
端末の傾きを検知して
ゲーム操作に利用する
より直感的なコントローラデバイスとして活用できる
前にみたサンプルでは、たまを転がしたり
バランスをとるゲームに使われていた
ジェスチャ認識
端末の加速度を検知して信号処理すれば
特定のジェスチャ判定につなげられる
端末をシェイクすると入力フォームをクリアするなど
マップ表示の回転制御
端末の向きを検知すれば
画面に表示する地図の向きをユーザ目線の
方向に揃えられる
主に、ナビアプリに使われる

DeviceOrientation Event

DeviceOrientation Event
これは
デバイスの物理的な向きと傾きに関する情報を提供する
DOMイベント
使える機能は
デバイスの物理的向きに関する情報を提供するDOMイベント
デバイスの加速度に関する情報を提供するDOMイベント
コンパスのキャリブレーションが必要であることを知らせる
DOMイベント
そして、以下がデバイスの向きがどのように表現されているかのメモ
地球座標系
物理的な方角は
XYZの3軸で表現する
西から東に向かうのがX軸
南から北に向かうのがY軸
下から上に向かうのがZ軸になる
デバイスの向きは関係ない
デバイス座標系
デバイスにひもづけられる座標系でxyz の3軸で表現
スクリーンの左から右がX軸
スクリーンの下部から上部がY軸
スクリーンの背面から表面がZ軸になる
デバイス座標系は
デバイスの上下左右に限定されるので
デバイスを傾けると
デバイスと同じ向き、角度だけ傾く
デバイスの回転座標系
デバイス座標系(xyz) と
地球座標系(XYZ)が
それぞれ同じ向きを向いている状態を
基準状態として
この状態からの誤差を3つの角度で表す
alpha
デバイスが基準状態から
z軸を中心として
x軸からy軸の方向へ回転させた角度
手のひらでくるくるまわすのがalpha
beta
デバイスを基準状態から
x軸を中心として
y軸からz軸方向へ回転させた角度
両手でまわすようにするのがbeta
ganma
デバイスを基準状態から
y軸を中心にして
z軸からx軸方向へ回転させた角度
ねじるようにぐるぐるまわすのがganma