Embed Size (px)
Citation preview
GUIDANCE @Kawabata_Lemon
目次1.Javascriptの役割 - Javascriptでできること。
2.enchant.js入門 - enchant.js? - FlappyBirdとEnchantjsを作るのに必要なこと
3.これからの指針と参考リンク
HTML コンテンツ
CSS 表示の方法
Javascript ？
Javascript ？
インタラクティビティ
Javascriptの役割
Google Map のようなWebアプリケーション
Javascriptでできること
アニメーションに富んだサイト (kayac.com)
ゲーム (9leap.net)
→手軽にインタラクティブなコンテンツの作れる
例えば…
enchant.js
ゲームを作ってみよう
HTML+Javascriptで手軽にシンプルなゲームが作れるフレームワーク 2011年にリリースされ、すでに1000以上でのゲームの開発実績が存在する。オープンソースソフトウェア。
→カジュアルゲームに向いてる
カジュアルゲームといえば…
FlappyBird実況動画(https://www.youtube.com/watch?v=lQz6xhlOt18)
FlappyBird?世界中で爆発的な人気になったスマホ向けアクションゲーム。画面をタップして鳥が飛ぶ高さを変えながら土管を避ける。
FlappyBird
enchantJs入門
出ましたか？
main.js今見た内容のコードが書かれています。
enchant(); //おまじない
window.onload // 画面が読み込まれたら呼ばれる
Core
Sprite Label Action Event画像 文字 アニメーション イベント
ゲーム全体を仕切る
重要なクラス
FlappyBird
GetReady文字
キャラ画像
放っておくとどんどん落ちていく ぶつかると死ぬ
enchantJs x FlappyBird
Label
Sprite
‘enterframe’ イベント ‘enterframe’ イベント
クラスBasics
Basics Sprite画面に画像を表示するためのもの
new Sprite(横,縦) // 画像を表示させるハコを横 x 縦幅で作る
.x,.yで画像を出現させる場所をしていできる
.frameでセットした画像の何枚目の画像を使うかを設定
.imageで先ほどCoreに読み込ませた画像を設定
32px
32px
rootSceneにaddChildすることで表示される。
Label
new Label() ;// 文字を表示させるハコをつくる
.width,.heightで箱の大きさを設定
.font で表示につかうフォントの設定
.addChildで画面に反映
画面に文字を表示させるためのもの
Basics
Event
タッチされたら 表示されたら
消えたら などなど
・ ・
特定の現象に対して処理を指定できる表示されるごとに
タッチされたら
Basics
.addEventListener// 任意にイベントを設定できる
→毎フレームのイベント(‘enterframe’)を使って当たり判定を調べたりできる
これからの指針1.まずはサンプルのソースコードを編集してみよう
2.わからないときは参考リンクから探してみよう。
3.ゼロから小さなプログラムを作ってみよう。画像を表示させるだけ…ラベルを表示させるだけ…アニメーションを表示させるだけ…
参考リンク
http://enchantjs.com/ja/tutorial/lets-start-enchant-js/
http://matome.naver.jp/odai/2133007650190984501
本家のチュートリアル
【ゲーム作成】enchant.jsを使う時に参考になるリンク集
http://www.slideshare.net/RyoShimizu/enchantjs-meetup-tokyo-vol2-tutorial
enchantjs meetup tokyo vol2 tutorial
