Embed Size (px)
Citation preview
enchant.jsでゲーム制作を
はじめてみよう「パンダの会」バージョン
2012.9.15「パンダの会」 その七
3panda(Ryota Shiroguchi)
私について
●@3panda
●仕事はHTMLとかCSS触ってます。
●プログラムは 苦手です。
●ファミコン世代です。
●パンダが大好きです。
このお話の流れ
●enchant.jsについて
●スタートアップ
●ゲーム的な動きをつくる（デモ＆解説）
●ゲームを作ってみました！
●まとめ
enchant.jsについて
enchant.jsとは
●ゲームエンジン
●HTML5 + JavaScript
●クロスプラットフォーム
●日本製（株式会社ユビキタスエンターテインメントが公開）
enchant.jsの良いところ
●スタートアップが楽ちん
●サンプルが豊富
●ドキュメントが日本語
●公式のプラグインも豊富
スタートアップ
スタートアップ 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>
スタートアップ 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
スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);
//ここで初期化
game.onload = function(){
//ここにゲーム処理を書く
}
game.start();
}
スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);
//ここで初期化
game.onload = function(){
//ここにゲーム処理を書く
}
game.start();
}
enchantのお約束！
JavaScriptのお約束！
スタートアップ game.jsenchant();window.onload=function(){ var game = new Game(320, 320);
//ここで初期化
game.onload = function(){ //ここにゲーム処理を書く
} game.start();}
ゲームをスタート！
ゲーム(オブジェクト)を生成
ゲーム中の処理
ゲーム的な動きをつくる
ゲーム的な動きを作る
●まずはキャラの配置
●キャラを動かす
●ステージを配置する
●当たり判定
●ゲームスタート＆ゲームオーバー
●コントローラーの設置（タッチデバイス用）
まずはキャラの配置
クマさん
まずはキャラの配置 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();
}
まずはキャラの配置 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();
}
フレームレートの設定
画像のプリロード
スプライトの生成
画像の指定
※ルートシーンに追加
デモ
キャラを動かす
クマさん走る
キャラを動かす
//bearの動きの設定 イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME, function() {
//左if (game.input.left) {
this.x -= 3; this.scaleX = -1;
}//・・・省略・・・
});
キャラを動かす
//bearの動きの設定 イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME, function() {
//左if (game.input.left) {
this.x -= 3; this.scaleX = -1;
}//・・・省略・・・
});
キャラにイベントリスナーを追加
キャラを動かす
//bearの動きの設定 イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME, function() {
//左if (game.input.left) {
this.x -= 3; this.scaleX = -1;
}//・・・省略・・・
});
イベントはフレーム毎
デモ
ステージを配置する
ステージを配置する
//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を表示させる
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を表示させる
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(オブジェクト)を生成
配列を呼び出し配置
画像の指定
ステージを配置する
map2.gif
ステージを配置する
生成したオブジェクトのサイズで配列として扱える
ステージを配置する
game.onload = function(){
//---------------省略-------------------//
//rootSceneに追加
game.rootScene.addChild(bear); game.rootScene.addChild(map);
}
game.start();
}
※ルートシーンに追加
※オブジェクトは
シーンに追加する事で表示
デモ
実はクマさんも・・・
chara1.gif
実はクマさんも・・・
「chara1.gif」を切り出して呼び出している
サイズ（32,32）
実はクマさんも・・・
「bear.frame = 番号」
で何番目を表示するか指定する。
デフォルトは0（1番目）
当たり判定
当たった！！！
当たり判定
//星を表示
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;}
当たり判定
//星を表示
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;}
キャラを一つ追加
当たり判定
//星を表示
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()では中心からの距離
デモ
ゲームスタート＆ゲームオーバー
ゲームスタート＆ゲームオーバー
ゲームスタートとゲームオーバーの画像を用意
ゲームスタート＆ゲームオーバー
（注意）HTMLファイルと同じ階層に置きましょう。
ゲームスタート＆ゲームオーバー
ゲームスタートは画像を用意するだけでＯＫ
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を読み込む
ゲームスタート＆ゲームオーバー
//星を表示
var star = new Sprite(16, 16);star.image = game.assets['icon0.gif'];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) {this.frame = 3;game.end();
}
ゲームオーバーの
処理
デモ
コントローラーの設置（タッチデバイス用）
pad.png
コントローラーの設置（タッチデバイス用）
（注意）HTMLファイルと同じ階層に置きましょう。
コントローラーの設置（タッチデバイス用）
<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を読み込む
コントローラーの設置（タッチデバイス用）
コントローラーの設置（タッチデバイス用）
game.onload = function() {//-------------------省略--------------------//
// バーチャルキーパッドを生成
var pad = new Pad();pad.moveTo(0, 220);
//-------------------省略--------------------//
バーチャルキーパッドを生
成
コントローラーの設置（タッチデバイス用）
game.onload = function() {//-------------------省略--------------------//
// バーチャルキーパッドを生成
var pad = new Pad();pad.moveTo(0, 220);
//-------------------省略--------------------//バーチャルキーパッドを配
置
デモ
ゲームを作ってみました！
デモ
なんとかゲームぽいものが出来ました！
まとめ
まとめ
●スタートアップがらくちん
●必要なものがそろっている
●少ないコードでゲームが作れる
●プログラムの学習にも最適
ありがとうございました
さらに詳しい解説は
●公式サイトのサンプルコード
●code9leap
●ドットインストール
●enchant.js プログラミング入門の資料
● tl.enchant.jsの解説
●JavaScriptベースゲームエンジン徹底比較
