Sencha study

4,881 views
4,804 views

Published on

http://pf.gree.jp/1603?from_tgame=myapp1603
http://pf.gree.jp/1607
http://pf.gree.jp/3420
Play and pay for game :>

Animation Tool

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,881
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
30
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Sencha study

    1. 1. Sencha Animatorによる ゲームアニメーション作成 @shinriyo【即日満員/増員400名】ザッカーバーグ絶賛ゲーム紹介!【第2回】渋谷 HTML5+CSS3+JS de ゲーム勉強会 2012/05/16 19:30 to 19:50 1
    2. 2. Who am I?@shinriyo翻訳書「Pythonゲームプログラミング入門」に細かい経歴http://www.amazon.co.jp/gp/product/4048704397/ref=as_li_ss_til?tag=noctushinrsdi-22ソーシャルゲームのフロントエンドを作ってます。格闘ゲーをiPhoneでプレイしてます。(据え置き、携帯型ゲーム機なし)アクション、格闘ゲーム以外あまりやりません(FF、ドラクエはやったことがない) 2
    3. 3. What is Sencha AnimatorSencha Touchの会社の製品URL(日本語):http://www.extjs.co.jp/products/animator/CSS3アニメーションが作成可能(Canvasではない)Windows、MacOS、iPhone、 Android(本当?)に対応 3
    4. 4. Price無料ではないが、30日のトライアル版が試用できる。購入ページが日本法人のページからたどりにくい(たどれない?)→公式だと「Senchaコンプリート」のページに飛んでしまうhttp://www.sencha.com/store/animator1ライセンス・・・$1995ライセンス・・・$89520ライセンス・・$3,895 4
    5. 5. CompareHype($30)・・・機能が多く、各ブラウザにもサポート、独自のコードが多くコードが読みにくてカスタマイズしづらそう。Adobe Edge・・・無料だが、半年前も今もPreview版で機能が少ない。Flasherには向いてそう。Animatable・・・詳細不明。CSSとJSでアニメーションを作る。Google swiffy・・・swfからHTML5に変換。まだベータ版。 5
    6. 6. Weakパラパラアニメシーンをまたがって停止せずにアニメーションさせたいものマスク処理(手動で加えることになる) 6
    7. 7. How to use?Flashと同じように作成します(メニューは英語)HTML5(普通のHTML、CSS3、JavaScript)swf → HTML5のコンバータではありません作成したプロジェクトファイルからエクスポートする 7
    8. 8. How to use?・保存したプロジェクト 「~.anim」の拡張子で中身はJSON・エクスポートしたHTML assetsには画像ファイル index.htmlファイルの中にCSS、JS、HTML 8
    9. 9. How to use? サーバ側/クライアント間でのパラメータ などを決める SenchaAnimatorでアニメーションを作るSenchaAnimatorでHTML(HTML, CSS3, JS)を 吐き出す吐き出したコードに、Python/Ruby/PHPや JS/CSSの埋め込み作業 9
    10. 10. 注意点 19:35Androidの標準ブラウザでは正しく動かないSenchaAnimatorのバージョンによって微妙に違うのでバージョン固定すること→最新版はHTMLやJavaScriptがコード整形されてますFirefox対応をしたくないときは、オプションのメニューからチェック外すこと。 10
    11. 11. DEMO基本的な使い方とか 11
    12. 12. How to read JavaScript code?(1) 大きくわけて2つ 1.毎回必ず吐き出されるコード 2.毎回違うコード 12
    13. 13. 1.毎回必ず吐き出されるコードif (typeof(AN) === undefined) { 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
    14. 14. 2.毎回違うコード さらにわけて2つ 1.毎回必ず吐き出されるコード  2-1.シーン系 2.毎回違うコード  2-2.タッチ系 14
    15. 15. 2-1.シーン系  window.addEventListener(load, function(){   var configData = {   parentId: AN-sObj-parentOl,   ormma: false,   scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},   startAction: function(controller,event) {   },   endAction: function(controller) {   controller.goToNextScene();   }  }, 赤字が1シーン分の塊 15
    16. 16. 2-1.シーン系  window.addEventListener(load, function(){   var configData = {   parentId: AN-sObj-parentOl,   ormma: false,   scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},   startAction: function(controller,event) {   },   endAction: function(controller) { id:シーンのidです。   controller.goToNextScene();   } ※ただし、Sencha Animator上でのシーン番号と"数字  }, が同じではない"ことに注意が必要です 16
    17. 17. 2-1.シーン系  window.addEventListener(load, function(){   var configData = {   parentId: AN-sObj-parentOl,   ormma: false,   scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},   startAction: function(controller,event) {   },   endAction: function(controller) { animationCount:実際にアニメーションするCSS3の再生数を示しま   controller.goToNextScene(); す。   } この数分の再生が終えたら次のシーンへ移ります。  }, 17
    18. 18. 2-1.シーン系  window.addEventListener(load, function(){   var configData = {   parentId: AN-sObj-parentOl,   ormma: false,   scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},   startAction: function(controller,event) {   },   endAction: function(controller) {   controller.goToNextScene(); duration:そのシーンでの全体のミリ秒数を示します。   }  }, 18
    19. 19. 2-1.シーン系  window.addEventListener(load, function(){   var configData = {   parentId: AN-sObj-parentOl,   ormma: false,   scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},   startAction: function(controller,event) {   },   endAction: function(controller) {   controller.goToNextScene();   } startActionメソッド:  }, そのシーンの"開始"時に実行されるメソッドです。 Sencha Animatorでの編集の際に上の右の項目にある「Action」の 「End」を「None」にした場合はこのstartActionメソッドがありませ んが、忘れてしまっても自分で書いても大丈夫です。 引数は2つ。 19
    20. 20. 2-1.シーン系 19:40  window.addEventListener(load, function(){   var configData = {   parentId: AN-sObj-parentOl,   ormma: false,   scenes: [{id: 5,animationCount: 1, duration: 487, dimensions: {height: 320, width: 320, expanded: false, fit: false},   startAction: function(controller,event) {   },   endAction: function(controller) {   controller.goToNextScene();   }  }, endActionメソッド:  そのシーンの"終了"時に実行されるメソッドです。Sencha Animator での編集の際に「Action」の「End」を「None」にした場合はこの endActionメソッドがありませんが、 忘れてしまっても自分で書いて も大丈夫です。引数は1つ。 20
    21. 21. 2-1.シーン系   endAction: function(controller) {   controller.goToNextScene();   }controller.goToNextScene()次のシーンへ移動します。※「次のシーン」は、現在のidが2の場合、単純に"数字的に次であるidが3のシーンではない"ことに注意してください。単純に真下にあるシーンへ移動します。すべてのシーンを内包したscenesArrayという配列内のインデックス的に次です。 21
    22. 22. 2-1.シーン系   endAction: function(controller) {   controller.startSceneByID(2);   }controller.startSceneByID(2)    指定したIDの割り振られたシーンに遷移します。この例ではIDが2のシーンへ遷移します。    ※Sencha Animator上でのシーンのIDではないことに注意。 22
    23. 23. 2-1.シーン系   endAction: function(controller) {   controller.replayScene();   }controller.replayScene()    現在のシーンを再び再生します。 23
    24. 24. で、初期化の処理はどこに描くの?  window.addEventListener(load, function(){   var hoge = 1;   initFunction();   var configData = {   parentId: AN-sObj-parentOl,   ormma: false,window.addEventListener下に書けば、ブラウザが読まれたと同時に発動します。変数の初期化や、初期化を行う関数などを記載するのに便利です。 24
    25. 25. 2-2.タッチ系 {id: "hoge-5", handler: function(controller) {   // 処理を書く } 先ほどのシーン系のコードよりも下のあたりに記載されています。HTMLのdivタグのidに対応しており、今回の場合hoge-5というidに記載されてます。hoge-5がタッチされると{}中の処理が実行されます。 25
    26. 26. How to read css3 code?(1)大きく分けると2種類1.アニメーションのないCSS2.アニメーションのあるCSS 26
    27. 27. アニメーションのない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
    28. 28. アニメーションのある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% { 順位が高いので位置を調整したい場合は、こち -webkit-transform: translate3d(206px, 894px, 0px); } らも動かす必要がある。③から呼び出される。 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-fill-mode: both; ③ ③・・・シーンが表示された時に実行される} ⑤・・・シーンとシーンの間でのチラツキ防止#AN-sObj-3 {} -webkit-transform: translate3d(526px, 929px, 0px); ④ 用。シーン感で一瞬表示変なのがされてしまう.restart #AN-sObj-3 { 場合はここを疑う!opacity:0で消す。 ⑤ -webkit-transform: translate3d(206px, 894px, 0px);} 28
    29. 29. 先ほどの③についてより細かく.run #AN-sObj-3 { -webkit-animation-name: ani-AN-sObj-3; -webkit-animation-duration: 1.188s; -webkit-animation-delay: 0s; -webkit-animation-fill-mode: both;}-webkit-animation-duration実際のアニメーションの実行時間(全体の時間)です。※0の場合を除いて、単位の「s」は必ず忘れないようにしてください。-webkit-animation-delay実際のアニメーションの待ち時間です。※delayは信頼できないので0になるようにアニメーションを作ります。後述します。 29
    30. 30. CSSのハマりどころ最後に「;」が無いと無視される。pxなどの単位が無いと無視される。※0なら単位なくてもOKhttp://csslint.net/ でチェック間違って//を書いてしまう※/*と*/で正しく囲みましょう。 30
    31. 31. CSSのハマりどころ  .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
    32. 32. CSSのハマりどころ delayは実行の時間がまちまちなので、信頼しない!特にパラパラア ニメを作成するときに目立つ delay:1s; duration:1s;× 1秒待って、全体1秒 のアニメ 0% 100%delay:0; duration:2s; 待ち時間0!⃝ この間,opacityを0 代わりに、全体2秒のアニメ で透明時間を1秒にする0% 50% 100% 32
    33. 33. で、実際どうやるの? ×SenchaAnimator上でこのように作っておく 1sはopacityを100%に ⃝ 0sにも●をうつ! 0s∼0.99sはopacityを0%に 33
    34. 34. もうHTMLへのコーディング着手中なのでもう後戻りは無理・・全体の時間から計算して⃝%を割り出すことでできるが、手間がかかりすぎる。githubの「DelayRemover」を使ってください※ReadMeを参考にhttps://github.com/shinriyo/delayremover 34
    35. 35. 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
    36. 36. 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
    37. 37. 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, fit: false},さらに、対応するJSのシーンからanimationCountを1減らす。 37
    38. 38. 学習や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 Animatorhttp://ascii.jp/elem/000/000/646/646400/ 38
    39. 39. まとめSenchaAnimatorでしっかり作りきってからPHPやJSなどを組み込むこと。※後戻りが大変。デザイナーやFlash経験のあるエンジニアが作ることをおすすめします。CSSにidを必ず振りましょう。 39
    40. 40. 今回割愛した内容JSでCSSアニメーションを動的に生成や変更CSSアニメーションを止める方法CSSアニメーションを消す方法使用していてわからないことがあれば@shinriyo へDM/Mention。日英韓OK。 40
    41. 41. finishご静聴ありがとうございました 41

    ×