主題

RM MV學習筆記(6) 描繪進度條

路漫行 | 2018-01-19 13:36:28 | 巴幣 0 | 人氣 1035

進度條包括血條、經驗條、任何會跑的都算。

使用的函式是這個：

this.drawGauge(x, y, width, rate, color1, color2)

this.drawGauge(x座標, y座標, 寬度, 比例, 顏色1, 顏色2)

rate是比例，要填一段分數進去，舉例如下。

color1跟color2是一段漸層色，填的值可以在這裡找到相關說明。我們實作一次看看就知道了。

Window_Wand.prototype.refresh = function() {

var x = this.textPadding();
var width = this.contents.width - this.textPadding() * 2;
this.contents.clear();
this.drawGauge(x, 0, width, 3/10, 'yellow', 'green') ;

this.resetFontSettings();

};

測試結果：

rate 也可以使用遊戲中的變數，比如說像這樣寫，就會顯示角色1的現在HP/最大HP。

var a = $gameActors._data[1].hp
var b = $gameActors._data[1].mhp
var rate = a/b

顏色也可以使用內定好的

this.hpGaugeColor1()
this.hpGaugeColor2()

程式碼更新如下：

Window_Wand.prototype.refresh = function() {

var x = this.textPadding();
var width = this.contents.width - this.textPadding() * 2;
this.contents.clear();

var a = $gameActors._data[1].hp
var b = $gameActors._data[1].mhp
var rate = a/b

this.drawGauge(x, 0, width, rate, this.hpGaugeColor1() , this.hpGaugeColor2() );
this.resetFontSettings();

};

測試結果：

因為他是滿血的，所以血條是滿的。

再把文字也掛上去：

Window_Wand.prototype.refresh = function() {
var x = this.textPadding();
var width = this.contents.width - this.textPadding() * 2;
this.contents.clear();

var a = $gameActors._data[1].hp
var b = $gameActors._data[1].mhp
var rate = a/b
this.drawGauge(x, 0, width, rate, this.hpGaugeColor1() , this.hpGaugeColor2() );
this.drawText(  $dataActors[1].name , x , 0  ,width , 'left');
this.drawText(  $gameActors._data[1].hp + "/",  x - 40   , 0  ,  width  ,  'right' );
this.drawText(  $gameActors._data[1].mhp , x  , 0  ,width ,  'right' );

this.resetFontSettings();
};

這樣血條就完整了，因為文字顯示放程式碼的後面，所以顯示上字會蓋到進度條。反之亦然。

不過HP其實有預先寫好的函式可使用：

this.drawActorHp($gameActors._data[1], x, 0, width);

this.drawActorMp($gameActors._data[1], x, 30, width);

this.drawActorTp($gameActors._data[1], x, 60, width);

現在可以來看看一些跟Gauge有關的其他函式，其實也只有這個而已：

Window_Base.prototype.gaugeBackColor = function() {

return this.textColor(19);

};

將空的進度條背景色指定為19號。

如果對於血條高度不滿意的話，可以將下段貼到Window_Base_plus.js裡面的空白處：

Window_Base.prototype.drawGauge = function(x, y, width, rate, color1, color2) {

var fillW = Math.floor(width * rate);
var gaugeY = y + this.lineHeight() - 8;
this.contents.fillRect(x, gaugeY, width, 6, this.gaugeBackColor());
this.contents.gradientFillRect(x, gaugeY, fillW, 6, color1, color2);

};

去改裡面的6，就是高度。比如說我改成12看看：

還有一些小花樣：

我現在思考有點斷線中...直接貼code...

Window_Base.prototype.drawGauge = function(x, y, width, rate, color1, color2) {

var fillW = Math.floor(width * rate);
var gaugeY = y + this.lineHeight() - 8;

this.contents.paintOpacity = 105;
this.contents.fillRect(x-1, gaugeY -1 , width +2 , 12 + 2, this.gaugeBackColor());
this.contents.paintOpacity = 255;
this.contents.fillRect(x-1, gaugeY -1 , width +2 , 1, 'black');
this.contents.fillRect(x-1, gaugeY +12 , width +2 , 1, 'black');
this.contents.fillRect(x-1, gaugeY -1 , 1 , 12+2, 'black');
this.contents.fillRect(x + width , gaugeY -1 , 1 , 12+2, 'black');

this.contents.gradientFillRect(x, gaugeY, fillW, 12, color2, color1 ,true);