Adbe Edge Animate CC で遊んでみる
思うところがありまして、『Adbe Edge Animate CC』で簡単なゲームなんかを作れないものかと思い立ちまして、ちょっと実験なんかをしてみました.
手を動かしてみると色々とわかることがあるもので、右も左もわからないような状態から次のようなことがわかりました.
なんとなく足あとっぽいものを残してみたいと思います.
iPhone Safari での解像度の指定
Edge Animate CC でプロジェクトを作った時にできる html ファイルのメタ情報に以下のようなメタデータをしていすることで、viewport の解像度の指定を行うことができる.
<meta name="viewport" content="width=640, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5, user-scalable=no"/>
scale=1, maximum-scale=1, user-scalable=no"> -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">viewport はいわゆる表示領域の指定を行っている.
content には、以下の様な情報を記述することができる.
| プロパティ | 意味 | 値 | 説明 |
| width= | 表示領域の幅 | 数値 | ピクセル数(数値ではなくdevice-width を指定すると端末の幅に合わせる) |
| height= | 表示領域の高さ | 数値 | ピクセル数(数値ではなくdevice-width を指定すると端末の高さに合わせる) |
| initial-scale= | 初期のズーム倍率 | 数値 | 初期スケール値(minimum-scale 〜 maximum-scale の範囲) |
| minimam-scale= | 最小ズーム倍率 | 数値 | 初期値 0.25(0〜10) |
| maximum-scale= | 最大ズーム倍率 | 数値 | 初期値 1.6(0〜10) |
| user-scalable= | ズーム操作の許可 | yes or no | yes(許可する:デフォルト) no(許可しない) |
※ 複数のプロパティを指定する場合にはカンマで区切る
表示領域のデフォルト値は、iPhone 5s では 320px となっているようだ.
スマートフォン向けのサイトは 320px を横幅の基準として作成するようだが、ここでは 640px を設定し初期スケールを0.5とすることで 640px の横幅が表示されるようにした.
"apple-mobile-web-app-capable” は、Webサイトをアプリケーションのように見せるための外観の設定を行う.
サイトを配置したURLにむけて、普通に Safari からアクセする場合、 URL 表示欄や下のナビゲーション欄が表示されてしまう.
サイトを一旦「ホーム画面に追加」しておき、そこからサイトにアクセスを行った時に URL表示欄やナビゲーション用のボタンを非表示にすることができる.
"apple-mobile-web-app-status-bar-style” は、電波表示や電池残量表示のステータスバーの表示設定を行う.
以下の三種類を指定することができ、ステータスバーの表示を消すことはできないようだ.
- default : 不透明(デフォル色)で表示
- black : 黒で表示
- black-tarnslucent : 黒の半透明で表示
TouchEvent を処理する方法
Edge Animate CC 上にて、処理(スクリプト)を設定したいエレメントを右クリックして表示されるポップアップメニューから"「◯◯◯」のアクションを開く”とするとアクションの設定が行える.
アクションは、”${ProjectName}_edgeActions.js” に書かれるので頑張って手で書いても良い.
テストとして画面をスワイプするような操作を作成してみたかったのだが、画面をスワイプするとデフォルトのページスクロールの操作が行われてしまい困った.
これは、"Stage"のアクションに
e.preventDefault();
を設定することで、"Stage”上をスワイプするような操作をしてもページスクロールになることを制御できるようだ.
Rectangle をスワイプするとスワイプした位置に Rectangle がついてくるようなサンプルを書いてみたが、タッチ座標の取り方と設定の仕方がわからずに困った.
以下のように、event の touches から pageX / pageY などを引いてきて、css に設定すれば良いようだ.
// ユーザーがオブジェクトをドラッグしたときに実行されるコードを実行します（タッチデバイスの場合のみ）
e.preventDefault();
var x = e.touches[0].pageX;
var y = e.touches[0].pageY;
sym.$("TestObject").css({top: y, left: x});
sym.$("MoveProp").html("Move(" + Math.floor(x) + "," + Math.floor(y) + ")");同様のサンプルをネット上で観た時に
var x = e.originalEvent.touches[0].pageX;
と書かれているサンプルを何件か見かけた.
恐らく、Edge Animate のバージョンによる表現の差異なのだと思う.
