Progress bar

js/rpg_core/Graphics.js

@@ -62,6 +62,7 @@ Graphics.initialize = function(width, height, type) {
     this._disableContextMenu();
     this._setupEventHandlers();
     this._setupCssFontLoading();
+    this._setupProgress();
 };
 
 
@@ -247,6 +248,54 @@ Graphics.setLoadingImage = function(src) {
  */
 Graphics.startLoading = function() {
     this._loadingCount = 0;
+
+    ProgressWatcher.truncateProgress();
+    ProgressWatcher.setProgressListener(this._updateProgressCount.bind(this));
+    Graphics._showProgress();
+};
+
+Graphics._setupProgress = function(){
+    this._progressElement = document.createElement('div');
+    this._progressElement.id = 'loading-progress';
+    this._progressElement.style.width = '200px';
+    this._progressElement.style.height = '30px';
+    this._progressElement.style.backgroundColor = 'gray';
+
+    this._barElement = document.createElement('div');
+    this._barElement.id = 'loading-bar';
+    this._barElement.style.width = '1%';
+    this._barElement.style.height = '30px';
+    this._barElement.style.backgroundColor = 'green';
+
+    this._progressElement.appendChild(this._barElement);
+
+    document.body.appendChild(this._progressElement);
+};
+
+Graphics._showProgress = function(){
+    this._progressElement.value = 0;
+    this._progressElement.style.visibility = 'visible';
+};
+
+Graphics._hideProgress = function(){
+    this._progressElement.style.visibility = 'hidden';
+};
+
+Graphics._updateProgressCount = function(countLoaded, countLoading){
+    var progressValue;
+    if(countLoading !== 0){
+        progressValue = (countLoaded/countLoading) * 100;
+    }else{
+        progressValue = 100;
+    }
+
+    this._barElement.style.width = progressValue + '%';
+};
+
+Graphics._updateProgress = function(){
+    this._progressElement.style.zIndex = 99;
+    this._centerElement(this._progressElement);
+    this._progressElement.style.marginTop = '400px';
 };
 
 /**
@@ -259,6 +308,7 @@ Graphics.updateLoading = function() {
     this._loadingCount++;
     this._paintUpperCanvas();
     this._upperCanvas.style.opacity = 1;
+    this._updateProgress();
 };
 
 /**
@@ -270,6 +320,7 @@ Graphics.updateLoading = function() {
 Graphics.endLoading = function() {
     this._clearUpperCanvas();
     this._upperCanvas.style.opacity = 0;
+    this._hideProgress();
 };
 
 /**

js/rpg_core/ProgressWatcher.js

@@ -0,0 +1,41 @@
+function ProgressWatcher(){
+    throw new Error('This is a static class');
+}
+
+ProgressWatcher.initialize = function(){
+    this.clearProgress();
+    ImageManager.setCreationHook(this._bitmapListener.bind(this));
+    AudioManager.setCreationHook(this._audioListener.bind(this));
+};
+
+ProgressWatcher._bitmapListener = function(bitmap){
+    this._countLoading++;
+    bitmap.addLoadListener(function(){
+        this._countLoaded++;
+        this._progressListener(this._countLoaded, this._countLoading);
+    }.bind(this));
+};
+
+ProgressWatcher._audioListener = function(audio){
+    this._countLoading++;
+    audio.addLoadListener(function(){
+        this._countLoaded++;
+        this._progressListener(this._countLoaded, this._countLoading);
+    }.bind(this));
+};
+
+ProgressWatcher.setProgressListener = function(progressListener){
+    this._progressListener = progressListener;
+};
+
+ProgressWatcher.clearProgress = function(){
+    this._countLoading = 0;
+    this._countLoaded = 0;
+};
+
+ProgressWatcher.truncateProgress = function(){
+    if(this._countLoaded){
+        this._countLoading -= this._countLoaded;
+        this._countLoaded = 0;
+    }
+};

js/rpg_managers/AudioManager.js

@@ -375,7 +375,9 @@ AudioManager.createBuffer = function(folder, name) {
         else Html5Audio.setup(url);
         return Html5Audio;
     } else {
-        return new WebAudio(url);
+        var audio = new WebAudio(url);
+        this._callCreationHook(audio);
+        return audio;
     }
 };
 
@@ -418,3 +420,11 @@ AudioManager.checkWebAudioError = function(webAudio) {
         throw new Error('Failed to load: ' + webAudio.url);
     }
 };
+
+AudioManager.setCreationHook = function(hook){
+    this._creationHook = hook;
+};
+
+AudioManager._callCreationHook = function(audio){
+    if(this._creationHook) this._creationHook(audio);
+};

js/rpg_managers/ImageManager.js

@@ -100,6 +100,8 @@ ImageManager.loadNormalBitmap = function(path, hue) {
     var bitmap = this._imageCache.get(key);
     if (!bitmap) {
         bitmap = Bitmap.load(path);
+        this._callCreationHook(bitmap);
+
         bitmap.addLoadListener(function() {
             bitmap.rotateHue(hue);
         });
@@ -289,6 +291,8 @@ ImageManager.requestNormalBitmap = function(path, hue){
     var bitmap = this._imageCache.get(key);
     if(!bitmap){
         bitmap = Bitmap.request(path);
+        this._callCreationHook(bitmap);
+
         bitmap.addLoadListener(function(){
             bitmap.rotateHue(hue);
         });
@@ -308,3 +312,11 @@ ImageManager.update = function(){
 ImageManager.clearRequest = function(){
     this._requestQueue.clear();
 };
+
+ImageManager.setCreationHook = function(hook){
+    this._creationHook = hook;
+};
+
+ImageManager._callCreationHook = function(bitmap){
+    if(this._creationHook) this._creationHook(bitmap);
+};

js/rpg_managers/SceneManager.js

@@ -42,6 +42,7 @@ SceneManager.run = function(sceneClass) {
 };
 
 SceneManager.initialize = function() {
+    this.initProgressWatcher();
     this.initGraphics();
     this.checkFileAccess();
     this.initAudio();
@@ -51,6 +52,10 @@ SceneManager.initialize = function() {
     this.setupErrorHandlers();
 };
 
+SceneManager.initProgressWatcher = function(){
+    ProgressWatcher.initialize();
+};
+
 SceneManager.initGraphics = function() {
     var type = this.preferableRendererType();
     Graphics.initialize(this._screenWidth, this._screenHeight, type);

rpg_core.json

@@ -1,6 +1,7 @@
 [
   "js/rpg_core/_header.js",
   "js/rpg_core/Patch.js",
+  "js/rpg_core/ProgressWatcher.js",
   "js/rpg_core/JsExtensions.js",
   "js/rpg_core/Utils.js",
   "js/rpg_core/CacheEntry.js",