Combine smaller Sprite2D or Images into one big Sprite2D/Image

Toxe

A question came up on how to combine multiple smaller sprites or images into one big sprite. And as someone who likes working with low level graphics I thought I'd do a quick test project. (Also I recently thought about how to draw single pixels by hand so this would be a good first look into that direction as well.)

GitHub project: https://github.com/Toxe/godot-combine-images

From main.gd:

func combine_images(sprites: Array[Sprite2D]) -> void:
    assert(!sprites.is_empty())

    var format := sprites[0].texture.get_image().get_format()
    var bounding_box := calc_bounding_box(sprites)

    assert(sprites.all(func(sprite: Sprite2D) -> bool: return sprite.texture.get_image().get_format() == format))
    assert(bounding_box.size.x > 0 and bounding_box.size.y > 0)

    var image := Image.create(int(bounding_box.size.x), int(bounding_box.size.y), false, format)

    for sprite in sprites:
        image.blend_rect(sprite.texture.get_image(), Rect2i(Vector2i.ZERO, sprite.texture.get_image().get_size()), get_sprite_rect(sprite).position - bounding_box.position)

    var texture := ImageTexture.create_from_image(image)

    if combined_sprite:
        combined_sprite.queue_free()

    combined_sprite = Sprite2D.new()
    combined_sprite.texture = texture
    combined_sprite.position = Vector2(600, 300)
    add_child(combined_sprite)

Basically:

Create a new Image.
Blit or blend the smaller sprite texture images into the new image.
Create a new ImageTexture out of that bigger image.
Create a new Sprite2D and assign the ImageTexture to it.

xyz

Toxe What if some sprites are rotated?

Toxe

xyz Then you are screwed. 😉

This does not respect any "post-processing" like scaling (although I thought about it), rotation or modulation. But it handles sprites that are non-centered or have offsets.

Toxe

xyz Although, if there would be a way to get the underlying texture, image or pixel data from a CanvasItem that gets drawn to the Viewport (or wherever they get drawn to) after all the transformations have been applied then this should be fairly easy to do. But so far I haven't found anything.

Toxe

Looks like I could render a CanvasItem to a separate Viewport and then get the Viewport texture. From there on the rest would be simple. That would also allow using all the draw_...() functions. This looks promising. I might give this a try, but not until next week.

xyz

Toxe The hardest part there would be figuring out the bounding box, in case you want to cover all of the CanvasItem::draw_*() functions, including draw_set_transform_*()

jonSS

In my case nothing seems to work,
nothing is drawn on screen, only an error on the debugger

E 0:00:01:0001 blit_not_working.gd:11 @ _ready(): It's not a reference to a valid Image object.

extends Node2D

var texture2
var image1 = preload("res://imgTest1.png")
var image2 = preload("res://imgTest2.png")

func _ready():
	var img = Image.create(200, 200, false, Image.FORMAT_RGBA8 )
	img.blend_rect(image1, Rect2i(Vector2i.ZERO, image1.get_size()), Vector2(10, 10) )
	texture2 = ImageTexture.create_from_image(img)

func _process(_delta):
	queue_redraw();

func _draw():
	draw_texture(texture2, get_global_mouse_position() )

Iam using Godot_v4.2.1, had to delete a bunch of code...
I though "blit_rect" was the one that combined images into 1 ? But still i cant understand how this is supossed to work... Is an image being created, then sprites are blit/blend into that image... Why isnt it writen on the manual i can even get 1 to work, blit/blend is massive pile of st

xyz

jonSS blit/blend is massive pile of st

It isn't. You just don't understand how it works.

I think the main problem is that you're not aware that Image object and Texture object are two different things. The former represents pixel data residing in CPU address space (RAM), where CPU can manipulate pixels, including blitting, while the latter represents pixels in the GPU address space (video RAM) where they're used for drawing onto the screen by the GPU but can't really be manipulated directly by the CPU. The data transfer between the two is always done by copying (duplicating), not by reference. So if you pull some pixels from a Texture object into an Image object (via Texture2D::get_image() for example), then let the CPU intervene on that data (e. g. blit something into it), in order for this data to be shown on the screeen, a new Texture object must be created/initialized from this data.

The error above is caused by your code trying to use a Texture object returned by the loading function as if it was an Image object. If you want to load a bitmap resource as an Image object you need to specify that in resource's import options. Otherwise it will default to import it as a Texture object, i.e. it goes straight into video RAM for drawing.

Toxe

jonSS What I don't really understand is why you want to draw the image/texture yourself in _draw()? Why not just create a sprite, drop it into the scene and be done with it, like in my code snippet above? That way you don't need to worry about anything like (re)drawing and the engine handles everything for you.

Also did you try cloning and running my example project? If I did understand you correctly it should do everything that you needed.

jonSS blit/blend is massive pile of st

I don't know, I found it pretty simple and straightforward. The Image class documentation exposed everything that was needed and was pretty concise. But I have done stuff like this in other languages/libraries/systems before so I knew what to look for and everything was basically as I expected it to be.

jonSS

xyz It doesnt work...
When i have an image he asks me for a texture, when a texture he asks me for an image...

xyz Texture object returned by the loading function as if it was an Image object

The only reason i did that way was because the engine forced me into it, in previous errors...

If its so easy for you, then why dont you make a working example without for loops or extras functions, just a simple 2 sprites/or draw textures combined into 1 image... You keep arguing, and deviating into other subjects, but you are the one that doesnt trow any examples.

