Как сделать шкалу с ОЗ и ОМ с краю экрана

//============================================================================= //Yuryol_Hud.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.addChild(this.hp_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 = 5; //координат Х этой области this.y = 20; //координата Y this.bitmap = new Bitmap(110, 50); //в скобках длина и ширина области this.update(); //вызываем функцию обновления худ бара }; //обновляем худ бар HP_hud.prototype.update = function(){ this.bitmap.clear(); this.drawHud(); // вызываем функцию отрисовки полосок здоровья }; //рисовка полосок здоровья и МП 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, 10, '#000'); //рисуем фон полоски. кординаты ее, затем ширина и высота, и потом цвет в формате HEX this.bitmap.fillRect(1, 1, hp-2, 8, '#d70f0f'); //рисуем саму полоску var absmp = $gameParty.leader().mp; //то же самое но для МП var maxmp = $gameParty.leader().mmp; var mp = 80 * absmp / maxmp; this.bitmap.fillRect(0, 16, 80, 10, '#000'); this.bitmap.fillRect(1, 17, mp-2, 8, '#3f3fde'); }; })()