enchant.js でクラスを作る、激分かりやすい方法!

公開 :  → 更新 :

こんばんわ、ちょっと海外へ行っておりました@It_is_Rです。

前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではないでしょうか。
では、今回はプレイヤースプライトのクラスを作って、もっとプログラムを見やすく工夫していきたいと思います。

さらにクラスを使うことで、プログラムのバグも減るかもしれない!
部屋が散らかって足の踏み場がないあなたも、部屋を整理する前に、ソースを整理しましょう!

この記事は、ゲームに背景画像を表示する方法!( enchant.js )の続きとなっております。

前回までのおさらい

まずは、前回のソースをおさらいしておきましょう。

前回完成したソースはこちらです

前回までの記事で作ったソースはこちらになります。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.png','apad.png','sky.png','ground.png');
	game.fps = 15;
	game.onload = function() {
		/***空の表示***/
		var sky = new Sprite(320,320);
		sky.image = game.assets['sky.png'];
		sky.x = 0;
		sky.y = 0;
		game.rootScene.addChild(sky);
		
		/***地面の表示***/
		var ground = new Sprite(320,120);
		ground.image = game.assets['ground.png'];
		ground.x = 0;
		ground.y = 200;
		game.rootScene.addChild(ground);
		
		/***プレイヤーの表示***/
		var playerSprite = new Sprite(51,55);
		playerSprite.x = (game.width/2)-(playerSprite.width/2);
		playerSprite.y = (game.height/2)-(playerSprite.height/2);
		playerSprite.image = game.assets['player.png'];
		game.rootScene.addChild(playerSprite);
		
		/***アナログパッドの表示***/
		var pad = new APad();
		pad.x = 20;
		pad.y = 220;
		game.rootScene.addChild(pad);
		
		playerSprite.addEventListener('enterframe', function() {
			var speed = 14;
			this.frame = 1;
			
			/***プレイヤーの移動(キー操作)***/
			if (game.input.left) {
				this.x -= speed;
				this.frame = this.age%2+2;
			} if (game.input.right) {
				this.x += speed;
				this.frame = this.age%2+2;
			} if (game.input.up) {
				this.y -= speed;
				this.frame = this.age%2+2;
			} if (game.input.down) {
				this.y += speed;
				this.frame = this.age%2+2;
			}
			
			/***プレイヤーの移動(アナログパッド操作)***/
			if (pad.isTouched) {
				this.x += pad.vx * speed;
				this.y += pad.vy * speed;
				if (Math.abs(pad.vx) < 0.5) {
					if (this.age%8 < 4) this.frame = 0;
					else this.frame = 1;
				} else this.frame = this.age%2+2;
			}
			
		});
	}
	game.start();
}

テストプレイ画像

ソースの内容

まず空を表示し、地面を表示します。さらにプレイヤーとアナログパッドを表示します。
そして、プレイヤーの移動のプログラムを addEventListener('enterframe', function() {}); の中に記述しました。

では今回はプレイヤーのプログラムの部分をひとまとめにしたいと思います。

プレイヤーのクラスを作ってみる

通常、 javascript では、クラスがありません。しかし、 この enchant.js は、クラスを作ることができるように、うまいことできています。
世渡り上手ですね!

クラスの基本的な作り方

ではでは、上のソースを書き換えていきますぞ! …そーっすか。。。

今回はプレイヤークラスを作りたいので、 var Player = Class.create({}); の中に、命令を書き込むという形で作ります。
また、スプライトを表示させたいので、 Sprite クラスを継承させましょう。

スプライト……おいしそうな名前だ。

継承させるときは、{}の手前に、そのクラス名を書きます。
今回であれば、 var Player = Class.create(Sprite, {}); となります。

クラス内にプレイヤーに関する命令を書いていこう!

次に、その中に関数を作っていきます。

ここで登場するのが、 initialize です。これはコンストラクタと呼ばれる関数で、クラスの初期化などに使われます。
これは、このクラスが呼び出された時、一番最初に一回だけ呼び出す関数です。

initialize:function() {} の中には、スプライトを読み込む大きさや、位置、画像ファイル名を設定し、 rootScene.addChild(); を使って、スプライトをゲームに実際に貼り付けます。

関係ないですが、ファンクションを使っていると、くしゃみが出るんです。「ファンクショーンッ!!」って。

……また、今回の関数では、スプライトをどの位置に表示するのかという引数を受け取りたい(別に取る必要もそうそうないけど……)ので、()の中に、x,yを書いておきます。

実際にソースはこんな感じになります。

var Player = Class.create(Sprite, {
	initialize:function(x,y) {
		Sprite.call(this,51,55);
		this.x = x;
		this.y = y;
		this.image = game.assets['player.png'];
		game.rootScene.addChild(this);
	}
});

クラスを呼び出してみよう!

更に、このクラスを呼び出すための命令を書いていきます。

var playerSprite = new Player(50,200);
こう書くことで、50,200の位置に、プレイヤーのスプライトを置くことができます。

プログラムに組み込もう!

では、実際に今まで作ってきたプログラムに組み込んでみましょう。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.png','apad.png','sky.png','ground.png');
	game.fps = 15;
	game.onload = function() {
		/***空の表示***/
		var sky = new Sprite(320,320);
		sky.image = game.assets['sky.png'];
		sky.x = 0;
		sky.y = 0;
		game.rootScene.addChild(sky);

		/***地面の表示***/
		var ground = new Sprite(320,120);
		ground.image = game.assets['ground.png'];
		ground.x = 0;
		ground.y = 200;
		game.rootScene.addChild(ground);

		/***プレイヤーの表示クラス***/
		var Player = Class.create(Sprite, {
		  initialize:function(x,y) {
		    Sprite.call(this,51,55);
		    this.x = x;
		    this.y = y;
		    this.image = game.assets['player.png'];
		    game.rootScene.addChild(this);
		  }
		});

		/***プレイヤーの表示***/
		var playerSprite = new Player(50,200);

		/***アナログパッドの表示***/
		var pad = new APad();
		pad.x = 20;
		pad.y = 220;
		game.rootScene.addChild(pad);

		playerSprite.addEventListener('enterframe', function() {
			var speed = 14;
			this.frame = 1;

			/***プレイヤーの移動(キー操作)***/
			if (game.input.left) {
				this.x -= speed;
				this.frame = this.age%2+2;
			} if (game.input.right) {
				this.x += speed;
				this.frame = this.age%2+2;
			} if (game.input.up) {
				this.y -= speed;
				this.frame = this.age%2+2;
			} if (game.input.down) {
				this.y += speed;
				this.frame = this.age%2+2;
			}

			/***プレイヤーの移動(アナログパッド操作)***/
			if (pad.isTouched) {
				this.x += pad.vx * speed;
				this.y += pad.vy * speed;
				if (Math.abs(pad.vx) < 0.5) {
					if (this.age%8 < 4) this.frame = 0;
					else this.frame = 1;
				} else this.frame = this.age%2+2;
			}

		});
	}
	game.start();
}

テストプレイ画像

プレイヤーの移動ソースもクラスに組み込む

次は、プレイヤーの移動プログラムを、クラスの中に組み込んでしまいたいと思います。

常に読み込みたい部品は、 onenterframe を使う!

プレイヤーの移動プログラムは、操作されたら動くようにしたい為、毎フレームごとに呼びだすようにします。
そこで使うのが、 onenterframe:function() {} という関数です。

この中に、プレイヤーの移動プログラムを組み込んでいきます。

var Player = Class.create(Sprite, {
	initialize:function(x,y) {
		Sprite.call(this,51,55);
		this.x = x;
		this.y = y;
		this.image = game.assets['player.png'];
		game.rootScene.addChild(this);
	},
	onenterframe:function() {
		var speed = 14;
		this.frame = 1;

		/***プレイヤーの移動(キー操作)***/
		if (game.input.left) {
			this.x -= speed;
			this.frame = this.age%2+2;
		} if (game.input.right) {
			this.x += speed;
			this.frame = this.age%2+2;
		} if (game.input.up) {
			this.y -= speed;
			this.frame = this.age%2+2;
		} if (game.input.down) {
			this.y += speed;
			this.frame = this.age%2+2;
		}

		/***プレイヤーの移動(アナログパッド操作)***/
		if (pad.isTouched) {
			this.x += pad.vx * speed;
			this.y += pad.vy * speed;
			if (Math.abs(pad.vx) < 0.5) {
				if (this.age%8 < 4) this.frame = 0;
				else this.frame = 1;
			} else this.frame = this.age%2+2;
		}
	}
});

onenterframe:function() {} の前に、『,』があることに注意してください。

最後に、ソースの確認

では、最終的に完成したソースを確認してみましょう。

enchant();

