99 lines
9.1 KiB
Plaintext
99 lines
9.1 KiB
Plaintext
[video member=cmuratori stream_platform=twitch stream_username=handmade_hero project=code title="Cleaning Up the Editor UI Layout" vod_platform=youtube id=aHG-uTt-n9Q annotator=Miblo]
|
|
[0:01][Recap and set the stage for the day beautifying the asset editing :UI][:"asset system" :speech]
|
|
[1:32][Showcase the current asset editing :UI][:"asset system" :run]
|
|
[3:37][Introduce the notion of tabbed :UI sections, and try to make UpdateAndRenderEditor() peg the :UI to the left side of the screen][:"asset system"]
|
|
[7:52][See that the :UI remains at the screen's centre][:"asset system" :run]
|
|
[8:05][Augment dev_ui with a rectangle2 UISpace for UpdateAndRenderEditor() and BeginUIFrame() to use][:"asset system" :ui]
|
|
[11:46][See that our :UI is now pegged to the left side of the screen][:"asset system" :run]
|
|
[13:12][Make UpdateAndRenderEditor() organise the buttons into sections][:"asset system" :ui]
|
|
[15:16][Check out our separated button sections][:"asset system" :run :ui]
|
|
[15:33][Enable BeginSection() to handle tabbed :UI sections, augmenting the in_game_editor with a dev_ui_section_picker][:"asset system"]
|
|
[31:07][Introduce SectionPicker()][:"asset system" :ui]
|
|
[34:38][Check out our tabbed :UI, which doesn't cycle through sections][:"asset system" :run]
|
|
[34:58][Investigate the reason why our :UI section cycling didn't do anything][:"asset system"]
|
|
[36:23][Check out our working tabbed :UI, after having selected an asset][:"asset system" :run]
|
|
[37:18][Beautify the :UI, augmenting dev_ui_layout with a Thickness parameter][:ui]
|
|
[40:44][Check out our more thickly bordered :UI][:run]
|
|
[43:19][Augment 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:17][Check out our :UI's full section picker][:run]
|
|
[47:37][Make Button() style enabled and disabled buttons differently][:ui]
|
|
[50:08][Check out our enabled and disabled button styles, finding that the state didn't always get set correctly][:run :ui]
|
|
[50:52][Restyle the buttons a bit in Button()][:ui]
|
|
[51:15][Again find that the Undo button doesn't get styled correctly][:run :ui]
|
|
[51:53][Try to fix the enabled / disabled styling in Button()][:ui]
|
|
[52:21][Find that this didn't fix the enabled / disabled button styling][:run :ui]
|
|
[53:14][Investigate the issue with the enabled / disabled button state setting][:research :ui]
|
|
[56:01][Try making Button() clear the Interaction.ID]
|
|
[56:27][Find that this doesn't fix our button state issue][:run :ui]
|
|
[57:20][Break in to UpdateAndRenderEditor() to figure out why the Undo button does not get restyled when undo edits should be available][:run :ui]
|
|
[1:01:15][Realise that EditorInteract() pushes edits onto the undo stack one frame late][:run :ui]
|
|
[1:02:34][Make UpdateAndRenderEditor() responsible for pushing edits onto the undo stack][:ui :"undo / redo"]
|
|
[1:09:28][Find that the Undo and Redo buttons get styled correctly][:run :ui]
|
|
[1:11:53][Change Button() to set the Interaction.Type of disabled buttons to NOP][:ui]
|
|
[1:12:48][Find that disabled buttons now work by preventing click-through to the space behind][:run :ui]
|
|
[1:13:24][Introduce BeginLayoutBox() to give the :UI a rectangular click-consuming background]
|
|
[1:22:50][Check out our backgrounded :UI][:run]
|
|
[1:23:14][Make BeginLayoutBox() darken the :UI's background and increase its top-left margin]
|
|
[1:24:08][Check out our darkened and inset asset editing :UI][:"asset system" :run]
|
|
[1:24:42][Reduce the number of characters in our :UI labels][:"asset system"]
|
|
[1:25:57][Check out our more compressed :UI][:"asset system" :run]
|
|
[1:26:29][Further reduce the number of characters in our :UI labels][:"asset system"]
|
|
[1:30:30][Check out our yet more compressed :UI, with some of the fields unfortunately missing][:"asset system" :run]
|
|
[1:31:14][Enable EditableType() to handle 0 LabelText][:"asset system" :ui]
|
|
[1:31:49][Check out our fully working, compressed :UI][:"asset system" :run]
|
|
[1:32:18][Make EditableBoolean() style On and Off values differently][:"asset system" :ui]
|
|
[1:34:04][Check out our differently styled boolean button][:"asset system" :run]
|
|
[1:34:17][Increase the brightness of our button text in Button()][:"asset system" :ui]
|
|
[1:34:39][Crash in OutChar()][:"asset system" :run]
|
|
[1:34:46][Prevent Win32UnloadGameCode() from calling FreeLibrary()][:"hot reloading"]
|
|
[1:35:40][Check out the brightened :UI button text][:"asset system" :run]
|
|
[1:36:01][Try to darken the default BackdropColor of Button(), but find that it won't hot reload][:"hot reloading" :programming :run :ui]
|
|
[1:37:14][Investigate our :"hot reloading" issue and realise that Win32LoadGameCode() can't reload while it uses a single TempDLLName][:research]
|
|
[1:40:34][Enable Win32BuildEXEPathFilename() to produce file names with an optional unique substring][:"hot reloading"]
|
|
[1:50:00][:Run the game, make a change to trigger :"hot reloading", and find that we produced a uniquely named .dll][:programming]
|
|
[1:51:46][Move the variably-sized Type button to the far right of our :UI][:"asset system"]
|
|
[1:52:52][Check out our full asset editing :UI][:"asset system" :run]
|
|
[1:53:15][Rename the "unused" button to "ADD", and make UpdateAndRenderEditor() draw our :UI at a fixed sized][:"asset system" :ui]
|
|
[1:54:16][Check out our fixed-size asset editing :UI][:"asset system" :run]
|
|
[1:55:04][Q&A][:speech]
|
|
[1:55:58][@euphius][Q: Recently you said that Qt is not that good. What do you dislike about it?][:api]
|
|
[1:58:05][Critique Qt's QCalendarWidget (and parent widgets) offering[ref
|
|
site="Qt Widgets 5.11"
|
|
page="QCalendarWidget Class"
|
|
url=http://doc.qt.io/qt-5.11/qcalendarwidget.html]][:api :research]
|
|
[2:03:55][Critique Qt's Application Example[ref
|
|
site="Qt Widgets 5.11"
|
|
page="Application Example"
|
|
url=http://doc.qt.io/qt-5.11/qtwidgets-mainwindows-application-example.html] focusing on its application of the retained-mode paradigm][:api :research :ui]
|
|
[2:15:06][Critique Qt's Animated Tiles Example[ref
|
|
site="Qt Widgets 5.11"
|
|
page="Animated Tiles Example"
|
|
url=http://doc.qt.io/qt-5.11/qtwidgets-animation-animatedtiles-example.html]][:api :research :ui]
|
|
[2:21:47][@thebirkisreal][Q: Just made a new version for dumpview.[ref
|
|
site=Dropbox
|
|
page=dumpview-v0.2.zip
|
|
url=https://www.dropbox.com/s/xmhqr27ynj39w6r/dumpview-v0.2.zip?dl=0] Feel free to come back to this after Q&A has ended]
|
|
[2:21:59][@pythno][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:12][Immediate-mode vs retained-mode GUI][:speech :ui]
|
|
[2:23:05][Critique retained-mode GUI as exemplified by Qt's ListView[ref
|
|
site=BogoToBogo
|
|
page="Qt5 Tutorial ModelView with QListView and QStringListModel - 2018"
|
|
url=https://www.bogotobogo.com/Qt/Qt5_QListView_QStringListModel_ModelView_MVC.php]][:research :ui]
|
|
[2:27:46][@zrizi][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 [~hero 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][:animation]
|
|
[2:30:03][@pythno][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?][:api]
|
|
[2:31:54][@0lpbm][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][:ui]
|
|
[2:33:32][@filiadelski][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:05][@doctorgester][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][:ui]
|
|
[2:34:45][@0lpbm][Sad day when JavaScript frameworks are given as good examples][:ui]
|
|
[2:35:35][@erdomina][Q: What do you think of annotation based programming a la spring?[ref
|
|
site="IBM Knowledge Center"
|
|
page="Annotation-based programming overview"
|
|
url=https://www.ibm.com/support/knowledgecenter/en/SSRTLW_9.5.0/com.ibm.doclet.doc/topics/coverview.html][ref
|
|
site=Wikipedia
|
|
page="Java annotation"
|
|
url=https://en.wikipedia.org/wiki/Java_annotation]][:language]
|
|
[2:37:28][@doctorgester][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][:ui]
|
|
[2:39:39][@0lpbm][@handmade_hero, please make games for Linux]
|
|
[2:43:04][Wrap it up][:speech]
|
|
[/video]
|