What is the best way to do a screen full of image tiles?

[asherevan]

Just as the title says. I am making a game in which the screen is made completely up of image tiles that get changed and moved around. Is there a good way to do this?
Also, how do you make an image, when it’s zoomed in, to not to look blurry?

[kdschlosser]

you would need to use a higher resolution image and zoom out. that way when you zoom in the quality is there. Any time you zoom into an image from a lesser resolution the image will end up pixelated. So if you start out at a resolution where it's not pixelated and then zoom out to make the "unzoomed" view it will be better. The cost is going to be more ram use to do that. You also may want to use LVGL binary image files because they are not going to be compressed like JPG or PNG files are. so the loading time will be faster.

[kdschlosser]

If you can show me an example as images of what you are wanting to do visually I can suggest how to go about it. What is coming to mind is something along the lines of what an apple watch does.

where the icons get smaller as they are further away from the center of the screen.

[asherevan]

I want them to look pixelated. The problem is that LVGL tries to fade the pixels together.

…

Message ID: <lvgl-micropython/lvgl_micropython/repo-discussions/386/comments/13533264@ github.com>

[kdschlosser]

If you want them to look pixelated when zoomed in then you need to disable anti aliasing which I don't think can be done at the widget level. It would need to be done at the display driver level.

[asherevan]

That is not my main problem though. I mainly need to know how to do the image array. It would also be nice to have them be buttons too.

[kdschlosser]

image array as in an array of image widgets or image descriptors??....

image_dsc_array = [
    lv.image_dsc_t({'data_size': size_of_some_image_data,  'data': some_image_data, 'header': {'w': some_image_width, 'h': some_image_height}),
    lv.image_dsc_t({'data_size': size_of_some_image_data,  'data': some_image_data, 'header': {'w': some_image_width, 'h': some_image_height}),
    lv.image_dsc_t({'data_size': size_of_some_image_data,  'data': some_image_data, 'header': {'w': some_image_width, 'h': some_image_height}),
    lv.image_dsc_t({'data_size': size_of_some_image_data,  'data': some_image_data, 'header': {'w': some_image_width, 'h': some_image_height}),
]

[asherevan]

I want it to be basically a grid of images. It is supposed to be a 2D game inspired by Minecraft so each block is an image.

[kdschlosser]

I have never played minecraft so I don't know exactly what you are trying to accomplish.

If you simply want a grid of images then make a class that handles a single image and then initialize as many of those as you want.

[asherevan]

Alright. But wouldn’t that be very slow and memory-consuming?

[kdschlosser]

If you are using MicroPython instead of C code anything you do is going to be slower and more memory consuming. There are things that can be done to improve performance like using the native code emitter or the viper code emitter if you are doing a lot of math.

You have to test the code you write and make changes to it and test it again to see if there is improvement in speed and memory use. What I have found is if you want better performance it usually comes at a cost and that cost a lot of times is more memory use. and if you want to save on memory you will loose performance. You will need to find that balance for your specific project.