ゲームが簡単に作れるスクリプトenchant.js
なんでも最近enchant.jsという、html5とjavascriptで簡単にゲームが作れて、しかも
スマートフォンでも動作する面白そうなゲームエンジンがあるというので早速ダウンロードして色々試してみました。
思ったより簡単に色々できそうだったのでちょっと紹介します。
・ダウンロード
ダウンロードは下記のサイトからダウンロードできます。
【ダウンロード】
・解凍する。解凍すると色々なファイルが出てきます。その中で使うのはenchant.jsだけです。
とりあえずactionフォルダに入っているindex.htmlとenchant.js、imagesフォルダに入っているchara0.gifを
新しいフォルダtestを作成して、その中にコピーしましょう。
・index.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>
単純にenchant.jsとgame.jsを読み込んでいるだけです。
基本的にこの形が標準のフレームとなるのでコピーしておくと便利です。
・game.jsの作成。
さて、プログラム事態はgame.jsというファイルを作成してその中に書きます。
・簡単サンプル、キャラクターを表示する。
キャラクターを表示するだけです。動かすこともできませんがこれが基本の形になります。
enchant();
window.onload = function() {
var game = new Game(320, 320);
game.preload('chara0.gif');
game.onload = function() {
var player = new Sprite(16, 24);
player.image = game.assets['chara0.gif'];
game.rootScene.addChild(player);
}
game.start();
}
説明
enchant();
グローバルにライブラリのクラスをエクスポートする。初期設定
window.onload = function(){}
ウインドウが表示されたときの処理。この中にゲームの関数を記述する。
var game = new Game(320, 320);
画面領域が320*320のgameオブジェクトを作成する。
game.preload(‘chara0.gif’);
ゲームに必要なデータ（この場合はchra0.gif)をプリロードする。
game.onload = function(){}
ゲームがスタートしたときの処理
var player = new Sprite(16, 24);
新しく16*24サイズのSpriteオブジェクトを作成する。
player.image = game.assets[‘chara0.gif’];
paayerオブジェクトの画像にchara0.gifをセットする。
game.rootScene.addChild(player)
gameオブジェクトのルートSceneにプレイヤーオブジェクトを配置する。
game.start();
ゲームを開始する。
・キャラクターを動かす。
ではキャラクターを動かしてみましょう
enchant();
window.onload = function() {
var game = new Game(320, 320);
game.preload('chara0.gif');
game.onload = function() {
var player = new Sprite(16, 24);
player.image = game.assets['chara0.gif'];
game.rootScene.addChild(player);
player.direction = 0;
player.addEventListener('enterframe', function(e) {
if (game.input.left){this.x -= 1.0;this.direction = 1;}
if (game.input.right){this.x += 1.0;this.direction = 2;}
if (game.input.up) {this.y -= 1.0;this.direction = 3;}
if (game.input.down){ this.y += 1.0;this.direction = 0;}
this.frame = this.direction*6;
});
}
game.start();
}
説明
player.direction = 0;
playerオブジェクトに向き(direction)の値を追加する（下０、左１、右２、上３）
player.addEventListener(‘enterframe’, function(e) {}
playerオブジェクトにイベントを追加する。開始パターンは毎フレーム
if (game.input.left){this.x -= 1.0;this.direction = 1;}
if (game.input.right){this.x += 1.0;this.direction = 2;}
if (game.input.up) {this.y -= 1.0;this.direction = 3;}
if (game.input.down){ this.y += 1.0;this.direction = 0;}
各キーが押されたときに、オブジェクトのXY座標を変更して、対応する向きを代入する。
this.frame = this.direction*6;
playerオブジェクトの表示するフレームを変更する。playerオブジェクトは
画像の左上から
０ １ ２ ３ ４ ５
６ ７ ８ ９ ・・・・
と続いているので向きを6倍した数字がその向きの画像の初期値になる。
・キャラクターをアニメーションする。
更にキャラクターにアニメーションを追加してみましょう。
enchant();
window.onload = function() {
var game = new Game(320, 320);
game.preload('chara0.gif');
game.onload = function() {
var player = new Sprite(16, 24);
player.image = game.assets['chara0.gif'];
game.rootScene.addChild(player);
player.direction = 0;
player.walk=0;
player.addEventListener('enterframe', function(e) {
if (game.input.left){this.x -= 1.0;this.direction = 1;}
if (game.input.right){this.x += 1.0;this.direction = 2;}
if (game.input.up) {this.y -= 1.0;this.direction = 3;}
if (game.input.down){ this.y += 1.0;this.direction = 0;}
if (!(game.frame % 5)){this.walk++;}
if(this.walk == 3){this.walk = 0;}
this.frame = this.direction*6 + this.walk;
});
}
game.start();
}
説明
player.walk=0;
playerオブジェクトに歩きパターンを設定する。
if (!(game.frame % 5)){this.walk++;}
ゲームの開始時からのフレームが5で割り切れるとき（5フレーム毎に)歩きパターンを変更する。
gameオブジェクトのフレームと、playerオブジェクトのフレームは役割が違うので注意。
if(this.walk == 3){this.walk = 0;}
歩きパターンが3の時歩きパターンを0にする。歩きパターンは今回の画像だと
下1-1 下1-2 下1-3 下2-1 下2-2 下2-3
左1-1 左1-2 左1-3 左2-1 左2-2 左2-3
のように配置されているので各3パターンを繰り返す。
this.frame = this.direction*6 + this.walk;
playerのフレームを向き*6（向きの調整）＋歩きパターンに設定する。
こんな感じで基本的な機能がクラスですでに作られているので、簡単な追加で色々なことができそうです。
同梱されているサンプルやドキュメントを参考にして、もっと色々と勉強してみたいと思います。
[…] ゴーゴーウェブマーケット技術BLOG ゲームが簡単に作れるスクリプトenchant…. nakamura001 @ ウィキ – […]