implementing an immediate mode user interface performed live at Handmade London Meetup 28/01/21

1. Writing an IMGUI
By Henry Rose
1

2. Who Am I?
●
Game Dev of a game called FiKo
●
Creator of VUI (an IMGUI)
https://github.com/heroseh/vui
●
Stream Mon – Fri 1PM GMT
https://twitch.tv/heroseh
●
Twitter: @_herose_ 2

3. FiKo
3

4. Level Editor with IMGUI
4

5. VUI: an IMGUI
5

6. What makes it different?
6
●
User UI code runs every input event
●
No control objects in user code
●
Dynamic by default

7. https://youtu.be/Z1qyvQsjK5Y
Casey Muratori (2005)
7

8. Dear Imgui (C++)
First - V1.0 released 11/08/14
Latest - V1.80 released 21/01/21 8

9. Nuklear (C)
First - V1.0 released 14/04/16
Is now maintained by the community
9

10. Handmade Podcast Ep 3
https://handmade.network/podcast/ep/c1174949-adc4-492d-89b5-ca73dea4ff16
10

11. Why IMGUI
11

12. Why IMGUI - Retained
12

13. Why IMGUI - Retained
13

14. Why IMGUI - Retained
14

15. Why IMGUI
15

16. Why IMGUI
16

17. How do you build controls?
17
Button
Label
Grid
TextBox
CheckBox
RadioButton
ComboBox
Retained UI IMGUI
Control

18. How do you build controls?
18

19. Build controls - stack
19
[ ]

20. Problems of the stack approach
20
●
Doing to much at once
●
Fixed or Auto sizing only, cannot fill the
parent or ratio of parent
●
Animation is harder since you create new
controls each time.

21. Build controls - tree
21
Internal Build State Pointers
P = Parent Control
PS = Previous Sibling Control
P
P
PS
8
21
25
27
PS
PS

22. 22
Internal Build State Pointers
P = Parent Control
PS = Previous Sibling Control
P
P
PS
8
21
25
27
PS
PS
Build controls – tree (later iteration)
P
PS
11
PS
17
PS
15

23. Control data structure
23

24. Control data structure
24

25. Control data structure
25

26. High Level Overview
26
Logic
Rendering
Frame

27. 27
Logic
Rendering
Frame
High Level Overview

28. 28
Logic
Input – (User -> System)
Build UI - (User)
Layout - (System)
High Level Overview

29. High Level Overview - Logic
29

30. 30
High Level Overview - Logic

31. 31
High Level Overview - Logic

32. 32
High Level Overview - Logic

33. 33
High Level Overview - Logic

34. How is one Designed? - Logic
34

35. How is one Designed? - Logic
35

36. 36
Logic
Rendering
Frame
High Level Overview

37. High Level Overview
37
Logic
Rendering
Frame

38. Thank you for watching
38

39. Questions?
39