Sprites vs GUI - Performance & Versatility

Hi

I’m in the process of porting an application from Unity to Defold, and a very large part of this project is menu-esque.
There are a lot of 9-sliced buttons, panels, and general UI behaviors.

It made sense to write this stuff using Defold GUI, but there have been a couple of hiccups.

Mainly I can’t have spine animation in GUI (as far as i’m aware) and a few of these menus feature spine-animated characters, and those are layered between GUI elements (for instance, a panel behind and a button on top).

So I thought, “ok, this wont work. I’ll just use the regular sprite workflow”, but this also caused hiccups, as I can’t 9-slice sprites and I’ve already had to write a custom render script to get aspect ratio independent behaviors.

There doesn’t seem to be a clean way of achieving a combined approach, as these menus are not static (lots of tweening around), and it creates a ton of awkward edge cases when elements from the sprite world and ui world have to overlap in specific orders.

Other factors I need to consider include Performance: will drawing hundreds of GUI objects be slower than drawing hundreds of Sprites, likely yes. But what about when custom sprite 9-slicing is also running?

Basically, I’d just like some general advice on how to go about porting complex UI-heavy stuff to Defold, and an answer to a couple of questions:

  • How would you approach 9-slicing sprites in Defold?
  • How would you approach spine-animating GUI elements?
  • How do the performance of GUI manipulation and Sprite manipulation compare?
1 Like

Spine animations in GUI has an existing issue AFAIK. It has been requested by internal team so will probably come eventually.

You can have multiple GUI/Spine materials / render predicates to be able to layer GUI and Spine animations, but at some performance cost.

Many things can break batch rendering. Taking advantage of the benefits of batch rendering is what will give you the best performance. Different textures / materials for example break batching. As far as performance goes, you will want to test and check the ms difference in frame rendering on your target devices. Make a heavy example proof of concept for the methods you want to check, and post results!

@sven is currently working on support for Spine animations in GUI scenes. He’s come pretty far so I wouldn’t be surprised if we’ll get it in the next release. I can’t promise anything and I think it’s better if @sven gives his input here instead of me guessing :slight_smile:

When it comes to GUI performance it can be just as performant as sprites. You need to be careful with how you arrange your GUI. Interleaving box and text nodes in a hierarchical GUI will break batches unless you also use GUI layers in which case you can reduce it to one draw call for the box nodes and one draw call for the text nodes (with the restriction that the box nodes all need to use the same texture and color and the text nodes need to use the same font).

1 Like

Check out Teaser Fridays and Roadmap talks

1 Like