Enchantjs

1. GUIDANCE
@Kawabata_Lemon

2. 目次
1.Javascriptの役割
- Javascriptでできること。
2.enchant.js入門
- enchant.js?
- FlappyBirdとEnchantjsを作るのに必要なこと
3.これからの指針と参考リンク

3. HTML
コンテンツ
CSS
表示の方法
Javascript
？

4. Javascript
？
Javascriptの役割
インタラクティビティ

5. Javascriptでできること
例えば…
Google Map
のようなWebアプリケーション
アニメーションに富んだサイト
(kayac.com)
ゲーム
(9leap.net)
→手軽にインタラクティブなコンテンツの作れる

6. ゲームを作ってみよう
enchant.js
HTML+Javascriptで手軽にシンプルなゲームが作れるフレームワーク
2011年にリリースされ、すでに1000以上でのゲームの開発実績が
存在する。オープンソースソフトウェア。
→カジュアルゲームに向いてる

7. カジュアルゲームといえば…
FlappyBird
実況動画(https://www.youtube.com/watch?v=lQz6xhlOt18)

8. FlappyBird?
世界中で爆発的な人気になったスマホ向けアクションゲーム。画面をタップして
鳥が飛ぶ高さを変えながら土管を避ける。

9. FlappyBird

10. enchantJs入門

11. まずはサンプルを触ってみよう。
http://enchantjs.com/download/

12. 出ましたか？

13. main.js
今見た内容のコードが書かれています。
enchant(); //おまじない
window.onload // 画面が読み込まれたら呼ばれる

14. 重要なクラス
Core
ゲーム全体を仕切る
Sprite Label Action Event
画像文字アニメーションイベント

15. FlappyBird
GetReady文字
キャラ画像
放っておくとどんどん落ちていくぶつかると死ぬ

16. enchantJs x FlappyBird
Label
Sprite
‘enterframe’ イベント‘enterframe’ イベント

17. クラスBasics

18. Basics Sprite
画面に画像を表示するためのもの
new Sprite(横,縦)
// 画像を表示させるハコを横 x 縦幅で作る
.imageで先ほどCoreに読み込ませた画像を設定
.x,.yで画像を出現させる場所をしていできる
.frameでセットした画像の何枚目の画像を使うかを設定
32px
32px
rootSceneにaddChildすることで表示される。

19. Label
画面に文字を表示させるためのもの
new Label() ;// 文字を表示させるハコをつくる
.width,.heightで箱の大きさを設定
.font で表示につかうフォントの設定
.addChildで画面に反映
Basics

20. Event
特定の現象に対して処理を指定できる
タッチされたら
表示されたら
消えたら
などなど
・
・
表示されるごとに
タッチされたら
Basics
.addEventListener// 任意にイベントを設定できる
→毎フレームのイベント(‘enterframe’)を使って当た
り判定を調べたりできる

21. これからの指針
1.まずはサンプルのソースコードを編集してみよう
2.わからないときは参考リンクから探してみよう。
3.ゼロから小さなプログラムを作ってみよう。
画像を表示させるだけ…
ラベルを表示させるだけ…
アニメーションを表示させるだけ…

22. 参考リンク
本家のチュートリアル
http://enchantjs.com/ja/tutorial/lets-start-enchant-js/
【ゲーム作成】enchant.jsを使う時に参考になるリンク集
http://matome.naver.jp/odai/2133007650190984501
enchantjs meetup tokyo vol2 tutorial
http://www.slideshare.net/RyoShimizu/enchantjs-meetup-tokyo-
vol2-tutorial