diff --git a/articles/tutorials/building_2d_games/02_getting_started/images/vscode.png b/articles/tutorials/building_2d_games/02_getting_started/images/vscode.png index bc0b67c7..efb32d31 100644 Binary files a/articles/tutorials/building_2d_games/02_getting_started/images/vscode.png and b/articles/tutorials/building_2d_games/02_getting_started/images/vscode.png differ diff --git a/articles/tutorials/building_2d_games/02_getting_started/index.md b/articles/tutorials/building_2d_games/02_getting_started/index.md index 4787a160..862ad8a6 100644 --- a/articles/tutorials/building_2d_games/02_getting_started/index.md +++ b/articles/tutorials/building_2d_games/02_getting_started/index.md @@ -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: @@ -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) | | :-------------------------------------------------------------------------------------------------: | @@ -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 diff --git a/articles/tutorials/building_2d_games/04_creating_a_class_library/images/add-project-reference.png b/articles/tutorials/building_2d_games/04_creating_a_class_library/images/add-project-reference.png new file mode 100644 index 00000000..f897a9e9 Binary files /dev/null and b/articles/tutorials/building_2d_games/04_creating_a_class_library/images/add-project-reference.png differ diff --git a/articles/tutorials/building_2d_games/04_creating_a_class_library/index.md b/articles/tutorials/building_2d_games/04_creating_a_class_library/index.md index 864e796d..54ddf02b 100644 --- a/articles/tutorials/building_2d_games/04_creating_a_class_library/index.md +++ b/articles/tutorials/building_2d_games/04_creating_a_class_library/index.md @@ -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) @@ -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) @@ -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: diff --git a/articles/tutorials/building_2d_games/20_implementing_ui_with_gum/images/add-nuget-package.png b/articles/tutorials/building_2d_games/20_implementing_ui_with_gum/images/add-nuget-package.png new file mode 100644 index 00000000..1167e168 Binary files /dev/null and b/articles/tutorials/building_2d_games/20_implementing_ui_with_gum/images/add-nuget-package.png differ diff --git a/articles/tutorials/building_2d_games/20_implementing_ui_with_gum/index.md b/articles/tutorials/building_2d_games/20_implementing_ui_with_gum/index.md index 60dd236a..68988895 100644 --- a/articles/tutorials/building_2d_games/20_implementing_ui_with_gum/index.md +++ b/articles/tutorials/building_2d_games/20_implementing_ui_with_gum/index.md @@ -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) @@ -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. @@ -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. @@ -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