Creating a texture of a Sprite/TouchScreenButton through code

Archive
1
:information_source: Attention Topic was automatically imported from the old Question2Answer platform.
:bust_in_silhouette: Asked By ashish

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 get_polygon 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.

2
:bust_in_silhouette: Reply From: MrEliptik

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: Minimum bounding box algorithms - Wikipedia

I won’t code it for you be here’s some pseudo code of how I would approach creating a BitMap. ( Doc for it: BitMap — Godot Engine (stable) documentation in English )

  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!

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.

ashish | 2021-03-29 14:56

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

MrEliptik | 2021-03-29 15:15