Cropping a sprite image to the dimension of the play area from another node and applying transform

[system]

	Attention	Topic was automatically imported from the old Question2Answer platform.
	Asked By	Sylvain22

Hi,

I’m designing a game level

So I use the editor to position and scale both pictures visually (in level_1).
The background is wider than the silhouette, I position them manually relative to each other plus individual scaling.
background has a scale of 1.1, the silhouette a scale of 0.8

After that, I add my level to the game:

So I now positioned manually the level_1 inside game_ui and also apply a scale to the whole level_1 scene (0.5)
I also placed my playground above the game_ui with some offset too.

Now I want to crop the visually displayed background of level_1 image to the size of my game area the playground:

The difficulty is to apply the transform of each node scaled and positioned correctly…

I managed to find the values, by manipulating directly is the game by adjusting by hand:

clip_w = play_area.points[2].x * ratio
clip_h = play_area.points[2].y * ratio
clip_zone = Rect2(
	clip_offset.x ,
	clip_offset.y ,
	clip_w,
	clip_h
	)
level_bg.set_region(true)
level_bg.position = offset_position
level_bg.set_region_rect(clip_zone)

Now how do I transform the size of the playground, to the (clip_w, clip_h)?
I found this one : ratio = 1 / (level_bg.scale.x * level_1.scale.x)
But I can’t figure out how to compute the clip_offset nor the offset_position of the clipped background inside level_1.

I think it could be achieved by a applying some Transorm2D but I don’t know how.

Do you have some hint for me?

Regards,
Sylvain.

Use a Camera2D node to select what’s on the actual screen when the game is running

A112Studio | 2020-05-09 15:21

[system]

	Reply From:	Sylvain22

Thanks A112Studio,

I finally found a solution. I don’t know the Camera2D yet. And my game is static.
As I also need to extract part of the background image for the gameplay, I need to know how to get any surface on it from the playground coordinate.

Here is my solution, script in game_ui (there’s some extra code because I pasted a development code which also include interactive modification of the values):

func _ready():
	level = get_node("level_1")
	level_bg = level.get_node("background")
	playground = owner.get_node("playground")
	play_area = playground.get_node("area_contour")
	
	# compute clip to local coordinate of the image bg
	# we need the report the playground dimension to level_bg, so we pass 
	# by global position to get the conversion (scale + offset) 
	var gp_background = level_bg.to_global(Vector2.ZERO)
	var gp_playground = play_area.to_global(play_area.points[0])
	
	# the new clip offset will be moved the the clip starting point
	# because we use level_bg corner origin and the origin will become
	# the new clipped corner at clip_offset
	var lp_clip_offset = level_bg.to_local(gp_playground)
	# we compute the clip_size at level_bg origin, play_area are at scale 1
	# so the coordinate are OK
	var lp_clip_size = level_bg.to_local(gp_background + play_area.points[2])
	
	clip_w = lp_clip_size.x
	clip_h = lp_clip_size.y
	clip_offset = lp_clip_offset
	
	# position the new offset with playground top corner position
	var lp_offest_clipped = level.to_local(gp_playground)
	offset_position = lp_offest_clipped

	clip_zone = Rect2(
		clip_offset.x ,
		clip_offset.y ,
		clip_w,
		clip_h
		)
	level_bg.set_region(true)
	level_bg.position = offset_position
	level_bg.set_region_rect(clip_zone)