- Home /
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).
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:
I think the entire subject is too expansive to properly answer here, if you also want to cover parsing and extensive UI program$$anonymous$$g. If you need any specific help with either of these, leave a comment or contact me on S$$anonymous$$m. S$$anonymous$$m
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.
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.
Your answer
Follow this Question
Related Questions
Gui Login With Interface 1 Answer
Simple Menu(understanding GUI) 2 Answers
Simple menu 1 Answer
I have been struggling with a GUI texture for over a week now. What am I doing wrong? 1 Answer
GUI not work after building 1 Answer