Mobile GUI functionality & performance questions.

Hello, I am designing an app for my senior capstone project, and I am finding myself a little bit at a loss as to what approach I should take for the GUI.

Basically all the app is going to be is a virtual gallery, with like 5 interchangeable 3d models floating in an empty space. The GUI I have is very basic, has a zoom bar, next and back button, our logo in the corner, a pop up info window, and a button to start and stop the object from spinning. We are designing all of our own buttons at this point because we were trying to overcome unity’s OnGUI solution.

My question is, for an app so simple, what would be the best (free) way to develop a reliable interface? I am currently experimenting with sprite sheets, but I am having difficulties getting sprites to work for the GUI, I’ve only had luck animating a plane of sprites.

Or should I just make each GUI element it’s own actual GameObject and just add click/hover events to it?

OR, alternatively, let me know if this is simple enough to just stick with the OnGUI function. Thank you for your help.

So far my only elements are the horizontal slider zoom bar, guitextures and buttons, so I don’t need a terribly diverse or customizable solution. Something clean and effective. I should also mention that I am teach myself Javascript during this project, and would prefer any script ideas in that language.

Thank you for your expert opinions. I can’t tell you how much time i’ve spent browsing this site’s wiki and questions. Very useful. Hope you can help me too.

-Joe

Well, we used a lot of Unity’s gui system in mobile apps. As long as it’s not too complex it should be fine. Just make sure you don’t have unnecessary drawcalls. The main problem with the Unity GUI system is that every GUI element can have 0, 1, 2 or 3 drawcalls.

First thing is the GUIStyle that is used. The GUIStyle can defines a background image which is drawn behind the “content”. The GUIContent that is drawn with the GUIStyle can contain two things: Text and an image. Just provide what you really need.

The usual approach is to simply create a GUISkin and use it by assigning it to GUI.skin as first action in your OnGUI function. You can add custom styles at the end of the GUISkin in the editor. Give each style a unique name and assign your image to the “normal” state.

When you draw your button, just pass GUIContent.none. This will neither draw the content image nor the text. So each GUI element only has one drawcall which is the image from the GUIStyle.

Also just browse some of the GUIStyle properties to learn how a style works. For example the imagePosition property can be used to specify what part of the GUIContent should be drawn and where.

I’ve made an ingame editor with ordinary buttons and each button has 3 drawcalls (background + content image + text). I draw 3 scroll-lists with 20 items each. Well the scroll list can be closed when it’s not needed, but we don’t have much problems with the GUI system. I should add that we build mainly for tablets (Android and iPad), but we always test on phones as well :slight_smile: