|
|
| (16 intermediate revisions by 2 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.
| |
| − |
| |
| − |
| |
| − | == 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
| |
| − | local IO = imgui:getIO()
| |
| − | IO:setFontGlobalScale(2.5)
| |
| − | --imgui:setLightStyle()
| |
| − | --imgui:setClassicStyle()
| |
| − | -- some vars
| |
| − | local xtext, xtext2 = "Centered Text", "Colored Text"
| |
| − |
| |
| − | -- the loop
| |
| − | function enterFrame(e)
| |
| − | local CW = application:getContentWidth()
| |
| − |
| |
| − | -- 1 begin
| |
| − | imgui:newFrame(e)
| |
| − |
| |
| − | -- 2 our GUI
| |
| − | if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
| |
| − | -- some spacing
| |
| − | imgui:dummy(CW, 32 * 2) -- imgui:dummy(w, h)
| |
| − | -- a centered text
| |
| − | local textW = imgui:calcTextSize(xtext)
| |
| − | local textMid = (CW - 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(CW, 32 * 4)
| |
| − | -- a colored text
| |
| − | imgui:textColored(xtext2, 0xff00ff)
| |
| − | imgui:endWindow()
| |
| − |
| |
| − | -- 3 end
| |
| − | end
| |
| − | imgui:endFrame()
| |
| − | imgui:render()
| |
| − | end
| |
| − |
| |
| − | -- the listeners
| |
| − | stage:addEventListener("enterFrame", enterFrame)
| |
| − | </source>
| |
| − |
| |
| − | == DEAR IMGUI BUTTONS ==
| |
| − | '''Here we make some buttons'''
| |
| − | <source lang="lua">
| |
| − | require "ImGui"
| |
| − | -- Setup ImGui
| |
| − | local imgui = ImGui.new()
| |
| − | stage:addChild(imgui)
| |
| − | -- some imgui params
| |
| − | local IO = imgui:getIO()
| |
| − | IO:setFontGlobalScale(2.5)
| |
| − |
| |
| − | imgui:setClassicStyle()
| |
| − |
| |
| − | stage:addChild(imgui)
| |
| − |
| |
| − | -- some vars
| |
| − | local xtext = "Centered Text"
| |
| − |
| |
| − | -- image to draw
| |
| − | local imageTex = Texture.new("gfx/image.jpg")
| |
| − |
| |
| − | function enterFrame(e)
| |
| − | -- 1 begin
| |
| − | imgui:newFrame(e)
| |
| − |
| |
| − | local CW = application:getContentWidth()
| |
| − | -- 2 our GUI
| |
| − | if (imgui:beginFullScreenWindow("Hello ImGui", nil)) then
| |
| − | -- some spacing
| |
| − | imgui:dummy(CW, 32 * 2)
| |
| − | -- a centered text?
| |
| − | local textW = imgui:calcTextSize(xtext)
| |
| − | local textMid = (CW - textW) / 2
| |
| − | imgui:dummy(textMid, 0)
| |
| − | imgui:sameLine(0, 0)
| |
| − | imgui:text(xtext)
| |
| − | -- some spacing
| |
| − | imgui:dummy(CW, 32 * 2)
| |
| − | -- a button
| |
| − | imgui:text("A button")
| |
| − | imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, 0.5, 0.5)
| |
| − | imgui:button(("x"), 128, 64) -- text, w, h
| |
| − | imgui:popStyleVar()
| |
| − | -- some spacing
| |
| − | imgui:dummy(CW, 32 * 1)
| |
| − | -- a grid of buttons
| |
| − | imgui:text("A grid of buttons")
| |
| − |
| |
| − | local i = 0
| |
| − | for x = 0,1,0.5 do
| |
| − | for y = 0,1,0.5 do
| |
| − | imgui:pushStyleVar(ImGui.StyleVar_ButtonTextAlign, x, y)
| |
| − | if(imgui:button(("[%.1f, %.1f]"):format(x,y), application:getContentWidth() / 3, 100)) then
| |
| − | print(x, y)
| |
| − | end
| |
| − | imgui:popStyleVar()
| |
| − | -- count elements
| |
| − | i += 1
| |
| − | -- make new line on 3d element
| |
| − | if (i % 3 ~= 0) then imgui:sameLine() end
| |
| − | end
| |
| − | end
| |
| − | -- some spacing
| |
| − | imgui:dummy(application:getContentWidth(), 32 * 1)
| |
| − | -- an image button with text
| |
| − | imgui:text("An image button \nwith text")
| |
| − | if(imgui:imageButtonWithText(imageTex, "button", 16, 16)) then
| |
| − | print("pressed")
| |
| − | end
| |
| − | end
| |
| − |
| |
| − | imgui:endWindow()
| |
| − |
| |
| − | -- 3 end
| |
| − | imgui:endFrame()
| |
| − | imgui:render()
| |
| − | end
| |
| − | -- add listener to draw GUI
| |
| − | stage:addEventListener("enterFrame", enterFrame)
| |
| − | </source>
| |
| − |
| |
| − | = File open/save dialog project example =
| |
| − | [https://github.com/MultiPain/Gideros_examples/tree/master/ImGuiFileDialogDemo GitHub]
| |
| − |
| |
| − | {|-
| |
| − | | style="width: 50%; vertical-align:top;"|
| |
| − | === Methods ===
| |
| − | [[ImGui.new]] ''initializes ImGui''<br/><!--GIDEROSMTD:ImGui.new() initializes ImGui-->
| |
| − | [[ImGui:showDemoWindow]] ''displays an ImGui demo''<br/><!--GIDEROSMTD:ImGui.showDemoWindow() displays an ImGui demo-->
| |
| − | [[ImGui:text]] ''displays an ImGui text''<br/><!--GIDEROSMTD:ImGui.text() displays an ImGui text-->
| |
| | | | |
| − | '''WORK IN PROGRESS...''' | + | '''Of course, Gideros Wiki is here to help as well. You will find below some Dear ImGui examples implemented in Gideros Studio. |
| | + | [[ImGui_Examples]] |
| | | | |
| − | | style="width: 50%; vertical-align:top;"|
| + | === Classes === |
| − | === Events === | + | <div style="column-count:3;-moz-column-count:3;-webkit-column-count:3"> |
| − | [[ImGui.KeyChar]]<br/><!--GIDEROSEVT:ImGui.KeyChar-->
| + | '''[[ImGui]]'''<br/><!--GIDEROSOBJ:ImGui--> |
| − | [[ImGui.KeyDown]]<br/><!--GIDEROSEVT:ImGui.KeyDown-->
| + | '''[[ImGui.DrawList]]'''<br/><!--GIDEROSOBJ:ImGui.DrawList--> |
| − | [[ImGui.KeyUp]]<br/><!--GIDEROSEVT:ImGui.KeyUp-->
| + | '''[[ImGui.Style]]'''<br/><!--GIDEROSOBJ:ImGui.Style--> |
| − | [[ImGui.MouseDown]]<br/><!--GIDEROSEVT:ImGui.MouseDown-->
| + | </div> |
| − | [[ImGui.MouseHover]]<br/><!--GIDEROSEVT:ImGui.MouseHover-->
| |
| − | [[ImGui.MouseMove]]<br/><!--GIDEROSEVT:ImGui.MouseMove-->
| |
| − | [[ImGui.MouseUp]]<br/><!--GIDEROSEVT:ImGui.MouseUp--> | |
| − | [[ImGui.MouseWheel]]<br/><!--GIDEROSEVT:ImGui.MouseWheel--> | |
| − | [[ImGui.TouchBegin]]<br/><!--GIDEROSEVT:ImGui.TouchBegin--> | |
| − | [[ImGui.TouchEnd]]<br/><!--GIDEROSEVT:ImGui.TouchEnd-->
| |
| − | [[ImGui.TouchCancel]]<br/><!--GIDEROSEVT:ImGui.TouchCancel-->
| |
| − | [[ImGui.TouchMove]]<br/><!--GIDEROSEVT:ImGui.TouchMove-->
| |
| − | === Constants ===
| |
| − | |}
| |
| | | | |
| | {{GIDEROS IMPORTANT LINKS}} | | {{GIDEROS IMPORTANT LINKS}} |
