Merge pull request #547 from bosh/patch10

GMC setup guide images

docs/gmc/setup.md

@@ -6,6 +6,7 @@ title: Setting up GMC
 
 Before we can start building scenes, a few project setup steps are required. With your project open in the Godot Editor, go to *Project > Project Settings* to open the settings dialog.
 
+
 ## Set the Main Scene
 
 Every slide, widget, and other UI file in Godot is called a "scene". When your Godot project runs, it needs to know which scene to load as its entry point.
@@ -16,6 +17,9 @@ As your project becomes more complex and your knowledge of Godot improves, you m
 
 Since your Godot project is brand new, you need to tell it what scene is the entry point. On the left menu bar of Project Settings, select *Application > Run* and in the Main Scene picker, navigate to `/addons/mpf-gmc/slides/window.tscn` and select that to be your main scene.
 
+![image](images/set_main_scene.png)
+
+
 ## Set the Window Size
 
 If you only have one display for your game, your Window size will be the size of that display. If you are using multiple displays, the Window size will be the size of the box necessary to encompass all of the displays.
@@ -26,6 +30,7 @@ The other settings here will be customized later, including windowed/fullscreen
 
 You can now close the Project Settings and save your project.
 
+
 ## Configure the Audio Busses
 
 Godot manages audio through a series of buses that feed into the *Master* audio bus for output to speakers. You can configure as many audio buses as you'd like, and most pinball projects use a standard set of three: *music*, *effects*, and *voice*.
@@ -34,6 +39,7 @@ Godot manages audio through a series of buses that feed into the *Master* audio
 
 Each bus can be configured with its own parameters for how it plays back sounds (e.g. music plays one file at a time, voice plays files sequentially, and effects play files simultaneously), how it ducks for other buses, and which bus is the default.
 
+
 ### Create Buses in Godot Editor
 
 At the bottom panel of the Godot Editor there is a tab called *Audio*  which will bring up the audio control panel. By default your new project only has one bus, "Master", which is the main audio output.
@@ -46,6 +52,7 @@ At the bottom panel of the Godot Editor there is a tab called *Audio*  which wil
 
 Click on the *Add Bus* button to add a new bus and name it *"music"* (case sensitive). Do the same for *"effects"* and *"voice"*, or customize the buses to what you need for your project.
 
+
 ### Configure the Busses in GMC Config File
 
 Unfortunately, Godot Audio Buses are not extensible like Nodes, so GMC cannot create customization options directly on the buses. Instead, a GMC configuration file will be used to configure the audio system.
@@ -62,17 +69,38 @@ Create a new text file in the root of your project called *gmc.cfg* and paste in
 
 You may then adjust these defaults if you've customized your buses, but otherwise this configuration will take care of you for a while. Save the *gmc.cfg* file and close it.
 
+
 ## Create an Attract Mode slide
 
 The first slide we will create is for Attract mode, so we can connect to MPF and verify that GMC is working properly. Slides can live in either a `slides` folder in the project root, or in a `slides` subfolder under any mode in your project modes folder (e.g. `/modes/attract/slides`). Create a slides folder in either location, and then in the Godot FileSystem panel right-click on the slides folder and select *Create New > Scene*.
 
+![image](images/new_slide_scene.png)
+
+Enter the name of your slide "attract" as the scene name and click the tree icon to open the root type selection menu.
+
 ![image](images/create_attract_slide.png)
 
-Every slide in GMC must derive from the custom `MPFSlide` class, so in the *Create New Scene* dialog under **Root Type** click on the tree icon to pick a custom node class. Search for and select the `MPFSlide` class. Enter the name of your slide "attract" as the scene name, and press OK to create the scene.
+Every slide in GMC must derive from the custom `MPFSlide` class, so in the *Create New Scene* dialog under **Root Type** click on the tree icon to pick a custom node class. Search for and select the `MPFSlide` class, then press "Pick".
+
+![image](images/new_scene_root_node.png)
+
+Back in the "Create new Scene" menu, press OK to complete creation.
+
 
 ## Decorate the Attract slide
 
-You'll now be at the Scene Editor view for the attract slide, which is empty. We'll start by adding a nice background color: In the *Scene* panel in the upper-left, click on the **+** icon to add a new node. In the node panel, search for and select `ColorRect` to add a colored rectangle to the scene. Drag the rectangle's corners to fill the purple dimensions on screen (which correspond to your Window size). Use the color picker in the *Inspector* panel to set a nice color.
+You'll now be at the Scene Editor view for the attract slide, which is empty. We'll start by adding a nice background color: In the *Scene* panel in the upper-left, click on the **+** icon to add a new node.
+
+![image](images/add_node_to_scene.png)
+
+In the node panel, search for and select `ColorRect` to add a colored rectangle to the scene.
+
+![image](images/add_color_rect.png)
+
+Drag the rectangle's corners to fill the purple dimensions on screen (which correspond to your Window size). Use the color picker in the *Inspector* panel to set a nice color.
+
+![image](images/select_rect_color.png)
+
 
 !!! tip
 
@@ -82,8 +110,13 @@ Next we'll add some text to the slide. Back at the *Scene* panel, add another no
 
 In the *Inspector* panel, in the *Text* field type in the text "Welcome to GMC!", set the *Horizontal Alignment* to Center, and under *Theme Overrides > Font Sizes* set a nice big font, like 100px.
 
+![image](images/label_settings.png)
+
+Overall you should have a slide with a background color and text label that looks something like this:
+
 ![image](images/attract_slide.png)
 
+
 ## Run MPF
 
 In your `attract.yaml` mode config, add the following block:
@@ -110,6 +143,7 @@ In your terminal, in your project folder with your virtual environment activated
     sudo ln -s /Applications/Godot.app/Contents/MacOS/Godot /usr/local/bin/godot
     ```
 
+
 ## Create a Keymap
 
 For testing your game, it's convenient to setup a keyboard map for using keys to simulate switches and events without a connection to a physical machine.