主題

RM MV學習筆記(3) 關於文字與顏色

路漫行 | 2018-01-18 14:32:14 | 巴幣 46 | 人氣 2661

續上篇，我們現在會創建一個新的視窗了，接下來就要放東西到視窗裡面，要放文字、圖片、音樂等項目就會使用到函式，我們可以複習一下，函式就是可重複使用的程式段落(棒讀)，所以我們也可以使用RMMV預先寫好的視窗專用函式，另外再複習一次，預先寫好的函式通通放在Window_Base裡面，所以要使用這些函式之前必須先確保自己的視窗有繼承到Window_Base。

另外還有人跟我抱怨看不懂我在寫什麼，我覺得我寫的很白話了，我也不懂他不懂的點在哪裡，是不懂函式？不懂變數？不懂繼承？不懂this？不懂New？還是電波真的就不對？好吧我必須承認我的電波確實異於常人，所以補充一下別人的東西：

像是這份文件：重新介紹 JavaScript

我他寫的真的非常好，而且也不長，讓我搞懂很多之前沒弄懂的東西，上面的問題這裡都有解釋。

不過，就我來看，只是要改改別人寫好的東西，不懂程式概念也沒什麼影響就是了，畢竟有YEP在嘛。

以下開始正文。

上一回介紹過了兩個函式：

drawText() //描繪文字

drawCurrencyValue() //描繪文字 + 文字

所以我們就繼續從處理文字的開始吧，我們先回顧一下refresh的內容，跟上一回完全一模一樣的內容，但加了藍字的部分。

Window_Wand.prototype.refresh = function() {

var x = this.textPadding();
var width = this.contents.width - this.textPadding() * 2;
this.contents.clear();
this.contents.textColor = 'red'; //本視窗內文字顏色

this.drawText( $dataActors[1].name + '的HP' , x, 0, width, 'right');
this.drawText(this.value(), 150 , this.lineHeight() * 2 );

};

顯示結果：

'字串內文字'可代換為下列幾種顏色，如果有人試出更多顏色請告訴我感恩。

white , red , orange , yellow , green , blue , purple , magenta , black

還有另外一種寫法

this.changeTextColor('orange'); //變更文字顏色

顯示結果：

現在我們有兩種寫法可以變更文字顏色了，他們分別是：

this.contents.textColor = 'red';

this.changeTextColor('orange')

兩種寫法都可以變更文字顏色，不過有一點差別就是使用this.contents.textColor的情況只限定在自己的視窗內，但是this.changeTextColor會影響到其他的視窗。為了避免影響到不知道什麼的地方，this.changeTextColor的後面都還要加上這句：this.resetTextColor();

↑應該不是我寫的那樣。

更新程式碼如下：

Window_Wand.prototype.refresh = function() {

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

this.changeTextColor('orange');
this.drawText( $dataActors[1].name + '的HP' , x, 0, width, 'right');

this.resetTextColor();
this.drawText(this.value(), 150 , this.lineHeight() * 2 );

};

結果：

這樣可以顯示兩個不同顏色的文句。如果我不想使用他預設好的這幾種顏色呢？也可以使用自定義的色表，在遊戲專案資料夾img\system裡面有一張叫做window.png的檔案，這張檔案的右下角有一堆顏色，每個顏色有他的編號，從0~31號總共32個顏色。

那要怎麼使用這張色表的顏色呢？先試試看：

this.contents.textColor = this.textColor(3);

換成3號顏色了

再試一次：

this.changeTextColor( this.textColor(6) );

也換成6號顏色了

為了方便管理，遊戲有寫好一些顏色函式，這邊整理出來，使用方法為：

this.changeTextColor( this.systemColor() );　//將文字顏色更換為系統顏色

藍字部分可替換如下：

this.normalColor() //顏色編號：0
this.systemColor() //顏色編號：16
this..crisisColor() //顏色編號：17
this..deathColor() //顏色編號：18
this..gaugeBackColor() //顏色編號：19
this..hpGaugeColor1() //顏色編號：20
this..hpGaugeColor2() //顏色編號：21
this..mpGaugeColor1() //顏色編號：22
this..mpGaugeColor2() //顏色編號：23
this..mpCostColor() //顏色編號：23
this..powerUpColor() //顏色編號：24
this..powerDownColor() //顏色編號：25
this..tpGaugeColor1() //顏色編號：28
this..tpGaugeColor2() //顏色編號：29
this..tpCostColor() //顏色編號：29

