enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
TRANSCRIPT
![Page 1: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/1.jpg)
enchant.jsでゲーム制作を
はじめてみよう「パンダの会」バージョン
2012.9.15「パンダの会」 その七
3panda(Ryota Shiroguchi)
![Page 2: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/2.jpg)
私について
●@3panda
●仕事はHTMLとかCSS触ってます。
●プログラムは 苦手です。
●ファミコン世代です。
●パンダが大好きです。
![Page 3: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/3.jpg)
このお話の流れ
●enchant.jsについて
●スタートアップ
●ゲーム的な動きをつくる(デモ&解説)
●ゲームを作ってみました!
●まとめ
![Page 4: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/4.jpg)
enchant.jsについて
![Page 5: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/5.jpg)
enchant.jsとは
●ゲームエンジン
●HTML5 + JavaScript
●クロスプラットフォーム
●日本製(株式会社ユビキタスエンターテインメントが公開)
![Page 6: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/6.jpg)
enchant.jsの良いところ
●スタートアップが楽ちん
●サンプルが豊富
●ドキュメントが日本語
●公式のプラグインも豊富
![Page 7: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/7.jpg)
スタートアップ
![Page 8: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/8.jpg)
スタートアップ HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>enchant</title> <script type="text/javascript" src="enchant.js"></script> <script type="text/javascript" src="game.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> </body></html>
![Page 9: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/9.jpg)
スタートアップ HTML<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <title>enchant</title> <script type="text/javascript" src="enchant.js"></script> <script type="text/javascript" src="game.js"></script> <style type="text/css"> body { margin: 0; } </style> </head> <body> </body></html>
enchant.jsを読み込む
実行用jsファイル※を読み込む。
HTMLに直接記述も可能。
※今回はgame.jsとしていますが何でもOK
![Page 10: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/10.jpg)
スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);
//ここで初期化
game.onload = function(){
//ここにゲーム処理を書く
}
game.start();
}
![Page 11: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/11.jpg)
スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);
//ここで初期化
game.onload = function(){
//ここにゲーム処理を書く
}
game.start();
}
enchantのお約束!
JavaScriptのお約束!
![Page 12: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/12.jpg)
スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);
//ここで初期化
game.onload = function(){ //ここにゲーム処理を書く
} game.start();}
ゲームをスタート!
ゲーム(オブジェクト)を生成
ゲーム中の処理
![Page 13: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/13.jpg)
ゲーム的な動きをつくる
![Page 14: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/14.jpg)
ゲーム的な動きを作る
●まずはキャラの配置
●キャラを動かす
●ステージを配置する
●当たり判定
●ゲームスタート&ゲームオーバー
●コントローラーの設置(タッチデバイス用)
![Page 15: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/15.jpg)
まずはキャラの配置
クマさん
![Page 16: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/16.jpg)
まずはキャラの配置 game.jsvar game = new Game(320, 320); game.fps = 24;
game.preload('chara1.gif'); game.onload = function(){ //キャラクター
var bear = new Sprite(32, 32); bear.image = game.assets['chara1.gif']; //rootSceneに追加
game.rootScene.addChild(bear); }
game.start();
}
![Page 17: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/17.jpg)
まずはキャラの配置 game.jsvar game = new Game(320, 320); game.fps = 24; game.preload('chara1.gif'); game.onload = function(){ //キャラクター
var bear = new Sprite(32, 32); bear.image = game.assets['chara1.gif']; //rootSceneに追加
game.rootScene.addChild(bear); }
game.start();
}
フレームレートの設定
画像のプリロード
スプライトの生成
画像の指定
※ルートシーンに追加
![Page 18: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/18.jpg)
デモ
![Page 19: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/19.jpg)
キャラを動かす
クマさん走る
![Page 20: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/20.jpg)
キャラを動かす
//bearの動きの設定 イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME, function() {
//左if (game.input.left) {
this.x -= 3; this.scaleX = -1;
}//・・・省略・・・
});
![Page 21: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/21.jpg)
キャラを動かす
//bearの動きの設定 イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME, function() {
//左if (game.input.left) {
this.x -= 3; this.scaleX = -1;
}//・・・省略・・・
});
キャラにイベントリスナーを追加
![Page 22: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/22.jpg)
キャラを動かす
//bearの動きの設定 イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME, function() {
//左if (game.input.left) {
this.x -= 3; this.scaleX = -1;
}//・・・省略・・・
});
イベントはフレーム毎
![Page 23: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/23.jpg)
デモ
![Page 24: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/24.jpg)
ステージを配置する
![Page 25: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/25.jpg)
ステージを配置する
//MAPを表示させる
var blocks = [[ -1, -1,//省略// -1, -1, -1, -1 ],
////////////////省略/////////////////////
[ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ],
[ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ]
];var map = new Map(16, 16);map.image = game.assets["map2.gif"];map.loadData(blocks);
![Page 26: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/26.jpg)
ステージを配置する
//MAPを表示させる
var blocks = [[ -1, -1,//省略// -1, -1, -1, -1 ],
////////////////省略/////////////////////
[ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ],
[ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ]
];var map = new Map(16, 16);map.image = game.assets["map2.gif"];map.loadData(blocks);
配列で表示する画像を管
理
タイルの一コマづつ敷き
詰めるように配置。
![Page 27: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/27.jpg)
ステージを配置する
//MAPを表示させる
var blocks = [[ -1, -1,//省略// -1, -1, -1, -1 ],
////////////////省略/////////////////////
[ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ],
[ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ]
];var map = new Map(16, 16);map.image = game.assets["map2.gif"];map.loadData(blocks);
Map(オブジェクト)を生成Map(オブジェクト)を生成
配列を呼び出し配置
画像の指定
![Page 28: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/28.jpg)
ステージを配置する
map2.gif
![Page 29: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/29.jpg)
ステージを配置する
生成したオブジェクトのサイズで配列として扱える
![Page 30: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/30.jpg)
ステージを配置する
game.onload = function(){
//---------------省略-------------------//
//rootSceneに追加
game.rootScene.addChild(bear); game.rootScene.addChild(map);
}
game.start();
}
※ルートシーンに追加
※オブジェクトは
シーンに追加する事で表示
![Page 31: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/31.jpg)
デモ
![Page 32: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/32.jpg)
実はクマさんも・・・
chara1.gif
![Page 33: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/33.jpg)
実はクマさんも・・・
「chara1.gif」を切り出して呼び出している
サイズ(32,32)
![Page 34: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/34.jpg)
実はクマさんも・・・
「bear.frame = 番号」
で何番目を表示するか指定する。
デフォルトは0(1番目)
![Page 35: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/35.jpg)
当たり判定
当たった!!!
![Page 36: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/36.jpg)
当たり判定
//星を表示
var star = new Sprite(16, 16);star.image = game.assets['icon0.gif'];star.frame = [30];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) {label.text = '当たった!';
this.frame = 3;}
![Page 37: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/37.jpg)
当たり判定
//星を表示
var star = new Sprite(16, 16);star.image = game.assets['icon0.gif'];star.frame = [30];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) {label.text = '当たった!';
this.frame = 3;}
キャラを一つ追加
![Page 38: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/38.jpg)
当たり判定
//星を表示
var star = new Sprite(16, 16);star.image = game.assets['icon0.gif'];star.frame = [30];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) {label.text = '当たった!';
this.frame = 3;}
当たり判定の処理intersect,またはwithin
メソッドを利用。※
※補足・intersec()では矩形同士の距離・within()では中心からの距離
![Page 39: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/39.jpg)
デモ
![Page 40: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/40.jpg)
ゲームスタート&ゲームオーバー
![Page 41: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/41.jpg)
ゲームスタート&ゲームオーバー
ゲームスタートとゲームオーバーの画像を用意
![Page 42: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/42.jpg)
ゲームスタート&ゲームオーバー
(注意)HTMLファイルと同じ階層に置きましょう。
![Page 43: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/43.jpg)
ゲームスタート&ゲームオーバー
ゲームスタートは画像を用意するだけでOK
![Page 44: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/44.jpg)
nineleap.enchant.jsを読み込む
ゲームスタート&ゲームオーバー HTML
<html>//-------------------省略--------------------//<head><script type="text/javascript" src="enchant.js"></script><script type="text/javascript" src="nineleap.enchant.js"></script><script type="text/javascript" src="game.js"></script>//-------------------省略--------------------//</html>
nineleap.enchant.jsを読み込む
![Page 45: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/45.jpg)
ゲームスタート&ゲームオーバー
//星を表示
var star = new Sprite(16, 16);star.image = game.assets['icon0.gif'];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) {this.frame = 3;game.end();
}
ゲームオーバーの
処理
![Page 46: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/46.jpg)
デモ
![Page 47: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/47.jpg)
コントローラーの設置(タッチデバイス用)
![Page 48: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/48.jpg)
pad.png
コントローラーの設置(タッチデバイス用)
![Page 49: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/49.jpg)
(注意)HTMLファイルと同じ階層に置きましょう。
コントローラーの設置(タッチデバイス用)
![Page 50: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/50.jpg)
<html>//-------------------省略--------------------//<head><script type="text/javascript" src="enchant.js"></script><script type="text/javascript" src="ui.enchant.js"></script><script type="text/javascript" src="game.js"></script>//-------------------省略--------------------//</html>
ui.enchant.jsを読み込む
コントローラーの設置(タッチデバイス用)
![Page 51: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/51.jpg)
コントローラーの設置(タッチデバイス用)
game.onload = function() {//-------------------省略--------------------//
// バーチャルキーパッドを生成
var pad = new Pad();pad.moveTo(0, 220);
//-------------------省略--------------------//
バーチャルキーパッドを生
成
![Page 52: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/52.jpg)
コントローラーの設置(タッチデバイス用)
game.onload = function() {//-------------------省略--------------------//
// バーチャルキーパッドを生成
var pad = new Pad();pad.moveTo(0, 220);
//-------------------省略--------------------//バーチャルキーパッドを配
置
![Page 53: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/53.jpg)
デモ
![Page 54: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/54.jpg)
ゲームを作ってみました!
![Page 55: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/55.jpg)
デモ
![Page 56: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/56.jpg)
なんとかゲームぽいものが出来ました!
![Page 57: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/57.jpg)
まとめ
![Page 58: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/58.jpg)
まとめ
●スタートアップがらくちん
●必要なものがそろっている
●少ないコードでゲームが作れる
●プログラムの学習にも最適
![Page 59: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/59.jpg)
ありがとうございました
![Page 60: enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン](https://reader034.vdocuments.net/reader034/viewer/2022052316/55a05f641a28ab462e8b46a9/html5/thumbnails/60.jpg)
さらに詳しい解説は
●公式サイトのサンプルコード
●code9leap
●ドットインストール
●enchant.js プログラミング入門の資料
● tl.enchant.jsの解説
●JavaScriptベースゲームエンジン徹底比較