1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. enchant.js でクラスを作る、激分かりやすい方法!

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

このようになります。

テストプレイ

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

スポンサードリンク

関連コンテンツ

オススメ記事

【Bootstrap 4】ボタングループ使い方。ボタンの一まとめにする方法

Bootstrap4の使い方、第6回目です。 前回、Bootstrap4でのボタンの作り方を紹介しましたが、今回はそのボタンをグループにしてひとまとめにする方法です。 Bootstrapにはボ

【Gitの使い方 – その2】GitをMacにインストールする方法!

いらないファイルは残っているのに、欲しいファイルに限って見つからない@It_is_Rです。 Gitの使い方、第2回目の今回はGitをMacにインストールする方法を紹介します。

Swift

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

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

クイックタグ

【WordPress】クイックタグを編集し効率よく記事を書こう!

WordPressで記事を投稿するとき、クイックタグを使うと便利です。 デフォルトで用意されているクイックタグもありますが、それだけでは少々不便なところもあります。 今回は効率よく記事を書くた

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

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

wordpress

【WordPress】パンくずリストをプラグイン無しで自作する方法

※追記(2018/2/12) もっと高機能になるように、改良修正しました。 人生で3回ほど死にそうになったことがある@It_is_Rです。 WordPressのパンくずリストを作

Ameba customize

アメーバのOwndで、無料で超簡単にホームページ作ってやろうぜ!!

どうも、@It_is_Rです。 ホームページを作成するには、まずHTMLを使う能力、若しくはソフトが必要になります。 さらにサーバーを借りなくてはなりません。するとお金がかかったりします。 では

HTML CSS

CSSで文字を、円の上下左右中央ド真ん中に表示する方法。

体重が50キロを切りました。@It_is_Rです。身長は171あります。 骨っていうなー! サイトを作る時、円形のパーツを作りたい時ってよくありますよね。画像を丸くして。。。なんてやっている人

Yarn

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

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

Swift

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

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

コメントをどうぞ!

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