????????到目前為止，我們的標題和命令窗口都還是使用的文字，對于文字的編輯，大概包括字體，大小，邊緣粗細，扭曲等等。但是有些情況還是不能滿足我們的需求。如果我們想把標題和命令窗口做得與我們的標題背景更加契合，甚至將標題和命令窗口與整個游戲風格相呼應，使用圖片可能會更加方便。

????????今天我們使用MOG_TitlePictureCom.js插件讓標題界面的標題和命令窗口更加沒有違和感。首先，我們的基礎需求大概如下：

????????取消文字標題，使用圖片標題。

????????取消命令窗口，使用多個圖片代替，且圖片能在選中與非選中情況下有不同展示效果。

????? ? 圖片命令同樣實現(xiàn)原命令窗口的基礎功能。

????????增加光標，能在命令間切換，且有動畫效果。

????????MOG_TitlePictureCom.js插件的功能幾乎能滿足上述需求。

????????話不多說，開始擼：

????????基本參數(shù)包括光標、標題、命令的基礎位置，是否展示等。

????????文字標題的隱藏，我們可以使用RPGMakerMV數(shù)據(jù)庫中的設置，禁用文字標題的繪制。當然本插件在插件中對文字標題做出了處理，如果選擇使用圖片標題，即使勾選了繪制文字標題，也會被清除。

????????命令窗口的隱藏使用了如下方法：

????????以上兩步讓標題界面相對干凈了一些，接下來在create標題場景的時候，我們就需要加入自己的定制需求了。

????????create_picture_commands、createCursorCommand分別創(chuàng)建命令及光標。

????????這里單獨看下create_picture_commands方法：

????????該方法主要讀取參數(shù)中的圖片位置，就是你想把這些圖片放在標題場景的哪個位置，再就是根據(jù)窗口命令的個數(shù)，讀取資源，創(chuàng)建圖片精靈，添加至圖層。_com_pictures_data是一個數(shù)據(jù)數(shù)組，存儲命令圖片精靈的位置及寬高。供后續(xù)的邊緣檢測使用。

????????接下來老生常談周期函數(shù)update，命令窗口的update主要是負責命令圖片的展示及觸摸事件的檢測。前者根據(jù)數(shù)據(jù)在相應位置展示相應的命令圖片（命令圖片的選中和未選中狀態(tài)被合為一張圖），兩個樣式需要根據(jù)數(shù)據(jù)判斷情況進行展示。后者根據(jù)觸摸位置，檢測是否在相應圖片范圍內(nèi)，進行后續(xù)事件。this._commandWindow.processOk()這句就是利用創(chuàng)建commandWindow時，綁定在各個命令上的handler，進行后續(xù)處理。

????????上圖中的updateCursor是光標的周期函數(shù)方法，updateCursor負責計算光標的位置，并進行移動。updateCursorSlide是為了實現(xiàn)光標在標題界面上左右晃動而設計的偏移算法。通過該算法，如果玩家不進行任何操作，光標的位置會循環(huán)的在左右進行改變，形成一個晃動的動態(tài)效果。

????????

????????如果在參數(shù)中設置創(chuàng)建標題為true，那么createTitleSprite方法便會利用removeChild把文字標題移除，再把圖片標題加上。

????????通過該插件實現(xiàn)的大概下過如下（這個效果真的沒法看?。。。?br>

????????

????當然這些素材的位置，及所有的素材設計，你都可以自定義。統(tǒng)一的風格，良好的色彩搭配，會讓你的標題界面讓玩家眼前一亮。

????當然標題界面還可以加入GIF及視頻，這對素材的要求稍高，后文就不再繼續(xù)展開了。標題篇就此打住，后面準備開新坑。

注：以上分析均為作者興趣出發(fā)，自學有感，對于js的認知還存在不足或者偏差，如有錯誤，歡迎指正。