GITBOOK-227: Components review and update.

vchelaru · Oct 14, 2024 · 3a4db20 · 3a4db20
1 parent 09fd9a3
commit 3a4db20
Show file tree

Hide file tree

Showing 10 changed files with 18 additions and 16 deletions.
diff --git a/docs/.gitbook/assets/Gum_HeL31coO2B.png b/docs/.gitbook/assets/Gum_HeL31coO2B.png
diff --git a/docs/.gitbook/assets/Gum_HiigFcls0X.png b/docs/.gitbook/assets/Gum_HiigFcls0X.png
diff --git a/docs/.gitbook/assets/Gum_Pz8MUKGk5c.png b/docs/.gitbook/assets/Gum_Pz8MUKGk5c.png
diff --git a/docs/.gitbook/assets/Gum_URVP5vRzNF (1).png b/docs/.gitbook/assets/Gum_URVP5vRzNF (1).png
diff --git a/docs/.gitbook/assets/Gum_URVP5vRzNF.png b/docs/.gitbook/assets/Gum_URVP5vRzNF.png
diff --git a/docs/.gitbook/assets/Gum_mQ20VxDf31.png b/docs/.gitbook/assets/Gum_mQ20VxDf31.png
diff --git a/docs/.gitbook/assets/Gum_rL5aAQWKVB (1).png b/docs/.gitbook/assets/Gum_rL5aAQWKVB (1).png
diff --git a/docs/.gitbook/assets/Gum_rL5aAQWKVB.png b/docs/.gitbook/assets/Gum_rL5aAQWKVB.png
diff --git a/docs/.gitbook/assets/RelativeToParent.png b/docs/.gitbook/assets/RelativeToParent.png
diff --git a/docs/intro-tutorials/components.md b/docs/intro-tutorials/components.md
@@ -1,6 +1,6 @@
 # 4 - Components
 
-## Introduction
+## ction
 
 Components are objects which are created in Gum which can contain instances of other components and of standard objects. Examples of components include:
 
@@ -17,18 +17,18 @@ To understand how components work, we'll create a simple Button component. To do
 3. Drag+drop a "ColoredRectangle" standard element into the Button component
 4. Drag+drop a "Text" standard element into the Button component
 
-![](../.gitbook/assets/GumButton1.PNG)
+![GUM screenshot showing a single Button Component with ColoredRectangle and Text](../.gitbook/assets/Gum\_HeL31coO2B.png)
 
 Since both the ColoredRectangleInstance and TextInstance are using white text you may not be able to see the Text. Let's change the ColoredRectangleInstance's color:
 
 1. Select the ColoredRectangleInstance
-2. Set Blue to 255 - this should change it from being green (default) to black (custom value). To do this, simply delete and re-type 255 in the Blue box.
+2. Change Red to 0
 3. Change Green to 0
-4. Change Red to 0
+4. Set Blue to 255 - this should change the background from being green (default) to white (custom value). To do this, simply delete and re-type 255 in the Blue box, or click in the box and press enter.
 
 Now you should be able to see the Text on top of the rectangle:
 
-![](../.gitbook/assets/GumWhiteTextBlueRect.PNG)
+![](../.gitbook/assets/Gum\_URVP5vRzNF.png)
 
 ## Sizing the colored rectangle
 
@@ -37,14 +37,14 @@ At this point we have what will eventually become a button, but it still needs s
 To do this:
 
 1. Select the ColoredRectangleInstance
-2. Change Height Units to "RelativeToContainer"
-3. Change the Width Units to "RelativeToContainer
-4. Change the Height to 0. This means that the Height of the ColoredRectangleInstance will match the Height of its container (the Button Component) since it's using "RelativeToContainer" Height Units.
+2. Change Height Units to "Relative to Container"
+3. Change the Width Units to "Relative to Container"
+4. Change the Height to 0. This means that the Height of the ColoredRectangleInstance will match the Height of its container (the Button Component) since it's using "Relative to Container" Height Units.
 5. Change the Width to 0. Just like with Height, this means that the Width of the ColoredRectangleInstance will match the Width of its container.
 
 Now the ColoredRectangleInstance will automatically match the Button's Width and Height:
 
-![](../.gitbook/assets/GumRelativeToContainerWidthHeight.PNG)
+![](../.gitbook/assets/Gum\_rL5aAQWKVB.png)
 
 ## Positioning the Text
 
@@ -57,26 +57,26 @@ Next we'll position the Text. We'll want to adjust the Text so that it is always
 At this point the Text is vertically and horizontally centered within its boundaries, but we want to have the boundaries centered within the Button. To do this:
 
 1. Keep TextInstance selected
-2. Change the X Units to "PixelsFromCenterX"
+2. Change the X Units to "Pixels From Center"
 3. Change the X Origin to "Center"
 4. Change X to 0
 
 Now let's make it centered on the Y as well:
 
 1. Keep the TextInstance selected
-2. Change the Y Units to "PixelsFromCenterY"
+2. Change the Y Units to "Pixels From Center"
 3. Change the Y Origin to "Center"
 4. Change Y to 0
 
-![](<../.gitbook/assets/GumCenteredTextInButton (1).PNG>)
+![](<../.gitbook/assets/Gum\_rL5aAQWKVB (1).png>)
 
 Finally, let's make the width of the text match the width of the button. For the Text we'll actually leave a border around the edge so the Text doesn't line wrap right against the edge of the button. To do this:
 
 1. Keep the TextInstance selected
-2. Change the Width Units to "RelativeToContainer"
+2. Change the Width Units to "Relative to Container"&#x20;
 3. Change Width to -40. This means that the width of the Text will be 40 pixels less than the width of its container. Since the button is centered this means a 20 pixel border on the left and 20 on the right (20+20=40).
 
-![](../.gitbook/assets/GumBorderedText.PNG)
+![](../.gitbook/assets/Gum\_Pz8MUKGk5c.png)
 
 ## Setting the Button default values
 
@@ -88,7 +88,7 @@ Buttons are typically wider than they are tall. To match this common layout, let
 
 Notice that whenever you change these values, the contained objects (text and colored rectangle) adjust automatically.
 
-![](<../.gitbook/assets/GumButtonResized (1).PNG>)
+![](../.gitbook/assets/Gum\_HiigFcls0X.png)
 
 ## Using components as instances
 
@@ -99,4 +99,6 @@ Now that we have a component created, we can add instances of this component the
 
 You can now resize and position the Button instance. You can also add multiple buttons and adjust the individually.
 
-![](<../.gitbook/assets/GumMultipleButtonInstances (1).PNG>)
+See the section (Exposing Variables) to learn how to change the text independently for each button!
+
+![](../.gitbook/assets/Gum\_mQ20VxDf31.png)