# Dynamic creation of the atlas in the script

**URL:** <https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404>\
**Category:** Questions\
**Created:** [July 12, 2018, 9:48am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404 "2018-07-12T09:48:09Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![alexandr.gil](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/a/ecc23a/32.png) [@alexandr.gil](https://forum.defold.com/u/alexandr.gil)\
**Post date:** [July 12, 2018, 9:48am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/1 "2018-07-12T09:48:09Z")

</div>

Hello! I upload a lot of avatars of users from social networks into the game. I do this with the code

```lua
http.request(link, "GET", function(self, id, res)

	local img = image.load(res.response)
	
	if gui.new_texture(link, img.width, img.height, img.type, img.buffer) then
		gui.set_texture(avatar_node, link)
	end
end)

```

But I stumbled on the fact that the number of drawcalls!  
Is it possible to collect dynamic user avatars in one atlas and use from

```lua
.......
local img = image.load(res.response)
	-- avatars is atlas name
	if gui.new_texture('avatars/'..link, img.width, img.height, img.type, img.buffer) then
		gui.set_texture(avatar_node, 'avatars')
		gui.play_flipbook(avatar_node, link)
	end

```

How to download a lot of avatars of users in the game and avoid a big drawcalls!

Very interesting!  
Thank you!

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 12, 2018, 10:00am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/2 "2018-07-12T10:00:21Z")

</div>

Unfortunately it’s not possible easily dynamically create atlases at runtime… but it would be an awesome feature if it was added. I don’t think there is an issue yet for it so you should create one to request this feature [GitHub · Where software is built](https://github.com/defold/editor2-issues/issues)

I thought maybe you could create a buffer which is then dynamically updated, but custom properties sent to the shader for offsets would cause extra drawcalls too so we would need to be able to create UVs at runtime too.

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [July 12, 2018, 10:12am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/3 "2018-07-12T10:12:13Z")

</div>

> [@Pkeod](#):
>
> I thought maybe you could create a buffer which is then dynamically updated, but custom properties sent to the shader for offsets would cause extra drawcalls too so we would need to be able to create UVs at runtime too.

It might be possible to calculate the UVs in GLSL based on a “image index” that could be stored in the Z-component of the GUI node (keeping the draw count down due to Z not breaking batching in GUIs). (I think, not tested myself. 🙂 )

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 12, 2018, 10:13am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/4 "2018-07-12T10:13:17Z")

</div>

Good idea! I’ll try to make a demo for that now.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 12, 2018, 11:19am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/5 "2018-07-12T11:19:42Z")

</div>

What dimensions are your avatars? How many do you want to be able to be loaded at once? They are GUI nodes?

My current thinking is to use tilesource for textures because then you can use it as a texture with animations and the placements are consistent. Then you can setup animations for each avatar slot so it’s easy to set in the the right slot gui scripts. So you download the image, replace the image data in the buffer at the correct offsets, and then update the tilesource texture with resource.set\_texture. The only issue with this is that there will probably be lag every time you update the texture.

@Mathias_Westerdahl this should be doable?

---

<div class="post-metadata">

