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');
	game.fps = 15;
	game.onload = function() {
		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();
}

テストプレイ画像

ソースの内容を大まかに

前回までに作ったプログラムは大まかに、

①キャラクターの表示
②キーボードによるキャラクターの移動
③アナログパッドによるキャラクターの移動
④キャラクターのアニメーション

の4つです。

では、背景画像を表示してみましょう。

背景画像を表示する

背景画像を表示したいのですが、その前に表示する背景画像を用意しなくてはなりません。

表示する背景画像を用意する

今回は空画像と、地面の画像を用意しました。

こちらが空画像となります。

空画像

こちらが地面の画像となります。

地面画像

地面が見方によって違う物に見えるとか言わない約束で。

背景画像を表示するプログラム

それでは、このプログラムに背景を表示するプログラムを追加していきます。

まずは、画像を読み込むので、
game.preload('player.png','apad.png');
を変更し、
game.preload('player.png','apad.png','sky.png','ground.png');
とします。

次に、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);

まぁ、はっきり言ってキャラクターのスプライトを表示した時と同じですね。
背景のスプライトを表示するわけです。

また、背景画像の横幅の値は、画面のサイズに合わせました。
表示する画像のサイズはもっと大きかったり、小さかったりするのですが、ここで大きさを指定しておけば、小さい画像も繰り返し表示され、ぴったりサイズになってしまうのです。
ありがたき機能。

全体のソースを確認する

では、今回作った全体のソースを確認しておきましょう。

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

と、こんな感じになります。

テストプレイ

スポンサードリンク

関連コンテンツ

オススメ記事

Ameba customize

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

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

WordMove | 運用中の WordPress 環境をローカルと FTP で同期

道が覚えられない、@It_is_Rです。 人生さえ彷徨い続けてここにいます。 さて、運用中の WordPress サイトの環境を、ローカル開発環境と同期したい時、 WordMove を使うとと

HTML CSS

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

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

enchant.js

HTML5 と javascript ( enchant.js )を使ったアクションゲーム開発。

以前、Flashを使って、横スクロールアクションゲームを作ろうとしていたのですが、実はAndroid4.xではFlashPlayerがサポートされておらず、最近のAndroidではFlashPlaye

WordPress

WordPressカスタマイズ。テンプレートのファイル構成をチェック。

二兎を追う者は一兎をも得ず。でも、三兎を追えばそのうちの一兎ぐらい得られるんじゃ無いかと思い、その努力の割に何も得られないのが@It_is_Rです。やかましいわ。 今回の記事は初のWordPre

オブジェクトを使ってみよう!

小学生からのJavaScript入門。オブジェクトを使ってみよう!

小学生からのプログラミング入門講座(にゅうもんこうざ)、第9弾です。 前回の講座(こうざ)では、HTMLやCSS、JavaScriptを分けて管理(かんり)する方法を紹介しました。 今回はオブ

.zshrc で zsh をカスタマイズしてみよう。(プラグイン無し)

昔、車に幽霊が乗っていたので、じっと目を凝らして見ていたら、ただの人だったことがあります。@It_is_Rです。 あの時は気まずかった。。。女性の方でした。 さて、今回はターミナルをかっこよく

FC2 blog customize

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

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

Dockerでよく使うコマンドとオプション、その使い方を徹底解説!

人生に意味は求めない。それよりもDockerのコマンドの意味を理解する方が重要です。@It_is_Rです。 Dockerにはたくさんのコマンドがありますが、まずはよく使うコマンドを覚えていきまし

HTML5とCanvasを使うべ!

小学生からのJavaScript。HTML5とCanvasを使ってみよう!

小学生からのプログラミング講座(こうざ)、第12弾です。 これまでの講座(こうざ)では、JavScriptの基本(きほん)について学び、キャラクターの操作(そうさ)ができるようになりました。

コメントをどうぞ!

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




オリジナルゲーム.com