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

公開 :

今日は爆睡していました。@It_is_Rです。

enchant.jsのロード画面はカッコわるいなとずっと思っていました。「あ、これenchant.jsで作ったんだな」って思われてしまうじゃないですか!別に良いんですけど。
これを変更したいと思うのは、Rだけではないはず。。。

実は、あのロード画面を変更する方法があるのを知っていますか?
今回はそのロード画面を変更する方法を、丁寧に解説していきたいと思います。

そのロード画面というのがこちらですね。
見るだけで、早くしろよと言いたくなります。これは画像ですよ、待ってても何も始まりません。
enchant.js

enchant.js、基本のプログラム。

enchant.jsで開発している場合、基本的なプログラムは以下の様になっていると思います。かなり省略していますが。。。

var ASSETS = [
	/*使用する画像やサウンドなど。*/
];

window.onload = function() {
	game = new Core(320,320);
	game.preload(ASSETS);
	game.fps = 23;

	game.onload = function() {
		/*ゲームの内容*/
	};
	game.start();
};

では、このプログラムを使って、ロード画面を画像に変更してみたいと思います。

enchant.jsのロード画面を画像に変更する。

では、早速画像に変更してみましょう。

ロード画面のシーンを作成する。

ロード画面を作る時は、まずロード画面のシーンを作成します。

var loadScene = new Scene();
と記述することで、loadSceneというシーンが作成されます。

シーンを作成したら、そのシーンでどのようにしたいかを、addEventListenerを使って作っていきます。

loadScene.addEventListener(‘progress’, function(e) {
});

を作って、この中に記述していきましょう。

使用する画像を用意します。

では、使用する画像を用意します。今回は単なる解説なので、かなりテキトーにマウスで描いた画像です。
文字は、プログラムで作ってもよかったのですが、今回は画像に直接書きました。この画像は大きいですが、実際に使ったのは320*320の大きさになおしています。
enchant.js

画像をロード画面に表示する

この画像をロード画面に表示してみましょう。以下のソースをaddEventListener内に書き込みます。

var loadImg = new Sprite(320,320);
loadImg.image = game.assets['画像ファイル'];
loadScene.addChild(loadImg);

更に、この画像ファイルをあらかじめ読み込んでおきたいので、addEventListenerの前に、game.preload(‘画像ファイル’);を記述します。

最後に、game.loadingSceneの中にloadSceneを入れてやります。つまり、元々のロード画面に上書きしてあげるわけです。

game.loadingScene = loadScene;

これで、画像を表示させることができます。

enchant.js

しかし、これではどれだけ待ってもロード画面からゲームへと切り替わりません!
そこで、以下のプログラムを追加します。

loadScene.addEventListener('load', function(e) {
	var core = enchant.Core.instance;
	core.removeScene(core.loadingScene);
	core.dispatchEvent(e);
});

これまでの、全体のコードはこうなりました。

var ASSETS = [
	/*使用する画像やサウンドなど。*/
];

window.onload = function() {
	game = new Core(320,320);

	var loadScene = new Scene();	
	game.loadingScene = loadScene;

	game.preload('画像ファイル');
	loadScene.addEventListener('progress', function(e) {
		var loadImg = new Sprite(320,320);
		loadImg.image = game.assets['画像ファイル'];
		loadScene.addChild(loadImg);
	});
	loadScene.addEventListener('load', function(e) {
		var core = enchant.Core.instance;
		core.removeScene(core.loadingScene);
		core.dispatchEvent(e);
	});

	game.preload(ASSETS);
	game.fps = 23;

	game.onload = function() {
		/*ゲームの内容*/
	};
	game.start();
};

このように、好きな画像に変更してあげれば、カッコいいロード画面が作れる訳です。

ロードの状況を表示する。

でも、ただ画像を表示するだけでは、ゲームをプレイする人が、ほんとに読み込まれてるのかよと不安になります。
そこで、ロードの状況も表示してみましょう。

以下のコードは、ロードの状況を変数に代入する為の命令です。

var progress = e.loaded / e.total;
progress *= 100;
progress = Math.round(progress);

var progress = e.loaded / e.total;で、どれだけロードができたかを変数に入力できるのですが、これは小数点まで表示されてしまいます。
なので、100をかけて%表示にしてから、progress = Math.round(progress);で、四捨五入しています。

では、プログラムを作ってみましょう。

var ASSETS = [
	/*使用する画像やサウンドなど。*/
];

window.onload = function() {
	game = new Core(320,320);

	var loadScene = new Scene();	
	game.loadingScene = loadScene;

	game.preload('画像ファイル');
	loadScene.addEventListener('progress', function(e) {
		var progress = e.loaded / e.total;
		progress *= 100;
		progress = Math.round(progress);

		var loadImg = new Sprite(320,320);
		loadImg.image = game.assets['画像ファイル'];
		loadScene.addChild(loadImg);

		var label = new Label();
		label.moveTo(200,290);
		label.text = "LOADING..." + progress;
		label.color = 'white';
		loadScene.addChild(label);
	});
	loadScene.addEventListener('load', function(e) {
		var core = enchant.Core.instance;
		core.removeScene(core.loadingScene);
		core.dispatchEvent(e);
	});

	game.preload(ASSETS);
	game.fps = 23;

	game.onload = function() {
		/*ゲームの内容*/
	};
	game.start();
};

enchant.js

ここまできて、「読み込み中です。」の必要なさに気がつきました。

スポンサードリンク

おすすめの記事♪

enchant.js

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

[email protected]t_is_Rです。 前回までの enchant.js の記事で、画像の表示やキャラの移動など、ゲーム制作には欠かせない基礎知識が身についたのではない

developing my games

男性が海の世界へと迷い込む!?人魚ストーリーのゲーム開発中です。

こんにちわ。現在様々な方面からゲーム開発中の@It_is_Rです。 今回はRが今、超頑張って制作中のゲームについて書いてみようと思います。 今開発中のゲームは横スクロールアクションゲームと、人

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

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

java

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

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

enchant.js

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

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

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

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

music

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

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

enchant.js

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

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

enchant.js

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

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


コメントを残す

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


Category

Games