Fly For Coins - Game built with Godot - But need one help

prsolucoes

Hi,

Can anyone help me with problem? I published my game for iOS and Android with the bug. But will be nice if anyone can help me with this.

The bug is already details on Godot QA: https://godotengine.org/qa/63128/game-work-on-pc-but-not-on-tablet-because-of-wrong-position

You can post here or there.

Thanks anyway.

C_Arts

Did you try to put the Sprite inside a Container and use the anchors of Container to do the job of positioning?

Here is my Container's code, I'm using the project settings in this case.

func _on_size_changed():
	screenProportionX = get_viewport_rect().size.x / ProjectSettings.get_setting("display/window/size/width")
	screenProportionY = get_viewport_rect().size.y / ProjectSettings.get_setting("display/window/size/height")
	rect_scale = Vector2(screenProportionX, screenProportionY)

I'm scaling everything inside at once.

... edit: Anchors at: 0.5, 0.5, 0.5, 0.5, to center a centered sprite

prsolucoes

Hi,

I tried, but the problem is other now. On full screen it shows gray bars on side:

And

And my code:

var viewportWidth = get_viewport_rect().size.x
var viewportHeight = get_viewport_rect().size.y

var scaleX = get_viewport_rect().size.x / ProjectSettings.get_setting("display/window/size/width")
var scaleY = get_viewport_rect().size.y / ProjectSettings.get_setting("display/window/size/height")

$Control/Container/Background.set_position(Vector2(viewportWidth/2, viewportHeight/2))
$Control/Container/Background.set_scale(Vector2(scaleX, scaleY))

Can you help me?

cybereality

Well you will have gray bars (pillarboxing or letterboxing) if the game art is not at the same aspect ratio as the user's device. You can't really avoid this, but you can set the clear color to black or blue or whatever you want so it is not as noticeable. The other option would be to make the game graphics responsive to adjust to the size of the user's device. This is more complicated but possible.

prsolucoes

@cybereality said: Well you will have gray bars (pillarboxing or letterboxing) if the game art is not at the same aspect ratio as the user's device. You can't really avoid this, but you can set the clear color to black or blue or whatever you want so it is not as noticeable. The other option would be to make the game graphics responsive to adjust to the size of the user's device. This is more complicated but possible.

Hi,

First, thanks.

Do you have any thing about this? Tutorial, sample etc?

I want make the background and the game parallax be positioned in full screen on that screen and let background border offscreen if need. The main purpose is make the image appear on background without gray border and the rest of the background can be offscreen. Example:

If i don't put code the background will be proportional inside screen and black/gray border will appear. I want set the background position and size proportional with screen even the background extra go out of screen.

TwistedTwigleg

Have you tried using a TextureRect instead of a Sprite? Then you could use anchors and set the Layout to Full Rect, which should keep the background positioned and scaled relative to the screen size.

cybereality

Here is the code I am using. It will resize the the background to match the longer side of the aspect ratio (so it will fill the screen) and the other side will bleed off the edge. It also resizes the game node to fit within the space (without overflowing).

onready var screen_center = get_viewport_rect().size * 0.5
onready var background_aspect = get_aspect_ratio(background.rect_size)

func _ready():
	get_tree().get_root().connect("size_changed", self, "on_size_change")

func on_size_change():
	var view_size = get_viewport_rect().size
	recenter_game(view_size)
	resize_background(view_size)

func recenter_game(view_size):
	var new_center = view_size * 0.5
	position = new_center - screen_center
	
func resize_background(view_size):
	var new_aspect = get_aspect_ratio(view_size)
	if new_aspect > background_aspect:
		background.rect_size.x = view_size.x
		background.rect_size.y = view_size.x / background_aspect
	else:
		background.rect_size.y = view_size.y
		background.rect_size.x = view_size.y * background_aspect
	var new_center = view_size * 0.5
	var new_size_half = background.rect_size * 0.5
	background.rect_position = screen_center - new_size_half
	
func get_aspect_ratio(size):
	return size.x / size.y

In the project settings, set Window Stretch Mode to "2D" and "Expand". That should do it.

prsolucoes

@cybereality said: Here is the code I am using. It will resize the the background to match the longer side of the aspect ratio (so it will fill the screen) and the other side will bleed off the edge. It also resizes the game node to fit within the space (without overflowing).

onready var screen_center = get_viewport_rect().size * 0.5

func _ready():
	get_tree().get_root().connect("size_changed", self, "on_size_change")

