Hello. Everyone. My first post for question here.
I want to learn some knowledges about resolution or UI Layer, I don’t know how to call it perfectly. I created a Node2d as my main scene and its resolution(or size) is 1152×648, in windowed mode it fills the whole viewpoint. But I want to my it can also fill the whole viewpoint after I run it as fullscreen mode. Now, it won’t zoom in proportionally and fill the full-screen viewport. It just only takes up a small portion of the upper left, roughly the area of its original size.
May I ask how can I get it to stretch proportionally even in full screen, so that the leftmost button is still on the far left, the rightmost ammonium button is still on the far right and fills the viewport area correctly? Thank you all guys.
use control node with your ui button inside it
set control layout to anchor and make it full rect, it should cover whole your screen regardless resolution
Hello. First thank you and the members above who gave me advice. One question, when using TextureRect control instead of Sprite2D, will it affect me something if I want import image into this node? Thank you.
In my default setting, if I just set anchor preset “Full Rect”, the TextureRect will change the position. And once it change the position, whatever I use full-screen or just windowed, it won’t show all.
Are there anything I also to change? Thank you very much.
Can you show your config for Container Sizing? The settings there are most important.
Can you also show your scene tree? i.e. which controls do you have in this scene. Is it a Canvas Layer at the root/top and then just TextureRectangles under it?
I see blue, black, red colors… is it all part of one single texture/image?
I painted this image with 4 kinds of colors: red, black, orange and blue. I make this picture to test if I can get the color of pixels under my mouse’s position. Anyway, it is another problem.
In the beginning, I set the position at (0, 0) and made the size 1152*648. Which made my picture just can’t fill all the viewport after I ran it in full-screen. And I followed the @Exerion 's suggestion, but the position and size just changed by themselves.
Not sure if this is the only problem, but it’s definitely a problem: you have a Node2D as parent. Node2D objects don’t work the same way as Control objects do when it comes to UI placement. You should have zero Node2D objects as part of your UI. So yes, delete that Sprite2D there, too. Only use objects that inherit from Control (i.e. green color only).
You’re also not showing which parent object “ChooseNation” is added to in the final scene - generally, it should be added to a CanvasLayer object. Here’s my main menu scene tree as an example:
I just set the Node"ChooseNation" as the root node, and it is a Control Node itself. I am fixing it by deleting all non-control node and see what will happen.
Also one another problem when I only use Control Nodes is I will face some error tips such as
Invalid set index 'texture' (on base: 'null instance') with value of type 'ImageTexture'.
in my stack tracking, and
Node not found: Sprite2D
in my debugger.
I need these non-control nodes such as Sprite2d or Nod2d is because I need to create a GDScript that allows me to get colors of pixels on the mouse position. I don’t know if it is allowed to use Control Nodes in the whole scene tree if I have this main goal.
My GDScipt codes:
extends TextureRect
# Called when the node enters the scene tree for the first time.
func _ready():
pass # Replace with function body.
# Called every frame. 'delta' is the elapsed time since the previous frame.
func _process(_delta):
# 导入图片资源作为Image和ImageTexture,并获得节点的贴图
var 图片 = Image.load_from_file("res://colorimg.png")
var 贴图 =ImageTexture.create_from_image(图片)
$Sprite2D.texture = 贴图
var 纹理图片 = get_viewport().get_texture()
#定义变量：鼠标实时的位置、鼠标所在位置的颜色
var 鼠标实时位置: Vector2 = get_viewport().get_mouse_position()
@warning_ignore("narrowing_conversion")
var x1: float = 鼠标实时位置.x
var y1: float = 鼠标实时位置.y
var 鼠标位置的颜色 = 图片.get_pixel(x1,y1)
var 图片的尺寸 = 图片.get_size()
# 如果鼠标位于视口的范围内，则显示鼠标的坐标值，否则提示“已经超出了视口的边界范围”
if x1 < 1152 and x1>0 and y1<648 and y1>0:
print(str(x1)+","+str(y1))
else:
print("超出视口边界")
print("鼠标位置的颜色是:RGB",str(鼠标位置的颜色))
print("视口的尺寸大小是：", get_viewport().get_visible_rect().size)
print(图片的尺寸)
I use some non-latin alphabets as my variables’ names. If you feel it is hard to understand for yourself, I am glad to change them into English words for you.
The top line should be “extends Control”, not “extends TextureRect”
No, you don’t need Node2D or Sprite2D. You get an error because when you remove the nodes from the scene tree, you still have a reference to them in the code file. So you need to delete/replace references to them in the code file, too.
Never hard-code viewport size (1152x648), though this isn’t related to your current problem. Just a general note.
Simply use built-in “load” method to load images into textures. So replace the first 3 lines with:
$TextureRect.texture = load("res://colorimg.png")
^ this will work after you move TextureRect to be directly under “ChooseNation” control node and not under Node2D (again, you should delete Node2D).
I really appreciate your kind help. I will try your advice soon and see if there will be good news.
Edited: I deleted the Node2d node, set the TextureRect as a child of “ChooseNation”, changed the"extends TextureRect" to “extends Node” and loaded this script to TextureRect Node, and I got the error like this:
Invalid set index ‘texture’ (on base: ‘null instance’) with value of type ‘CompressedTexture2D’.
If I load the script to “ChooseNation” node, then I will get
Invalid call. Nonexistent function ‘get_pixel’ in base ‘TextureRect’.
Please can someone tell me how to resolve it? Should I change the file’s format/type when importing it?
capixo - I’ll just be frank with you (and I say this with utmost respect): if you can’t immediately understand the “Invalid call. Nonexistent function ‘get_pixel’ in base ‘TextureRect’.” error then you really lack basic knowledge of Godot and/or programming in general.
At this point my best advice is that you follow the tutorial I linked above and learn the basics of Godot.
If it’s too difficult to follow that tutorial, you should instead focus on learning the basics of programming. Pick up any book for beginners in programming language of your choice (I recommend Python).
But I have to use the “get_pixel” function to get the color value of the mouse position. Wouldn’t it be a logical contradiction if I need to use TextureRect and it doesn’t have a built-in function for “get_pixel”?
