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();
}

このようになります。

テストプレイ

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

スポンサードリンク

コメントをどうぞ!

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




オススメ記事

bootstrap3

Bootstrap3でサイト制作するための、準備と初期設定。

ゲーム制作は順調にすすんでいます。このまま順調にいけば、今月か来月までには完成できそうです。@It_is_Rです。 さて、今回はBootstrap3によるサイト制作の入門講座です。 このBoo

Swift

【Xcode7】Swift2使ってみた。playgroundで遊びながら覚える。

最近は押入れの中で寝るのが日課の@It_is_Rです。 押入れは寝心地がいいです。部屋も押入れ分だけ広くなるし。 SwiftはAppleが出しているプログラミング言語です。Swiftを使うこと

【Android Studio】Button(ボタン)を作る基本中の基本。

ボタンを作る基本中の基本ですが、ボタンを作ること自体が基本中の基本です。@It_is_Rです。 タイトルなんてどうだっていいんです。肝心のなのは真心です。 Androidアプリ開発、7回目とな

KSSでスタイルガイドを作る方法。インストールと使い方。

そのうちWordPressのテーマを作る方法の解説とかしたいなーと思っている@It_is_Rです。 いま準備中ですので、もうちょっとお待ちくださいねー。 そして今回ですが、KSSを使ったスタイ

Yarn

Yarn の使い方。インストールの方法から使い方まで解説します。

最近ドラクエにはまっている@It_is_Rです。PS1 のやつです。ドラクエⅦ。 関係ない話はさておき、今回は Yarn の使い方を解説していきたいと思います。 Yarn とは

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。ヘッダーをカスタマイズ。

寒くなってきましたね。皆さま前かがみになって、まるで亀の様です。@It_is_Rです。 皆様がブログを見て、一番最初に目に入ってくるのはどこでしょうか? 殆どの場合、ヘッダー部分ですよね。つま

【 Bootstrap 4 】全体的な機能の解説と、Alert の使い方。

頭がお花畑の@It_is_Rです。 今回からは Bootstrap 4 の使い方について、詳しく書いていこうと思います。 このシリーズの、前回の記事はこちらです。 Bootstrap 4 を

enchant.js

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

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

WordPress|特定カテゴリーに属する記事を一覧表示させる方法!!

今まで、何度かに分けて書いた記事でも、その一覧がなかったので見にくいなーと思っていた@It_is_Rです。 昨日、記事の一覧表示をするショートコードを作って、記事の一覧が欲しい記事にだけ貼り付けてみ

【CSS設計】ボタンを作って覚える。機能ごとに分けて作る重要性。

手が回らない、頭が回らない、口が回らない。@It_is_Rです。 CSSはある程度大雑把に書いても動かすことができます。しかし、CSSを覚える上で一番難しい部分と言えばCSS設計でしょう。 パ