Hi! Hello friends! Today’s post, I continue to share with you Basic operations on Scene2D (a 2-dimensional workspace window) on Godot Engine! No more roundabouts, let’s go to the article! Let’s go!
| Join the channel Telegram of the AnonyViet 👉 Link 👈 |
SCENE2D WORKING WINDOWS
To work on the Scene 2D window, we choose to enter the 2D Mode:
Then we will see the Scene 2D working window as follows:
– At the top is the name Scene
– Below is the toolbar to manipulate the objects in the Scene
– Below is the main working screen of a Scene including:
+ Coordinate axis Oxy
+ Viewport 2D (2D viewport)
Oxygen coordinate axis (on Godot Engine)
– A line of two perpendicular lines intersecting at a point O (O is taken as the center and is called the coordinate angle)
+ The line lying horizontally from a straight and front view is called the coordinate (Horizontal axis, x axis, Cos axis) whose length from left to right is respectively
(-oo;+oo)
+ The vertical line from the straight and front view is called the coordinate (Vertical Axis, Y Axis, Sin Axis) whose length from top to bottom is (-oo;+oo) respectively.
+ The unit of coordinate angle O is (0,0)
- Object A placed on the Oxy axis system (A must be visible objects such as Node2D, Spatical, Control, etc., not applicable to White Nodes and Control Nodes)
– For example, we bring some object A to this Oxy coordinate system. Suppose 
is an object. Then we bring into the Oxygen system, it will generate a position (position), a size (scale) corresponding to the system of type Vector2(x unit, y unit)
– Vector2 is a data type representing locations in 2D space
– The position of Godot on the x-axis is 5 units, on the y-axis is 0 units to the center of the object
– The Godot size on the x and y axes is 2 units based on the distance from the beginning to the end of the length and width.
– We can briefly represent the position and size of Godot by Vecto2() as follows:
#Godot.position = Vecto2(5,0)
#Godot.scale = Vecto2(2,2)
Objects can rotate their center (rotation)
We have A, B, C with each different rotation in degrees (0->360°)
– We can change the position, scale, rotation_degree in the Transform section of the object’s properties (Inspector).
Stackable objects (Zindex)
Because we are using 2D Mode, we can’t see the Z-axis directly, but we can change the Zindex so that the objects stack on top of each other in this view.
You can find the Zindex in the properties section of Node.
Objects can change their appearance (Visiblity)
- Show and hide (visible)
Godot is showing
Can hide/show objects through Node’s eye icon (if any).
Godot is hidden
Godot is showing
CanvasItem
- Nodes displayed in the 2D Mode window are called a CanvasItem
Illustration 3 CanvasItem
Operations on CanvasItem
– Select a CanvasItem (Select Mode)
Click the mouse icon on the Scene toolbar then left-click on the CanvasItem to be selected. Or click on the Node corresponding to that CanvasItem.
You can also select multiple CanvasItems using the key combinations available on the HDH you are using. (Similar to selecting multiple files).
Click Move Mode. Then hold down the left mouse button on the object and drag and drop. Or click on the object and use the navigation keys to move.
- Resize CanvasItem
In select mode. You click and hold the red dots around the object and drag and drop. This will change the scale . value
Or you can drag the x, y scale axes in scale mode.
In Rotate Mode, click and hold on the object and drag it around.
- Change the center of the CanvasItem (pivot).
Select the Change rotation pivot mode -> Click and hold the position icon on the CanvasItem and drag and drop to the desired position.
- Change the CasvaItem’s view position
Click Pan Mode -> Lick hold on an empty area on the 2D Scene window and drag and drop to the desired area. Or right-click, scroll wheel when not using Pan Mode.
- Measure CanvasItem size.
Select the Ruler Mode (triangle), lick and drag the areas to be measured.
- CanvasItem Move Lock
To avoid selecting the wrong objects, you use the object lock mode by selecting an object to lock, clicking the lock tubular icon on the scene toolbar. You can unlock it by clicking the icon again. Or click the Node keypipe icon in the Scene Tree.
Or you can lock all child Nodes of the object by clicking Lock object’s children.
- Set smart location by snapping
You can move objects more precisely with snapping magnets. It will help you to suggest the margins of other objects so you can place objects more precisely.
Note: Observe the settings for Node
- Green frame is Type Node (type of Node)
- Pink: Node name
- 1: Node is on alert
- 2: Node is already using Signal (emitting a signal)
- 3: Node has been assigned a script
- 4: Node is locked for migration
- 5: Node has been locked to move its child nodes
- 6: Node being displayed in Scene 2D
-
2D Viewport (2D Viewport)
– What is Viewport?
- The viewport roughly translates to the viewport, which is the user’s visible area of ​​the content in a game.
- Viewport on 2D Scene:
You can see the blue translucent border, which is Godot’s 2D Viewport frame. The default resolution when creating the project is 1240×600.
- All objects seen when running the game must be placed in this view
- The game’s root node has the default Type of Viewport
- The top left corner of the default Viewport frame will coincide with the O . coordinate angle
- The viewport will be different with different devices, and will be smaller on a mobile phone than on a computer screen.
- So how can the game display well on devices?
Viewport settings
- Change Viewport size (Screen size)
– Most smartphones and laptops currently have FullHD screens. So we will take FullHD as the standard (depending on you)
Project -> Project settings
At Display -> Window. Then set the resolution again to FullHD (1920×1080) 16:9.
– Please enable Hidpi for devices that support this mode for better display.
You can find the Hidpi item at Display -> Window
- Setting Viewport Scale
Also at Display -> Window in project settings. We find the section and set:
+ Mode is: 2d if you focus on gui design. Viewport will support rendering with better resolution but not suitable for gui.
+ Aspect is:
- ignore: always fills when scaling the window
- keep_wight: keep the horizontal ratio
- keep_height: keep height ratio
- keep: keep the whole screen ratio
- expand: fills on screens of the same scale
After the above viewport settings, your Game will display good content on devices.
Note: Please set up the first viewport when starting to make the game! To avoid display errors
– Set the rotation direction for devices with automatic rotation sensors:
At Display -> Window in Project settings. Find the Handheld -> Orientation section.
- Choose landscape if the screen is rotated horizontally.
- Choose portrait if the screen is rotated vertically
- If the machine has an auto-rotate sensor, select the items with the sensor section.
In today’s article, I have introduced and shared with you the basic operations on Scene2D on Godot Engine. If you have any questions, please leave a comment or suggestion! For more information, you can refer to the basic videos at https://www.youtube.com/playlist?list=PLOk8LhtEwUVn8e3RUfk-rX_RB3f9_ulYg. Thank you for following this post! 🙂
