Creating a texture of a Sprite/TouchScreenButton through code

Question

Hi,

I have created a coloured polygon shape with the draw function. The polygon points were created from the points of a CollisionPolygon2D (with the help of getpolygon function).
Is it possible to use this coloured polygon as the texture of a sprite and touchscreenbutton created from code?
When I run the code, the polygon texture does not get attached to the sprite or touchscreenbutton created through code. Here is the code:

extends Node2D

onready var shape1 = $Area2D/CollisionPolygon2D
var adjust = Vector2(50,300)
var collisionShape = []
var hoor = PoolVector2Array()
var newSprite
func _ready():

    hoor = shape1.get_polygon()
    for a in hoor:
        collisionShape.append(a+adjust)

    collisionShape.append(hoor[0]+adjust)
    var spr = TouchScreenButton.new()
    var spri = Sprite.new()
    $".".add_child(spr)
    $".".add_child(spri)
    spri.texture= newSprite
    spr.normal = newSprite
    spr.pressed = load("res://icon.png")
    spr.position = Vector2(150,50)
    spri.position = Vector2(300,50)


func _draw():
    newSprite = draw_colored_polygon(collisionShape,Color(0.75,0,1,1))

Here is the image of the output. The coloured polygon drawn is shown in the image.

https://drive.google.com/file/d/1mEUmipz0gohcViYTLlISfRkGehmMVpLI/view?usp=sharing

Thanks for your help.

Answer 1

Your newSprite is empty because draw_colored_polygon() returns nothing.

I've searched around ImageTexture, BitMap and such but I can't find an out of the box solution to convert a Polygon2D to a Texture. But I think you can do it yourself if you need to.

I see two approaches:
- one is creating a BitMap yourself, then create a Texture with that bitmap and use it with your button.
- The other is to draw a Polygon2D and use a Viewportto render the texture. You then use a ViewportTexture in your button.

For both method, you'll need to calculate the minimum bounding box to contain your Polygon2D. This is because you either have to create a BitMap, or set the size of the Viewport. Finding the minimum bounding box is a known problem: https://en.wikipedia.org/wiki/Minimum_bounding_box_algorithms

I won't code it for you be here's some pseudo code of how I would approach creating a BitMap. ( Doc for it: https://docs.godotengine.org/en/stable/classes/class_bitmap.html )

1. Get points from CollisionShape (this is your polygon)
2. Calculate the minimum bounding box to contain the points
3. Create a BitMap the size of this rectangle
4. Loop on all the pixels of the bitmap
   a. If the point is inside your polygon, set the pixel to your desired color
   b. If the point is outside, set the pixel transparent
5. Create a Texture from the BitMap probably using an Image

While it's a bit complicated, I don't think it's impossible. If anyone has a better solution, please contribute!

Comments

Thanks for your research and help.
The doc link given by you does not seem to exist, whether in French or in English.
Would be grateful for the correct link.

---

Sorry the parenthesis was messing with the link. Also, I've changed it to the english version.