Screenshot of the viewport rect is appearing shifted

fabianom

So, I'm developing a simple 3D game, and I need to take screenshots of a piece of the viewport according to the mouse cursor position, but the saved screenshot is shifted, specially when the mouse is not near to the center of the viewport. Any clue why it's happening?

Here's the screenshot code. It's fired when I press a key:

func take_screenshot():
   var mouse_pos = get_viewport().get_mouse_position()
   var frame = get_node("CanvasLayer/Frame") #Frame is a 100x100px red ColorRect to highlight the mouse position area
   frame.set_global_position(mouse_pos)
   var rect = frame.get_rect()
   var image = get_viewport().get_texture().get_data().get_rect(rect)
   image.flip_y()
   image.save_png("res://screenshots/screenshot3.png")

Here's some pictures showing the issue: This highlighted area: Returns this screenshot:

This highlighted area: Returns this screenshot:

Btw, just to mention...I'm using a gimbal camera inside my player node.

Any clue?

cybereality

This is the problem:

var rect = frame.get_rect()

You should create the Rect from scratch:

var rect = Rect2(mouse_pos, Vector2(100, 100))

I believe that will work.

fabianom

Nice try, @cybereality. But it stills not working. It seems related to the depth or angle of the 3D camera, but I didn't figure out why or how to solve. Here's a new sample of the issue: Highlighted area: Screenshot result (using your suggestion):

The screenshot shows the top part of the viewport instead of the highlighted area. =/

cybereality

Those look like the correct function calls. Are you doing some sort of scaling or zooming on the viewport?

fabianom

I'm using these camera settings, @cybereality : Just some positioning and rotating adjustments, but no zoom I guess.

cybereality

I think I understand. The texture is flipped vertically, so the pixel coordinates are also flipped.

var rect = Rect2(mouse_pos, Vector2(100, 100))
var image_texture = get_viewport().get_texture().get_data()
image_texture.flip_y()
var image = image_texture.get_rect(rect)
image.save_png("res://screenshots/working.png")

fabianom

It worked! Ty, @cybereality ! You did a gj! Btw, only one fix was needed in your code: var image = image_texture.get_rect(rect) We don't need to get_data() from the image_texture.

Thanks again!

cybereality

Oh right. Glad it worked.