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

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

スポンサードリンク

関連コンテンツ

オススメ記事

java

Eclipseによる、Javaでじゃんけんゲームプログラムの作り方

※追記(2018/8/29) より分かりやすい記事になるよう修正しました。 今回はJavaを使って、じゃんけんゲームを作る方法を紹介します。 eclipseがインストールされ

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

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

zplug を使ってプラグインをインストール、管理する。

二つのことを同時にできない、@It_is_Rです。 今回はターミナルをかっこよくするシリーズ、第三回目です。 zplug を使って、プラグインをインストールする方法を紹介します。

キーボードで画像を動かすよ!

小学生からのJavaScript入門。キー入力でキャラを動かしてみよう!

小学生からのJavaScript入門講座(にゅうもんこうざ)、第4弾です。 前回はHTMLでりこちゃんの画像を表示し、クリックすると前に一歩動くというのをJavaScriptで作りました。 J

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

どうも、頭がすっからかんの@It_is_Rです。 やかましいわ。 今回は Android Studio で実機テストする方法を紹介します。 これからアプリ開発をしていく上で必要不可欠な実機テ

【Android Studio】レイアウト( Layout )の種類を覚えよう!

服に膝を入れるのが癖です。@It_is_Rです。 Androidアプリ開発、9回目となりました。 さて今回は、ボタンやテキストのレイアウトを整える方法を、解説していきたいと思います。

WordPress テーマ自作 | Pug ( Jade ) で記事一覧ページを作る方法!

愛と勇気だけが友達の@It_is_Rです。 今回はPugでWordPressテーマを作る方法を少し紹介します。 詳しいテーマの作り方はこちらをご覧ください。 WordPressのテーマを自作

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

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

FC2 blog customize

FC2ブログ ”最強” カスタマイズ入門講座。文字の大きさを設定する。

こんにちわ。美しいものほど濁って見える@It_is_Rです。 今回もFC2ブログの"最強"カスタマイズを始めていこうと思います。 今回は文字の大きさや色など、ブログ内の文字の設定をしていきます

小学生からのJavaScript入門。画像の表示と移動をしてみよう!

小学生からのJavaScript入門、第3弾です。 今回はゲーム開発(かいはつ)へもう一歩踏み込んでみましょう! [serif icon="aru-s.jpg" name="アル"]うーん……

コメントをどうぞ!

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