Skip to content

Commit 03219aa

Browse files
Proof incomplete in ch20 - missing elements
1 parent 3b777d3 commit 03219aa

File tree

1 file changed

+39
-39
lines changed
  • articles/tutorials/building_2d_games/20_implementing_ui_with_gum

1 file changed

+39
-39
lines changed

articles/tutorials/building_2d_games/20_implementing_ui_with_gum/index.md

Lines changed: 39 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -7,12 +7,12 @@ In the [previous chapter](../19_user_interface_fundamentals/index.md) we explore
77

88
In this chapter you will:
99

10-
- Install and configure the Gum NuGet package.
11-
- Learn about Gum's core concepts including Forms and Visuals
12-
- Implement UI elements for our game's title scene.
13-
- Create a pause menu for the gameplay scene.
14-
- Handle input from keyboard, mouse, and gamepads
15-
- Integrate the UI system with our existing game architecture.
10+
* Install and configure the Gum NuGet package.
11+
* Learn about Gum's core concepts including Forms and Visuals
12+
* Implement UI elements for our game's title scene.
13+
* Create a pause menu for the gameplay scene.
14+
* Handle input from keyboard, mouse, and gamepads
15+
* Integrate the UI system with our existing game architecture.
1616

1717
## What is Gum?
1818

@@ -170,10 +170,10 @@ Panels serve as invisible containers that group related UI elements together. U
170170

171171
A panel provides several key functions:
172172

173-
- Groups related elements for easier management.
174-
- Controls visibility for entire sections of UI at once.
175-
- Establishes a coordinate system for child elements.
176-
- Provides a foundation for layout management.
173+
* Groups related elements for easier management.
174+
* Controls visibility for entire sections of UI at once.
175+
* Establishes a coordinate system for child elements.
176+
* Provides a foundation for layout management.
177177

178178
Panels are especially useful for creating distinct UI screens, by toggling the visibility of different panels you can implement complete UI state changes with minimal code:
179179

@@ -198,9 +198,9 @@ The `Button` Forms control type is the primary interactive control for triggerin
198198

199199
Buttons provide:
200200

201-
- Responses to clicks from mouse, touch, keyboard, or gamepad input.
202-
- Visual feedback when focused or hovered.
203-
- Raises a `Click` event when activated.
201+
* Responses to clicks from mouse, touch, keyboard, or gamepad input.
202+
* Visual feedback when focused or hovered.
203+
* Raises a `Click` event when activated.
204204

205205
Buttons can be positioned using anchoring to create layouts that adapt to different screen sizes:
206206

@@ -232,10 +232,10 @@ startButton.Click += (sender, args) =>
232232

233233
The `Slider` Forms control type allows users to select a numeric value from a continuous range. A slider:
234234

235-
- Displays and modifies a `Value` property constrained between a `Minimum` and `Maximum` value.
236-
- Responds to mouse clicks on its track or by dragging its thumb.
237-
- Supports keyboard and gamepad input for incremental adjustments.
238-
- Raises events when its value changes.
235+
* Displays and modifies a `Value` property constrained between a `Minimum` and `Maximum` value.
236+
* Responds to mouse clicks on its track or by dragging its thumb.
237+
* Supports keyboard and gamepad input for incremental adjustments.
238+
* Raises events when its value changes.
239239

240240
Basic slider setup includes defining its range and establishing event handlers:
241241

@@ -252,8 +252,8 @@ The `SmallChange` property sets the increment for keyboard and gamepad adjustmen
252252

253253
Sliders provide several events for different interaction scenarios:
254254

255-
- `ValueChanged`: Fires continuously as the value changes (useful for live previews).
256-
- `ValueChangeCompleted`: Fires once when the user finishes adjusting the value (useful for applying final settings).
255+
* `ValueChanged`: Fires continuously as the value changes (useful for live previews).
256+
* `ValueChangeCompleted`: Fires once when the user finishes adjusting the value (useful for applying final settings).
257257

