切換
舊版
前往
大廳
主題

【教學】UI 實作 - 上

靈魂 | 2019-07-03 22:27:40 | 巴幣 127 | 人氣 501


那麼接續上次的主題繼續這次的實作,


既然是實作,不外乎就會碰到程式腳本的部分,
但由於每個人的程式能力都不同,所以最基礎的部分可能就會先略過了,
至少要知道什麼是變量、函式、宣告、資料型態...等,詳細可以打開專案的F1的說明文檔查看。但本篇還是會用最簡易的方式編寫腳本部分,讓你能夠明白即使是小白還是可以做的。
如果內容有錯誤或是哪裡有疑問的,歡迎在下方留言,提供您的意見與建議。
本篇使用了MOG Menu來做使用與講解。


首先,先來看看 MOG Menu 與 已經自改完的Menu的差異吧。

左邊的畫面為MOG Menu,右邊為自改後的Menu,是不是差很多呢


那麼還記得上篇在下繪製UI的過程吧,其實將各部分分塊是有原因的,
由於程式部分也是一部分一部分拼裝而成,也就是所謂的 物件導向程式設計
RMXP內所使用的程式Ruby(RGSS),也就是屬於這種類型,
此外C#、Java、Python...等這些也都是屬於物件導向程式設計的類型。
這樣分塊有助於讓你清楚處理各部分的物件,比較不容易混在一起。


那麼現在將畫面上的各個部分分塊吧,我將會在圖片上方標示哪個部分用了哪些程式物件。
這時就會發現,其他的圖片部分呢?不算是一個程式物件嗎?

其實所有的圖片顯示與渲染,都是可以單獨顯示的,
但是圖片的顯示需要有東西可以印上去,就像是列印一樣。


所以實際上就是印一個主控台的圖片上去而已,如下圖
哎呀,這張圖就是一個超級型的偷吃步


那具體圖片要怎麼加呢?要加在哪裡呢?
在此之前得先了解程式(Scene)是怎麼運作的。
只要在腳本編輯器的Main前,插入一個空白腳本頁後輸入以上這些,就可以在遊戲內使用了。
使用方法:新增一個事件,用腳本指令寫上以下文字,就可以呼叫上面所寫的Scene畫面了。

耶?實際去運行怎麼就一片黑呢?
因為什麼都沒有弄阿,連個圖片與Window都沒有,要怎麼出現東西


那麼新增一張主控台圖片(選單圖片)吧
只要寫這三行就能夠顯示圖片了!

關於Sprite精靈類
Sprite也就是用以顯示圖片的一個類,單獨使用他是沒有效果的,
所以要使用bitmap方法來獲取精靈要顯示什麼圖片,它回傳的是位圖(Bitmap)的實例。
Bitmap是用以提供圖片資訊的類別,要能使用Sprite顯示圖片前,得先知道圖片是什麼。
至於Sprite、Bitmap、Viewport這三者的詳細差異,請參考 這裡這裡

使用精靈類後不釋放的話,不論你到哪裡 那張圖片都會跟著你,挺恐怖的,對吧


之後再去觸發一次事件,就會發現主控台圖片出現了
顯示一張圖片,是不是很簡單啊(X

那麼現在要顯示多張圖片也是做得到了,
但是想要調整圖片的X、Y、Z位置、不透明度、放大率、色調...等之類的該怎麼做呢?
打開F1的說明文檔,再找到Sprite的說明,裡面有詳細解釋各個方法與效果說明。
那有請桐人來做示範
(這是的kirito

這樣就能獲得一個灰色且被拉伸的桐人
到了這邊,只要會使用精靈類生成圖片,就能夠去標題畫面、其他的Scene玩玩了,
在MOG Menu腳本也是一樣,雖然裡面看起來很多行,只要找到class Scene_Menu,
架構也不脫離上面的樣子,只要在正確的位置編寫,一樣能讓圖片出來。
至於要怎麼讓圖片動起來,或是想要什麼效果,就下次再說吧。

關於Scene(場景)
就是負責畫面場景的類,可以把它看作是一個 統整其他類為一起 的整體
腳本中有Scene_Title(標題畫面)、Scene_Map(地圖場景)、Scene_Battle(戰鬥場景)...等,
在RMXP中大多的Scene都沒有繼承關係,不像是VA有Scene_Base,可以直接拿父類別的東西來用,當然要改寫也是可以的。


那麼有請桐人退場


現在回到Window類的部分,這類東西在預設的專案內佔了有差不多三分之一,
Window顧名思義,就是指視窗、窗口,定義了視窗物件後,就可以在場景上使用它。
那麼先從最簡單的開始吧,就是金錢的視窗了,上面圖片顯示分塊的部分,Window_Gold2 就是負責金錢視窗的程式物件,就用它來解釋吧。
不過在此之前,得先了解一下Window的使用方式。

直接在class Scene_Menu上面或下面新增副程式就可以了,
也可以在main前再插入一個空白編輯頁編寫也行。

是不是比Scene更短更開心阿(X

Window_Gold2所繼承的Window_Base,基本上視窗所要做的事都已經由它定義好了,
所以只要用super來使用父類別的方法,就可以輕鬆生成一個視窗了,至於Window_Base實際在做什麼,可以去看看腳本編輯器內的它,其實在它之上還有一個名為Window的父類別呢。
(詳細請參考F1說明文檔

那Window_Gold2視窗定義好了,要在哪裡加入才能在遊戲中看見呢?
還記得Scene吧,它負責統整其他類整合為一個整體,所以只要將Window_Gold2加入進去,
就可以在畫面中看見它了。

兩行就可以生成視窗囉!

之後再去觸發事件,就會看見視窗出來囉
阿視窗怎麼會在左上角呢?該怎麼改它的位置?
就像調整圖片的位置一樣,使用方法.x、.y就能控制它在畫面上的位置了。

現在回到Window_Gold2內新增文字內容吧
關於normal_color、system_color是什麼顏色,可以在Window_Base被找到。
draw_text是用來描繪文字的一個屬性,draw_text(x位置, y位置, 寬, 高, 描繪內容, 對齊方式)
對齊方式 0為預設 也就是靠左  1為置中  2為靠右,請詳細參考F1說明
$data_system.words.gold為 從資料庫中獲取金錢術語文字
$game_party.gold.to_s的to_s  也就是將其他型態的資料轉為字串  to String之意


那麼再次觸發事件,查看畫面吧!
我給了隊伍1000塊,以方便查看金錢顯示
這樣金錢的視窗就描繪好了,如果不要藍色的Gold就把描繪術語那行刪除就行了。
現在如果要繼續添加其他的視窗就沒有那麼難了,可以去參考預設的Window_PlayTime、
Window_Steps、Window_Help裡面是怎麼寫的,改改後再加進遊戲裡。


那麼其他部分就下次再說了,這次就先講解些基礎部分,(感覺下次內容龐大阿...。
--下次為 UI 實作 - 中?
送禮物贊助創作者 !
0
留言

創作回應

LAnlaN
很棒的解說和教學~是時候該來好好研究腳本了(?
2019-07-06 10:54:17
靈魂
感謝支持,對於VA來說腳本上差異不大,但是它分塊更多,需要時常用Ctrl+F去查看各種定義與類的方法,就寫法而言VA那種是比XP的還好的,但也相對複雜。
2019-07-06 11:23:11
IAMCCC
厲害!!這篇先收起來!
2019-07-07 08:44:39

更多創作