Mais conteúdo relacionado
Semelhante a enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン (20)
enchant.jsでゲーム制作をはじめてみよう 「パンダの会」バージョン
- 1. enchant.jsでゲーム制作を
はじめてみよう
「パンダの会」バージョン
2012.9.15
「パンダの会」 その七
3panda(Ryota Shiroguchi)
- 8. スタートアップ 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>
- 9. スタートアップ 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
- 11. スタートアップ game.js
enchantのお約束！
enchant();
JavaScriptのお約束！
window.onload=function(){
var game = new Game(320, 320);
//ここで初期化
game.onload = function(){
//ここにゲーム処理を書く
}
game.start();
}
- 12. スタートアップ game.js
ゲーム(オブジェクト)を生成
enchant();
window.onload=function(){
var game = new Game(320, 320);
//ここで初期化
game.onload = function(){
//ここにゲーム処理を書く ゲーム中の処理
}
game.start();
}
ゲームをスタート！
- 16. まずはキャラの配置 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();
}
- 17. まずはキャラの配置 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();
※ルートシーンに追加
}
- 21. キャラを動かす キャラにイベントリスナーを追加
//bearの動きの設定 イベントはフレーム毎
bear.addEventListener(Event.ENTER_FRAME,
function() {
//左
if (game.input.left) {
this.x -= 3;
this.scaleX = -1;
}
//・・・省略・・・
});
- 25. ステージを配置する
//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);
- 26. ステージを配置する 配列で表示する画像を管
理
//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);
- 27. ステージを配置する
//MAPを表示させる
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 ]
]; 画像の指定
var map = new Map(16, 16);
map.image = game.assets["map2.gif"];
map.loadData(blocks);
配列を呼び出し配置
- 30. ステージを配置する
game.onload = function(){
//---------------省略-------------------//
//rootSceneに追加
game.rootScene.addChild(bear);
game.rootScene.addChild(map);
}
※ルートシーンに追加
game.start();
} ※オブジェクトは
シーンに追加する事で表示
- 33. 実はクマさんも・・・
サイズ（32,32）
「chara1.gif」を切り出して
呼び出している
- 34. 実はクマさんも・・・
デフォルトは0（1番目）
「bear.frame = 番号」
で何番目を表示するか指定する。
- 36. 当たり判定
//星を表示
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;
}
- 37. 当たり判定 キャラを一つ追加
//星を表示
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;
}
- 38. 当たり判定
//星を表示
var star = new Sprite(16, 16);
star.image = game.assets['icon0.gif']; 当たり判定の処理
star.frame = [30]; intersect,またはwithin
メソッドを利用。※
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) { ※補足
label.text = '当たった！'; ・intersec()では矩形同士の距離
・within()では中心からの距離
this.frame = 3;
}
- 45. ゲームスタート＆ゲームオーバー
//星を表示
var star = new Sprite(16, 16);
star.image = game.assets['icon0.gif'];
//-------------------省略--------------------//
//星との当たり判定
if(this.within(star, 15)) { ゲームオーバーの
this.frame = 3; 処理
game.end();
}