**Author:** ![Mathias\_Westerdahl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/mathias_westerdahl/32/228_2.png) [@Mathias\_Westerdahl](https://forum.defold.com/u/Mathias_Westerdahl)\
**Post date:** [July 12, 2018, 12:00pm UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/6 "2018-07-12T12:00:45Z")

</div>

Sounds doable to me. You can mitigate the hitches by only updating parts of the texture per frame.

---

<div class="post-metadata">

**Author:** ![alexandr.gil](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/a/ecc23a/32.png) [@alexandr.gil](https://forum.defold.com/u/alexandr.gil)\
**Post date:** [July 12, 2018, 2:49pm UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/7 "2018-07-12T14:49:59Z")

</div>

~30 avatars, gui node type, 100X100  
Thanks!

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 12, 2018, 3:20pm UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/8 "2018-07-12T15:20:13Z")

</div>

I have it working, cleaning it up and then will release it.

 ![2018-07-12%2008_36_05-assets](https://forum-defold-uploads.b-cdn.net/original/2X/2/2b8a95a3c0821fba0e1eb116d180db672b15b4d9.jpg)

 ![0%20-%20DynamicAtlasNoBreakBatching](https://forum-defold-uploads.b-cdn.net/original/2X/0/0955cba749f64a391c058415215e44fad84f50c2.png) ![0%20-%20DynamicAtlasNoBreakBatching](https://forum-defold-uploads.b-cdn.net/original/2X/a/a542160e87715634f2eab0a15c337c2cd9b91dd1.png)

Test images

```lua
https://i.imgur.com/iMPi3lq.png
https://i.imgur.com/Y8JhMoR.png

```

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 12, 2018, 3:45pm UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/9 "2018-07-12T15:45:53Z")

</div>

It would be easier if the images are a power of 2 due to how the textures work. I’ll have to do a test for that size…

[DynamicAtlasNoBreakBatching.zip](https://defold-forum-bucket.nbg1.your-objectstorage.com/original/2X/4/40957e38fb54c5cd25192a62aa1bed473cdce802.zip) (460.1 KB)

Here is the ugly proof of concept so you can see how it works. I still need to clean it up, add proper offsetting, and make it work with irregular texture sizes. Right now the tiles are starting from the bottom left because it’s easier.

I can’t spend more time on it right now though but can finish it tomorrow. If anyone else feels like making the final production ready version before then please do. 🙏

---

<div class="post-metadata">

**Author:** ![alexandr.gil](https://forum-defold.b-cdn.net/letter_avatar_proxy/v4/letter/a/ecc23a/32.png) [@alexandr.gil](https://forum.defold.com/u/alexandr.gil)\
**Post date:** [July 12, 2018, 9:15pm UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/10 "2018-07-12T21:15:15Z")

</div>

Fine work, thank you!  
Unfortunately, I can not use it - all social networks give out avatars in jpg format 😂

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [July 12, 2018, 9:19pm UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/11 "2018-07-12T21:19:37Z")

</div>

You should be able to adapt the solution to work with jpg as well. The solution could likely be adapted to using image.load() instead (since it supports both png and jpg).

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 13, 2018, 2:18am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/12 "2018-07-13T02:18:02Z")

</div>

image.load() gives the raw image data that has not yet been decoded to rgb yet I think? Or is that data ready to use but in a different way?

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 13, 2018, 4:00am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/13 "2018-07-13T04:00:09Z")

</div>

Working on this again now. JPG format will be supported.

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [July 13, 2018, 4:01am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/14 "2018-07-13T04:01:59Z")

</div>

image.load() gives you the decoded pixel data.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 13, 2018, 6:56am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/15 "2018-07-13T06:56:27Z")

</div>

![2018-07-12%2023_54_44-ImageBatch](https://forum-defold-uploads.b-cdn.net/original/2X/2/2f5b780069008ec3ab8c8c52c09cca21642fb082.png)

Have irregular sizes working, tiles now start at top left, have offsets working properly.

A feature which would be nice to add after everything else is working is automatic edge extrusion support so the images don’t bleed into each other when scaled as they share the same texture space. If you have a frame around the avatar it’s not noticeable, but otherwise you can see a tile bleed into another.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 13, 2018, 7:59am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/16 "2018-07-13T07:59:27Z")

</div>

For JPG / image.load() the raw data is in the Lua table instead of a Defold buffer. Would it be better to transfer the raw data into a Defold buffer after loading and then use that, or use the raw data directly?

---

<div class="post-metadata">

**Author:** ![britzl](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/britzl/32/23_2.png) [@britzl](https://forum.defold.com/u/britzl)\
**Post date:** [July 13, 2018, 8:01am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/17 "2018-07-13T08:01:54Z")

</div>

> [@Pkeod](#):
>
> For JPG / image.load() the raw data is in the Lua table instead of a Defold buffer

Yes, image.load() returns a table with the image data and some meta data about the image

> [@Pkeod](#):
>
> Would it be better to transfer the raw data into a Defold buffer after loading and then use that, or use the raw data directly?

I guess it depends on what you want to do. There’s a benefit of having it as a buffer if you intend to pass it back and forth to some C code.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 13, 2018, 8:18am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/18 "2018-07-13T08:18:02Z")

</div>

I’ll work with the raw data in Lua then.

Maybe there can be made a sister module to the PNG one for JPG that does direct Defold buffer creation.

---

<div class="post-metadata">

**Author:** ![Pkeod](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/pkeod/32/606_2.png) [@Pkeod](https://forum.defold.com/u/Pkeod)\
**Post date:** [July 13, 2018, 10:37am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/19 "2018-07-13T10:37:53Z")

</div>

![2018-07-13%2003_35_06-ImageBatch](https://forum-defold-uploads.b-cdn.net/original/2X/1/1d5d7f40cb311cff5a2829318c0992bd0d055e2d.png)

Switched to image.load() so now it should support any format that ends up supporting.

I suppose I need to flip the pixels, or grab the bytes in opposite order. It’s black and white too because of the wrong order?

 ![2018-07-13%2003_39_20-ImageBatch](https://forum-defold-uploads.b-cdn.net/original/2X/4/4e75b20d90fd515232eb783e02e1fa89775cb825.png)

string.reverse() worked to flip it correctly, but still in black and white?

Ah, it’s not actually flipped correctly…

 ![2018-07-13%2003_41_35-ImageBatch](https://forum-defold-uploads.b-cdn.net/original/2X/e/ed1a946fa38b270a2fe3b27933afee74a28117d1.png)

My mistake I was only setting the red channel to each rgb when I changed over the code. The images do appear to be incorrectly flipped horizontally still..

---

<div class="post-metadata">

**Author:** ![sven](https://forum-defold.b-cdn.net/user_avatar/forum.defold.com/sven/32/1086_2.png) [@sven](https://forum.defold.com/u/sven)\
**Post date:** [July 13, 2018, 10:48am UTC](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404/20 "2018-07-13T10:48:56Z")

</div>

> [@Pkeod](#):
>
> My mistake I was only setting the red channel to each rgb when I changed over the code. The images do appear to be incorrectly flipped horizontally still…

There is a flip flag to [`gui.set_texture_data`](https://www.defold.com/ref/gui/#gui.set_texture_data:texture-width-height-type-buffer-flip), could you give it a try?

[Next page](https://forum.defold.com/t/dynamic-creation-of-the-atlas-in-the-script/24404.md?page=2)