Instantly share code, notes, and snippets.

Embed
What would you like to do?
//=============================================================================
// Oggy_CustomLoading.js
//=============================================================================
/*:
* @plugindesc v1.00 This plugin customizes a loading ui
* @author o_ggy http://www.oggy-rpg.com/
*
* @help
* (C)2019 o_ggy
* This software is released under the MIT License.
* http://opensource.org/licenses/mit-license.php
*/
(function() {
Graphics.setLoadingImage = function(src) {
// not use loading image
};
Graphics._paintUpperCanvas = function() {
this._clearUpperCanvas();
if (this._loadingCount >= 20) {
var context = this._upperCanvas.getContext('2d');
var dx = this._width / 2;
var dy = this._height / 2;
var alpha = ((this._loadingCount - 20) / 30).clamp(0, 1);
context.save();
context.globalAlpha = alpha;
var frame = Math.floor((this._loadingCount - 20) / 8);
var div = 12;
var size = 24;
var radius = 4;
for (var i = 0; i < div; ++i) {
context.beginPath();
var theta = i * 2 * Math.PI / div;
context.arc(dx + size * Math.cos(theta), dy + size * Math.sin(theta), radius, 0, Math.PI*2, false);
var brightLevel = Math.max(3 - Math.abs(frame % div - i), 0);
context.fillStyle = ["#666666", "#999999", "#cccccc", "#ffffff"][brightLevel];
context.fill();
}
context.restore();
}
};
Graphics._setupProgress = function(){
this._progressElement = document.createElement('div');
this._progressElement.id = 'loading-progress';
this._progressElement.width = 300;
this._progressElement.height = 50;
this._progressElement.style.visibility = 'hidden';
this._barElement = document.createElement('div');
this._barElement.id = 'loading-bar';
this._barElement.style.width = '100%';
this._barElement.style.height = '10%';
this._barElement.style.background = 'linear-gradient(to top, darkgray, gray)';
this._barElement.style.border = '2px solid lightgray';
this._barElement.style.borderRadius = '15px';
this._barElement.style.marginTop = '40%';
this._filledBarElement = document.createElement('div');
this._filledBarElement.id = 'loading-filled-bar';
this._filledBarElement.style.width = '0%';
this._filledBarElement.style.height = '100%';
this._filledBarElement.style.background = 'linear-gradient(to top, #1685ad, #269dc9)';
this._filledBarElement.style.borderRadius = '5px';
this._progressElement.appendChild(this._barElement);
this._barElement.appendChild(this._filledBarElement);
this._updateProgress();
document.body.appendChild(this._progressElement);
};
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment