How to import a high resolution/svg map or made with inkscape without getting pixelated or black?

I am making a game in which there is a character and he is in a kind of very simple city with buildings and houses. Said map is already made in inkscape using vector drawing so I can resize it and make the map bigger as I want. I have tried to export it as a PNG in large dimensions but when importing it as a sprite in png format in gdevelop, it only shows the sprite box in black. I think this is because the resolution / size is too high. If I export the sprite in a lower resolution, it looks without problems, only that it is pixelated.

In what way or in what format can I import the map without it being pixelated or black?

I have thought about dividing it into parts and importing it, but I have another problem: it does not look good when putting the parts together

Try to split the map into part as your game size then divide the entire game into a zone based to move the camera per zone, plus is not recommended that any sprite were bigger that 2080x2048 pixels. Because later if you want to publish your game for smartphone some of the older models will not render images larger than 2048.
Check this template and see how is made, all the background images are 640x384 which is my game size.

The problem is that it’s a high resolution game and the map is already done and is too big. It’s different from your game: its more looks like among us, where all rooms are together so is there any way or tool that allows cutting the map in perfect parts in order to put all parts together in the gdevelop editor? I think piskel doesn’t have any tool for that

Well I don’t know why is different since in Castlia all the levels originally were only one big(Fckn enormous) image the I used Split image online to split it into 640x384 pixels which is the resolution of the game. Anyway you can try with that web is good to split images into pieces.

1 Like

Ulises is correct, as far as I know Among Us assets are split up into numerous parts. They may even use one image per room.

Your best bet would be to splice up the file. Especially considering that the maximum display for mobile devices is approximately 2000x2000, I’d strongly recommend splitting up your image into much smaller chunks than that (probably 1000x1000)

1 Like

If i export in pieces of 2000x2000 would it give me any probelms?

Probably on some devices. The max limit is based off movile device memory and browser limits.

I would definitely try to Keep it under 2000x2000. You could try a few slices first to see if it renders properly?

I did that, but it seems laggy due to the large number of buildings on the map. How can I optimize it?

You’ll want to render a building only if it’s visible in the camera.
In 3D, it works using something like render distance. See the gif:

To do that in GDevelop (2d), you can use an invisible Sprite that is as big as the screen’s width and height (use ScreenWindowWidth()? I don’t remember the function name).
Then. if this invisible Sprite is colliding with the building sprites, make the building sprite visible. Then turn the other building sprites not colliding with the invisible Sprite (that is, they are off screen) invisible.

However, that’s probably not very efficient since it’s checking for collision every single frame against many objects. Maybe it would be better for you to:
a) make the invisible Sprite twice as big than the screen, and check it once every 0.2 seconds instead of every frame - however, the player might see an empty background for a little if the player is travelling very fast (falling in platformer games or using a car in top down games).
To work around this problem you can tweak the “checking time” or invisible Sprite size.
b) create and delete buildings (especially if they have many objects) using External Layouts.

If anyone knows of more efficient ways that’s nice too, do share them.

1 Like

I think I know a more efficient way about what @reina said, there is an extension that checks if an object is on screen.
image
I think this will work, but haven’t tried tho.

1 Like

This may also not have anything to do with the images. I have levels that are roughly 17000x5000 pixels in size, which means a bunch of images making up a background of that size, and TONs of other assets/effects/logic/etc in that area.

There’s a good chance either something is going weird with your game events causing performance issue, or the machine being tested on is hitting a memory limit, much like mobile.

1 Like

That’s what I was thinking of doing, but as far as I know, doing that the device keeps saving the buildings in memory or rendering them in the background as if it did not hide them

Bummer, that means spawning objects through External Layouts might be the way to go.
I’ve never tried it, so if you try it do update if it helps with memory!

2 Likes