xyz

jonSS @Toxe posted working example of exactly what you're asking for, even put the thing on github.

jonSS You keep arguing, and deviating into other subjects, but you are the one that doesnt trow any examples.

This is a discussion forum, not example throwing forum. No one is entitled to getting code gifts here and you won't solicit any by being arrogant. All things I mentioned are relevant for the problem you have.

xyz

Toxe What I don't really understand is why you want to draw the image/texture yourself in _draw()? Why not just create a sprite, drop it into the scene and be done with it, like in my code snippet above? That way you don't need to worry about anything like (re)drawing and the engine handles everything for you.

The OP is working on a sort of a custom tilemap plugin with the idea to implement pre process effects like blur on whole tile layers. Imho, judging from the several questions asked so far, they're approaching the whole thing in a bit of a misguided way, and also trying to bite off more than they can chew with their current level of technical knowledge. So it's all bound to periodically get stuck with an odd xy problem like this one. I tried to point this out on several occasions, but they're being stubborn 😃 Which is ok as long as one is ready to invest some of that stubborn persistency into learning how things actually work.

jonSS

I have it working... dont know for witch reason it started to work now ? i though it was a problem with godot v4.2.1

extends Sprite2D

var absRect = Rect2(0, 0, 32*3, 32*3 );
var absRect2 = Rect2(32*5, 32*5, 32*3, 32*3 );
var texture1;

func _ready() -> void:
	
	var img1 = ImageTexture.create_from_image(texture.get_image().get_region( absRect ) );
	var img2 = ImageTexture.create_from_image(texture.get_image().get_region( absRect2 ) );
	
	var format = img1.get_image().get_format()
	var image1 = Image.create(500, 500, false, format)
	
	image1.blend_rect(img1.get_image(), Rect2(Vector2(0, 0), Vector2(32*4, 32*4) ), Vector2(0, 0) );
	image1.blend_rect(img2.get_image(), Rect2(Vector2(0, 0), Vector2(32*4, 32*4) ), Vector2(100, 0) );
	texture1 = ImageTexture.create_from_image(image1);


func _process(_delta: float) -> void:
	queue_redraw();
	

func _draw() -> void:
	draw_texture(texture1, get_global_mouse_position() );

xyz they're approaching the whole thing in a bit of a misguided way

xyz I dont identify myself has "they", she's, or it. Iam just one guy making a tilemap, i dont have a team on my back

jonSS

xyz The OP is working on a sort of a custom tilemap plugin with the idea to implement pre process effects like blur on whole tile layers. Imho, judging from the several questions asked so far, they're approaching the whole thing in a bit of a misguided way, and also trying to bite off more than they can chew with their current level of technical knowledge

xyz I used "they" as a neutral pronoun in sense described under 3 in the dictionary here. Not even sure why you're ruminating on this.

Its dificult to undertand the things you write...
If you are such an iluminated and intellectually gifted, you could use your "rat's ass" to make a tilemap yourself ( or something else ). That way you could show everybody else how dumm other people are in relation to you.
But you just dont do it ? Not even a simple 5min "blend_rect" example...

xyz

jonSS I dont identify myself has "they", she's, or it. Iam just one guy making a tilemap, i dont have a team on my back

I don't give a rat's ass about how you "identify yourself". I used "they" as a neutral pronoun in the sense described under 3 in the dictionary here. Not sure why you're even bringing this up.

Good to hear you finally got something working though. Hopefully it'll be applicable for what you're ultimately aiming for. Although I do sense more trouble coming up along the way 😉

Toxe

jonSS But you just dont do it ? Not even a simple 5min "blend_rect" example...

What's the point though? A working example was already there, why repeat that?

jonSS I dont identify myself has "they", she's, or it. Iam just one guy making a tilemap, i dont have a team on my back

It's called "being polite", calm down.

Good job on getting it to work!

xyz

This thread is getting psychoactive 😃

@jonSS You haven't even thanked @Toxe for providing a working example, but instead went on barking at me for not doing so. I'm a lazy ignorant bastard and I code only for money. So no tactic other than cash will work to get something copypasteable from me.

Kids these days 🤣

jonSS

xyz what ?
I dont think @Toxe felt offendend ? but now that you mentioned "i didnt tanked him" theres a chance hes going to be...

I wasnt barking at you. If you saw the kind of krap i take for doing stuff for free. Compared to this is nothing.
I was just trying to speed this up and avoid the inevitable in getting stuck on 1 function, that could take 5 to 10min, instead i got stuck for 2 days on "blit" has its already common

xyz Kids these days 🤣

Iam problably already much older than you.

xyz

jonSS I dont think @Toxe felt offendend ?

It doesn't matter how he felt. Saying "thanks" to someone that put some effort in to help you is a part of the civilized etiquette. Why do I even have to point this out? Remember that you're interacting with actual people here, not with code generating chatbots.

jonSS Iam problably already much older than you.

Ya think? Your behavior would suggest otherwise.

Look, are you here to solve problems and learn something or to engage in pointless arguments over inconsequential things? If former is the case, don't act like a spoiled brat entitled to having their code written for them. Be grateful that people are even trying to help you in any way. Cultivate patience, focus and receptiveness to new knowledge and you'll reap great benefits in discussions here as well as in your overall coding endeavors. Otherwise, you're wasting everyone's time, especially your own.