各画像の読み込みを考えないために、シーン自体をレンダリングする前に必要なすべての画像をダウンロードします。 このトピックでは、クラスを操作するメカニズムを備えたMootoolsを使用するイメージローダーの例を示します。
そのようなクラスは、デザインの観点からどのように見えるべきですか？ ロードするイメージのアドレスを受け入れ、何らかの方法でダウンロードプロセスを通知する必要があります。
幸いなことに、Mootools はイベントを便利に処理するための機能を提供します。
このクラスは、Imageオブジェクトのonload、onerror、onabortイベントハンドラーを実装し、総負荷の割合が変更されると、独自のクラスが生成されます。
クラスは3つのイベントを生成します。
- onStart（） ：起動時に呼び出されます;
- onUpdate（パーセント） ：負荷のパーセンテージが変更されたときに呼び出されます。
- onComplete（） ：すべての画像が読み込まれたときに呼び出されます。
var Imageloader = new Class({
// Options Events
Implements : [Options, Events],
options : {
//
//
onStart : $empty,
//
onUpdate : $empty,
//
onComplete : $empty,
// .
//{
// "url" : url,
// "key" : key,
// "size" : size
//}
images : []
},
initialize : function (options) {
this .setOptions(options);
//
this .images = {};
//
this .totalCount = this .options.images.length;
this .successCount = this .failureCount = this .loadedCount = 0;
this .successSize = this .failureSize = this .loadedSize = this .totalSize = 0;
this .progress = 0;
},
start : function () {
// Image,
//
$each( this .options.images, function (obj) {
this .totalSize += obj.size;
var image = new Image();
image.onload = this .onComplete.bind( this ,obj);
image.onerror = this .onFailure.bind( this ,obj);
image.onabort = this .onFailure.bind( this ,obj);
image.src = obj.url;
this .images[obj.key] = image;
}.bind( this ));
this .fireEvent( 'start' );
},
// Image
getImage : function ( key ) {
return this .images[key];
},
//
onComplete : function ( image ) {
//
this .successCount++;
this .successSize += image.size;
this .onImageEvent(image);
},
//
onFailure : function ( image ) {
//
this .failureCount++;
this .failureSize += image.size;
//
this .images[image.key] = new Image();
this .onImageEvent(image);
},
onImageEvent : function ( image ) {
//
this .loadedCount++;
this .loadedSize += image.size;
//
var progress = Math.round( this .loadedSize*100/ this .totalSize);
if ( this .progress != progress ) {
this .progress = progress;
// update
this .fireEvent( 'update' ,progress);
}
//
if ( this .totalCount == this .loadedCount ) {
this .fireEvent( 'complete' );
}
}
});
* This source code was highlighted with Source Code Highlighter .
使用例：
var il = new Imageloader({
onUpdate : function (percent) {
//
alert(percent);
},
onComplete : function ( ) {
//
alert( "done" );
alert(d.getImage( "winter2010" ).complete);
},
//
images : [{
'url' : 'http://www.google.com/intl/en_ALL/images/srpr/logo1w.png' ,
'key' : 'main_logo' ,
'size' : 7
},{
'url' : 'http://www.google.com/logos/winter2010_1-hp.jpg' ,
'key' : 'winter2010' ,
'size' : 32
},{
'url' : 'http://www.google.com/logos/komensky10_hp.gif' ,
'key' : 'komensky' ,
'size' : 26
}]
});
//
il.start();
* This source code was highlighted with Source Code Highlighter .
進行状況の表現として、Canvasを介して進行状況バーを描画する別のクラスを作成しました。
実装例はこちらにあります （100KB程度のGoogleロゴがロードされます）。
PS Html5 Canvasを通じてゲームに関する一連の記事を書く予定です。 これは最初のものですが、少し平凡なものです。 次の記事では、（タイルによる）等角投影でランドスケープを構築する原理を説明します。