Тема: как рисовать прогресс бар

вот когда-то писал прогресс бар для здоровья,хп, иконок фейса и оружия. замени хп на $gameVariables.value(1) и радуйся. разжевывание в комментах присутствует.

пример чисто для шаблона, красоту можно навести:
- теми же градиентами
- заменить рисование полоски битмапой на рисование ее картинкой. просто обрезаешь картинку через функцию blt в зависимости от значения переменной
- анимацию заполнения через паузы. лень расписывать. как сделать паузу написано немного здесь Переменные, простые скрипты, функции rpg maker MV там же можно почитать немного про битмапы и стиль текста.
- плюс можешь навставлять анимаций мукера через команду

https://yadi.sk/d/rWJYiiAy3W35Za

Код:

//=============================================================================
//Yuryol_Hud2.js
//=============================================================================
/*:

 * @plugindesc Худ-бар
 * @author Yuryol
 
 
 */
(function() {

var Scene_Map_create_alias = Scene_Map.prototype.onMapLoaded;
Scene_Map.prototype.onMapLoaded = function() {
    Scene_Map_create_alias.call(this);
    
    this.hp_hud = new HP_hud(); //тут будет полоски зоровья и МП и оружие героя
    this.face_hud = new FACE_hud();    //тут покажем фейс героя. две картинки в одной функции нарисовать нельзя,поэтому рисуем фейс отдельно а не в hp_hud. 
    
    this.addChild(this.hp_hud);
    this.addChild(this.face_hud);

};
	
/*****************************
худ-бар
*****************************/
function HP_hud() {
 this.initialize.apply(this, arguments);
};
	
// создание спрайта для полоски
HP_hud.prototype = Object.create(Sprite.prototype);
HP_hud.prototype.constructor = HP_hud;

//создаем прямоугольную область в которой будет наш худ бар
HP_hud.prototype.initialize = function () {
    Sprite.prototype.initialize.call(this);
    this.x = 65; //координат Х этой области
    this.y = 20; //координата Y
    this.bitmap = new Bitmap(110, 50); //в скобках длина и ширина области
    this.update();    //вызываем функцию обновления худ бара
};

//обновляем худ бар
HP_hud.prototype.update = function(){

    var equip0 = $gameParty.leader().equips()[0]; //смотрим какое оружие у героя
    this.bitmap.clear();
    this.drawHud(); // вызываем функцию отрисовки полосок здоровья
    if (equip0 !==null) { //если экипировка есть то показывем оружие 
        var icon0 = equip0.iconIndex; //смотрим какая иконка у этого оружия
        this.drawIcon(icon0,90, 0, 20, 20); //рисуем иконку. первые две цифры -- координаты расположения иконки. вторые две - ширина и высота иконки
    };
   
};

	//рисовка полосок здоровья и МП
HP_hud.prototype.drawHud = function () {
    this.bitmap.clear(); //очищаем холст
    var abshp = $gameParty.leader().hp; //смотрим чему равна ХП героя
    var maxhp = $gameParty.leader().mhp; //чему равна макисмальная ХП
    var hp = 80 * abshp / maxhp; //находим соотношение хп героя относительно амкисмальному ХП
    this.bitmap.fillRect(0, 0, 80, 20, '#000'); //рисуем фон полоски. кординаты ее, затем ширина и высота, и потом цвет в формате HEX
    this.bitmap.fillRect(0, 0, hp, 20, '#d70f0f'); //рисуем саму полоску
    var absmp = $gameParty.leader().mp; //то же самое но для МП
    var maxmp = $gameParty.leader().mmp;
    var mp = 80 * absmp / maxmp;
    this.bitmap.fillRect(0, 25, 80, 20, '#000');
    this.bitmap.fillRect(0, 25, mp, 20, '#3f3fde');

};
//рисуем иконку
HP_hud.prototype.drawIcon = function(index,x, y, w, h) {
    if (!this.bitmap) return false;
    var bitmap = ImageManager.loadSystem('IconSet'); //путь нахождения иконсета
    var pw = Window_Base._iconWidth; 
    var ph = Window_Base._iconHeight;
    var sx = index%16*pw; //находим где находится иконка в иконсете по горизонтали
    var sy = Math.floor(index/16)*pw; //по вертикали
    this.bitmap.blt(bitmap,sx,sy,pw,ph,x,y, w, h); //лень расписывать. короче рсиуем иконку на поределенных координатах определенной ширины
    return true;
};

/********************
FACE hud рисуем фейс героя. по аналогии с иконкой оружия
********************/
function FACE_hud() {
 this.initialize.apply(this, arguments);
};

FACE_hud.prototype = Object.create(Sprite.prototype);
FACE_hud.prototype.constructor = FACE_hud;

FACE_hud.prototype.initialize = function () {
    Sprite.prototype.initialize.call(this);
    this.x = 20;
    this.y = 20;
    this.bitmap = new Bitmap(40, 40);
    this.update();    
};

FACE_hud.prototype.update = function(){
    this.drawIcon($gameParty.members()[0].faceName(),$gameParty.members()[0].faceIndex(), 0, 0, 40, 40);
   
};

FACE_hud.prototype.drawIcon = function(faceName,index, x, y, w, h) {
    if (!this.bitmap) return false;
    var bitmap = ImageManager.loadFace(faceName);
    var pw = Window_Base._faceWidth;
    var ph = Window_Base._faceHeight;
    var sx = index%4*pw;
    var sy = Math.floor(index/4)*pw;
    this.bitmap.blt(bitmap,sx,sy,pw,ph,x,y, w, h);
    return true;
};

 })()