Cleaning Up the Editor UI Layout — Handmade Hero — Episode Guide

0:01Recap and set the stage for the day beautifying the asset editing UI

🗩

0:01Recap and set the stage for the day beautifying the asset editing UI

🗩

0:01Recap and set the stage for the day beautifying the asset editing UI

🗩

1:32Showcase the current asset editing UI

🏃

1:32Showcase the current asset editing UI

🏃

1:32Showcase the current asset editing UI

🏃

3:37Introduce the notion of tabbed UI sections, and try to make UpdateAndRenderEditor() peg the UI to the left side of the screen

7:52See that the UI remains at the screen's centre

🏃

7:52See that the UI remains at the screen's centre

🏃

7:52See that the UI remains at the screen's centre

🏃

8:05Augment dev_ui with a rectangle2 UISpace for UpdateAndRenderEditor() and BeginUIFrame() to use

11:46See that our UI is now pegged to the left side of the screen

🏃

11:46See that our UI is now pegged to the left side of the screen

🏃

11:46See that our UI is now pegged to the left side of the screen

🏃

13:12Make UpdateAndRenderEditor() organise the buttons into sections

15:16Check out our separated button sections

🏃

15:16Check out our separated button sections

🏃

15:16Check out our separated button sections

🏃

15:33Enable BeginSection() to handle tabbed UI sections, augmenting the in_game_editor with a dev_ui_section_picker

31:07Introduce SectionPicker()

34:38Check out our tabbed UI, which doesn't cycle through sections

🏃

34:38Check out our tabbed UI, which doesn't cycle through sections

🏃

34:38Check out our tabbed UI, which doesn't cycle through sections

🏃

34:58Investigate the reason why our UI section cycling didn't do anything

36:23Check out our working tabbed UI, after having selected an asset

🏃

36:23Check out our working tabbed UI, after having selected an asset

🏃

36:23Check out our working tabbed UI, after having selected an asset

🏃

37:18Beautify the UI, augmenting dev_ui_layout with a Thickness parameter

40:44Check out our more thickly bordered UI

🏃

40:44Check out our more thickly bordered UI

🏃

40:44Check out our more thickly bordered UI

🏃

43:19Augment dev_ui_section_picker with CurrentSectionExists and make the UI revert to an existing section if the user's interactions result in the current section no longer existing

47:17Check out our UI's full section picker

🏃

47:17Check out our UI's full section picker

🏃

47:17Check out our UI's full section picker

🏃

47:37Make Button() style enabled and disabled buttons differently

50:08Check out our enabled and disabled button styles, finding that the state didn't always get set correctly

🏃

50:08Check out our enabled and disabled button styles, finding that the state didn't always get set correctly

🏃

50:08Check out our enabled and disabled button styles, finding that the state didn't always get set correctly

🏃

50:52Restyle the buttons a bit in Button()

51:15Again find that the Undo button doesn't get styled correctly

🏃

51:15Again find that the Undo button doesn't get styled correctly

🏃

51:15Again find that the Undo button doesn't get styled correctly

🏃

51:53Try to fix the enabled / disabled styling in Button()

52:21Find that this didn't fix the enabled / disabled button styling

🏃

52:21Find that this didn't fix the enabled / disabled button styling

🏃

52:21Find that this didn't fix the enabled / disabled button styling

🏃

53:14Investigate the issue with the enabled / disabled button state setting

📖

53:14Investigate the issue with the enabled / disabled button state setting

📖

53:14Investigate the issue with the enabled / disabled button state setting

📖

56:01Try making Button() clear the Interaction.ID

56:27Find that this doesn't fix our button state issue

🏃

56:27Find that this doesn't fix our button state issue

🏃

56:27Find that this doesn't fix our button state issue

🏃

57:20Break in to UpdateAndRenderEditor() to figure out why the Undo button does not get restyled when undo edits should be available

🏃

57:20Break in to UpdateAndRenderEditor() to figure out why the Undo button does not get restyled when undo edits should be available

🏃

57:20Break in to UpdateAndRenderEditor() to figure out why the Undo button does not get restyled when undo edits should be available

🏃

1:01:15Realise that EditorInteract() pushes edits onto the undo stack one frame late

🏃

1:01:15Realise that EditorInteract() pushes edits onto the undo stack one frame late

