Osaki.js #1enchant.js Hands On     @hidesuke
今日やる内容• なになに?enchant.js• なんか動くゲームを作ってみよう• 好きなように拡張してみよう – 次に何作るかをなんとなくかんがえよう
なになに? ENCHANT.JS
enchant.js いまさら説明いらないですよね?
enchant.js とは• http://enchantjs.com/• ユビキタスエンターテインメント社が  作ったゲーム制作用JavaScriptライブラリ• ブラウザで簡単にゲームがつくれる• HTML5ベース• iPhone, iPa...
ごたくはいいから手をうごかしましょうか
準備• HTML5がきもちよく動くブラウザ (Chrome or Safari)• お気に入りのエディタ (わたしはVim派)• ひな形  http://dl.dropbox.com/u/31504376/201203  26_tempalte...
ひな形の中身   enchant.js本体   便利な画像たち   プログラムを   書くファイル
まずは画像を表示してみよう!
myFirstEnchant.jsenchant.js                            ロードが完了したの初期化                                  ら最初に実行され             ...
ゲームオブジェクトの作   製         enchant();         window.onload = function() {            var game = new Game(320, 320);         ...
enchant(); 前処理!    window.onload = function() {準備や設定!            var game = new Game(320, 320);            game.preload(‘....
スプライトの作        製game.onload = function() {   var bear = new Sprite(32, 32);   bear.image = game.assets*‘./images/chara1.gi...
スプライト?
Spriteとは• 画像やグラフィックスを表示する描画オ  ブジェクト• var bear = new Sprite(32, 32); – (縦, 横) = (32px, 32px) のスプライトを用意 – 枠が用意されただけ。まだ何も描画されない
game.preload() で読み込んだ画像は、    game.assetsという配列に パス名をキーにして保存されますgame.onload = function() {   var bear = new Sprite(32, 32); ...
game.onload = function() {    var bear = new Sprite(32, 32);    bear.image = game.assets*‘./images/chara1.gif’+;      bear...
game.onload = function() {   var bear = new Sprite(32, 32);   bear.image = game.assets*‘./images/chara1.gif’+;   bear.fram...
フレーム• 動画は静止画の集合 (パラパラ漫画を思い出しましょう)• その1枚のことをフレームと言います• enchant.jsはデフォルトで1秒間30フレー  ムです(30fps)• つまり1秒間に30回、画像が描画されます
毎フレーム処理をするという指Bearにイベントが発生した                     定。    ときの処理を指定                     他にもEvent.TOUCH_START とか               ...
game.onload = function() {   var bear = new Sprite(32, 32);   bear.image = game.assets*‘./images/chara1.gif’+;   bear.fram...
enchant();window.onload = function() {    var game = new Game(320, 320);    game.preload(‘./images/chara1.gif’);     game....
ブラウザで index.html を開いてみよう!
クマがスケボーにのって移動してたら成功!
JavaScript Tips – デバグする方法       だまってChromeつかっとけ
右クリック!         要素の検証
enchant();                                             この行を加えて、index.html                                                 ...
ログがでる!ここには、エラーメッセージも出力されます。また、簡単なJavaScriptの実行もすることができます。
課題• クマが画面の端についたら、折り返すよ  うにしてみましょう• タップした方向にむかって、クマが進む  ようにしましょう• なんかゲームっぽくしてみましょう(ぁ
ヒント:タップ判定• 画面をタップした場所の座標を取得する  にはrootSceneにイベントリスナを設置することで、画面のイベントを取           得する                                       タ...
参考文献 HTML5とJavaScriptでスマートフォン ゲーム作成! ゼロからはじめる enchant.js入門【公式ガイド】 http://www.amazon.co.jp/dp/4048862588/
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
Osakijs #01 「enchant.jsハンズオン資料」
Upcoming SlideShare
Loading in …5
×

Osakijs #01 「enchant.jsハンズオン資料」

2,935 views
2,798 views

Published on

第一回 Osaki.js の enchant.js ハンズオンの資料です。
超初歩の初歩。

http://osakijs.blogspot.jp/

Published in: Technology
1 Comment
4 Likes
Statistics
Notes
No Downloads
Views
Total views
2,935
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
17
Comments
1
Likes
4
Embeds 0
No embeds

No notes for slide

Osakijs #01 「enchant.jsハンズオン資料」

  1. 1. Osaki.js #1enchant.js Hands On @hidesuke
  2. 2. 今日やる内容• なになに?enchant.js• なんか動くゲームを作ってみよう• 好きなように拡張してみよう – 次に何作るかをなんとなくかんがえよう
  3. 3. なになに? ENCHANT.JS
  4. 4. enchant.js いまさら説明いらないですよね?
  5. 5. enchant.js とは• http://enchantjs.com/• ユビキタスエンターテインメント社が 作ったゲーム制作用JavaScriptライブラリ• ブラウザで簡単にゲームがつくれる• HTML5ベース• iPhone, iPad, Androidでも動く
  6. 6. ごたくはいいから手をうごかしましょうか
  7. 7. 準備• HTML5がきもちよく動くブラウザ (Chrome or Safari)• お気に入りのエディタ (わたしはVim派)• ひな形 http://dl.dropbox.com/u/31504376/201203 26_tempalte.zip
  8. 8. ひな形の中身 enchant.js本体 便利な画像たち プログラムを 書くファイル
  9. 9. まずは画像を表示してみよう!
  10. 10. myFirstEnchant.jsenchant.js ロードが完了したの初期化 ら最初に実行され る enchant(); window.onload = function() { //ここにコードを書くですよ };
  11. 11. ゲームオブジェクトの作 製 enchant(); window.onload = function() { var game = new Game(320, 320); game.preload(‘./images/chara1.gif’); }; 画像の読み込み 読み込むだけでまだ 表示はされない
  12. 12. enchant(); 前処理! window.onload = function() {準備や設定! var game = new Game(320, 320); game.preload(‘./images/chara1.gif’); game.onload = function() { // メインの処理 }; }; メインの処理! 前処理が終わったら呼 び出される処理
  13. 13. スプライトの作 製game.onload = function() { var bear = new Sprite(32, 32); bear.image = game.assets*‘./images/chara1.gif’+; bear.frame = 4;}; ちょっと省略しましたよ
  14. 14. スプライト?
  15. 15. Spriteとは• 画像やグラフィックスを表示する描画オ ブジェクト• var bear = new Sprite(32, 32); – (縦, 横) = (32px, 32px) のスプライトを用意 – 枠が用意されただけ。まだ何も描画されない
  16. 16. game.preload() で読み込んだ画像は、 game.assetsという配列に パス名をキーにして保存されますgame.onload = function() { var bear = new Sprite(32, 32); bear.image = game.assets*‘./images/chara1.gif’+; bear.frame = 4;}; 読み込んだ画像を Spriteのimage属性に 指定してあげます。
  17. 17. game.onload = function() { var bear = new Sprite(32, 32); bear.image = game.assets*‘./images/chara1.gif’+; bear.frame = 4; }; 32px 0 1 2 3 4 32pxこんなふうに番号がふられるので、 5 6 7 8 9Spriteのframe属性に表示したい画像の番号をいれたら 10 11 12 13 14
  18. 18. game.onload = function() { var bear = new Sprite(32, 32); bear.image = game.assets*‘./images/chara1.gif’+; bear.frame = 4; bear.addEventListener(Event.ENTER_FRAME, function(){ this.x += 3; });}; 毎フレーム実行される処理を書く。 この例では、bearスプライトを 毎フレーム3px移動する処理
  19. 19. フレーム• 動画は静止画の集合 (パラパラ漫画を思い出しましょう)• その1枚のことをフレームと言います• enchant.jsはデフォルトで1秒間30フレー ムです(30fps)• つまり1秒間に30回、画像が描画されます
  20. 20. 毎フレーム処理をするという指Bearにイベントが発生した 定。 ときの処理を指定 他にもEvent.TOUCH_START とか Event.TOUCH_MOVEとか指定できる bear.addEventListener(Event.ENTER_FRAME, function(){ this.x += 3; }); bearのx座標に3プラスする
  21. 21. game.onload = function() { var bear = new Sprite(32, 32); bear.image = game.assets*‘./images/chara1.gif’+; bear.frame = 4; bear.addEventListener(Event.ENTER_FRAME, function(){ this.x += 3; }); game.rootScene.addChild(bear);}; 描画するものはすべて、Sceneに追加してあげないといけな い。 すべての親となるのがGameオブジェクトのrootScene なので、描画したいもの(bear)をrootSceneに登録してあげる
  22. 22. enchant();window.onload = function() { var game = new Game(320, 320); game.preload(‘./images/chara1.gif’); game.onload = function() { var bear = new Sprite(32, 32); bear.image = game.assets*‘./images/chara1.gif’+; bear.frame = 4; bear.addEventListener(Event.ENTER_FRAME, function(){ this.x += 3; }); game.rootScene.addChild(bear); }; game.start();};
  23. 23. ブラウザで index.html を開いてみよう!
  24. 24. クマがスケボーにのって移動してたら成功!
  25. 25. JavaScript Tips – デバグする方法 だまってChromeつかっとけ
  26. 26. 右クリック! 要素の検証
  27. 27. enchant(); この行を加えて、index.html Chromeで実行!window.onload = function() { var game = new Game(320, 320); game.preload(‘./images/chara1.gif’); game.onload = function() { console.log(“膝に矢を受けてしまってな”); var bear = new Sprite(32, 32); bear.image = game.assets*‘./images/chara1.gif’+; bear.frame = 4; bear.addEventListener(Event.ENTER_FRAME, function(){ this.x += 3; }); game.rootScene.addChild(bear); }; game.start();};
  28. 28. ログがでる!ここには、エラーメッセージも出力されます。また、簡単なJavaScriptの実行もすることができます。
  29. 29. 課題• クマが画面の端についたら、折り返すよ うにしてみましょう• タップした方向にむかって、クマが進む ようにしましょう• なんかゲームっぽくしてみましょう(ぁ
  30. 30. ヒント:タップ判定• 画面をタップした場所の座標を取得する にはrootSceneにイベントリスナを設置することで、画面のイベントを取 得する タッチされた瞬間に実行さ れる game.onload = function() { game.rootScene.addEventListener(Event.TOUCH_START, function(e){ console.log(“e.x = ” + e.x); console.log(“e.y = ” + e.y); }); }; e.x, e.y で座標を取得できます
  31. 31. 参考文献 HTML5とJavaScriptでスマートフォン ゲーム作成! ゼロからはじめる enchant.js入門【公式ガイド】 http://www.amazon.co.jp/dp/4048862588/

×