GITBOOK-391: change request with no subject merged in GitBook

docs/readme/showcase.md

@@ -30,7 +30,7 @@
 
 <figure><img src="../.gitbook/assets/09_05 45 50.png" alt=""><figcaption><p>BattleCrypt Bombers</p></figcaption></figure>
 
-<figure><img src="../.gitbook/assets/image (1).png" alt=""><figcaption><p>BattleCrypt Bombers</p></figcaption></figure>
+<figure><img src="../.gitbook/assets/image (1) (2).png" alt=""><figcaption><p>BattleCrypt Bombers</p></figcaption></figure>
 
 <figure><img src="../.gitbook/assets/09_05 48 04.png" alt=""><figcaption><p>Teotihuacan</p></figcaption></figure>
 

docs/readme/tutorials-and-examples/intro-tutorials/state-categories.md

@@ -4,98 +4,104 @@
 
 States are a powerful way to create expressive groups of variables. Some UI elements may require a combination of states to be applied simultaneously.
 
-For example, consider creating a CheckBox element. This CheckBox may have one set of states for whether it is checked:
+For example, consider a Button component which displays a button callout.
 
-* Checked
-* Unchecked
+<figure><img src="../../../.gitbook/assets/image.png" alt=""><figcaption><p>Button with Y button callout. Credit Game UI Database <a href="https://www.gameuidatabase.com/gameData.php?id=36&#x26;autoload=975">https://www.gameuidatabase.com/gameData.php?id=36&#x26;autoload=975</a></p></figcaption></figure>
 
