• Showcase

  • [UI] Example - Simple Tool Ring

    英语
Related Discussions
...

I set this up in Spine. It took about an hour to setup in spine and really showcases how flexible and quickly you can prototype things in this tool.

Not shown: The yellow square in the center is used to indicate joystick input.

We did the whole UI of a game using spine. Once everything was handled it was amazingly fast to get things sorted. We utilised events and bones (bones where used so we could attach things to panels on the fly). Previously, before I with the company, we used .xml's to create UI's and the process, I hear, was slow and laborious!

We also looked into other UI packages, and lots where missing features others had. But none had the flexability of spine, as we where able to create what we needed. I wish I could show you what we did.

But my firm opinion is that spine is great for ui!

I used to work on World of Warcraft's UI. Same story - using XML and so-on. The only majorly missing feature in Spine is the ability to create templates and apply them generically against bones, data driven lists of images and children, etc in Spine. But I feel like UI is such an edge case. I wish I could see what you did too. 🙂

Second time writing this :bang:

So we actually solved the whole template thing. And I have word from my boss its ok to share the following images

We have a concept of Nodes, these are basically just bones with the name "Node_[identifier]". We use these as they can be animated. Then using XML, we attach things to these nodes, this can be anything really, images or even spine files! As the Bones are Parents to these objects, the transforms are applied to the children.

So, animations work, images move scale in and out.

图像因不支持 HTTPS 被隐藏。 | 仍然显示


This is our shop spine file. The bounding boxes are used for text boxes and buttons.
In the centre of the screen there are a few bones in a line (not the red one). These are the nodes. That we attach panels too.

图像因不支持 HTTPS 被隐藏。 | 仍然显示


Here I am playing several animations, which moves the node

We didn't put the panels inside the same skeleton because we have different panels for different objects, and we attach other things to these nodes and panels are used in other areas.

图像因不支持 HTTPS 被隐藏。 | 仍然显示


Now we see a panel which will attach to a node in the shop. Again, it has bounding boxes for text and buttons. This also has a node. It also has more nodes!

The final image is a shop

图像因不支持 HTTPS 被隐藏。 | 仍然显示

After the code stuff was sorted out, workflow was very easy, as nothing but the resource was required to be made, no animations, no skins nothing.

Let me know if you want to know more

I want to know more :-)

Oh, very nice! Thank you.

@BinaryCats How do you deal with different resolutions/densitiies in mobile? It seems this is tailored for a very specific aspect ratio and resolution.

Thanks.

Hi,

We support a large range of resolutions. If you notice the skeleton names in the first image they are: Bottom_Middle_Node and Centre_middle_Node This is the position of the screen where these nodes will be parented to ,in the format Ypos_Xpos_Node (im not sure why I did y,x).

So for example, if you where to have a Spine file under skeleton Bottom_Right_Node, that skeleton would always appear on bottom right, no matter of the resolution.

We also have different ways we can handle nodes, such as stretch to fit screen. I cant quite remember, but I think with Stretch_TO_Fit may grab bones and put them in the corners, and images would be meshes weighted to these bones.

As for scale of the images, we I think we scale up/down the UI elements which are parents of these spine things.