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

このようになります。

テストプレイ画像

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

スポンサードリンク

おすすめの記事♪

Android Studio |アプリ開発の基本とそれぞれのファイルの役割を覚える。

iPhone持ってないみなさん、一緒にAndroidアプリ開発[email protected]_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

Android Studio|開発したアプリの実機テストを行う方法。

[email protected]_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

music

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

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

Swift

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

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

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

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

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

Android アプリ開発入門! Android Studio のインストール手順。

人の笑顔が大嫌い。 @It_is_R です。 Android アプリ開発では、 Eclipse や Android Studio を使ってアプリを開発するのが一般的です。 一般的に言語は Ja

java

【Java】スーパクラス、サブクラスとは?継承について。

猿も木から落ちますが、Rは木から落ちません。だって登らないから。 @It_is_R です。いや、登ろうと思っても登れません。 Javaを使っていると継承という言葉をよく耳にしますよね。どういうも

Android Studio でエミュレータを起動してプログラムを実行する方法!

[email protected]_is_Rです。 このままでは人生さえも長続きしないかも知れない。 さて、しばらくぶりになってしまいましたが、今回は Android Studio 2.3.2 を

フリー(無料)ブラウザゲーム、Snipe at Monsters公開しました。

[email protected]_is_Rです。 そのタイトルも、Snipe at Monsters、略してSMでございます。 さて、そんな略称で良いのかとも思った訳ですが、…じゃあSA

enchant.jsのロード画面を、好きな画像に変更する方法。

[email protected]_is_Rです。 enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないで


コメントをどうぞ!

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




Category

Games