Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Sencha study

5,236 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

  • Be the first to comment

  • Be the first to like this

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

×