1. 程式人生 > >使用SDL開發IMGUI(一)

使用SDL開發IMGUI(一)

target sdl2 布局 自動布局 png 十分 class 可能 接受

Note:原教程來自http://iki.fi/sol/imgui/

00 – 介紹

IMGUI全稱:Immediate Mode GUI。IMGUI不同於我們常見的RMGUI(MFC、QT、WPF、GTK都是RMGUI)。在典型的RMGUI的應用程序中,我們創建了一堆小部件(widgets),它們通過布局顯示在窗口上,我們可以查詢小部件的狀態,接受系統發來消息和數據,處理、生成新的狀態,最終重繪小部件,用戶看到改變。

在RMGUI中,代碼至少分成3部分:創建、響應消息、刪除。如果考慮到多個小部件之間需要傳遞消息,在系統運行時我們難以預測消息的傳播、小部件狀態的改變。雖然RMGUI這麽麻煩,但在常規的應用開發中,依然是中流砥柱。但是在遊戲開發中,用戶與應用的交互十分頻繁,遊戲逐幀更新,復雜的RMGUI難以做到60FPS。在這種情況下IMGUI就可以展示它的威力。

在IMGUI中代碼是這個樣子的。

if (button(GEN_ID, 15, 15))
{
	button_was_pressed();
}

這段代碼的奇妙之處在於每一幀都被執行一次,button();函數在屏幕的(15,15)處繪制一個按鈕圖片,當檢測到鼠標恰好“激活”時返回true。這裏使用激活是因為這段代碼在一秒內會執行60次甚至更多,假如僅僅是按下鼠標就能激活按鈕的話,將會在一秒內產生很多次按鈕按下響應,這不是我們希望看到的。通常是鼠標在按鈕內部按下又彈起作為一次激活。立即模式GUI不保存狀態,這句話的意思是如果一個小部件需要一些數據顯示它的狀態,這些數據不保存在小部件內部,而是從外部傳遞給小部件,所以通常一個小部件可以看作一個函數,而不是一個類。雖然小部件不保存他自己狀態,但是狀態並沒有消失,而且需要編程人員主動處理狀態,GUI庫變得簡單、高速,開發過程對程序員的要求就變高了。保存狀態數據有很多種思路,簡單的就是技術分享圖片

全局變量技術分享圖片,復雜的UI可能需要KVDB。除此之外IMGUI還有其他缺點,比如在低幀率下表現很難看,自動布局困難,鍵盤焦點難以確認(UI僅僅是一個圖像,不存在內存中的對象)。

本教程使用SDL2開發一個IMGUI庫,代碼公布在GITHUB(倉庫創建中),歡迎star。

IMGUI不僅僅使用在遊戲中做UI。unity3D使用IMGUI制作編輯器。當需要設計UI的響應方式時可以打開unity3D實驗一下。

FF - 目錄

使用SDL開發IMGUI(一)

使用SDL開發IMGUI(一)