2. (株)サイバーエージェント
フロントディベロッパー？
小阪 智弘

3. 2006年4月サイバーエージェント入社
それからずーっとCAにいます。
＠tomowaqs
(純度100%サイバーエージェントのクリエイター07年7月頃から)
現在所属のプロジェクト
天空のクリスタリア⇒
HTML,CSS,js＆アニメーションを主に担当
趣味でPHP書いて
適当なwebサービスを作ったりもします。

4. ■最近CMでもよく見るアメーバスマホの
CA内製ゲームの一つ
■王道のカードバトルゲーム
■美麗カードが売り！

5. 5月
FLASH
lite1.1
Sencha
Animator
+
javascript
6月 7月 8月
Toolkit
for
CreateJs
Toolkit for
CreateJs
Var1.1
同じアニメーションを
4回も作りなおしたorz
TFC1.0リリース
adobeFLASH
ショック
TFC1.1リリース

6. iPhone も Andoroid も
ワンソースで書きたい！！

7. 天空のクリスタリアではアニメーションを
CSSで実装している箇所がいくつもある。
ソーシャルゲームの肝である「ガチャ」の
ワクワク感があまり出せていなかった
CSSアニメーションのデメリット
■開発に時間がかかる
■動きがとにかくもっさり
■CSSの読み込みが遅いとテキストが先に見えることも
■変更しにくい

8. 楽チンだから。
(それだけじゃないけど、、、極論それだけ)
計算ロジックをゴリゴリ、コードに
落としていくのは楽しいが、
ビジュアルは逆にできるだけ簡単で済ましたい。
⇒CSSアニメーションとかめんどくさくない？
FLASHでアニメーションを作ったことのある
という、ひと昔前の知識が使えるから。

9. ActionScript
そのまま使えません
従来のFLASHと違って制約が多い。
相変わらず謎のバグもやはり存在する。

10. 必要なもの
■Adobe Flash Professional CS6
■Flash Toolkit for CreateJS
最新版はver1.2ですが
今回はver1.1を利用したもので説明します。
あとは作ったFLAファイルを開いて
Toolkit for CreateJSパネルの
パブリッシュボタンを押すだけで完了！！

11. 基本的にはトゥイーンアニメーションだけ
でOK
よく使う、スクリプトは次の3つだ
け！
コピペしまくり楽チン！

12. onClick
/* js //as記述箇所にコメントアウトで、、
this.btn.onClick=function(){
//クリック処理
this.parent.gotoAndPlay(“skip”);
}
*/
■スコープがbtnになるので
親の制御をしたいときはparent指定
■実際にはアルファ1%のダミー矩形をクリックさせる

13. ■onclickのgotoAndPlayの飛び先に
またonclickを記述すると一部端末で
飛び先のフレームで再度clickしたような挙動になるので
注意
gotoAndPlay(“one
”)
gotoAndPlay(“two
”)

14. onTick オブジェクトを回転させる例
this.rot=0;
this.onTick=function(){
this.rot+=0.1;
//少しずつ加速
this.rotation-=35+this.rot;
};
■onEnterFrameと同様の扱い、そのフレームがタイム
ライン上にあれば実行され続ける

15. スクリプトでtweenを実装
createjs.Tween.get(obj) //動かしたいオブジェク
ト
.wait(60) //待ち時間ミリ秒
.to(
{
y:300,
x:180 //座標角度透明度など
},
200,//期間
createjs.Ease.quadIn //イージング
)
.call(function(){
//コールバック処理
});

16. hiteTest()
_lastPoint = tgt.globalToLocal(this.x,this.y);
//ローカル座標変換
if(tgt.hitTest(_lastPoint.x,
_lastPoint.y)) {
//ヒット処理
}
addChild（）
en=new lib.en();
en.x=Math.random()*270;
this.addChild(en);

17. 新カード紹介(onTickパーティクル)
http://goo.gl/WXvmN
副ギルドマスタースキル(onTick)
http://goo.gl/kfjzx
攻撃隊長スキル（マスク）
http://goo.gl/npSzn
ガチャ(Tween)
http://goo.gl/ByCXj

18. ■ローディング画像はあったほうがいい。
待たせないに越したことはないが
あると少しは我慢してくれる。
//HTMLにローディングgifアニメーションを記載し
//handleCompleteでローディング画像を隠せばOK
function handleComplete() {
document.getElementById("loadingImg").style.displa
y="none;
//以下省略
｝

19. ■タップさせる領域は全画面が基本
遷移先やアニメーションの分岐がない場合
一番上のレイヤーにダミーのボタンを持っ
てくる。
ヘビーユーザーは連打してスキップが基本
トークン処理がある場合は２度押し防止策
も必要
クリック反応領域

20. ■iPhone4に合わせて320x417pxで作成
端末によってはファーストビュ
ーが切れてしまうこともあるた
めなるべく下部ギリギリには重
要な情報を持ってこない。
天空のクリスタリアのiPhoneア
プリは上部に固定のナビゲーシ
ョンが入るためさらに高さは小
さくなっていた。

21. var manifest = [
{src:"images/card.jpg", id:"card}"},
{src:"images/rea_gear1.png", id:"rea_gear1"},
{src:"images/rea_gear2.png", id:"rea_gear2"},
{src:"images/rea_gear3.png", id:"rea_gear3"},
{src:"images/rea_gear4.png", id:"rea_gear4"}
];
//複雑なアニメーションほど画像の読み込みが多数発生す
る
HTML内に出力されるjs記述（画像部分一部抜粋）

22. var imgStr64={
rea_gear1:“bace64化された文字列”,
rea_gear2:“bace64化された文字列”,
rea_gear3:“bace64化された文字列”
};
//↑↑これらをファイル化して読み込ませる。
//容量は多少増えるがロードは一回のみ
var manifest = [
{src:“ファイルパス”, id:“card}”},//カード画像など動的な部分は
そのまま
{src:imgStr64.rea_gear1,id:"rea_gear1",type:createjs.PreloadJS.IM
AGE},
{src:imgStr64.rea_gear2,
id:"rea_gear2",type:createjs.PreloadJS.IMAGE},
{src:imgStr64.rea_gear3,
id:"rea_gear3",type:createjs.PreloadJS.IMAGE},
];
最適化後（画像部分一部抜粋）

23. ■使用数ゼロのものは残さない
ロードしてしまう
■トゥイーンオブジェクトは使わない
そもそも動かないことも
■画像ファイルを数字から始めない
idと出力画像が
リネームされるので管理が
大変に、、、
Ex）２00.jpg ⇒
{src:"images/_200.jpg", id:"_200"}

24. ■グラフィックシンボルは使わない！
⇒重い、動かない
■レイヤー名、シンボル名、インスタンス名
は基本的に英語で！
■利用する画像のファイル名も英語で！
⇒そのままjsに書きだされてしまいます（文字化け対策）
■カラー効果のスタイルは、アルファのみ設定可能
⇒がゼロにすると描画されなくなれクリックやスクリプトで参照
などが
できなくなるので １ にするなどして対応
■使用数ゼロのライブラリ、ガイドは最終的には消す！
⇒jsファイル内にソースと読み込み画像が残り
ます。

25. iPhoneもAndroidもワンソースで
多少やっかいな部分もある慣れれば使える
モバイル向けの最適化も忘れずに！
まだまだFlashも使えるソフトです。