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