-But it may also need a second set of states for being enabled and disabled (which may modify the color of the Text and graphics for the check box:
+This button might be a standard Button with the following states:
 
 * Enabled
 * Disabled
+* Highlighted
+* Pushed
 
-In this case multiple states need to coexist and may be combined. Categories allow you to organize states so that multiple states can be set simultaneously.
+But it may also have states for which button icon to display:
 
-## Creating categorized states
+* A
+* B
+* X
+* Y
+* LeftStick
+* RightStick
 
-For this tutorial we'll create a new component. This component will have state categories for size and for color. To do this:
+These two sets of states could be set independently and combined at runtime. Categories let  you create groups of states so that multiple states can be set simultaneously.
+
+## Creating Categorized States
+
+For this tutorial we'll create a new component. This component has state categories for size and for color. To do this:
 
 1. Open Gum
-2. Create a new Component called "CategoryDemo"
-3. Right-click anywhere in the State box and select "Add Category"
+2. Create a new Component called **CategoryDemo**
+3. Right-click anywhere in the State box and select **Add Category**
 4. Enter the name "Size" for the new category and click OK
 5. Repeat the above steps to create a "Color" category
 
-![](../../../.gitbook/assets/GumAddCategoryCalledSize.PNG)
-
-![](../../../.gitbook/assets/GumAddCategory.png)
+![Size and Color categories](<../../../.gitbook/assets/15_06 34 49.png>)
 
 Now we can add states to the categories. To do this:
 
-1. Right-click on the "Size" category and select "Add State"
+1. Right-click on the **Size** category and select **Add State**
 2. Enter the name "Small" for the new state
-3. Right-click on the "Size" category again and select "Add State"
+3. Right-click on the **Size** category again and select **Add State**
 4. Add a second state to "Big"
-5. Right-click on the "Color" category and select "Add State
+5. Right-click on the **Color** category and select **Add State**
 6. Add a state called "Red"
-7. Right-click on the "Color" category again and select "Add State
+7. Right-click on the **Color** category again and select **Add State**
 8. Add a state called "Blue"
 
-![](../../../.gitbook/assets/GumStatesInCategories.PNG)
+![](<../../../.gitbook/assets/15_06 36 32.png>)
 
-## Adding visuals
+## Adding Visuals
 
 Now that we have states set up we need to add a visual element to the component so that we can see our changes.
 
-To do this, drag+drop a ColoredRectangle into your component
+To do this, select the **Default** state and drag+drop a ColoredRectangle into your component
 
-![](<../../../.gitbook/assets/GumColoredRectangleInComponent (1).PNG>)
+![](<../../../.gitbook/assets/15_06 38 06.png>)
 
-## Setting variables in states
+## Setting Variables in States
 
-To modify a state, you can select it and edit in the preview window or change properties in the Variables tab to modify what the state sets. Notice that normally for a component like this the ColoredRectangleInstance would have its width and height be relative to its container, but we're not doing this for the sake of keeping the tutorial shorter.
+To modify a state, you can select it and edit in the Editor tab or change properties in the Variables tab to modify what the state sets. Notice that normally for a component like this the ColoredRectangleInstance would have its width and height be relative to its container, but we're not doing this for the sake of keeping the tutorial shorter.
 
 First we'll set the Size states. To do this:
 
-1. Select the "Big" state
+1. Select the **Big** state
 2. Resize the colored rectangle so it is larger than the default
-3. Select the "Small" state
+3. Select the **Small** state
 4. Resize the colored rectangle so it is smaller than the default
 
-![](../../../.gitbook/assets/GumSmallState.PNG)
-
-![](../../../.gitbook/assets/GumBigState.PNG)
+![](<../../../.gitbook/assets/15_06 40 15.gif>)
 
 Next we'll set the Color states. To do this:
 
-1. Select the "Red" state
-2. Set the Red, Green, Blue values to: 255, 0, 0
-3. Select the "Blue" state
-4. Set the Red, Green, Blue values to: 0, 0, 255
+1. Select the **Red** state
+2. Set the `Red`, `Green`, and `Blue` values to: `255`, `0`, `0`
+3. Select the **Blue** state
+4. Set the `Red`, `Green`, `Blue` values to: `0`, `0`, `255`
 
-![](<../../../.gitbook/assets/GumBlueState (1).PNG>)
+<figure><img src="../../../.gitbook/assets/15_06 42 34.gif" alt=""><figcaption><p>Red and Blue states with the correct color values</p></figcaption></figure>
 
-![](../../../.gitbook/assets/GumRedState.PNG)
-
-## Viewing multiple states on an instance
+## Viewing Multiple States on an Instance
 
 Now that we have our CategoryDemo component set up with multiple categories, we can view these states on any CategoryDemo instance. To do this:
 
-1. Create a Screen called CategoryDemoScreen
-2. Drop an instance of the CategoryDemo component into the CategoryDemoScreen
-3. Select the newly-created CategoryDemoInstance
+1. Create a Screen called "CategoryDemoScreen"
+2. Drop an instance of the **CategoryDemo** component into the **CategoryDemoScreen**
+3. Select the newly-created **CategoryDemoInstance**
 4. Scroll down in the Variables list and notice that the instance has drop-downs for each category.
-5. You can set each state independently and the states will combine
+5. You can set each state independently and the states combine
+
+![Combining states on an instance](<../../../.gitbook/assets/15_06 45 10.gif>)
 
-![](../../../.gitbook/assets/GumCombinedStates.PNG)
+We can revert the states back to their unset values by right-clicking on the state variable and selecting the **Make Default** item.
 
-![](../../../.gitbook/assets/GumLookCategoriesOnInstance.PNG)
+<figure><img src="../../../.gitbook/assets/15_06 47 19.gif" alt=""><figcaption><p>States can be made default through the right-click make Default item</p></figcaption></figure>
 
 ### Categories and Variables
 
 If a variable is modified in one of the states in a category, then all of the states in that category are automatically assigned the default value, and this value is explicitly set. This concept makes working with states far more predictable.
 
-For example, we can consider a component which has:
+For example, consider a component which has:
 
 * A single ColoredRectangle
 * A category called RectangleSizeCategory
@@ -122,4 +128,3 @@ If we select any of the other states in the category, they show that they explic
 Once a variable is set in a category, all states are required to set this value. A variable cannot be removed from a single state in a category. Rather, to remove a variable, all states in the category must remove the variable. This can be done by selecting the category and pressing the X button next to the variable name.
 
 <figure><img src="../../../.gitbook/assets/image (3) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1) (1).png" alt=""><figcaption><p>Press the X next to a variable on a category to remove the assignment of that variable on all states in the category</p></figcaption></figure>
-