由此表可知，就算完全不懂改腳本，也可以直接透過修改window.png這個檔案索引相對位置的顏色來達到修改系統內定顏色的效果。

特別解說一下hpGaugeColor1與hpGaugeColor2，這是預設用來描繪HP血條的顏色，但這兩個顏色並不是一個現在值跟底色，底色是gaugeBackColor()，而是一段漸層色，比如設成color1=黃色，color2=綠色。會顯示從黃色漸層到綠色，之後提到drawGauge會更詳細說明。

如果32個顏色不夠用呢！根據Window_Base裡面這兩段來看：

Window_Base.prototype.loadWindowskin = function() {

this.windowskin = ImageManager.loadSystem('Window');

};

Window_Base.prototype.textColor = function(n) {

var px = 96 + (n % 8) * 12 + 6;
var py = 144 + Math.floor(n / 8) * 12 + 6;
return this.windowskin.getPixel(px, py);

};

並沒有規定到Window.png的長寬高度，所以理論上只要往下新增像這樣...

最下面新增的就是32號，然後試試看：

成功了！

Bonus：

如果只是想要新增【文字】顏色的話，是還有其他的方法，

首先要掛這兩個插件：

YEP.Message Core

YEP.Extended Message Pack 1

Message Pack 1一定要放在Message Core的後面，像是這樣

成功安裝插件後，就可以使用 \hc[rrggbb]的標籤，可使用的場合等同\C[n]。

既然插件都裝了，那就來簡單介紹一下Message Core的另外一個功能：

紅框起來的地方，是修改預設字型跟預設的文字大小。MV預設的文字大小是28號，可以在這個插件裡直接修改。

顏色說明的差不多了，再來就要說明文字大小的變化了。

文字的話，就直接看Window_Base吧：

Window_Base.prototype.standardFontSize = function() {
return 28;
};

如果沒有裝上面的插件的話，也可以直接到這裡修改預設文字大小，不過先前提過直接修改底層會不安全，簡單做法可以這樣，開新一份js檔案，就叫做Window_Base_Plus.js吧。

然後把這段貼進去，像這樣。並將28改成20，並啟動這個新的插件：

結果如下：

預設字就變成20號了，同樣的我們也可以把其他東西也都丟進這份Window_Base_Plus.js裡面。

像是

//視窗邊距
Window_Base.prototype.standardPadding = function() {
    return 18;
};
//文字邊距
Window_Base.prototype.textPadding = function() {
    return 6;
};
//視窗底色透明度
Window_Base.prototype.standardBackOpacity = function() {
    return 192;
};

這些都可以自己複製貼上Window_Base_Plus.js後修改使用。文字以外的當然也可以丟進來，不過這邊先暫不說明。

另外要說明的是如何修改指定文字大小，而不是全面修改文字大小，做法跟顏色是幾乎一樣的，現在回到我們熟悉的Window_Wand，並且把Window_Base_Plus.js設為Off，我們現在不需要他。

可以像這樣寫：

Window_Wand.prototype.refresh = function() {

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

this.contents.fontSize = 6;
this.drawText( "我是6號字" , x, 0 );
this.contents.fontSize = 12;
this.drawText( "我是12號字" , x, this.lineHeight()  );
this.contents.fontSize = 18;
this.drawText( "我是18號字" , x, this.lineHeight()*2 );
this.contents.fontSize = 24;
this.drawText( "我是24號字" , x, this.lineHeight()*3 );
this.contents.fontSize = 36;
this.drawText( "我是36號字" , x, this.lineHeight()*4 );

};

測試結果：

嗯，很好，非常好，太簡單了。介紹另外兩個函式，分別是：

this.makeFontBigger() \\字體放大+12，最大到96

this.makeFontSmaller() \\字體縮小-12，最小是24

更新程式碼：

Window_Wand.prototype.refresh = function() {

var x = this.textPadding();
var width = this.contents.width - this.textPadding() * 2;
this.contents.clear();
this.contents.fontSize = 24;
this.drawText( "我是24號字" , x, 0 );
this.makeFontBigger();
this.drawText( "放大一次" , x, this.lineHeight()*1 );
this.makeFontBigger();
this.drawText( "放大二次" , x, this.lineHeight()*3 );
this.resetFontSettings();