小屋創作

日誌2020-04-09 15:14

UI plugins

作者：Hua

截至目前, 我在phaser3共做了113個plugins, 超過一半都是從construct2移植過來的, 但也有全新設計的plugin, 例如一整套的ui plugin. 這組ui plugin曾被Rich(phaser3的主開發者)推薦過, 在p3官方的討論區上目前也是點閱率最高的文章, 可以說是我的plugin招牌了. (Board雖然也自成一系列, 但實用程度上還是ui更普及) 以下是5個最熱門的ui展示:
  1. Tabs-tables : 中間的表格可拖曳, 左右兩側的按鈕切換表格內容.
  2. Yes/No Dialog : 對話框, 接收按鈕(Yes/No)點擊的event.
  3. Textbox : 以typing的方式顯示每頁文字.
  4. Pop-up menu : 點擊任意位置跳出menu, 點擊menu上的按鈕打開下層menu. 點擊menu外則會收合全部的menu.
  5. Text-edit : 點擊name或password欄位的文字物件, 啟動文字編輯. 點擊'login'按鈕, 顯示目前的name與password字串.
我對這套ui plugin的核心定義是 : 它只組合物件, 例如文字或圖片. 透過物件的排列順序以及物件間位置間距, 來決定子物件位置, 以及大小(通常是背景圖片). 透過ui元件的互相嵌套, 組合出更複雜的ui元件. 例如這個顏色選取的展示 :
  1. 最外層是一個左到右排列的ui元件
  2. 左側的ui元件又是一個上到下排列的ui元件, 每個子元件包含一個slider bar.
排列物件的功能在很多種ui framework都可以看見, 例如unity的auto layout (我參考的是以前使用過的wxWidget)
至於其他的例如捲動表格, slider bar, typing文字, 啟動文字編輯等等功能, 我會先做獨立功能的plugin, 再包進ui元件的邏輯裡, 換句話說, ui plugin使用這些功能.
Rich也曾做過一些ui元件, 但他元件的設計理念跟我的不同, 比較偏好傳一大串參數, 在ui元件內部產生文字/圖片物件. (我偏好使用者在外部產生文字/圖片物件, 再傳入ui元件, 所以參數會少很多很多)

1

3

LINE 分享

相關創作

Side Project | Day 33 | Life

文字冒險遊戲UI / 視覺小說UI範本 中文版製作中 (適用於Renpy引擎)

Ui

留言

開啟 APP

face基於日前微軟官方表示 Internet Explorer 不再支援新的網路標準，可能無法使用新的應用程式來呈現網站內容，在瀏覽器支援度及網站安全性的雙重考量下，為了讓巴友們有更好的使用體驗，巴哈姆特即將於 2019年9月2日 停止支援 Internet Explorer 瀏覽器的頁面呈現和功能。
屆時建議您使用下述瀏覽器來瀏覽巴哈姆特：
。Google Chrome（推薦）
。Mozilla Firefox
。Microsoft Edge（Windows10以上的作業系統版本才可使用）

face我們了解您不想看到廣告的心情⋯ 若您願意支持巴哈姆特永續經營，請將 gamer.com.tw 加入廣告阻擋工具的白名單中，謝謝 !【教學】