- Home /
Creating responsive menu
I've created a game menu using JavaScript and GameOjbect - 3D Text.
The menu is designed for 1080p screens only so its not responsive. All 3D Texts' positions are fixed positions and they get cut away if any screen with resolution less than 1920 X 1080 is used.
What is the best way to solve this problem? (I've done some research and one of the responsive menu build was too complicated...)
Why are you using fixed positions? All other resolutions will have problems with it. You can use Screen for example, or use profiler to see different resolutions how it looks.
Sorry I don't quite understand. Is it possible to use
if(GUI.Button(new Rect(Screen.width-100,20,70,28)
width statement for GameObjects - 3D Text like I used it for the GUI button
Screen is just a class, holding parameters for you. You can use it anywhere in the game, in any way you want. But you should see how your camera handles the positioning in different resolutions.
Answer by robhuhn · Sep 24, 2013 at 10:19 AM
Have a look here:
http://answers.unity3d.com/questions/520583/how-can-i-place-3d-text-to-the-corner-of-the-scree.html
Here is my script which I have attached to a 3D Text:
using UnityEngine;
using System.Collections;
[RequireComponent(typeof(Renderer))]
public class ResponsiveTest: $$anonymous$$onoBehaviour
{
public Vector2 screenPosition = new Vector2(0, 0);
void Update ()
{
Vector3 tempScreenPosition = screenPosition;
tempScreenPosition.z = -Camera.main.transform.position.z;
Vector3 worldPosition = Camera.main.ScreenToWorldPoint(tempScreenPosition);
worldPosition.x -= renderer.bounds.size.x * tempScreenPosition.x / Screen.width;
worldPosition.y += renderer.bounds.size.y * (1 - tempScreenPosition.y / Screen.height);
transform.position = worldPosition;
}
}
And this is my menu button script (JavaScript): #pragma strict //The main menu script
private var ray : Ray;
private var hit : RaycastHit;
function Update()
{
if(Input.Get$$anonymous$$ouseButton(0))
{
ray = Camera.main.ScreenPointToRay(Input.mousePosition);
if(Physics.Raycast(ray, hit))
{
if(hit.transform.name == "Text(Play)")
{
Application.LoadLevel("Landing");
}
}
}
}
//Colour change
function On$$anonymous$$ouseEnter()
{
renderer.material.color = Color.green;
}
function On$$anonymous$$ouseExit()
{
renderer.material.color = Color.white;
}
Now my 3D Text is responsive but button control stopped working... What is wrong?
The first script shouldn't block the second script. Do you still have a collider attached?
Yes the collier is still attached... I'm not quite sure why its not working. Also would you be able to explain in detail what each statement does. Trying to understand it but not quite get it...
Yes, the calculations prevent only the need to change the anchor of the text mesh (the anchor should be always in the upper left here).
Get the world position:
Vector3 worldPosition = Camera.main.ScreenToWorldPoint(tempScreenPosition);
Calculate the position/screen ratio
//returns a float 0 to 1 where 0 is left and 1 is right
tempScreenPosition.x / Screen.width
$$anonymous$$ultiply that by the meshs width to get the desired offset
//gives 0 offset on the left (we need no offset because the anchor is also left)
//and the meshs width on the right.
renderer.bounds.size.x * ratio
Finally subtract this value
worldPosition.x -= offset
So the more the mesh moves to the right the higher the offset in relation to the mesh.width/screen.width-ratio to compensate the meshs anchor position.
If you don't $$anonymous$$d recreating your menu, then you should possibly look at the all new Unity 4.6 UI system. it's simple and powerful. Anchors is the word you should be looking for. Place the anchors of the UI element to the corners. That's it, the UI element is responsive. Check the below link for more info
Your answer
Follow this Question
Related Questions
2D Game. Screen, Camera and coordinates. 0 Answers
Reading Screen Dimension in Android Immersive Mode 1 Answer
Asset Variations for Different Mobile Screen Sizes 1 Answer
Max Resolution? Targeting 4320x5400 px... 1 Answer
Auto scaling GUI 3 Answers