Sencha study

Sencha Animatorによる
ゲームアニメーション作成

@shinriyo
【即日満員／増員400名】ザッカーバーグ絶賛ゲーム紹介！【第2回】渋谷
HTML5+CSS3+JS de ゲーム勉強会

2012/05/16 19:30 to 19:50

1

Who am I?

@shinriyo

翻訳書「Pythonゲームプログラミング入門」に細かい経歴

http://www.amazon.co.jp/gp/product/4048704397/ref=as_li_ss_til?
tag=noctushinrsdi-22

ソーシャルゲームのフロントエンドを作ってます。

格闘ゲーをiPhoneでプレイしてます。（据え置き、携帯型ゲーム機なし）

アクション、格闘ゲーム以外あまりやりません（FF、ドラクエはやったこと
がない）

2

What is Sencha Animator

Sencha Touchの会社の製品

URL(日本語):http://www.extjs.co.jp/products/animator/

CSS3アニメーションが作成可能（Canvasではない）

Windows、MacOS、iPhone、 Android（本当？）に対応

3

Price

無料ではないが、30日のトライアル版が試用できる。

購入ページが日本法人のページからたどりにくい（たどれない？）
→公式だと「Senchaコンプリート」のページに飛んでしまう
http://www.sencha.com/store/animator

1ライセンス・・・$199
5ライセンス・・・$895
20ライセンス・・$3,895

4

Compare

Hype($30)・・・機能が多く、各ブラウザにもサポート、独自のコードが多く
コードが読みにくてカスタマイズしづらそう。

Adobe Edge・・・無料だが、半年前も今もPreview版で機能が少ない。Flasher
には向いてそう。

Animatable・・・詳細不明。CSSとJSでアニメーションを作る。

Google swiffy・・・swfからHTML5に変換。まだベータ版。

5

Weak

パラパラアニメ

シーンをまたがって停止せずにアニメーションさせ
たいもの

マスク処理（手動で加えることになる）

6

How to use?

Flashと同じように作成します(メニューは英語)

HTML5(普通のHTML、CSS3、JavaScript)

swf → HTML5のコンバータではありません

作成したプロジェクトファイルからエクス
ポートする

7

How to use?
・保存したプロジェクト

「~.anim」の拡張子で中身はJSON

・エクスポートしたHTML

assetsには画像ファイル
index.htmlファイルの中にCSS、JS、HTML

8

How to use?
サーバ側/クライアント間でのパラメータ
などを決める

SenchaAnimatorでアニメーションを作る

SenchaAnimatorでHTML(HTML, CSS3, JS)を
吐き出す

吐き出したコードに、Python/Ruby/PHPや
JS/CSSの埋め込み作業

9

注意点 19:35

Androidの標準ブラウザでは正しく動かない

SenchaAnimatorのバージョンによって微妙に違うの
でバージョン固定すること
→最新版はHTMLやJavaScriptがコード整形されて
ます

Firefox対応をしたくないときは、オプションのメ
ニューからチェック外すこと。
10

DEMO

基本的な使い方とか

11

How to read JavaScript code?(1)

大きくわけて2つ

1.毎回必ず吐き出されるコード

2.毎回違うコード

12


if (typeof(AN) === 'undeﬁned') {
AN = {};
} 毎回同じコードなので、外部ファイル等にして使いまわすのが良い。
AN.Controller = {
SenchaAnimator上で主に使われる変数や関数などを定義している。
scenes: {}, YUI（Yahoo! User Interface Library）で難読化圧縮できる。
scenesArray: [], ただし、Sencha Animatorのバージョンが変わると微妙に違う。
currentSceneID: -1,
olElement: null,
events: {},
useOrmma: false,
∼∼∼∼∼略∼∼∼∼∼∼∼∼∼∼∼

if (currentState === 'expanded') {
ormma.close();
}
ormma.resize(nextScene.dimensions.width,nextScene.dimensions.height);
}
}
};

13


さらにわけて2つ


2-1.シーン系


2-2.タッチ系

14

2-1.シーン系

window.addEventListener('load', function(){
var conﬁgData = {
parentId: 'AN-sObj-parentOl',
ormma: false,
scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, ﬁt: false},
startAction: function(controller,event) {
},
endAction: function(controller) {
controller.goToNextScene();
}
},
赤字が1シーン分の塊

15

2-1.シーン系

var conﬁgData = {
ormma: false,
},
endAction: function(controller) { id：シーンのidです。
}
※ただし、Sencha Animator上でのシーン番号と"数字
}, が同じではない"ことに注意が必要です

16

2-1.シーン系

var conﬁgData = {
ormma: false,
},
animationCount：実際にアニメーションするCSS3の再生数を示しま
す。
}
この数分の再生が終えたら次のシーンへ移ります。
},