🏃

1:01:15Realise that EditorInteract() pushes edits onto the undo stack one frame late

🏃

1:02:34Make UpdateAndRenderEditor() responsible for pushing edits onto the undo stack

1:09:28Find that the Undo and Redo buttons get styled correctly

🏃

1:09:28Find that the Undo and Redo buttons get styled correctly

🏃

1:09:28Find that the Undo and Redo buttons get styled correctly

🏃

1:11:53Change Button() to set the Interaction.Type of disabled buttons to NOP

1:12:48Find that disabled buttons now work by preventing click-through to the space behind

🏃

1:12:48Find that disabled buttons now work by preventing click-through to the space behind

🏃

1:12:48Find that disabled buttons now work by preventing click-through to the space behind

🏃

1:13:24Introduce BeginLayoutBox() to give the UI a rectangular click-consuming background

1:22:50Check out our backgrounded UI

🏃

1:22:50Check out our backgrounded UI

🏃

1:22:50Check out our backgrounded UI

🏃

1:23:14Make BeginLayoutBox() darken the UI's background and increase its top-left margin

1:24:08Check out our darkened and inset asset editing UI

🏃

1:24:08Check out our darkened and inset asset editing UI

🏃

1:24:08Check out our darkened and inset asset editing UI

🏃

1:24:42Reduce the number of characters in our UI labels

1:25:57Check out our more compressed UI

🏃

1:25:57Check out our more compressed UI

🏃

1:25:57Check out our more compressed UI

🏃

1:26:29Further reduce the number of characters in our UI labels

1:30:30Check out our yet more compressed UI, with some of the fields unfortunately missing

🏃

1:30:30Check out our yet more compressed UI, with some of the fields unfortunately missing

🏃

1:30:30Check out our yet more compressed UI, with some of the fields unfortunately missing

🏃

1:31:14Enable EditableType() to handle 0 LabelText

1:31:49Check out our fully working, compressed UI

🏃

1:31:49Check out our fully working, compressed UI

🏃

1:31:49Check out our fully working, compressed UI

🏃

1:32:18Make EditableBoolean() style On and Off values differently

1:34:04Check out our differently styled boolean button

🏃

1:34:04Check out our differently styled boolean button

🏃

1:34:04Check out our differently styled boolean button

🏃

1:34:17Increase the brightness of our button text in Button()

1:34:39Crash in OutChar()

🏃

1:34:39Crash in OutChar()

🏃

1:34:39Crash in OutChar()

🏃

1:34:46Prevent Win32UnloadGameCode() from calling FreeLibrary()

1:35:40Check out the brightened UI button text

🏃

1:35:40Check out the brightened UI button text

🏃

1:35:40Check out the brightened UI button text

🏃

1:36:01Try to darken the default BackdropColor of Button(), but find that it won't hot reload

🏃

🖮

1:36:01Try to darken the default BackdropColor of Button(), but find that it won't hot reload

🏃

🖮

1:36:01Try to darken the default BackdropColor of Button(), but find that it won't hot reload

🏃

🖮

1:37:14Investigate our hot reloading issue and realise that Win32LoadGameCode() can't reload while it uses a single TempDLLName

📖

1:37:14Investigate our hot reloading issue and realise that Win32LoadGameCode() can't reload while it uses a single TempDLLName

📖

1:37:14Investigate our hot reloading issue and realise that Win32LoadGameCode() can't reload while it uses a single TempDLLName

📖

1:40:34Enable Win32BuildEXEPathFilename() to produce file names with an optional unique substring

1:50:00Run the game, make a change to trigger hot reloading, and find that we produced a uniquely named .dll

🏃

🖮

1:50:00Run the game, make a change to trigger hot reloading, and find that we produced a uniquely named .dll

🏃

🖮

1:50:00Run the game, make a change to trigger hot reloading, and find that we produced a uniquely named .dll

🏃

🖮

1:51:46Move the variably-sized Type button to the far right of our UI

1:52:52Check out our full asset editing UI

🏃

1:52:52Check out our full asset editing UI

🏃

1:52:52Check out our full asset editing UI

🏃

1:53:15Rename the "unused" button to "ADD", and make UpdateAndRenderEditor() draw our UI at a fixed sized

1:54:16Check out our fixed-size asset editing UI

🏃

1:54:16Check out our fixed-size asset editing UI

🏃

1:54:16Check out our fixed-size asset editing UI

🏃

1:55:04Q&A

🗩

1:55:04Q&A

🗩

1:55:04Q&A

🗩

1:55:58euphius Q: Recently you said that Qt is not that good. What do you dislike about it?

🗪

1:55:58euphius Q: Recently you said that Qt is not that good. What do you dislike about it?

🗪

1:55:58euphius Q: Recently you said that Qt is not that good. What do you dislike about it?

🗪

1:58:05Critique Qt's QCalendarWidget (and parent widgets) offering¹

📖

1:58:05Critique Qt's QCalendarWidget (and parent widgets) offering¹

📖

1:58:05Critique Qt's QCalendarWidget (and parent widgets) offering¹

📖

2:03:55Critique Qt's Application Example² focusing on its application of the retained-mode paradigm

📖

2:03:55Critique Qt's Application Example² focusing on its application of the retained-mode paradigm

📖

2:03:55Critique Qt's Application Example² focusing on its application of the retained-mode paradigm

📖

2:15:06Critique Qt's Animated Tiles Example³

📖

2:15:06Critique Qt's Animated Tiles Example³

📖

2:15:06Critique Qt's Animated Tiles Example³

📖

2:21:47thebirkisreal Q: Just made a new version for dumpview.⁴ Feel free to come back to this after Q&A has ended

🗪

2:21:47thebirkisreal Q: Just made a new version for dumpview.⁴ Feel free to come back to this after Q&A has ended

🗪

2:21:47thebirkisreal Q: Just made a new version for dumpview.⁴ Feel free to come back to this after Q&A has ended

🗪

2:21:59pythno Q: Regarding the Qt slider example. So if I get this correctly, in an IMGUI one just goes through the UI elements and just draws them depending on whatever the slider-value says?

🗪

2:21:59pythno Q: Regarding the Qt slider example. So if I get this correctly, in an IMGUI one just goes through the UI elements and just draws them depending on whatever the slider-value says?

🗪

2:21:59pythno Q: Regarding the Qt slider example. So if I get this correctly, in an IMGUI one just goes through the UI elements and just draws them depending on whatever the slider-value says?

🗪

2:22:12Immediate-mode vs retained-mode GUI

🗩

2:22:12Immediate-mode vs retained-mode GUI

🗩

2:22:12Immediate-mode vs retained-mode GUI

🗩

2:23:05Critique retained-mode GUI as exemplified by Qt's ListView⁵

📖

2:23:05Critique retained-mode GUI as exemplified by Qt's ListView⁵

📖

2:23:05Critique retained-mode GUI as exemplified by Qt's ListView⁵

📖

2:27:46zrizi Q: Regarding keeping audio and video synced. When you did the audio system you were very strict about playing without losing 1 frame. That was before we moved to OpenGL. Now there's a latency between when we're issuing a frame until it is actually rendered (CPU / GPU latency). How are we going to keep them in sync? I guess for Handmade Hero it's not a huge deal, but I'm curious to hear your opinion on how to keep them in sync in case I need to do character lip-sync animations

🗪

2:27:46zrizi Q: Regarding keeping audio and video synced. When you did the audio system you were very strict about playing without losing 1 frame. That was before we moved to OpenGL. Now there's a latency between when we're issuing a frame until it is actually rendered (CPU / GPU latency). How are we going to keep them in sync? I guess for Handmade Hero it's not a huge deal, but I'm curious to hear your opinion on how to keep them in sync in case I need to do character lip-sync animations

🗪

2:27:46zrizi Q: Regarding keeping audio and video synced. When you did the audio system you were very strict about playing without losing 1 frame. That was before we moved to OpenGL. Now there's a latency between when we're issuing a frame until it is actually rendered (CPU / GPU latency). How are we going to keep them in sync? I guess for Handmade Hero it's not a huge deal, but I'm curious to hear your opinion on how to keep them in sync in case I need to do character lip-sync animations

🗪

2:30:03pythno Q: Thanks for the list view example. That made it pretty clear. Where do you think it comes from that people build those verbose APIs that don't even give you much flexibility?

🗪

