UI::ListView vs Menu

Hey all
I wish to have a list or a menu in my game. An element that is being initialized with clickable objects (images/texts). From some research, I’ve found 2 candidates: UI::ListView and Menu.
Can anyone suggest what is the main difference between them? which is better to use for UI purposes?

Another question is that I wish to have a background image, I noticed UI::ListView can have an image set as a background but it is static in size and cannot be changed (cannot be transformed in Sprite terms). Menu, on the other hand, doesn’t support any background image.
I guess I could create a new class that contains a Sprite as a background and a ListView/Menu for displaying items.

Any advice or suggestion is welcome!
Thanks.

Menu is the ‘older’ limited and simpler UI for game menus. (v2-v3)
ListView is the ‘newer’ and more flexible, yet probably more complex, UI. (v3-v4+)

I’d recommend using only the UI::Widget derived elements (within the same namespace) so that everything is consistent whether you’re building menus or other UI in code. Thus, using UI::ListView


However, if your only UI screens in your game are simple menus, then you could instead use only Menu, MenuItem, MenuItemYYYY, along with Layers and Sprites to layout your UI.

Also, if you’re using a tool to create UI then you may have to consider that specific to each tool or UI editor (such as CocosCreator, the now deprecated but still usable CocosBuilder, Overlap2D, etc), and it may even require using 3rd party code, such as DearImGUI, or rolling your own UI.

Hope that helps.

1 Like

@stevetranby thanks for the clarification on the components. I’ll start wit ListView and see how it goes.

Not sure I got your last point though, I don’t know of any tool to create custom UI for cocos. I thought to create a class that encapsulates a Sprite as a background and a ListView, that way I can refer them both as one element.

It’s probably best to ignore my comments on custom UI and start out messing around creating your own game menus and HUD interfaces directly in code, so you get a tour of the various classes and UI elements and containers.

You may want to check out the programming guide and/or reference docs just to get an idea of possibilities with each class.

ui:::ListView should, for example, have a background property you can mess with. Or you might use ui::Layout as the container view instead of a Sprite because it may work more easily with ui::ListView?

--------------------------------------------------------------

What I mentioned about custom UI is that Cocos2d had a couple tools that are now discontinued, though technically you could still use them. There was CocosStudio for Windows and Cocosbuilder for Mac. There is currently also support for using CocosCreator scenes only for UI (or as a jumping off point into your game), but that is much better to be used when you create your game entirely within CocosCreator.

There are also tools to build UI that export into XML, JSON, et al and then you write your own parser to read in the data/config and create Sprite/Menu or ui::Widgets or whatever … or there’s a small chance a parser exists already, e.g. Tiled for maps, since cocos2d is relatively popular.

Anyway, if you read this far, probably just ignore everything about custom UI tools for now and go make the first few versions of your game’s UI for testing.

1 Like

Docs:
https://docs.cocos.com/cocos2d-x/manual/en/

API Reference:
https://docs.cocos2d-x.org/api-ref/index.html

Though, the documentation around the various ui::Widgets (layout, etc) is not all that great. Maybe consider checking out the cpp_tests project and look at the UI tests for examples.

2 Likes

I did checked the guide and the documentation.
Yes, ListView does have “image as background” option but I couldn’t get the image to stretch to the ListView size. I might give it another shot but otherwise I’m just going to use existing components and create something from that.
Thanks that was very helpful!

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.