Basic operations on Scene2D – basic Godot Engine

Hi! Hello friends! In today's article, I continue to share with you basic operations on Scene2D (2-dimensional space working window) on Godot Engine! Without further ado, let's get to the article! Let's go!

SCENE2D WORK WINDOW

To work on the Scene 2D window, select 2D Mode:

We will then see the Scene 2D working window as follows:

– At the top is the Scene name

– Below is the toolbar to manipulate objects in the Scene

– The bottom is the main working screen of a Scene including:

+ Oxygen coordinate axis

+ Viewport 2D (2D viewport)

Oxygen coordinate axis (on Godot Engine)

– Is a line of two perpendicular lines intersecting at a point O (O is taken as the center and is called the coordinate angle)

+ A straight line lying horizontally from a straight and frontal perspective is called the abscissa (horizontal axis, x axis, cos axis) with length from left to right respectively

(-oo;+oo)

+ The straight line lying vertically from a straight and frontal perspective is called the ordinate (Vertical axis, Y axis, Sin axis) whose length from top to bottom is (-oo;+oo) respectively.

+ The unit of the coordinate angle O is (0,0)

• Object A is placed on the Oxy axis system (A must be visible objects such as Node2D, Spatical, Control,… does not apply to white Nodes and control Nodes)

– For example, we apply a certain object A to this Oxy coordinate system. Suppose is an object. Then we bring it Into the Oxygen system, it will generate a position and a size corresponding to the system of type Vector2(x unit, y unit)

– Vector2 is a data type that represents positions in 2D space

– Godot position on the x axis is 5 units, on the y axis is 0 units up to the center of the object

– Godot dimensions on the x and y axes are 2 units based on the distance from the start point to the end point of length and width.

– We can briefly represent the position and size of Godot using Vector2() as follows:

#Godot.position = Vecto2(5,0)

#Godot.scale = Vecto2(2,2)

The object can rotate its center (rotation).

We have A, B, C with each different rotation direction calculated in degrees (0->360°)

– We can change position, scale, rotation_degree in the Transform section of the object's properties (Inspector).

Stackable objects (Zindex)

Because we are using 2D Mode, which is a frontal view, we will not see the Z axis, but we can change the Zindex index so that the objects stack on top of each other in this view direction.

We can find Zindex in the Node properties.

Objects can change their display (Visiblity)

• Hidden and visible (visible)

Godot is showing

Objects can be hidden/shown through Node's eye icon (if available).

Godot is hidden

Godot is showing

CanvasItem

• Nodes displayed on the 2D Mode window are called a CanvasItem

Illustration of 3 CanvasItems

Operations on CanvasItem

– Select a CanvasItem (Select Mode)

Click the mouse icon on the Scene toolbar then left click on the CanvasItem you want to select. Or click on the Node corresponding to that CanvasItem.

You can also select multiple CanvasItems by using the key combination 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. 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 and y scale axes in scale mode.

In Rotate Mode, click and hold on the object and drag to rotate.

• Change the CanvasItem's center (pivot).

Select Change rotation rotation mode -> Lick and hold the position icon on the CanvasItem and drag and drop to the desired position.

• Change the CasvaItem view position

Click Pan Mode -> Lick and hold an empty area on the Scene 2D window and drag and drop to the desired area. Or click and hold the right mouse button and mouse wheel when not using Pan Mode.

• Measure CanvasItem size.

Select Ruler Mode (triangle), click, hold and drag and drop the areas to be measured.

• CanvasItem move key

To avoid selecting the wrong objects, you use lock object mode by selecting an object that needs to be locked, clicking the lock tube icon on the scene toolbar. You can unlock it by clicking that icon again. Or click the Node lock icon in the Scene Tree.

Or you can lock the movement of all child Nodes of the object by clicking Lock object's children.

• Set smart location with snapping

You can move the object position more precisely with snapping magnets. It will help you suggest the margins of other objects so you can place the object more accurately.

Note: Observe the settings for Node

• The green frame is Type Node (type of Node)
• Pink: Node name
• 1: Node is warning
• 2: Node is already using Signal (is emitting a signal)
• 3: Node has been assigned a script
• 4: Node has been locked to move
• 5: The locked Node moves its child Nodes
• 6: Node is being displayed in Scene 2D

• Viewport 2D (2D Viewport)

– What is Viewport?

• Viewport roughly translates as viewport, which is the user's visible area of ​​content in a game.
• Viewport on Scene 2D:

You can see the blue blurred border, that is Godot's 2D Viewport frame. The default resolution when creating a project is 1240×600.

• All objects visible when running the game must be placed in this viewport
• The game's root node has a default Type of Viewport

• The top left corner of the default Viewport frame will coincide with the O coordinate angle
• Viewport will be different for different devices, and will be smaller on mobile phones than on computer screens.
• So how can the game display well on devices?

Set up Viewport

• Change Viewport size (Screen size)

– Most smartphones and laptops currently have FullHD screens. So we will take FullHD as the standard (up to you)

Project -> Project settings

At Display -> Window. Then set the resolution again to FullHD (1920×1080) 16:9.

– Please turn on Hidpi for devices that support this mode for better display.

We can find the Hidpi section at Display -> Window

• Set Viewport Scale

Also in Display -> Window section in project settings. We find the Strect section and set:

+ Mode is: 2d if you focus on gui design. Viewport will support display with better resolution but not suitable for gui.

+ Aspect is:

• ignore: always fills when changing window scale
• keep_wight: keep horizontal ratio
• keep_height: keep height ratio
• keep: keep the whole screen aspect ratio
• expand: fills screens with the same ratio

After the above viewport settings, your Game will display content well on devices.

Note: Please set up the viewport first when starting to make a game! To avoid display errors

– Set rotation direction for devices with automatic rotation sensor:

At Display -> Window in Project settings. Find Handheld -> Orientation.

• Select landscape if the screen is rotated horizontally.
• Select portrait if you want the screen to rotate vertically
• If the machine has an automatic rotation sensor, select items with sensors.

In today's article, I introduced and shared with you basic operations on Scene2D on Godot Engine. If you have any questions, please leave a comment or suggestion! To better understand, you can refer to the basic videos at https://www.youtube.com/playlist?list=PLOk8LhtEwUVn8e3RUfk-rX_RB3f9_ulYg. Thank you for following the article! 🙂