Clash Royale style menu

Questions
#1

Hey guys. If anyone here is familiar with Clash Royale, I am looking to recreate the basic menus/landing page setup that is in place. It is super sleek, responsive, and has a simple yet effective layout.

GUI elements in Defold seem to be used in situations where the placement of items remains static on the screen, which some of the elements of the pages in Clash Royale do, but you can also scroll and page through the 5 different pages from the main menu, as well as have a tabular layout within each page.

If I wanted to recreate that same style, would I just use the GUI elements for things that remain static, with sprites and such representing the other information on screen? Or are there ways (and benefits) to keeping them all as GUI objects.

I am hoping that Clash Royale is popular enough that some Defold users have played it before and know what it is I am trying to recreate. If not, I can try to find an appropriate video to demonstrate.

As an aside, does the GUI system have any inherent advantages when loading sprites and other objects as collections/lists like a typical Android/iOS native control would? Like lazy loading and object culling, etc? This is my primary concern when building this specific type of UI since I have seen other games really struggle to remain responsive with large collections similar to Clash Royale (a good example is PvZ Heroes for mobile).

#2

Defold’s GUI nodes don’t have many restrictions. They can be moved around and animated just like sprites. You can even have Spine animations and particles in your GUI. The main advantage of GUIs over Game Objects is that they are set up to adapt to different screen proportions and mobile device orientations, by default they’re rendered on top of everything else and in screen-space (ignoring camera movement), and they have an easy collision check function to see which node you tapped on, etc.

There are a couple good UI libraries on the community asset portal that do some of the lower-level grunt work for you.

I don’t know much about mobile performance or dynamic loading, so I’ll leave that for other people to answer.

4 Likes
#3

Haven’t had no problem with mobile performance on the titles I’ve created so far. The one now with pretty complex UI. There is no object culling but as you are creating your own scrolling lists and other component you are very free to add such culling yourself. Right now I have created both a prepopulated scroll list (that is static and is just a node moved back and forth) and one data populated that creates/deletes nodes on the fly reading from a table.

4 Likes
#4

That is reassuring to know. I try not to get bogged down with best practices right away, but I find dynamic lists on mobile in many apps (even big name companies) often have issues with performance. I did see an issue on the todo list for Defold that has mentioned adding in lazy loading. I think I will create my UI with a combination of GUI elements and normal ol’ collections used in level making since I believe it makes the most sense in what I am trying to recreate. Thanks for the replies :slight_smile:

1 Like
#7

Then check out Gooey! :wink: It provides many useful features for GUI and you have there both horizontal and vertical dynamic lists - that should be easy enough to adjust to your needs (for example I think it could be possible to modify Gooey to your needs and include vertical list as an element in horizontal list)