CreateJSでアプリつくった話
•
10 likes•8,374 views
2014/12/20『プログラミング生放送勉強会 第32回＠GMO Yours』のショートセッションで発表した内容です
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (12)
Similar to CreateJSでアプリつくった話
CreateJSでアプリつくった話
- 3. どういうわけか ブラウザで動くゲームつくりたいー → しかもスマホで！ → どこから手を付けたらいいの。。 → [HTML5 なに 無料] [検索] ＼どうする／
- 10. おさらい(？) ＜画面を出す＞
- 11. 1. HTMLを用意します <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport"> </head> <body> <canvas id="game-screen" width="320" height="320"> </canvas> <script src="https://code.createjs.com/ easeljs-0.8.0.min.js"></script> <script src="./app.js"></script> </body> </html>
- 12. 2. 最低限のJSを書きます var canvas = document.getElementById('game-screen'); var stage = new createjs.Stage(canvas); var bitmap = new createjs.Bitmap('./ru_shalm.png'); stage.addChild(bitmap); createjs.Ticker.addEventListener('tick', function() { // TODO: ここに毎フレームの更新処理 self.stage.update(); });
- 13. 3. なんか出た
- 14. 画面に何かを写す • 表示リストに写すものをペタリ • Flash的なアレ Canvas(createjs.Stage) ru_shalm.png (createjs.Bitmap) addChid
- 19. ParticleEmitterJSはつらみがある • 同時再生数制限 • 1個ずつしか出ない • 自分で潰した • 加算合成じゃない • 自分で（ｒｙ • 最新版で動かない • く(x △ x) > ｳﾜｱｱｱｱｱ
- 20. ゲームは音が付くと たのしい
- 21. 音は任せろー（ﾊﾞﾘﾊﾞﾘ • 4兄弟の1人SoundJS • 環境毎に様々な手段で音を鳴らす // 前提: PreloadJSでbgm.m4aが読み込まれていること var sound = createjs.Sound.createInstance('bgm'); // 無限ループ再生 sound.play(loop: -1);
- 22. iOS < やめて！ • iOSでBGMが鳴らない？？？？ • タッチ時に再生を開始しないとダメ • 一度でも鳴らせば以降はいつでもOK sound.play(); // これが初回ではダメ button.addEventListener('click', function(){ sound.play(); // これならOK });
- 26. ブラウザの画面サイズに合わせるとき • <canvas>をCSSで画面サイズにする • 例) 発火フォールの場合 • 発火フォールの内部設定: 360x576 • スマホの画面サイズ: 540x960 → <canvas>を540x864にスケール （画面に入りきる最大にする）
- 28. まとめ
- 32. 付録：質疑応答とか2 • Q.URLバー自動隠しとかしないの？ • A.今のiOSはViewportに設定があるよ Androidは魔法が必要そうだし 諦めてます＞＜ <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum- scale=1.0, user-scalable=0, minimal-ui">