1. HOME
  2. »
  3. プログラミング・Web
  4. »
  5. JavaScript
  6. »
  7. enchant.jsのロード画面を、好きな画像に変更する方法。

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

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

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

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

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

enchant.js

目次
  1. enchant.js、基本のプログラム。
  2. enchant.jsのロード画面を画像に変更する。
  3. ロードの状況を表示する。

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

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

スポンサードリンク

関連コンテンツ

オススメ記事

wordpress

WordPress管理画面のテーマカスタマイザーに独自の項目を追加。

WordPressみたいに私自身の人生もカスタムできたらいいのに。@It_is_Rです。 WordPressのカスタマイズは、公開しているサイトだけではありません。管理画面をカスタマイズするこ

【 gulp 】 超便利! Sass で Normalize.css などをインポートする方法。

ふと立ち上がった瞬間に、ホットマットを猫に奪われる@It_is_Rです。 全然どいてくれない。 今回は gulp を使って、 Sass ファイルから Normalize.css などをインポー

webpackの設定ファイル「webpack.config.js」の使い方を覚えよう

webpack.config.jsはwebpackを使う上での設定ファイルです。今回は、webpack.config.jsの使い方を紹介します。 webpack.config.jsとは

Bootstrap 4によるボタンの作り方。色やサイズなどの指定方法!

Bootstrap4の使い方、第5回目となりました。 Bootstrapの機能のひとつとして、クラスを組み合わせて指定するだけで、色々なボタンが作れます。 今回はBootstrap4を使ったボ

scratch

Scratchの使い方と、ゲーム作りの基礎知識を学ぼう! 小学生からのプログラミング入門

さて、今回もプログラミングの勉強(べんきょう)をはじめていきましょう!前回の「小学生からのプログラミング入門。プログラミングってなぁに?」では、プログラミングっていうのが、どういうものなのかを学びま

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

iPhone持ってないみなさん、一緒にAndroidアプリ開発しましょう。@It_is_Rです。 Androidアプリ開発、5回目となりました。 今回は Android Studio でアプリ

Node.js

MacにNode.jsをインストールする方法

みなさんこんにちは。@It_is_Rです。今回はMacにNode.jsをインストールする方法を紹介していきます。 インストールの方法はいくつかありますが、今回はインストーラー(pkg)を使った

ファイルを分けるべよ!

【JavaScript】ファイルを分けて管理してみよう! 小学生からのプログラミング入門

小学生からのJavaScript《ジャバスクリプト》入門講座《にゅうもんこうざ》、今回もはじめていきましょう! 前回はりこちゃんを方向キーで操作《そうさ》することができるようになりました。しか

【Git】ブランチを使って履歴を分岐させる方法

こんにちは、@It_is_Rです。 前回「Gitの使い方。バージョン管理する流れを、実際にやってみよう」では、 実際にGitを使ってバージョン管理する流れを学びました。 さて、

パスの書き方を覚えるべ!

パスの書き方を覚えよう。絶対パス、相対パス、ルート相対パスの違い

みなさん、こんにちは。今日もプログラミングの勉強《べんきょう》をはじめていきましょう。 今回は、パスの書き方について学びます。パスというのは、ファイルの場所《ばしょ》を、パソコンに教《おし》え

コメントをどうぞ!(コメントは承認後に反映されます)

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です