DeviceOrientationEvent API の活用

DeviceOrientationEvent API の活用

ゲームの操作感
端末の傾きを検知して
ゲーム操作に利用する
より直感的なコントローラデバイスとして活用できる
前にみたサンプルでは、たまを転がしたり
バランスをとるゲームに使われていた

ジェスチャ認識
端末の加速度を検知して信号処理すれば
特定のジェスチャ判定につなげられる
端末をシェイクすると入力フォームをクリアするなど

マップ表示の回転制御
端末の向きを検知すれば
画面に表示する地図の向きをユーザ目線の
方向に揃えられる
主に、ナビアプリに使われる

DeviceOrientation Event

DeviceOrientation Event


これは
デバイスの物理的な向きと傾きに関する情報を提供する
DOMイベント

使える機能は
デバイスの物理的向きに関する情報を提供するDOMイベント

デバイスの加速度に関する情報を提供するDOMイベント

コンパスのキャリブレーションが必要であることを知らせる
DOMイベント

そして、以下がデバイスの向きがどのように表現されているかのメモ


地球座標系
物理的な方角は
XYZの３軸で表現する

西から東に向かうのがX軸
南から北に向かうのがY軸
下から上に向かうのがZ軸になる
デバイスの向きは関係ない



デバイス座標系
デバイスにひもづけられる座標系でxyz の３軸で表現

スクリーンの左から右がX軸
スクリーンの下部から上部がY軸
スクリーンの背面から表面がZ軸になる

デバイス座標系は
デバイスの上下左右に限定されるので
デバイスを傾けると
デバイスと同じ向き、角度だけ傾く


デバイスの回転座標系

デバイス座標系(xyz) と
地球座標系（XYZ）が
それぞれ同じ向きを向いている状態を
基準状態として
この状態からの誤差を３つの角度で表す

alpha
デバイスが基準状態から
z軸を中心として
x軸からy軸の方向へ回転させた角度
手のひらでくるくるまわすのがalpha

beta
デバイスを基準状態から
x軸を中心として
y軸からz軸方向へ回転させた角度
両手でまわすようにするのがbeta

ganma
デバイスを基準状態から
y軸を中心にして
z軸からx軸方向へ回転させた角度
ねじるようにぐるぐるまわすのがganma