I need a set of drawable buffers

shinytoyguns

I've been struggling to figure out how to make Godot do what I want. I'm used to other frameworks which can give you a drawable and you can just use OpenGL on it and it gets out of your way.

Now, I'd like to take advantage of GDScript in that I don't have to set up a compiler. What I'm trying to do is kind of like where you have parallax scrolling in a 2D game. I want a set of layers that are drawn on the screen. But, these layers are not pre-baked images loaded from a file. Instead, I want to make use of the draw_* commands.

In addition, I don't want to have to remember what I've drawn, as it can grow without bounds. I want to save to contents of these layers as some sort of buffer or whatever it is called, and then compose them onto the screen.

Finally, I need mouse input across this surface. If I add a new layer, I don't want it to consume the mouse events.

I tried a TextureRect, thinking whatever I drew into it would be accessible as a texture, but I guess actually it is supposed to take a texture and display it. Then I've tried a Viewport, but then discovered it would not display, and found the ViewportContainer, but then I need to add something to that. I added a control, but then it took over my mouse events from the parent control.

So if someone has any suggestions as to what the correct node hierarchy would be, and how to save out whatever is drawn into a buffer or similar type of object, and finally how to compose a set of buffers onto the screen, that would be very helpful.

Megalomaniak

About the Viewport and the ViewportContainer node, you would create a ViewportContainer node then create a Viewport node as a child. Then in the ViewportContainer node as you said you'd assign that viewport in the inspector to the ViewportContainer. But for using the draw() method you don't necessarily even need that. Every node that inherits from CanvasItem has the draw() method.

https://docs.godotengine.org/en/stable/classes/class_canvasitem.html#class-canvasitem

https://docs.godotengine.org/en/stable/tutorials/2d/custom_drawing_in_2d.html

WRT the mouse input, check the mouse filter properties on your nodes.

https://docs.godotengine.org/en/stable/classes/class_control.html#class-control-property-mouse-filter

https://docs.godotengine.org/en/stable/classes/class_control.html#enum-control-mousefilter

shinytoyguns

Thanks for the suggestions. I thought I need the viewport because, otherwise, how do I obtain a copy of what was drawn? With the viewport I should be able to somehow obtain the texture data and save that off somewhere, to then apply to my layers.

shinytoyguns

One thing I have discovered is that I need to enable stretch on the viewport container in order for the viewport to fill it. Otherwise I see nothing on screen.

Megalomaniak

Hmm, to save an image the image class might perhaps be of interest: https://docs.godotengine.org/en/stable/classes/class_image.html

shinytoyguns

Okay, this is what worked for me. I have this hierarchy of nodes:

Control > ViewportContainer > Viewport > Control

The top-level Control is where I draw the composed texture, and the bottom level is where current draw_* calls are being done. Now there was a one fiddly thing. After drawing is done at the bottom layer, I capture the viewport texture into a new ImageTexture. Then I recompose all ImageTextures by drawing them all onto that same control, and recapturing it all into a saved compose ImageTexture. But this causes the screen to flicker because the viewport is flipped in Y. So, I had to do three things.

Set V Flip to On, on the Viewport.
Recalculate mouse coordinates for Y to account for the flipped Y in the viewport.
Set a transformation matrix, and also adjust where the final composed texture is drawn in the top level control.

In the end, is there a way to make use of a Viewport in this way but without it displaying to the screen? I had attempted such, but got various errors, from the embedded Viewport's Control size being 0, to the texture being Nil.

Top level control:

extends Control
class_name DrawingArea

func _ready():
    connect("resized", self, "resized")
    Global.drawingRegion = Rect2(Vector2(0, 0), get_size() )
    resized()
    update()

func _draw():
    draw_rect(Global.drawingRegion, Color(0.0, 0.0, 0.0), true)
    draw_set_transform_matrix(Transform2D.FLIP_Y)
    draw_texture(Global.composeBuffer, Vector2(0.0, -1.0 * Global.drawingRegion.size.y) )
    get_child(0).get_child(0).get_child(0).update()

func resized():
    Global.drawingRegion = Rect2(Vector2(0, 0), get_size() )
    get_child(0).get_child(0).get_child(0).rect_size = get_size()
    update()

Bottom level Control:

extends Control
class_name FrontSurface

var entered := false
var compose := false

func _ready():
    connect("mouse_entered", self, "mouse_entered")
    connect("mouse_exited", self, "mouse_exited")
    for eachTool in Global.tools:
        eachTool.connect("drawDone", self, "drawDone")

func _draw():
    if(!compose):
        Global.tools[Global.currentTool].draw(self)
    else:
        compose = false
        draw_rect(Global.drawingRegion, Color(0.0, 0.0, 0.0), true)
        for buf in Global.bufferList:
            draw_texture(buf, Vector2(0.0, 0.0) )

        yield(VisualServer, "frame_post_draw")
        Global.composeBuffer.create_from_image(get_parent().get_texture().get_data() )
        get_parent().get_parent().get_parent().update()

func drawDone():
    var tex := Buffer.new()
    yield(VisualServer, "frame_post_draw")
    tex.create_from_image(get_parent().get_texture().get_data() )
    Global.bufferList.append(tex)
    compose = true
    update()

func _input(event):
    if(entered):
        var eventCopy = event.duplicate(true)
        if(event is InputEventMouseMotion):
            var mouseCoords = get_global_transform().affine_inverse() * \
                              (get_viewport_transform().affine_inverse() * event.position)
            mouseCoords.x = clamp(mouseCoords.x, 0.0, get_size().x)
            mouseCoords.y = Global.drawingRegion.size.y - clamp(mouseCoords.y, 0.0, get_size().y)
            eventCopy.position = mouseCoords

        Global.tools[Global.currentTool].handleEvent(eventCopy)
        update()

func mouse_entered():
    entered = true

func mouse_exited():
    entered = false