📝 add user interface

Horsty80 · Oct 25, 2023 · 2e40d11 · 2e40d11
1 parent c08aa0e
commit 2e40d11
Show file tree

Hide file tree

Showing 25 changed files with 75 additions and 8 deletions.
diff --git a/docs/godot/first-step.md → docs/godot/1-first-step.md b/docs/godot/first-step.md → docs/godot/1-first-step.md
diff --git a/docs/godot/custom-signals.md → docs/godot/10-custom-signals.md b/docs/godot/custom-signals.md → docs/godot/10-custom-signals.md
diff --git a/docs/godot/scenes-inside-node.md → docs/godot/11-scenes-inside-node.md b/docs/godot/scenes-inside-node.md → docs/godot/11-scenes-inside-node.md
diff --git a/docs/godot/rigid-body-2D.md → docs/godot/12-rigid-body-2D.md b/docs/godot/rigid-body-2D.md → docs/godot/12-rigid-body-2D.md
diff --git a/docs/godot/camera.md → docs/godot/13-camera.md b/docs/godot/camera.md → docs/godot/13-camera.md
diff --git a/docs/godot/physics-layer.md → docs/godot/14-physics-layer.md b/docs/godot/physics-layer.md → docs/godot/14-physics-layer.md
diff --git a/docs/godot/tilemap.md → docs/godot/15-tilemap.md b/docs/godot/tilemap.md → docs/godot/15-tilemap.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 14
+sidebar_position: 15
 ---
 
 # Tilemap

diff --git a/docs/godot/particles.md → docs/godot/16-particles.md b/docs/godot/particles.md → docs/godot/16-particles.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 15
+sidebar_position: 16
 ---
 
 # Particles

diff --git a/docs/godot/light.md → docs/godot/17-light.md b/docs/godot/light.md → docs/godot/17-light.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 16
+sidebar_position: 17
 ---
 
 # Light

diff --git a/docs/godot/animations.md → docs/godot/18-animations.md b/docs/godot/animations.md → docs/godot/18-animations.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 17
+sidebar_position: 18
 ---
 
 # Animations

diff --git a/docs/godot/tweens.md → docs/godot/19-tweens.md b/docs/godot/tweens.md → docs/godot/19-tweens.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 18
+sidebar_position: 19
 ---
 
 # Tweens

diff --git a/docs/godot/create-node-scene.md → docs/godot/2-create-node-scene.md b/docs/godot/create-node-scene.md → docs/godot/2-create-node-scene.md
diff --git a/docs/godot/laser.md → docs/godot/20-laser.md b/docs/godot/laser.md → docs/godot/20-laser.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 19
+sidebar_position: 20
 ---
 
 # Lasers

diff --git a/docs/godot/multiple-level.md → docs/godot/21-multiple-level.md b/docs/godot/multiple-level.md → docs/godot/21-multiple-level.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 20
+sidebar_position: 21
 ---
 
 # Create multiple levels

diff --git a/docs/godot/level-transition.md → docs/godot/22-level-transition.md b/docs/godot/level-transition.md → docs/godot/22-level-transition.md
@@ -1,5 +1,5 @@
 ---
-sidebar_position: 21
+sidebar_position: 22
 ---
 
 # Level transition

diff --git a/docs/godot/23-user-interface.md b/docs/godot/23-user-interface.md
@@ -0,0 +1,67 @@
+---
+sidebar_position: 23
+---
+
+# User interface
+
+There are 4 kinds of Nodes:
+- 2D 🔵
+- 3D 🔴
+- Control 🟢
+- Other ⚪️
+
+## Control Nodes
+
+Labels, images, progress bars, buttons, areas with colors, text input, graphs, menus, videos.
+
+2D Nodes are placed via pixel positions.
+Control Nodes work via anchors and container.
+
+Create a new scene, select a **Canvas Layer** that will contain all our UI elements. The canvas will be positioned on top of the game.
+So every label, texture, etc. will be visible inside the screen game.
+
+There are 2 ways to place a control node.
+Anchors and Containers
+
+Anchors are the green needles in the topleft of a control node
+
+Containers are parent nodes that determine the position of their children
+
+(You can also use x and y properties or drag the Control Node to the position you want but that is almost never a good idea)
+
+### Anchors
+
+We have acces to panel of anchors on top of the screen.
+
+![Anchors](/img/anchors.png)
+
+But we can also use the **Layout** menu to setup the anchors.
+
+![Layout](/img/layout.png)
+
+Is like in css, we have **Anchor Points** with top, bottom, left, right.
+The value inside `right` is calculated from the left position of the node.
+So `left: 0` and `right: 0` will make the node with no width.
+However, if we set `left: 0` and `right: 100`, the node will have a width of 100.
+For the `top` and `bottom` is the same. The `bottom` value is calculated from the `top` position of the node.
+And `top: 0.5` and `bottom: 0.5` will make the node at the center of the screen, with no height.
+However, if we set `top: 0.5` and `bottom: 0.6`, the node will have a height of 0.1. etc.
+
+Remember, in 2D, x and y are the top left corner of the node.
+The start position are (0, 0) and the end position are (1, 1).
+So we navigate between this number.
+
+### Containers
+
+It's like flexbox or Grid in css.
+
+We can use **HBoxContainer** or **VBoxContainer**. It's working with children.
+You have **GridContainer** it's workin like a grid in css with column.
+
+## Progress bar
+
+We need to add a progress bar, Godot has 2: A plain one and a textured one.
+They are both set in the same way.
+The textured need 3 images: background, over and progress image.
+
+To position the progress bar, we can use container and the best container for that is **MarginContainer**. It's like a div with margin in css. If we position the progress bar on bottom center, with the margin, the progress bar will be always at the bottom center of the screen with the good margin.
diff --git a/docs/godot/working-code-part-1.md → docs/godot/3-working-code-part-1.md b/docs/godot/working-code-part-1.md → docs/godot/3-working-code-part-1.md
diff --git a/docs/godot/working-code-part-2.md → docs/godot/4-working-code-part-2.md b/docs/godot/working-code-part-2.md → docs/godot/4-working-code-part-2.md
diff --git a/docs/godot/delta.md → docs/godot/5-delta.md b/docs/godot/delta.md → docs/godot/5-delta.md
diff --git a/docs/godot/input.md → docs/godot/6-input.md b/docs/godot/input.md → docs/godot/6-input.md
diff --git a/docs/godot/more-nodes.md → docs/godot/7-more-nodes.md b/docs/godot/more-nodes.md → docs/godot/7-more-nodes.md
diff --git a/docs/godot/physics.md → docs/godot/8-physics.md b/docs/godot/physics.md → docs/godot/8-physics.md
diff --git a/docs/godot/signals.md → docs/godot/9-signals.md b/docs/godot/signals.md → docs/godot/9-signals.md
diff --git a/static/img/anchors.png b/static/img/anchors.png
diff --git a/static/img/layout.png b/static/img/layout.png