nimbling

For our app we were looking at minimising texture space, and I was leering at some really large shapes that I needed big textures for.

TL:DR: Trace your shape and swap out the texture for a way smaller swatch of just the color.

This is the hand, pointing at things, I made:
Screenshot 2019-12-13 at 09.37.13.png

Look at that huge png!

Here it is, traced, thank you esoteric, that's good stuff:
Screenshot 2019-12-13 at 09.38.06.png


Now to replace the attachment:
Screenshot 2019-12-13 at 09.38.40.png


Spine will ask you if you want to scale the texture coordinates, but DO NOT LET IT. I did this first, and it ended in tears. (*1)
Screenshot 2019-12-13 at 09.39.00.png

"NO"... the answer is "NO" here :'(

To verify the UV mapping at this point, go into edit mesh mode, and toggle "deformed"
Screenshot 2019-12-13 at 09.39.22.png


Here it is, that big attachment, mapped onto a little square, that's all the texture space it's using now!
Screenshot 2019-12-13 at 09.39.30.png


Make sure the edge vertices are not on the exact edge, move them in a little, otherwise they'll be on the edge of the alpha sampling, and you'll likely not want that. Like this:
Screenshot 2019-12-13 at 09.40.13.png


Here's one of the end results:
Bubble.gif


Enjoy your smaller texture atlas!

(*1) When I first clicked YES on scaling the texture coordinates, the UV map ended up self intersecting, and since Spine renders *one sided* it was a strange look, and it took us some time figuring it out what was wrong.
添付ファイルを見るにはパーミッションが必要です
アバター
nimbling
  • 記事: 177

Nate

This is a good tip, thanks for sharing! Also glad you're making good use of the tracing. It was a big pain to do well (easy to do poorly though!).

Shiu has wanted to do something with a similar silhouette style for a while. Check out at 3:54 in our second Kickstarter video:
Spine Features Kickstarter - YouTube
But please don't watch the rest of the cringey video! :grinfake

BTW, if you do have your UVs on the edge of the texture, MSAA can be used to antialias the hard edges. Image and video export have MSAA options. At runtime you'd need to enable it through your game toolkit. Of course moving the UVs in slightly is easy enough.
アバター
Nate

Nate
  • 記事: 9642

nimbling

I've been trawling some dank parts of the internet to see if I could directly export Illustrator vectors to 2D polygons like this.

I failed.

It would be sexy to directly export shapes like these from Illustrator (or SVG) to no-texture colored polygons, but I guess we'd need vertex coloring in Spine for that to work? But I feel that's just my unicorn-pony feature request of full vector / polygon spine files :D

<edit:> Hehe, that video - <3 Exceeded our expectations alright! :)

Happy holidays!
アバター
nimbling
  • 記事: 177

vzlomvl

Hello Spine team.
Actually, the ability to import simple SVGs would be super useful. I am working on a project that uses vector graphics. But since we use the Spine, we have to convert it to PNG. If we could import a mesh from SVG, it would help a lot to reduce the amount of RAM used.
Thanks.
アバター
vzlomvl
  • 記事: 59

Nate

The savings depends on how it is rendered at runtime. If rendered as geometry then yes, you would save video memory (not system RAM). However, not all game toolkits can handle doing that, and doing that well is difficult (often only the simplest SVG features are supported). Also, this is a pretty big difference from rendering textures, which means it is a big feature that requires a lot of work.

An alternative is to render SVG to textures on the fly. This still has the benefit that you have small SVGs instead of images, but doesn't reduce video memory. This is easier to support, and could even be done yourself by using images in Spine, then rendering to SVG at runtime and giving the Spine Runtimes the textures. Ideally of course we provide SVG support for you, but we have a lot of other features planned first.
アバター
Nate

Nate
  • 記事: 9642

vzlomvl

Thank you for your reply.
I am developing games on Android/IOS, and as far as I know, they are using RAM memory(because mobile devices haven't dedicated graphics memory). Sorry, I didn’t specify this. Reducing of RAM is especially important on devices with 1GB of RAM.
By the ability to import simple SVGs I mean: (1) ability to create slot without texture(only colored mesh) and (2) some button in Spine UI which will get SVG and convert it to simple mesh if possible(allow to import only solid color form without sub symbols, gradient, etc). So we will be able to export our art by element and then import it like a Spine mesh. Spine mesh is already supported on all platforms so they shouldn't have an issue with platform support.
Or maybe I can somehow make the plugin for Spine to do it? For example, I can write C# plugin(with support of some libs) which will make this kind of operation(SVG to proper Spine mesh format) but I will need some API to paste Mesh data to the Spine project. Does Spine have the ability to import mesh data from CLI or somehow?
Thanks in advance.
アバター
vzlomvl
  • 記事: 59

Nate

Thanks for the additional information. It's an interesting idea to convert an SVG into Spine mesh attachments. It is possible to import data into Spine using Spine's JSON or binary formats (JSON will be easier). It's easiest to export a simple mesh to JSON to see the basic format, then read this section to understand mesh attachments:
Spine: JSON export format: Attachments
Your meshes would not be weighted, so the vertices are a simple list of x,y pairs.

Note the Spine Runtimes transform mesh vertices using the CPU. You'll likely need to be wary of how many vertices your target devices can handle. Mobile devices can still handle a fair number of vertices, so I think this technique can still be useful.
アバター
Nate

Nate
  • 記事: 9642


Return to Editor