17

2-1.シーン系

var conﬁgData = {
ormma: false,
},
duration：そのシーンでの全体のミリ秒数を示します。
}
},

18

2-1.シーン系

var conﬁgData = {
ormma: false,
},
} startActionメソッド：
}, そのシーンの"開始"時に実行されるメソッドです。
Sencha Animatorでの編集の際に上の右の項目にある「Action」の
「End」を「None」にした場合はこのstartActionメソッドがありませ
んが、忘れてしまっても自分で書いても大丈夫です。
引数は2つ。

19

2-1.シーン系 19:40

var conﬁgData = {
ormma: false,
},
}
},
endActionメソッド：
そのシーンの"終了"時に実行されるメソッドです。Sencha Animator
での編集の際に「Action」の「End」を「None」にした場合はこの
endActionメソッドがありませんが、忘れてしまっても自分で書いて
も大丈夫です。引数は1つ。

20

2-1.シーン系

}

controller.goToNextScene()
次のシーンへ移動します。
※「次のシーン」は、現在のidが2の場合、単純に"数字的に次であるidが3のシーンではない"ことに注意してくだ
さい。単純に真下にあるシーンへ移動します。
すべてのシーンを内包したscenesArrayという配列内のインデックス的に次です。

21

2-1.シーン系

controller.startSceneByID(2);
}

controller.startSceneByID(2)
指定したIDの割り振られたシーンに遷移します。この例ではIDが2のシーンへ遷移します。
※Sencha Animator上でのシーンのIDではないことに注意。

22

2-1.シーン系


controller.replayScene();
}

controller.replayScene()
現在のシーンを再び再生します。

23

で、初期化の処理はどこに描くの？

var hoge = 1;
initFunction();
var conﬁgData = {
ormma: false,

window.addEventListener下に書けば、ブラウザが読まれたと同時に発動します。
変数の初期化や、初期化を行う関数などを記載するのに便利です。

24

2-2.タッチ系

{id: "hoge-5", handler: function(controller) {
// 処理を書く
}

先ほどのシーン系のコードよりも下のあたりに記載されています。
HTMLのdivタグのidに対応しており、今回の場合hoge-5というidに記載されてます。
hoge-5がタッチされると{}中の処理が実行されます。

25

How to read css3 code?(1)

大きく分けると2種類

1.アニメーションのないCSS

2.アニメーションのあるCSS

26

アニメーションのないCSS

#AN-sObj-15180 {
-webkit-transform: translate3d(45px, -28px, 0px) rotateX(0deg) rotateY(0deg)
rotateZ(180deg) scale3d(1.3, 0.75, 1);
width: 274px;
height: 258px;
top: 0;
translate、scale ではなく、
left: 0;
translate3d『位置』, scale3d『大きさ』を使ってく
}
れます。

2DなのでZ軸は必要ないが、GPUを使うために
残しましょう。

27

アニメーションのあるCSS
#AN-sObj-3 {
-webkit-transform: translate3d(206px, 894px, 0px);

divタグ1つにつき5つ作成される
width: 114px;
height: 92px;
border-top: 1px solid rgba(1,14,13,1);
border-right: 1px solid rgba(1,14,13,1);
border-bottom: 1px solid rgba(1,14,13,1);
border-left: 1px solid rgba(1,14,13,1);
-webkit-border-top-left-radius: 500px;
-webkit-border-top-right-radius: 500px;
-webkit-border-bottom-right-radius: 500px;
① ①、④・・・基本的なCSS。最近のバージョンで
-webkit-border-bottom-left-radius: 500px;
background-color: rgba(194,194,194,1);
はなぜか2つに分割さてた。
top: 0;
left: 0; ②・・・実際のアニメーション。①④よりも優先
②
}

@-webkit-keyframes ani-AN-sObj-3 {
0% { 順位が高いので位置を調整したい場合は、こち
}
らも動かす必要がある。③から呼び出される。
100% {

}
-webkit-transform: translate3d(526px, 929px, 0px); 名前は『ani-AN-sObje-数字』だが、昔のバー
}

.run #AN-sObj-3 {
ジョンは違った。
-webkit-animation-name: ani-AN-sObj-3;
-webkit-animation-duration: 1.188s;
-webkit-animation-delay: 0s;
-webkit-animation-ﬁll-mode: both;
③ ③・・・シーンが表示された時に実行される
}
⑤・・・シーンとシーンの間でのチラツキ防止
#AN-sObj-3 {

}
④ 用。シーン感で一瞬表示変なのがされてしまう
.restart #AN-sObj-3 {
場合はここを疑う！opacity:0で消す。
⑤
} 28

先ほどの③についてより細かく