258258
```cs
259259
volumeSlider.ValueChanged += (sender, arg) =>
@@ -276,7 +276,7 @@ volumeSlider.ValueChangedCompleted += (sender, arg) =>
276276

277277
### Property Changes vs States
278278

279-
Gum allows you to customize visuals in two ways:
279+
Gum allows you to customize visuals in two ways:
280280

281281
* Direct property assignment
282282
* Using states.
@@ -355,7 +355,7 @@ To make our UI more responsive and engaging, we will add audio feedback that pla
355355

356356
First, download the UI sound effect by right-clicking the following link and saving it as `ui.wav` in the game project's `Content/audio` folder:
357357
358-
- [ui.wav](./files/ui.wav)
358+
* [ui.wav](./files/ui.wav)
359359
360360
Next, add this sound effect to your content project using the MGCB Editor:
361361
@@ -396,8 +396,8 @@ The following is a breakdown of this initialization process:
396396
397397
2. **Content Loading**: Gum needs to be made aware of which content manager to use to load assets through the content pipeline. By setting `GumService.Default.ContentLoader.XnaContentManager = Core.Content`, we tell Gum to use our game's content manager when loading assets. By using the game's existing content manager, Gum also gets the benefit of the caching that the content manager performs when loading assets.
398398
3. **Input Configuration**:
399-
- By default, all Forms controls automatically respond to mouse and touch screen input devices. We need to explicitly register keyboard and gamepad input devices by using th `FrameworkElement.KeyboardsForUiControl` and `Framework.GamePadsForUiControl` properties.
400-
- By default, Forms controls will automatically respond to tab and shift-tab for navigation. By using the `FrameworkElement.TabKeyCombos` and `FrameworkElement.TabReverseKeyCombos` properties, we can add additional key combinations for tabbing. Here map the Up arrow for reverse tabbing and the Down arrow for forward tabbing.
399+
* By default, all Forms controls automatically respond to mouse and touch screen input devices. We need to explicitly register keyboard and gamepad input devices by using th `FrameworkElement.KeyboardsForUiControl` and `Framework.GamePadsForUiControl` properties.
400+
* By default, Forms controls will automatically respond to tab and shift-tab for navigation. By using the `FrameworkElement.TabKeyCombos` and `FrameworkElement.TabReverseKeyCombos` properties, we can add additional key combinations for tabbing. Here map the Up arrow for reverse tabbing and the Down arrow for forward tabbing.
401401
402402
> [!TIP]
403403
> If you prefer different navigation keys, you can remove the built-in Tab/Shift+Tab navigation.
@@ -547,15 +547,15 @@ Next, we will create a method that builds our pause panel with resume and quit b
547547
548548
[!code-csharp[](./snippets/gamescene/createpausepanel.cs)]
549549
550-
#### Initializing the UI
550+
#### Initializing the Game UI
551551
552552
Now that we have implemented the method to create the pause panel, we can implement the main UI initializations method that will call them. Add the following method to the `GameScene` class:
553553
554554
[!code-csharp[](./snippets/gamescene/initializeui.cs)]
555555
556556
Just like with the `TitleScene`, we first clear any existing UI elements from Gum's root before creating the UI elements for this scene.
557557

558-
#### Integrating with the Game Loop
558+
#### Integrating with the Game Loop for the GameScreen
559559

560560
Finally, we need to integrate our UI initialization, update, and draw with the scene's lifecycle. First add the call to `InitializeUI()` in the `Initialize` method:
561561
@@ -565,7 +565,7 @@ Next, update the `LoadContent` method to load the sound effect that will be used
565565
566566
[!code-csharp[](./snippets/gamescene/loadcontent.cs?highlight=27-28)]
567567
568-
Next, update the `Update` method to include Gum's update logic and to only update the game if it is not paused. We will use the visibility of the pause menu to determine if the game is paused or not:
568+
Next, add the following to the beginning of the `Update` method to include Gum's update logic and to only update the game if it is not paused, pausing will prevent any other Game update logic running. We will use the visibility of the pause menu to determine if the game is paused or not:
569569

570570
[!code-csharp[](./snippets/gamescene/update.cs?highlight=3-10)]
571571

@@ -583,13 +583,13 @@ WIth these changes, the pause menu is now fully integrated into the game scene's
583583

584584
In this chapter, you accomplished the following:
585585

586-
- Add and configure the Gum NuGet package in your project.
587-
- Understand key Gum concepts like Forms controls and Visuals.
588-
- Create and position UI elements using anchoring and docking.
589-
- Implement interactive controls like buttons and sliders.
590-
- Handle user input from various input devices.
591-
- Create transitions between different UI screens.
592-
- Integrate the UI system with the game's scene architecture.
586+
* Add and configure the Gum NuGet package in your project.
587+
* Understand key Gum concepts like Forms controls and Visuals.
588+
* Create and position UI elements using anchoring and docking.
589+
* Implement interactive controls like buttons and sliders.
590+
* Handle user input from various input devices.
591+
* Create transitions between different UI screens.
592+
* Integrate the UI system with the game's scene architecture.
593593
594594
While this UI is now functional, you may have noticed that it uses Gum's default styling which does not match our game's visual theme. In the next chapter, we will learn how to customize the appearance of our UI elements to create a cohesive visual style that complements our game's aesthetic.
595595

@@ -600,8 +600,8 @@ While this UI is now functional, you may have noticed that it uses Gum's default
600600
:::question-answer
601601
The two main types are:
602602

603-
- **Forms**: Interactive UI elements like buttons, sliders, and panels that handle user input. They provide built-in functionality for common UI interactions.
604-
- **Visuals**: Display elements like TextRuntime, ColoredRectangleRuntime, and NineSliceRuntime that are used to render graphics. They have no built-in interaction behavior but can be customized visually.
603+
* **Forms**: Interactive UI elements like buttons, sliders, and panels that handle user input. They provide built-in functionality for common UI interactions.
604+
* **Visuals**: Display elements like TextRuntime, ColoredRectangleRuntime, and NineSliceRuntime that are used to render graphics. They have no built-in interaction behavior but can be customized visually.
605605

606606
Forms controls contain Visuals, accessible through the `Visual` property, creating a separation between functionality and presentation.
607607
:::
@@ -611,10 +611,10 @@ While this UI is now functional, you may have noticed that it uses Gum's default
611611
:::question-answer
612612
Gum implements parent-child relationships through a hierarchical structure where:
613613

614-
- UI elements must be connected to the root container to be visible
615-
- Children can be added directly to a parent's Visual.Children collection
616-
- Position coordinates of child elements are relative to their parent
617-
- Property changes like visibility cascade from parent to children
614+
* UI elements must be connected to the root container to be visible
615+
* Children can be added directly to a parent's Visual.Children collection
616+
* Position coordinates of child elements are relative to their parent
617+
* Property changes like visibility cascade from parent to children
618618
619619
This relationship is important because it allows for organizing related UI elements as groups, controlling entire sections of UI with a single property change, and positioning elements relative to their container rather than absolute screen coordinates.
620620
:::

0 commit comments

Comments
 (0)