Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
40 changes: 20 additions & 20 deletions articles/tutorials/building_2d_games/02_getting_started/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -108,19 +108,19 @@ To install VSCode, follow the instructions for your operating system below:

## Install the C# Dev Kit Extension

For C# development using VSCode, it is recommended to use the official *[C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit)* extension provided by Microsoft. Installing this extension will add additional features to VSCode such as a project system and *Solution Explorer* for C# projects. It also provides code editing features such as syntax highlighting, code completion, code navigation, refactoring, NuGet package management, and debugging tools.

> [!NOTE]
> The *Solution Explorer* panel is a hierarchical view provided by the C# Dev Kit extension that displays your solution structure similar to Visual Studio's Solution Explorer.
>
> When you open a workspace in Visual Studio Code containing a .NET solution file (*.sln*), the *Solution Explorer* panel automatically appears and loads your solution. From this panel, you can perform common operations like:
>
> * Adding new files.
> * Managing project references.
> * Viewing dependencies.
> * Executing build commands.
>
> For more information about the *Solution Explorer* panel in Visual Studio Code offered through the C# Dev Kit extension, you can view the official documentation in the [Project Management](https://code.visualstudio.com/docs/csharp/project-management) documentation.
For C# development using VSCode, it is recommended to use the official *[C# Dev Kit](https://marketplace.visualstudio.com/items?itemName=ms-dotnettools.csdevkit)* extension provided by Microsoft. Installing this extension adds C# project tooling to VSCode, including project actions in the *Explorer* panel, the *C# Project Details* view, and status bar integration for loaded solutions. It also provides code editing features such as syntax highlighting, code completion, code navigation, refactoring, NuGet package management, and debugging tools.

> [!NOTE]
> The C# Dev Kit extension adds C#-specific project tooling to VSCode. Depending on the version of the extension and whether a solution file is loaded, you may see project actions on `.csproj` files in the *Explorer* panel, a *C# Project Details* view, and status bar text showing which solution file is currently open.
>
> When you open a workspace in Visual Studio Code containing a .NET solution file (*.sln*), C# Dev Kit can load that solution and expose common project actions. Common tasks you can perform include:
>
> * Creating new projects.
> * Managing project references.
> * Managing NuGet packages.
> * Building and debugging projects from the `.csproj` file in *Explorer*.
>
> Microsoft is still updating some of their own documentation to match the current C# Dev Kit experience, so exact panel names and screenshots may differ. For general background on C# project tooling in VSCode, you can still refer to the [Project Management](https://code.visualstudio.com/docs/csharp/project-management) documentation.

To install the C# Dev Kit extension, perform the following:

Expand Down Expand Up @@ -154,7 +154,7 @@ The .NET MAUI extension adds features for building mobile apps, including:

- F5 debugging support - Debug your MonoGame mobile apps on emulators, simulators, and physical devices
- Easy target switching - Change debug/deploy targets between different mobile platforms
- Enhanced C# Dev Kit integration - Leverages Solution Explorer, Test Explorer, and advanced language features
- Enhanced C# Dev Kit integration - Leverages C# project tooling, Test Explorer, and advanced language features

| ![Figure 2-2: The .NET MAUI Extension listed in Visual Studio Code](./images/maui-extension.png) |
| :-------------------------------------------------------------------------------------------------: |
Expand Down Expand Up @@ -227,13 +227,13 @@ After selecting *Create Project*, a new C# project will be generated based on th
| :--------------------------------------------------------------------------------------------------: |
| **Figure 2-3: A new MonoGame project after being created in Visual Studio Code** |

Now that we have the project created, press the `F5` key on your keyboard, or choose *Run > Start Debugging* from the top menu. If prompted for a configuration, choose *C#*. The project will compile and run, displaying a screen similar to the following:

| ![Figure 2-4: The default MonoGame cornflower blue game window](./images/game-window.png) |
| :---------------------------------------------------------------------------------------: |
| **Figure 2-4: The default MonoGame cornflower blue game window** |
Now that we have the project created, locate the `DungeonSlime.csproj` file in the *Explorer* panel, right-click it, then choose *Debug > Start New Instance*. The project will compile and run, displaying a screen similar to the following:

Be amazed, the default MonoGame Cornflower Blue game window. You have just created your very first MonoGame application. While there is not much happening here visually, there is a lot going on behind the scenes that the MonoGame framework is handling for you. When you ran the application, the following occurred:
| ![Figure 2-4: The default MonoGame cornflower blue game window](./images/game-window.png) |
| :---------------------------------------------------------------------------------------: |
| **Figure 2-4: The default MonoGame cornflower blue game window** |

Be amazed, the default MonoGame Cornflower Blue game window. You have just created your very first MonoGame application. While there is not much happening here visually, there is a lot going on behind the scenes that the MonoGame framework is handling for you. When you ran the application, the following occurred:

1. The application started
2. The game window was created and graphics were initialized
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -57,12 +57,15 @@ To use the template to add the class library, perform the following based on whi

To add the class library using the MonoGame Game Library project template in Visual Studio Code, perform the following:

1. In the [*Solution Explorer*](../02_getting_started/index.md#install-the-c-dev-kit-extension) panel, right-click the *DungeonSlime* solution.
2. Choose *New Project* from the context menu.
3. Enter "MonoGame Game Library" and select it as the template to use.
4. Name the project "MonoGameLibrary".
5. When prompted for a location, use the default option, which will put the new project in a folder next to your game project.
6. Select "Create Project".
1. Open the *Command Palette* using `CTRL+SHIFT+P` (`CMD+SHIFT+P` on macOS).
2. Enter `.NET New Project` and choose that command.
3. Enter `MonoGame Game Library` as the search term, then choose that template.
4. Name the project `MonoGameLibrary`.
5. When prompted for a location, you can use the default location or choose a different folder if you prefer a different project layout.
6. Select `Create Project`.

> [!TIP]
> If C# Dev Kit already has your `DungeonSlime.sln` solution loaded, it should automatically add the newly created `MonoGameLibrary` project to that solution.

### [Visual Studio 2022](#tab/vs2022)

Expand Down Expand Up @@ -93,15 +96,18 @@ Now that the game library project has been created, a reference to it needs to b

To add the game library project as a reference to the game project in Visual Studio Code:

1. In the Solution Explorer panel, right-click the *DungeonSlime* project.
2. Choose "Add Project Reference" from the context menu.
3. Choose *MonoGameLibrary* from the available options.
1. In the *Explorer* panel, right-click the `DungeonSlime.csproj` file.
2. Choose `Add Project Reference` from the context menu.
3. Choose `MonoGameLibrary` from the available options.

| ![Figure 4-3: Adding a project reference from the DungeonSlime.csproj file in Visual Studio Code](./images/add-project-reference.png) |
| :-------------------------------------------------------------------------------------------------------------------------------: |
| **Figure 4-3: Adding a project reference from the DungeonSlime.csproj file in Visual Studio Code** |

> [!TIP]
> The Solution Explorer panel in VSCode is provided by the C# Dev Kit extension that was installed in [Chapter 02](../02_getting_started/index.md#install-the-c-dev-kit-extension). If you do not see this panel, you can open it by
> The project commands in VSCode are provided by the C# Dev Kit extension that was installed in [Chapter 02](../02_getting_started/index.md#install-the-c-dev-kit-extension). If you do not see C#-specific commands when right-clicking the `.csproj` file, make sure the project folder is open in VSCode and give C# Dev Kit a moment to finish loading the workspace.
>
> 1. Opening the *Command Palette* (View > Command Palette).
> 2. Enter "Explorer: Focus on Solution Explorer View" and select the command.
> Depending on your version of the extension, you may also see related information in the *C# Project Details* view.

### [Visual Studio 2022](#tab/vs2022)

Expand Down Expand Up @@ -181,9 +187,9 @@ Running the game now will show the same window as before, only now it is at a 12
> [!NOTE]
> If you get any additional prompts when starting the project, simply accept the defaults. Adding the Game Library gives the compiler more projects to choose from when starting the project, however, we can only "run" the Game Project, libraries are not executables.

| ![Figure 4-3: The game window at 1280x720 with the title Dungeon Slime](./images/game-window.png) |
| ![Figure 4-4: The game window at 1280x720 with the title Dungeon Slime](./images/game-window.png) |
| :-----------------------------------------------------------------------------------------------: |
| **Figure 4-3: The game window at 1280x720 with the title Dungeon Slime** |
| **Figure 4-4: The game window at 1280x720 with the title Dungeon Slime** |

> [!IMPORTANT]
> If you receive an error stating the following:
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -317,11 +317,15 @@ To add the Gum NuGet package to our game project, follow the instructions below

To add the Gum NuGet package in Visual Studio Code:

1. In the [*Solution Explorer*](../02_getting_started/index.md#install-the-c-dev-kit-extension) panel, right-click the `DungeonSlime` project.
2. Choose `Add NuGet Package` from the context menu.
3. Enter `Gum.MonoGame` in the `Add NuGet Package` search prompt and press Enter.
4. When the search finishes, select the `Gum.MonoGame` package in the results
5. When prompted for a version choose version `2026.5.8.1`.
1. In the [*Explorer*](../02_getting_started/index.md#install-the-c-dev-kit-extension) panel, right-click the `DungeonSlime.csproj` file.
2. Choose `C# Package Management > Add NuGet Package` from the context menu.
3. Enter `Gum.MonoGame` in the search prompt, then press Enter to search NuGet.
4. When the search finishes, select the `Gum.MonoGame` package in the results.
5. When prompted for a version, choose version `2026.5.8.1`.

| ![Figure 20-1: Adding a NuGet package from the DungeonSlime.csproj file in Visual Studio Code](./images/add-nuget-package.png) |
| :--------------------------------------------------------------------------------------------------------------------------: |
| **Figure 20-1: Adding a NuGet package from the DungeonSlime.csproj file in Visual Studio Code** |

#### [Visual Studio 2022](#tab/vs2022)

Expand Down Expand Up @@ -373,9 +377,9 @@ Next, add this sound effect to your content project using the MGCB Editor:
4. In the Properties panel, verify that the `Processor` is set to `Sound Effect`.
5. Save the changes and close the MGCB Editor.

| ![Figure 20-1: The MGCB Editor with ui.wav added to the audio folder](./images/mgcb-editor.png) |
| ![Figure 20-2: The MGCB Editor with ui.wav added to the audio folder](./images/mgcb-editor.png) |
| :---------------------------------------------------------------------------------------------: |
| **Figure 20-1: The MGCB Editor with ui.wav added to the audio folder** |
| **Figure 20-2: The MGCB Editor with ui.wav added to the audio folder** |

We will load and use this sound effect in our UI implementation to provide auditory feedback when players interact with buttons and sliders.

Expand Down Expand Up @@ -537,9 +541,9 @@ Update the `Draw` method to the following:

With these changes, our UI system is now fully integrated into the scene's game loop. Gum updates its controls in the `Update` method and draws them in the `Draw` method. This produces a fully functional title screen with buttons that allows players to start the game or adjust audio settings.

| ![Figure 20-2: Title screen with default Gum buttons](./images/title-unstyled.png) |
| ![Figure 20-3: Title screen with default Gum buttons](./images/title-unstyled.png) |
| :--------------------------------------------------------------------------------: |
| **Figure 20-2: Title screen with default Gum buttons** |
| **Figure 20-3: Title screen with default Gum buttons** |

> [!NOTE]
> You may notice that the UI elements currently use Gum's default styling, which does not match our game's visual theme. We will explore customizing these controls to match our game's visual style in the next chapter.
Expand Down Expand Up @@ -619,9 +623,9 @@ Finally, add Gum's drawing call to the end fo the `Draw` method:

With these changes, the pause menu is now fully integrated into the game scene's game loop. Gum updates its controls during the `Update` method and draws them during the `Draw` method. If the game is paused, as determined by the `IsVisible` property of the pause menu, then updating the actual game logic is skipped.

| ![Figure 20-3: The pause menu during the game scene with default Gum buttons](./images/pause-unstyled.png) |
| ![Figure 20-4: The pause menu during the game scene with default Gum buttons](./images/pause-unstyled.png) |
| :---------------------------------------------------------------------------------------------------------: |
| **Figure 20-3: The pause menu during the game scene with default Gum buttons** |
| **Figure 20-4: The pause menu during the game scene with default Gum buttons** |

## Conclusion

Expand Down
Loading