|
|
(27 intermediate revisions by 3 users not shown) |
Line 1: |
Line 1: |
| __NOTOC__ | | __NOTOC__ |
| <!-- GIDEROSOBJ:ImGui --> | | <!-- GIDEROSOBJ:ImGui --> |
− | '''<translate>Supported platforms</translate>:''' [[File:Platform android.png]][[File:Platform ios.png]][[File:Platform mac.png]][[File:Platform pc.png]][[File:Platform html5.png]][[File:Platform winrt.png]][[File:Platform win32.png]]<br/> | + | '''Supported platforms:''' [[File:Platform android.png]][[File:Platform ios.png]][[File:Platform mac.png]][[File:Platform pc.png]][[File:Platform html5.png]][[File:Platform winrt.png]][[File:Platform win32.png]]<br/> |
− | '''<translate>Available since</translate>:''' Gideros 2020.9<br/> | + | '''Available since:''' Gideros 2020.9<br/> |
| | | |
| === Description === | | === Description === |
| This is an implementation of the Dear ImGui library. | | This is an implementation of the Dear ImGui library. |
| See full original documentation here: https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html | | See full original documentation here: https://pthom.github.io/imgui_manual_online/manual/imgui_manual.html |
| + | |
| + | |
| + | To use Dear ImGui in your project you need to add the ImGui plugin and call require like so: |
| + | <syntaxhighlight lang="lua"> |
| + | require 'ImGui' |
| + | </syntaxhighlight> |
| | | |
| | | |
Line 14: |
Line 20: |
| https://github.com/MultiPain/Gideros_ImGui | | https://github.com/MultiPain/Gideros_ImGui |
| | | |
− | <source lang="lua">
| |
− | require 'ImGui'
| |
− | </source>
| |
− |
| |
− |
| |
− | '''And of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio. Enjoy!'''
| |
− |
| |
− | __TOC__
| |
− |
| |
− | == DEAR IMGUI TEXT ==
| |
− | '''Let's start with a text example'''
| |
− | <source lang="lua">
| |
− | require "ImGui"
| |
− |
| |
− | -- a Dear ImGui instance
| |
− | local imgui = ImGui.new()
| |
− | stage:addChild(imgui)
| |
− |
| |
− | -- we scale the font up
| |
− | imgui:ioSetFontGlobalScale(2)
| |
− |
| |
− | -- we choose a style (default = Dark)
| |
− | --imgui:setLightStyle()
| |
− | --imgui:setDarkStyle()
| |
− | imgui:setClassicStyle()
| |
− |
| |
− | -- we create 2 variables to hold our main window status
| |
− | local mainWindowOpen, mainWindowDrawn
| |
− |
| |
− | -- Dear ImGui runs on the game loop
| |
− | function enterFrame(e)
| |
− | -- 1 we start ImGui
| |
− | imgui:newFrame(e)
| |
− |
| |
− | -- 2 we build our GUI
| |
− | mainWindowOpen, mainWindowDrawn =
| |
− | imgui:beginWindow(
| |
− | "Hello ImGui v"..ImGui._VERSION, -- main window title
| |
− | true -- main window is expanded
| |
− | )
| |
− | if (mainWindowDrawn) then -- the variable is false when main window is collapsed
| |
− | imgui:text("Hello Dear ImGui!") -- we add a text element to our GUI
| |
− | end
| |
− | imgui:endWindow()
| |
− |
| |
− | -- 3 we render our window
| |
− | imgui:endFrame()
| |
− | imgui:render()
| |
− | end
| |
− |
| |
− | -- this wouldn't work without listeners
| |
− | stage:addEventListener("mouseDown", function(e) imgui:onMouseDown(e) end)
| |
− | stage:addEventListener("mouseUp", function(e) imgui:onMouseUp(e) end)
| |
− | stage:addEventListener("mouseHover", function(e) imgui:onMouseHover(e) end)
| |
− | stage:addEventListener("mouseMove", function(e) imgui:onMouseMove(e) end)
| |
− | stage:addEventListener("mouseWheel", function(e) imgui:onMouseWheel(e) end)
| |
− | stage:addEventListener("keyDown", function(e) imgui:onKeyDown(e) end)
| |
− | stage:addEventListener("keyUp", function(e) imgui:onKeyUp(e) end)
| |
− | stage:addEventListener("keyChar", function(e) imgui:onKeyChar(e) end)
| |
− | stage:addEventListener("enterFrame", enterFrame)
| |
− | </source>
| |
− |
| |
− | == DEAR IMGUI CENTERED TEXT & COLORED TEXT ==
| |
− | '''Here we center our text and introduce some more functionalities'''
| |
− | <source lang="lua">
| |
− | require "ImGui"
| |
− |
| |
− | local imgui = ImGui.new()
| |
− | stage:addChild(imgui)
| |
− | -- some imgui params
| |
− | imgui:ioSetFontGlobalScale(2.5)
| |
− | --imgui:setLightStyle()
| |
− | --imgui:setClassicStyle()
| |
− | -- our window + some params
| |
− | local mainWindowOpen, mainWindowDrawn
| |
− | local window_flags = -- a full screen window
| |
− | ImGui.WindowFlags_NoTitleBar |
| |
− | ImGui.WindowFlags_NoCollapse |
| |
− | ImGui.WindowFlags_NoResize |
| |
− | ImGui.WindowFlags_NoMove |
| |
− | ImGui.WindowFlags_NoBringToFrontOnFocus |
| |
− | ImGui.WindowFlags_NoNavFocus
| |
− | -- some vars
| |
− | local xtext, xtext2 = "Centered Text", "Colored Text"
| |
− | local textW, textH, textMid -- for centered texts
| |
− |
| |
− | -- the loop
| |
− | function enterFrame(e)
| |
− | -- 1 begin
| |
− | imgui:newFrame(e)
| |
− |
| |
− | -- 2 our GUI
| |
− | imgui:setNextWindowPos(0, 0)
| |
− | imgui:setNextWindowSize(myappwidth, myappheight)
| |
− | mainWindowOpen, mainWindowDrawn = imgui:beginWindow("Hello ImGui", true, window_flags)
| |
− | -- some spacing
| |
− | imgui:dummy(application:getContentWidth(), 32 * 2) -- imgui:dummy(w, h)
| |
− | -- a centered text
| |
− | textW, _ = imgui:calcTextSize(xtext)
| |
− | textMid = (application:getContentWidth() - textW) / 2
| |
− | imgui:dummy(textMid, 0)
| |
− | imgui:sameLine(0, 0) -- puts the next element on the same line with no gap, for gaps use imgui:sameLine()
| |
− | imgui:text(xtext)
| |
− | -- some spacing
| |
− | imgui:dummy(application:getContentWidth(), 32 * 4)
| |
− | -- a colored text
| |
− | imgui:textColored(xtext2, 0xff00ff)
| |
− | imgui:endWindow()
| |
− |
| |
− | -- 3 end
| |
− | imgui:endFrame()
| |
− | imgui:render()
| |
− | end
| |
− |
| |
− | -- the listeners
| |
− | stage:addEventListener("mouseDown", function(e) imgui:onMouseDown(e) end)
| |
− | stage:addEventListener("mouseUp", function(e) imgui:onMouseUp(e) end)
| |
− | stage:addEventListener("mouseHover", function(e) imgui:onMouseHover(e) end)
| |
− | stage:addEventListener("mouseMove", function(e) imgui:onMouseMove(e) end)
| |
− | stage:addEventListener("mouseWheel", function(e) imgui:onMouseWheel(e) end)
| |
− | stage:addEventListener("keyDown", function(e) imgui:onKeyDown(e) end)
| |
− | stage:addEventListener("keyUp", function(e) imgui:onKeyUp(e) end)
| |
− | stage:addEventListener("keyChar", function(e) imgui:onKeyChar(e) end)
| |
− | stage:addEventListener("enterFrame", enterFrame)
| |
− | </source>
| |
| | | |
− | = YOU WANT MORE? =
| + | '''Of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio. |
− | '''Soon, God's willing''' | + | [[ImGui_Examples]] |
| | | |
− | {|-
| + | === Classes === |
− | | style="width: 50%; vertical-align:top;"|
| + | <div style="column-count:3;-moz-column-count:3;-webkit-column-count:3"> |
− | === <translate>Methods</translate> === | + | '''[[ImGui]]'''<br/><!--GIDEROSOBJ:ImGui--> |
− | | style="width: 50%; vertical-align:top;"|
| + | '''[[ImGui.DrawList]]'''<br/><!--GIDEROSOBJ:ImGui.DrawList--> |
− | === <translate>Events</translate> ===
| + | '''[[ImGui.Style]]'''<br/><!--GIDEROSOBJ:ImGui.Style--> |
− | === <translate>Constants</translate> ===
| + | </div> |
− | |}
| |
| | | |
| {{GIDEROS IMPORTANT LINKS}} | | {{GIDEROS IMPORTANT LINKS}} |