.run #AN-sObj-3 {
-webkit-animation-name: ani-AN-sObj-3;
-webkit-animation-duration: 1.188s;
-webkit-animation-delay: 0s;
-webkit-animation-ﬁll-mode: both;
}

-webkit-animation-duration
実際のアニメーションの実行時間（全体の時間）です。
※0の場合を除いて、単位の「s」は必ず忘れないようにしてください。

-webkit-animation-delay

実際のアニメーションの待ち時間です。
※delayは信頼できないので0になるようにアニメーションを作ります。
後述します。
29

CSSのハマりどころ

最後に「;」が無いと無視される。

pxなどの単位が無いと無視される。

※0なら単位なくてもOK

http://csslint.net/ でチェック

間違って//を書いてしまう

※/*と*/で正しく囲みましょう。
30

.restart #AN-sObj-15180 {
-webkit-transform: translate3d(45px, -28px, 0px) rotateX(0deg) rotateY(0deg)
rotateZ(180deg) scale3d(1.3, 0.75, 1);
opacity: 0;
}

一瞬表示されてしまう場合は、.restartを疑う！
opacityを0にして消す。

31

delayは実行の時間がまちまちなので、信頼しない！特にパラパラア
ニメを作成するときに目立つ

delay:1s; duration:1s;
× 1秒待って、全体1秒
のアニメ

0% 100%

delay:0; duration:2s; 待ち時間0！

⃝ この間,opacityを0
代わりに、全体2秒のアニメ
で透明時間を1秒にする

0% 50% 100%

32

で、実際どうやるの？

×
SenchaAnimator上でこのように作っておく
1sはopacityを100%に
⃝
0sにも●をうつ！０s∼0.99sはopacityを0%に

33

もうHTMLへのコーディング着手中なのでもう後戻りは無理・・

全体の時間から計算して⃝％を割り出すことでできるが、手間がかかりすぎる。

githubの「DelayRemover」を使ってください
※ReadMeを参考に
https://github.com/shinriyo/delayremover

34

How to read HTML code?(1)
<ol>タグがシーン全体を取り囲んでいる。
<li>タグが1シーンの単位。

<ol id="AN-sObj-parentOl">

<li id="AN-sObj-scene-id-0" >
<div class="AN-sObj-stage">
<div id="AN-sObj-3"></div>
</div>
</li>

</ol>

OL・・・Ordered Listの略で、順序あるリストを表示する際に使用
LI・・・List Itemの略で、リストの項目を記述する際に使用
35

How to read HTML code?(2)
基本的に「AN-sObj-数字」のIDが付く。
画像の場合、「AN-sObj-val-数字」が親タグに付くこともある。

<div class="AN-Object" id="AN-sObj-15180">
<div id="AN-sObj-val-15180">
<img src="assets/bg_scroll2.png" />
</div>
</div>

OL・・・Ordered Listの略で、順序あるリストを表示する際に使用
LI・・・List Itemの略で、リストの項目を記述する際に使用
36

HTMLのハマりどころ
<div id="AN-sObj-3"></div>

CSSアニメーションに関連づいたHTMLタグをうっかり消すと動かなくなる！
どうしても消したいときは、 AN-sObj-3のCSSを同時に削除する。
「.run AN-sObj-3」、「.restart AN-sObj-3」は必ず消し。「# AN-sObj-3」も消
して良い。

scenes: [{id: 5,animationCount: 10-1, duration: 487, dimensions: {height: 320,
width: 320, expanded: false, ﬁt: false},

さらに、対応するJSのシーンからanimationCountを１減らす。

37

学習やQ&A

公式フォーラム(Sencha Animator Help & Discussion)

http://www.sencha.com/forum/forumdisplay.php?64-Sencha-Animator-Help-amp-
Discussion

↑ここに聞けばarnebechさんが答えてくれます。（英語）

「Sencha Animator Feature Requests」で欲しい機能リクエストも。

CSS3でFlash並みアニメが作れるSencha Animator

http://ascii.jp/elem/000/000/646/646400/

38

まとめ

SenchaAnimatorでしっかり作りきってから
PHPやJSなどを組み込むこと。※後戻りが大
変。

デザイナーやFlash経験のあるエンジニアが
作ることをおすすめします。

CSSにidを必ず振りましょう。
39

今回割愛した内容

JSでCSSアニメーションを動的に生成や変更

CSSアニメーションを止める方法

CSSアニメーションを消す方法

使用していてわからないことがあれば
@shinriyo へDM/Mention。日英韓OK。

40

ﬁnish

ご静聴ありがとうございました

41

Sencha study

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (9)

Similaire à Sencha study

Similaire à Sencha study (20)

Plus de Shinsuke Sugita

Plus de Shinsuke Sugita (8)

Sencha study

Notes de l'éditeur