enchant.jsを使用したゲーム製作
Kotaro Sakai
2014.08.20
~enchant.jsの紹介~
アジェンダ
製作したゲームの紹介
【ジャンル】
戦闘シミュレーションゲーム
(ターン制ストラテジー)
【代表的なゲーム】
『ファイアーエムブレム 覚醒(3DS)』
【特徴】
味方・敵ユニットの豊富さ、アイテムの付加要素(レベルや使用回数等)、フィールドの複雑さ etc...
これらはすべて『戦術(タクティクス)』に幅を持たせるために存在する
出来が良ければコアなファンがつくためシリーズ化しやすい・・・かも
これらはすべて『戦術(タクティクス)』に幅を持たせるために存在する
出来が良ければコアなファンがつくためシリーズ化しやすい・・・かも
enchant.jsの基本的な使い方
enchant.js は HTML5 + JavaScript ベースのゲームエンジンです。
PC, Mac, iPhone, iPad, Android すべてで動作する クロスプラットフォームなアプリケーションを開発可能なスタンドアロンライブラリです。
(公式サイトより引用)
次のページから実際のコードを見ながら使い方を説明していきます
次のページから実際のコードを見ながら使い方を説明していきます
全体のおおまかな構成(1)
enchant(); // おまじない
// 固有のクラス定義
var Player = Class.create(Sprite, {
// コンストラクター
initialize: function(x, y) {
(中略)
},
// イベントやメソッド
onenterframe: function() {
(中略)
}
});
- オブジェクト毎に固有のクラスを定義することでパラメーターのみ異なるインスタンスを複数作成可能になる
- イベントではそのインスタンスが毎フレーム実行される処理を、メソッドでは移動や攻撃などのインスタンス固有な処理を実装する
全体のおおまかな構成(2)
// ゲーム全体の設定
window.onload = function() {
game = new Game(320, 320);
game.onload = function() {
// インスタンス作成(抜粋)
player = new Player(0, 0);
enemy = [new Enemy(32, 64), new Enemy(96, 32)];
// 画面に表示
game.rootScene.addChild(player);
}
game.start();
});
- 作成したGameインスタンス内で画面上に表示するすべての要素を作成する(必ず「グローバル変数」として宣言→次頁参照)
- 作成したインスタンスをGameインスタンスの「シーン」に追加することで画面上に表示する(後から追加したものがより上位のレイヤーになる)
変数を宣言するときの注意点
必ず「グローバル変数」として宣言する!
// 固有のクラス定義
var Player = Class.create(Sprite, {
initialize: function(x, y) {
game.rootScene.addChild(this);
}
});
// ゲーム全体の設定
window.onload = function() {
var game = new Game(320, 320); // ローカル変数として宣言
game.onload = function() {
// オブジェクト作成
player = new Player(0, 0);
}
});
4行目で呼び出しているgame変数は無名関数のローカル変数として宣言されているため参照エラーになる
game変数だけじゃなく変数(添字専用は除く)はすべて初めからグローバル変数として宣言しておいたほうがいい
game変数だけじゃなく変数(添字専用は除く)はすべて初めからグローバル変数として宣言しておいたほうがいい
enchant.jsを使ってみた感想
良い点
- 開発環境構築不要(enchant.jsのダウンロードのみ)
- 素材(キャラチップ等)はツクール用のものが使用可能=ツクール並に充実!
- 知名度が比較的高いためプラグインやTipsが豊富にある
- 作れるものは所詮ミニゲーム
まとめ
- enchant.jsは初めて自分でコードを書いてゲームを作るときやちょっとしたゲームを作るときには最適。
- 今回は試しに戦闘シミュレーションもどきを作ったが、基本的にどんなジャンルのゲームも作れそうだと思った。
以上
enchant.jsを使用したゲーム制作
By Jane Doe
enchant.jsを使用したゲーム制作
- 1,546