func on_size_change():
	var view_size = get_viewport_rect().size
	recenter_game(view_size)
	resize_background(view_size)

func recenter_game(view_size):
	var new_center = view_size * 0.5
	position = new_center - screen_center
	
func resize_background(view_size):
	var new_aspect = get_aspect_ratio(view_size)
	if new_aspect > background_aspect:
		background.rect_size.x = view_size.x
		background.rect_size.y = view_size.x / background_aspect
	else:
		background.rect_size.y = view_size.y
		background.rect_size.x = view_size.y * background_aspect
	var new_center = view_size * 0.5
	var new_size_half = background.rect_size * 0.5
	background.rect_position = screen_center - new_size_half
	
func get_aspect_ratio(size):
	return size.x / size.y

In the project settings, set Window Stretch Mode to "2D" and "Expand". That should do it.

Hi, Very nice. But what is var "background_aspect"? It is undefined.

prsolucoes

@cybereality Some things:

1 - I create a var this this way to set background_aspect: onready var background_aspect = get_aspect_ratio($Background.get_rect().size)

2 - I set background as my background sprite: onready var background = $Background

3 - Im using godot 3.2 and instead of rect_size im using: background.get_rect().size

4 - Im using position instead of rect_position: background.position

Can you help me with this?

cybereality

What is it that is not working? Are you getting any error messages or warnings? This is code I directly copy-pasted from my working project (in Godot 3.2.1) so I know it works, but maybe I left out some step or there is some setup needed in the editor.

prsolucoes

Hi,

First: I use your code to center the "world" (main node that script is attached). It has a "margin" sending it to right:

Second: In your script variable "background_aspect" is not defined, it not exists.

Third: In your script variable "background" is not defined, it not exists. So, i have created one that point to my "$Background" but get this error when your script run:

Invalid get index 'rect_size' (on base: 'Sprite').

The variable "background" cannot be a Sprite?

cybereality

My script is on the root node of my game (which is a Node2D) so it will center itself. It does not have to be in a container, it is just the root.

The variable "background_aspect" is a variable, I forgot to copy that in my post.

onready var background_aspect = get_aspect_ratio(background.rect_size)

In my case I am using a TextureRect for the background. If you are using a Sprite, you can do:

background.get_rect().size

Hope that helps.

prsolucoes

Hi,

I tried your script but my root node and background is in wrong position. To solve all problems i make a project with only this sample with two scenes. One is MainMenu that have this background and other is Stage that i will apply the same logic to make the parallax fill entire screen:

https://github.com/prsolucoes/godot-samples/tree/master/center

Can you get it to try help me?

Thanks.

cybereality

Yeah, it needed a bunch of changes to work on your setup. I fixed it, and it's a lot simpler now.

extends Node2D

onready var background = $Background
onready var screen_center = get_viewport_rect().size * 0.5
onready var background_size = background.get_rect().size * background.scale
onready var background_aspect = get_aspect_ratio(background_size)

func _ready():
	get_tree().get_root().connect("size_changed", self, "on_size_change")

func on_size_change():
	var view_size = get_viewport_rect().size
	resize_background(view_size)
  
func resize_background(view_size):
	var new_aspect = get_aspect_ratio(view_size)
	var new_scale = 0.5
	if new_aspect > background_aspect:
		new_scale = view_size.x / background_size.x
	else:
		new_scale = view_size.y / background_size.y
	
	background.set_scale(Vector2(new_scale, new_scale))
  
func get_aspect_ratio(size):
	return size.x / size.y

prsolucoes

Hi,

It is near of final solution. I have updated the sample. The only thing now is the scale that be bigger than enough.

THE AUTO SIZE WITHOUT CODE:

THE AUTO SIZE WITH CODE:

The image is a lot of bigger, you can see by the clouds that is all out of screen.

OTHER THING: It can be applied to parallax too?

Can you help me?

prsolucoes

I have divided by 2 and it is perfect to me:

func resize_background(view_size):
	var new_aspect = get_aspect_ratio(view_size)
	var new_scale = 0.5
	
	if new_aspect > background_aspect:
		new_scale = view_size.x / background_size.x
	else:
		new_scale = view_size.y / background_size.y
	
	new_scale *= 0.5
		
	background.set_scale(Vector2(new_scale, new_scale))

I have updated the demo, can you see what you think?

Thanks.

cybereality

Oh yeah, I forgot to account for the fact that your sprite was default at 0.5 scale. That would do it.

prsolucoes

@cybereality I need say that your help is the great difference in godot community. Thanks.

cybereality

Thank you.