Loading flag images dynamically

Help & Support
1

Hi

I’m about to include 252 images of country flags, and I want to load a different flag depending on the locale in my URL. I’m curious about what road to take here out of performance considerations.

  1. First thought was to create a sprite entity in world space, and then import all my flags as individual PNG-files. The flags all have slightly different aspect ratios (switzerland being square for example). I could ignore conversion to Power-of-two just to honour this difference, but I won’t be able to use basis compression then.

  2. For All of these png-texture assets I would then have to create first a texture atlas, and then a sprite (manually?)
    image

  3. …then by code I check the region and load the correct sprite using this.app.assets.find(region, 'sprite');

This all seem to work technically, I’m just curious if I’m way better off doing this differently? Perhaps a render entity / plane with a material and texture?

I figured it would be a good idea to keep the different flags as separate assets since one user will only need to load one flag, and thus I could mark them as to not preload, and only load the one needed. Compared to having them all in one texture atlas for example.

Thankful for any input.
regards

2

If they need to be sprites, I would have all the flags in a single texture atlas and make the sprites from that. I don’t know how big each flag is so it’s a bit more tricky to know if this is a good complexity/size tradeoff.

Otherwise, yes you would have to upload them one by one.

I would tick this option in Settings → Asset Tasks to upload an image straight into a texture atlas which saves you an extra step.

image
image716×288 21 KB

To convert them into sprites, you would either need to use the Editor API to do it en mass or do it one by one in the menu unfortunately.

3

I see, thanks for that tip!

I’m also considering the RenderComponent + material path here actually. No reason they need to be sprites at all, I was curious what path would be more performant. But since it’s essentialy only one of them loading in the end perhaps it’s not such a big difference.

4

How about just uploading those images to a cdn somewhere, and at runtime creating a plane with material, and set a texture on the material?

5

It’s part of a bigger site, and we’d like to keep it independent. Also we’re doing some offline electron versions of this app, however, those won’t be localed for obvious reasons.

but creating a plane and material at runtime is not a bad idea anyhow!

6

I think they are more or less the same cost as they use similar material properties. The main difference would be if you were using alpha at all. If not, using the plane + material is a bit cheaper as you aren’t using the opacity map.

1 Like
7

Thanks for the input. I’ll go with RenderComponent + material in this case.