Facebook にシェア
[`evernote` not found]
LINEで送る

なんでも最近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)の値を追加する(下0、左1、右2、上3)

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オブジェクトは
画像の左上から
0 1 2 3 4 5 
6 7 8 9 ・・・・
と続いているので向きを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(向きの調整)+歩きパターンに設定する。

こんな感じで基本的な機能がクラスですでに作られているので、簡単な追加で色々なことができそうです。
同梱されているサンプルやドキュメントを参考にして、もっと色々と勉強してみたいと思います。