enchant.jsでゲーム制作をはじめてみよう

enchant.jsでゲーム制作を
はじめてみよう

2012.7.21
第5回 HTML5など勉強会

Ryota Shiroguchi

私について
● @3panda

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

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

● 「パンダの会」の主催　次回は9/15（土）!!

● パンダが大好きです。

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>
<script type="text/javascript" src="enchant.js"></script>
<script type="text/javascript" src="game.js"></script>
<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 ]
]; 画像の指定

配列を呼び出し配置



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

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

当たり判定
//星を表示
var star = new Sprite(16, 16);
star.image = game.assets['icon0.gif'];

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

//星との当たり判定
if(this.within(star, 15)) {
label.text = '当たった！';
this.frame = 3;
}

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

//星を表示

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

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

当たり判定
//星を表示

//-------------------省略--------------------//
当たり判定の処理
if(this.within(star, 15)) { intersect,またはwithin
label.text = '当たった！'; メソッドを利用。
this.frame = 3;
}

プラグイン
● ui.enchant.js

● nineleap.enchant.js

ui.enchant.js
● ゲームパッド

● アナログパッド

● ボタン

nineleap.enchant.js
● ゲームスタート画面

● ゲームオーバー画面

● ただしあくまで簡易

なんとかゲーム
を作れました
ぽいもの

その他プラグイン（サンプル紹介）
● tl.enchant.js（アニメーション）

● gl.enchant.js（Web GL）

● widget.enchant.js(インターフェイス)※
※現在未発表の為、サンプルはありません

さらに詳しい解説は
● 公式サイトのサンプルコード

● code9leap

● ドットインストール

● enchant.js プログラミング入門の資料

● tl.enchant.jsの解説

まとめ
● やっぱり簡単

● プログラムの勉強にも

● ゲーム開発の需要の予感も

まとめ
● やっぱり簡単

● プログラムの勉強にも

● ゲーム開発の需要の予感も

・・・でも結局のところ言いたい事は

ゲームをつくるのはおもしろいｗ

ありがとうございました

enchant.jsでゲーム制作をはじめてみよう

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (19)

Ähnlich wie enchant.jsでゲーム制作をはじめてみよう

Ähnlich wie enchant.jsでゲーム制作をはじめてみよう (20)

enchant.jsでゲーム制作をはじめてみよう