Twitter

enchant.jsのお勉強_1

enchant.jsのお勉強_1

PC, Mac, iPhone, iPad, Androidすべてで動作するクロスプラットフォームなアプリケーションが開発可能な、
話題のHTML5 + JavaScriptベースのゲームエンジン「enchant.js」を使ってみました。
勉強用に、書籍「enchant.js スマートフォンゲーム開発講座(amazonリンク)」を購入したので、写経しつつ、カスタムしつつ進めながら学習のログを残していきます。

今回は、一定時間毎にステージ上にキャラクターを生成し、ステージ上をランダムに走り回るキャラクターをタッチ(クリック)すると消える。というタッチゲームの基本となるようなベースを作成します。

カツオ

まず下準備としてキャラクターを作成します。ドットをポチポチ…思いのほか可愛いキャラクターができたので、「カツオ」と名付けました。カツオは歩くアニメーションを一枚のスプライト画像として、透過pngになっています。ここでは、1コマを34px×34pxに設定しています。
この大きさは任意ですが、後に1コマの大きさ(幅、高さ)はプログラム内で使用します。

【html】

<!-- 省略 -->
<script src="./js/jquery-1.7.2.min.js"></script>
<script src="./js/enchant.js"></script>
<script src="./js/script.js"></script>
<!-- 省略 -->

html5で、使用する外部スクリプトファイルが読み込まれていればOKです。enchant.jsは最新版を公式サイトからダウンロード。(使用した公開時の最新バージョンは「enchant.js v0.6-pre」です。)
jQueryも使用する予定なので、ここで読み込んでいます。
cssでブラウザのデフォルト値をリセットしていれば、他に特筆することはないです。bodyタグも空です。

【js】

enchant();

/* 定数 */
// パラメータ
var SCREEN_WIDTH;
var SCREEN_HEIGHT;

var HITO_WIDTH = 34;
var HITO_HEIGHT = 34;

// ステージ
function sizing(){
	SCREEN_WIDTH = $("body").width();
	SCREEN_HEIGHT = $("body").height();
};

/* グローバル変数 */
var game = null;

/* 汎用処理 */
// ランダム値生成
var randfloat = function(min, max) {
	return Math.random()*(max-min)+min;
};

/* メイン処理 */
window.onload = function() {
	// ステージサイズの取得
	sizing();

	// ゲームオブジェクトの生成
	game = new Game(SCREEN_WIDTH, SCREEN_HEIGHT);
	// 画像の読み込み
	game.preload("./img/chara1.png");

	// ゲーム開始時の処理
	game.onload = function() {
		var scene = game.rootScene;
		scene.backgroundColor = "black";

		// シーン更新時の処理
		scene.onenterframe = function() {
			if(game.frame % 30 === 0) {
				// ヒトを生成
				var hito = new Hito();
				hito.x = randfloat(0, SCREEN_WIDTH - HITO_WIDTH)|0;
				hito.y = randfloat(0, SCREEN_HEIGHT - HITO_HEIGHT)|0;
				scene.addChild(hito);
			}
		};
	};

	game.start();
};

/*
 * ラベルを生成する
 */
var createLabel = function(text, x, y, color) {
	// ラベル生成
	var label = new Label(text);
	label.font = "12px 'Consolas', 'Monaco', 'MS ゴシック'";
	label.moveTo(x, y);
	label.color = color;

	// 更新処理
	label.onenterframe = function() {
		this.opacity -= 0.05;
		if (this.opacity <= 0) {
			this.parentNode.removeChild(this);
		}
	};

	return label;
};

/*
 * ヒトクラス
 */
var Hito = Class.create(Sprite, {
	// 初期化処理
	initialize: function() {
		Sprite.call(this, HITO_WIDTH, HITO_HEIGHT);

		var game = Game.instance;
		this.image = game.assets["./img/chara1.png"];
		this.vx = randfloat(-4, 4)|0;
		this.vy = randfloat(-4, 4)|0;
		// X軸の移動値に応じて向きを調整
		if(this.vx < 0) this.scaleX *= -1;
	},
	// 更新処理
	onenterframe: function() {
		this.x += this.vx;
		this.y += this.vy;

		// フレーム調整
		this.frame += 1;
		this.frame %= 4;

		// 画面外に出ないよう調整
		if(this.x < 0) {
			this.x = 0;
			this.vx *= -1;
			this.scaleX *= -1;
		} else if(this.x > SCREEN_WIDTH - HITO_WIDTH) {
			this.x = SCREEN_WIDTH - HITO_WIDTH;
			this.vx *= -1;
			this.scaleX *= -1;
		}

		if(this.y < 0) {
			this.y = 0;
			this.vy *= -1;
		} else if(this.y > SCREEN_HEIGHT - HITO_HEIGHT) {
			this.y = SCREEN_HEIGHT - HITO_HEIGHT;
			this.vy *= -1;
		}
	},
	// タッチ開始処理
	ontouchstart: function() {
		var game = Game.instance;
		// ラベル生成
		var label = createLabel("wow!!", this.x, this.y, "white");
		game.rootScene.addChild(label);
		// 自身を削除
		this.parentNode.removeChild(this);
	}
});

VIEW DEMO


0 Comments»

コメントはまだありません。

このコメント欄の RSS フィード TrackBack URI

コメントをどうぞ »

初めてコメントされる方は管理人の承認が必要となります。承認されるまではコメントは表示されませんのでご了承ください。

CopyRight© 2017 2GRAVITY All Rights Reserved. | powered by WordPress

Page top