window.onload = function() {
	var game = new Game(320,320);
	game.preload('player.png','apad.png','sky.png','ground.png');
	game.fps = 15;
	game.onload = function() {
		/***空の表示***/
		var sky = new Sprite(320,320);
		sky.image = game.assets['sky.png'];
		sky.x = 0;
		sky.y = 0;
		game.rootScene.addChild(sky);

		/***地面の表示***/
		var ground = new Sprite(320,120);
		ground.image = game.assets['ground.png'];
		ground.x = 0;
		ground.y = 200;
		game.rootScene.addChild(ground);

		/***プレイヤーの表示クラス***/
		var Player = Class.create(Sprite, {
		  initialize:function(x,y) {
		    Sprite.call(this,51,55);
		    this.x = x;
		    this.y = y;
		    this.image = game.assets['player.png'];
		    game.rootScene.addChild(this);
		  },
			onenterframe:function() {
				var speed = 14;
				this.frame = 1;

				/***プレイヤーの移動(キー操作)***/
				if (game.input.left) {
					this.x -= speed;
					this.frame = this.age%2+2;
				} if (game.input.right) {
					this.x += speed;
					this.frame = this.age%2+2;
				} if (game.input.up) {
					this.y -= speed;
					this.frame = this.age%2+2;
				} if (game.input.down) {
					this.y += speed;
					this.frame = this.age%2+2;
				}

				/***プレイヤーの移動(アナログパッド操作)***/
				if (pad.isTouched) {
					this.x += pad.vx * speed;
					this.y += pad.vy * speed;
					if (Math.abs(pad.vx) < 0.5) {
						if (this.age%8 < 4) this.frame = 0;
						else this.frame = 1;
					} else this.frame = this.age%2+2;
				}
			}
		});

		/***プレイヤーの表示***/
		var playerSprite = new Player(50,200);

		/***アナログパッドの表示***/
		var pad = new APad();
		pad.x = 20;
		pad.y = 220;
		game.rootScene.addChild(pad);
	}
	game.start();
}

このようになります。

テストプレイ画像

今回はプログラムの書き方を変えただけなので、実行結果になにも変わりはありません!

スポンサードリンク

おすすめの記事♪

enchant.js100行未満!!本格シューティングゲーム作り方。

[email protected]_is_Rです。 さて、今回はenchant.jsのネタです。enchant.jsを使うと、javascriptのプログラムがものすごく簡単に書けてしま

enchant.js

enchant.js でキャラクターのアニメーションを作ってみよう

前回の記事では、キャラが移動する時のアニメーションがありませんでした。 突っ立ったまま進んで行く、まるで幽霊の様な状態です。 これでは、キャラが生きてるのか死んでるのか分からない! というこ

Swift

【Xcode7】Storyboardを使ってMacアプリ開発に挑戦。

[email protected]_is_Rでございます。 現在開発中の人魚のゲームは今ストーリーを練っている所です。まだまだ時間がかかりそうです。 さて、Rは今、Macアプリ開発を勉強中なので

Swift

【Xcode7】Swift2でMacアプリ開発。画像を読み込む為のボタンを作る。

[email protected]_is_Rです。 最近はSwiftの記事が多いと思っている人もいるのでは無いでしょうか。実はRは現在、Swiftを使ってゲーム開発のお助けアプリを

enchant.js

ゲームに背景画像を表示する方法!( enchant.js )

[email protected]_is_Rです。 ゴールデンウィークいかがお過ごしでしょうか。 今回は、 enchant.js を使った横スクロールアクションゲームの背景を表示してみようと思います。 空と

music

新曲をニコニコなどにアップしましたのでご報告。

どんなに歩いても火星にたどり着けません!どれだけ歩けばたどり着けるんですか!@It_is_Rです。 今開発中のゲームのOP曲をつくってみました。久しぶりにUTAUを使っています。ゲームのイメージとか

ゲーム開発で使用する人魚のイラスト描きました。

制作中の人魚のゲームは、Unityを使ったAndroid専用[email protected]_is_Rです。 そんな訳で、いまUnityの使い方を覚えているのですが、まだまだ時間がかかりそう。

Swift

【Xcode7】Swift2でMacアプリ開発。Storyboardでボタンを作る。

喧嘩するほど仲がいいとは言いますが、喧嘩する相手がいません。友達がいないということでしょ[email protected]_is_Rです。 前回、StoryboardでMacのウィンドウに文字を表示しました。しかし、

java

【激分かりやすく!!】javaでじゃんけんゲームプログラム!!

お久しぶりです。 ゲーム制作ページのブログなのに、なんか全然ゲーム制作できてないですね。 今作ってるゲームもちょっと放置プレイ状態だし……。 ちょっと待ったー!誰が放置プレイ状態だとっ!! 

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

宇宙一分かりやすい JavaScript のかなり詳しい基本の解説。

[email protected]_is_Rです。 今回は JavaScript について、初心者の人にも分かりやすく、丁寧に解説していきます。 JavaScript と EcmaSc


コメントを残す

メールアドレスが公開されることはありません。


Category

Games