enchant.jsでゲーム制作をはじめてみよう「パンダの会」バージョン

enchant.jsでゲーム制作を
はじめてみよう
「パンダの会」バージョン

2012.9.15
「パンダの会」その七

3panda(Ryota Shiroguchi)

私について
● @3panda

● 仕事はHTMLとかCSS触ってます。

● プログラムは苦手です。

● ファミコン世代です。

● パンダが大好きです。

このお話の流れ

● 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> enchant.js を読み込む
<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>
<style type="text/css">
body {
margin: 0;
}
</style> 実行用jsファイルを読み込む。 ※
</head>
<body> HTMLに直接記述も可能。
</body>
</html> ※今回はgame.jsとしていますが何でもOK

スタートアップ　game.js
enchant();
window.onload=function(){
　var game = new Game(320, 320);
　　　//ここで初期化
　game.onload = function(){
　　　//ここにゲーム処理を書く
　}
　game.start();
}

enchantのお約束！
enchant();
JavaScriptのお約束！
　　　//ここにゲーム処理を書く
　}
　game.start();
}

ゲーム(オブジェクト)を生成
enchant();
　　　//ここにゲーム処理を書くゲーム中の処理
　}
　game.start();
}
ゲームをスタート！

ゲーム的な動きをつくる

ゲーム的な動きを作る

● まずはキャラの配置
● キャラを動かす
● ステージを配置する
● 当たり判定
● ゲームスタート＆ゲームオーバー
● コントローラーの設置（タッチデバイス用）

まずはキャラの配置　

クマさん

まずはキャラの配置　game.js
var 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.js
フレームレートの設定
var 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'];
game.rootScene.addChild(bear); 画像の指定
　}
　game.start();
※ルートシーンに追加
}

キャラを動かす

クマさん走る


//bearの動きの設定　イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME,
function() {
//左
if (game.input.left) {
this.x -= 3;
this.scaleX = -1;
}
//・・・省略・・・
});

キャラを動かすキャラにイベントリスナーを追加

function() {
//左
this.x -= 3;
this.scaleX = -1;
}
//・・・省略・・・
});


function() {
//左
イベントはフレーム毎
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);

ステージを配置する配列で表示する画像を管
理
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 blocks = [
[ -1, -1,//省略// -1, -1, -1, -1 ],
////////////////省略/////////////////////
Map(オブジェクト)を生成
[ 0, 0, 0, 0,//省略// 0, 0, 0, 0 ],
[ 1, 1, 1, 1,//省略// 1, 1, 1, 1 ]
]; 画像の指定

配列を呼び出し配置


map2.gif


生成したオブジェクトのサイズで
配列として扱える



//---------------省略-------------------//

game.rootScene.addChild(bear);
game.rootScene.addChild(map);
　}
※ルートシーンに追加
　game.start();
} ※オブジェクトは
シーンに追加する事で表示

実はクマさんも・・・

chara1.gif

サイズ（32,32）

「chara1.gif」を切り出して
呼び出している

デフォルトは0（1番目）

「bear.frame =　番号」
で何番目を表示するか指定する。

当たり判定

当たった！！！

当たり判定
//星を表示
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;
}

当たり判定キャラを一つ追加

//星を表示
star.frame = [30];

//-------------------省略--------------------//

if(this.within(star, 15)) {
label.text = '当たった！';
this.frame = 3;
}

当たり判定
//星を表示
star.image = game.assets['icon0.gif']; 当たり判定の処理
star.frame = [30]; intersect,またはwithin
メソッドを利用。※
//-------------------省略--------------------//

if(this.within(star, 15)) { ※補足
label.text = '当たった！'; ・intersec()では矩形同士の距離
・within()では中心からの距離
this.frame = 3;
}

ゲームスタート＆ゲームオーバー


ゲームスタートとゲームオーバーの
画像を用意


（注意）HTMLファイルと同じ階層に
置きましょう。


ゲームスタートは画像を
用意するだけでＯＫ

ゲームスタート＆ゲームオーバー　HTML

<html>
//-------------------省略--------------------//
<head>
<script type="text/javascript" src="nineleap.enchant.js"></script>
//-------------------省略--------------------//
</html>

nineleap.enchant.jsを読み込む


//星を表示

//-------------------省略--------------------//

if(this.within(star, 15)) { ゲームオーバーの
this.frame = 3; 処理
game.end();
}

コントローラーの設置（タッチデバイス用）


pad.png


（注意）HTMLファイルと同じ階層に
置きましょう。


<html>
//-------------------省略--------------------//
<head>
<script type="text/javascript" src="ui.enchant.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ベースゲームエンジン徹底比較

enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン

More Related Content

What's hot

Similar to enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン