More Related Content Similar to -入門- enchant.js でゲームを作ろう Similar to -入門- enchant.js でゲームを作ろう (20) 4. enchant.js http://enchantjs.com
HTML5 + JS ベースのゲーム開発ライブラリ
オープンソース（MIT ライセンス）
4/21
5. enchant.js なら ...
ブラウザ + エディタだけで開発できる
Win/Mac・iOS/Android 対応
Firefox・Chrome・Safari・IE9 ～ etc... 対応
豊富なプラグイン
5/21
7. - 解説 1 -
enchant.js の使い方
7/21
8. まずは読み込み
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> テストゲーム </title>
</head>
<body>
<div id="enchant-stage"></div>
<script src="enchant.js"></script>
<script src="test.game.js"></script>
</body> 新規作成
</html>
8/21
10. ステージに何かを表示する
enchant();
window.onload = function(){
var game = new Game(320, 320);
game.preload('chara1.png');// ゲームで使う素材を読み込む
game.onload = function(){
var kuma = new Sprite(32,32);
kuma.image = game.assets['chara1.png'];
game.rootScene.addChild(kuma);// クマを配置
}
game.start();
}
10/21
12. - 解説 2 -
enchant.js の特徴の一つ
“クラス定義と継承”
12/21
13. JS でのクラス定義と継承
Kuma = function(){ プロトタイプベース
}
Kuma.prototype.gaooo = function(){
alert(" ガオオオ！ ");
}
Higma = function(){
}
Higma.prototype = new Kuma(); ← 継承！
var higma = new Higma();
higma.gaooo();
13/21
14. enchant.js でのクラス定義と継承
Kuma = Class.create({ クラスベースっぽく
initialize: function(){
}, 書ける！
gaooo: function(){
alert(" ガオオオ！ ");
}
});
Higma = Class.create(Kuma,{ ← 継承！
initialize:function(){
}
});
var higma = new Higma();
higma.gaooo();
14/21
16. enchant.js の後に読み込んで使う
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> テストゲーム </title>
</head>
<body>
<div id="enchant-stage"></div>
<script src="enchant.js"></script>
<script src="ui.enchant.js"></script>
<script src="test.game.js"></script>
</body>
</html>
16/21
21. - おしまい -
- 入門 - enchant.js でゲームを作ろう
by nico（@nico0927）
21/21
