Simple 9-slice sprite drawing #6

New Issue

wanp · 2024-07-31T19:10:00Z

wanp commented

2024-07-31 19:10:00 +00:00

It's actually not easy at all!

There will have to be a compromise somewhere between simplicity and terseness. The engine is currently incapable of rendering sub-regions of sprites (as opposed to the whole texture), so the typical strategy involving a single square texture containing the nine slices is not going to work. We can always just draw 9 individual textures, though...

The short, but slightly complicated way is guessing all the texture paths:

/* looks for /assets/blue-9slice-1.png to /assets/blue-9slice-9.png and draws them all with m_sprite */
nine_slice("/assets/blue-9slice-", (t_frect){ 0, 0, 128, 128 }, (t_color){ 255, 255, 255, 255 });

This might be a little too magical.

The much longer, perfectly clear way:

nine_slice("/assets/blue-9slice-1.png",
           "/assets/blue-9slice-2.png",
           "/assets/blue-9slice-3.png",
           "/assets/blue-9slice-4.png",
           "/assets/blue-9slice-5.png",
           "/assets/blue-9slice-6.png",
           "/assets/blue-9slice-7.png",
           "/assets/blue-9slice-8.png",
           "/assets/blue-9slice-9.png",
           (t_frect){ 0, 0, 128, 128 },
           (t_color){ 255, 255, 255, 255 });

It's okay, but it's gross.

It's actually not easy at all! There will have to be a compromise somewhere between simplicity and terseness. The engine is currently incapable of rendering sub-regions of sprites (as opposed to the whole texture), so the typical strategy involving a single square texture containing the nine slices is not going to work. We can always just draw 9 individual textures, though... The short, but slightly complicated way is guessing all the texture paths: ```c /* looks for /assets/blue-9slice-1.png to /assets/blue-9slice-9.png and draws them all with m_sprite */ nine_slice("/assets/blue-9slice-", (t_frect){ 0, 0, 128, 128 }, (t_color){ 255, 255, 255, 255 }); ``` This might be a little too magical. The much longer, perfectly clear way: ```c nine_slice("/assets/blue-9slice-1.png", "/assets/blue-9slice-2.png", "/assets/blue-9slice-3.png", "/assets/blue-9slice-4.png", "/assets/blue-9slice-5.png", "/assets/blue-9slice-6.png", "/assets/blue-9slice-7.png", "/assets/blue-9slice-8.png", "/assets/blue-9slice-9.png", (t_frect){ 0, 0, 128, 128 }, (t_color){ 255, 255, 255, 255 }); ``` It's okay, but it's gross.

wanp added the

feature

2d

labels 2024-07-31 19:10:00 +00:00

wanp self-assigned this 2024-07-31 19:10:00 +00:00

veclavtalica commented

2024-07-31 22:05:31 +00:00

374a9b9c58 and 80ffc30075 allow for repeating textures with texture origin offset! Now it's possible to store 9slice data in single png.

374a9b9c58c3928e919a87bebcd8c6a5b4a6ad15 and 80ffc30075f1bb0a3e9bcc60b971220f0d80d4d7 allow for repeating textures with texture origin offset! Now it's possible to store 9slice data in single png.

wanp closed this issue

2024-10-09 23:52:26 +00:00

Sign in to join this conversation.