画像をあらかじめ読み込ませる(画像のプレロード)

説明

画像をあらかじめ読み込ませるにはnew Game()として生成されたオブジェクトのpreload()メソッドを利用します。preload()メソッドのパラメータに読み込ませたい画像データのURLを指定します。複数の画像データを読み込ませる場合にはpreload()メソッドのパラメータを複数指定するだけです。つまり、game.preload("a.png", "b.png", "c.png");と指定すれば、複数の画像データが読み込まれます。

サンプル サンプルを実行データをダウンロード


■HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sample game</title>
<style>
body { margin: 0; }
</style>
<script src="js/enchant.min.js"></script>
<script src="js/main.js"></script>
</head>
<body></body>
</html>
■JavaScript (main.js)
enchant(); // ライブラリの初期化
window.onload = function(){
// 320×240ピクセルサイズの画面(Canvas)を作成
var game = new Game(320, 240);
// フレームレートの設定。15fpsに設定
game.fps = 15;
// 画像データをあらかじめ読み込ませる
game.preload("images/fighter.png");
}
目次に戻る