• Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
  • Asset Store
  • Get Unity

UNITY ACCOUNT

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account
  • Blog
  • Forums
  • Answers
  • Evangelists
  • User Groups
  • Beta Program
  • Advisory Panel

Navigation

  • Home
  • Products
  • Solutions
  • Made with Unity
  • Learning
  • Support & Services
  • Community
    • Blog
    • Forums
    • Answers
    • Evangelists
    • User Groups
    • Beta Program
    • Advisory Panel

Unity account

You need a Unity Account to shop in the Online and Asset Stores, participate in the Unity Community and manage your license portfolio. Login Create account

Language

  • Chinese
  • Spanish
  • Japanese
  • Korean
  • Portuguese
  • Ask a question
  • Spaces
    • Default
    • Help Room
    • META
    • Moderators
    • Topics
    • Questions
    • Users
    • Badges
  • Home /
avatar image
1
Question by justinpatterson · Jul 15, 2013 at 08:00 PM · guimenuinterfacesimulate

How to make a menu that looks like a smartphone/tablet?

Hey everyone,

I was trying to figure out the best way to go about making a smartphone-like interface for the in-game menu of a game I'm making. In other words, when you pause the player pulls up a smartphone to click around. The concept is similar -- but implementation will be different since mine will be inside of an encyclopedia-like app -- to Silent Hill Shattered Memories' menu system.

I assume the two directions I could go are (1) some kind of GUITexture implementation or (2) having a series of surface textures swapping in and out on a model of a tablet/smartphone.

The functionality and user experience of this smartphone-like interface would be similar to the "Quick Guide" area of the Audobon Bird application. The player can click on a general topic accompanied by an image, get a list of items related to that topic, and then click on an item to view more text-based information on it.

My general plan for the textual data would be to store it in an XML file or something somewhere, but I'd also be curious to see what y'all think about how to handle that as well.

My other option (in theory) could be to create an actual website and then figure out how to make a browser window type thing in-game (I think I saw a post about that somewhere).

Comment
Add comment
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

2 Replies

· Add your reply
  • Sort: 
avatar image
1
Best Answer

Answer by Professor Snake · Jul 16, 2013 at 12:55 AM

I was actually in the process of doing the exact same thing. I ended up using a camera, rendering it to a texture, assigning the texture on a cube and then calling Graphics.DrawTexture in OnPostRender() on that camera to draw the individual elements. It's a solution that is very similar to the built-in GUI in terms of programming, so you won't have to modify your existing code all that much. Then i raycasted at the mouse position, checked if it hit that cube and used the distance from the center of the cube to turn the world coordinates into pixel coordinates. For the rest, you'd have to program your own UI system that works with an XML parser.

Converting world coordinates to render texture coordinates, and checking whether they fit in a rect:

 function CheckRect(myRect:Rect):boolean{
 var ray=mainCam.camera.ScreenPointToRay(Input.mousePosition);
 var screenPos:Vector2;
 if(Physics.Raycast(shoeRay,hit,2f,layerMaskfaf)){
 padPointer.transform.position=hit.point; //The render texture was 2048x1024
 screenPos.x=2048*((-tabletScreen.transform.localScale.x/2)-(tabletScreen.transform.localPosition.x-padPointer.transform.localPosition.x))/-tabletScreen.transform.localScale.x;
 screenPos.y=1024*((tabletScreen.transform.localScale.y/2f)+(tabletScreen.transform.localPosition.y-padPointer.transform.localPosition.y))/tabletScreen.transform.localScale.y;
 
 //Debug.Log(screenPos);
 }
 else
 return false;
 if(myRect.Contains(screenPos))
 return true;
 return false;
 }

Drawing a texture on the tablet camera's screen space:

 function OnPostRender(){
 GL.PushMatrix();
 GL.LoadPixelMatrix();
 Graphics.DrawTexture(Rect(0,0,2048,1024),myTex,0,0,0,0,null);
 //Draw more things based on what you read from the .xml
 GL.PopMatrix();
 }

As for the rest, you can read data from an .xml parser and just parse them as screen coordinates and textures. A basic button function for example would do that, as well as checking whether the player is hovering over it with CheckRect and is clicking.

Remember, all of the pixel coordinates will actually be coordinates that correspond to the resolution of the rendertexture. Not your monitor's resolution.

Here's a screenshot of the result it produces: alt text

Comment
Add comment · Show 2 · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users
avatar image Professor Snake · Jul 16, 2013 at 01:01 AM 0
Share

I think the entire subject is too expansive to properly answer here, if you also want to cover parsing and extensive UI programming. If you need any specific help with either of these, leave a comment or contact me on S$$anonymous$$m. S$$anonymous$$m

avatar image justinpatterson · Jul 16, 2013 at 02:44 PM 0
Share

Thanks so much! I sent you an invite on s$$anonymous$$m. This answer covers a lot of ground; I'll look into some other portions of imitation UI on a physical items and update this with some findings.

avatar image
0

Answer by TonyLi · Jul 16, 2013 at 12:56 AM

If you have Unity Pro, you can render to texture like Professor Snake suggested.

If not, the easiest solution (but not free) would be to use NGUI or EZ GUI, which both support 3D GUIs natively. One of the basic example scenes does something similar with a 3D window that you can navigate through. You can try it out for free to decide if you want to buy it.

If there's not a lot of text, you could build it straight into the GUI hierarchy.

If it's a lot of text, I agree with you that some external format like XML would be easier to manage -- well, something that exports to XML at least. To me, XML isn't fun to directly edit. Maybe something like The Spaghetti Machine if you have it. It's a bit pricey, though, so a non-Unity editor might be better if you don't already own it.

Comment
Add comment · Share
10 |3000 characters needed characters left characters exceeded
▼
  • Viewable by all users
  • Viewable by moderators
  • Viewable by moderators and the original poster
  • Advanced visibility
Viewable by all users

Your answer

Hint: You can notify a user about this post by typing @username

Up to 2 attachments (including images) can be used with a maximum of 524.3 kB each and 1.0 MB total.

Welcome to Unity Answers

The best place to ask and answer questions about development with Unity.

To help users navigate the site we have posted a site navigation guide.

If you are a new user to Unity Answers, check out our FAQ for more information.

Make sure to check out our Knowledge Base for commonly asked Unity questions.

If you are a moderator, see our Moderator Guidelines page.

We are making improvements to UA, see the list of changes.



Follow this Question

Answers Answers and Comments

17 People are following this question.

avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image avatar image

Related Questions

Gui Login With Interface 1 Answer

Simple Menu(understanding GUI) 2 Answers

Simple menu 1 Answer

Game Menus WIth Keyboard Input Control 1 Answer

How to group variables in the Inspector? 5 Answers

  • Anonymous
  • Sign in
  • Create
  • Ask a question
  • Spaces
  • Default
  • Help Room
  • META
  • Moderators
  • Explore
  • Topics
  • Questions
  • Users
  • Badges