2:30:03pythno Q: Thanks for the list view example. That made it pretty clear. Where do you think it comes from that people build those verbose APIs that don't even give you much flexibility?

🗪

2:30:03pythno Q: Thanks for the list view example. That made it pretty clear. Where do you think it comes from that people build those verbose APIs that don't even give you much flexibility?

🗪

2:31:540lpbm Q: If retained-mode is so bad, why haven't immediate GUIs taken over the desktop / mobile market yet? Spoilers, not every application is a game

🗪

2:31:540lpbm Q: If retained-mode is so bad, why haven't immediate GUIs taken over the desktop / mobile market yet? Spoilers, not every application is a game

🗪

2:31:540lpbm Q: If retained-mode is so bad, why haven't immediate GUIs taken over the desktop / mobile market yet? Spoilers, not every application is a game

🗪

2:33:32filiadelski Q: Suppose you have an array of some struct type and each item has a name which is what you want to represent as an item in the list for the end user to choose from. Would it be a good idea to hand the UI some pointer to the first name and specify some stride to the next, or how would you do it?

🗪

2:33:32filiadelski Q: Suppose you have an array of some struct type and each item has a name which is what you want to represent as an item in the list for the end user to choose from. Would it be a good idea to hand the UI some pointer to the first name and specify some stride to the next, or how would you do it?

🗪

2:33:32filiadelski Q: Suppose you have an array of some struct type and each item has a name which is what you want to represent as an item in the list for the end user to choose from. Would it be a good idea to hand the UI some pointer to the first name and specify some stride to the next, or how would you do it?

🗪

2:34:05doctorgester Q: This is why websites are slow. They are trying to impose the IMGUI paradigm onto retained style and suffer with performance, like they compare data graphs and find differences and apply changes to retained model

🗪

2:34:05doctorgester Q: This is why websites are slow. They are trying to impose the IMGUI paradigm onto retained style and suffer with performance, like they compare data graphs and find differences and apply changes to retained model

🗪

2:34:05doctorgester Q: This is why websites are slow. They are trying to impose the IMGUI paradigm onto retained style and suffer with performance, like they compare data graphs and find differences and apply changes to retained model

🗪

2:34:450lpbm Sad day when JavaScript frameworks are given as good examples

🗪

2:34:450lpbm Sad day when JavaScript frameworks are given as good examples

🗪

2:34:450lpbm Sad day when JavaScript frameworks are given as good examples

🗪

2:35:35erdomina Q: What do you think of annotation based programming a la spring?⁶^,7

🗪

2:35:35erdomina Q: What do you think of annotation based programming a la spring?⁶^,7

🗪

2:35:35erdomina Q: What do you think of annotation based programming a la spring?⁶^,7

🗪

2:37:28doctorgester Q: Profiling huge websites it's pretty common to see 100-500ms spent on things like "Relayouting" or "Recalculating CSS styles" or just purely inside the JavaScript. I've made a purely dear imgui (heavily styled and customized) / WebGL / WebAsm website and it takes 0.5ms per frame to compute the layout

🗪

2:37:28doctorgester Q: Profiling huge websites it's pretty common to see 100-500ms spent on things like "Relayouting" or "Recalculating CSS styles" or just purely inside the JavaScript. I've made a purely dear imgui (heavily styled and customized) / WebGL / WebAsm website and it takes 0.5ms per frame to compute the layout

🗪

2:37:28doctorgester Q: Profiling huge websites it's pretty common to see 100-500ms spent on things like "Relayouting" or "Recalculating CSS styles" or just purely inside the JavaScript. I've made a purely dear imgui (heavily styled and customized) / WebGL / WebAsm website and it takes 0.5ms per frame to compute the layout

🗪

2:39:390lpbm handmade_hero, please make games for Linux

🗪

2:39:390lpbm handmade_hero, please make games for Linux

🗪

2:39:390lpbm handmade_hero, please make games for Linux

🗪

2:43:04Wrap it up

🗩

2:43:04Wrap it up

🗩

2:43:04Wrap it up

🗩

Keyboard Navigation

Global Keys

Menu toggling

In-Menu and Index Controls

Quotes and References Menus and Index

Quotes, References and Credits Menus

Filter Menu

Filter and Link Menus

Credits Menu