I just wanted to ask what is the proper way to create and display a view on Unity. I'm just a beginner on this and just watched recently tutorials on how to script and learned about creating GUI on the fly which includes buttons, edit text boxes and other view but not sure on how should I really implement it the way it is optimized and won't affect the applications performance. What I tried so far is to create an editText wherein I set it on the MainCamera for display which is I targeted to be reusable so that in case I need to add more editText on the app I can just drag and drop the script. Here's the code so far:
using UnityEngine;
using System.Collections;
public class EditText : MonoBehaviour {
public int width = 150;
public int height = 25;
public int x_position = 0;
public int y_position = 0;
public string text = "Hello World";
public Position position = Position.unset;
public int text_size = 15;
public enum Position{unset,center_screen, center_vertical, center_horizontal};
void OnGUI () {
setPosition ();
GUI.skin.textArea.fontSize = text_size;
GUI.color = Color.red;
}
private void setPosition(){
switch (position) {
case Position.center_screen:
GUI.TextArea (new Rect (Screen.width/2 - width/2, Screen.height/2 - height/2, width, height), text);
GUI.backgroundColor = Color.white;
break;
case Position.center_vertical:
GUI.TextArea (new Rect (x_position, Screen.height/2 - height/2, width, height), text);
GUI.backgroundColor = Color.white;
break;
case Position.center_horizontal:
GUI.TextArea (new Rect (Screen.width/2 - width/2, y_position, width, height), text);
GUI.backgroundColor = Color.white;
break;
default:
GUI.TextArea (new Rect (x_position, y_position, width, height), text);
GUI.backgroundColor = Color.white;
break;
}
}
}
Question is am I doing this right or should I stop and use other implementation? Since I really intended it to be as reusable just like the Android Views. Also if there is any other library or scripts I can use to achieve this so that I'm not reinventing the wheel for this?
On the side note I also searched the NGUI although I'm not that sure on if this will fit my needs or not. Since when I tried creating a UILabel the component has only few options where I am not really sure on how I supposed to use it.
Question: Am I doing this right or should I stop and use other implementation?
It depends. Your implementation is simple but working. If you need more fancy UI, you might consider:
NGUI
NoesisGUI
Unity 4.6+ or Unity 5
According to Unity official blog, the "new GUI system is getting really close and it’ll be included in Unity 4.6, which will also be the last major update in the Unity 4 cycle".
I would prefer the last one, Unity 4.6 or Unity 5, as it is free and official from Unity, and the support and community are the big asset for you!
For your current implementation, I think you can make it even better, without using:
GUI.TextArea (new Rect (...)); // Not the best way
Instead try using:
GUILayout.BeginHorizontal ();
{
GUILayout.FlexibleSpace ();
//label etc., this guarantees centered in your UI and resolution independent.
GUILayout.XXX (...);
GUILayout.FlexibleSpace ();
}
GUILayout.EndHorizontal ();
Interesting links:
http://docs.unity3d.com/ScriptReference/GUILayout.html
GUI Layout tutorial
Unity's GUI system is far from perfect, but it's being improved incrementally. It's a good solution for interfaces with few simple elements. When using Unity's GUI system, i've generally set up each menu or 'display' separately. I never designed the UI elements in a modular fashion in the Unity system. I've not been in a situation where setting the 'Rect' of an element hasn't met my needs of manipulation. I can't say much about the performance of Unity's GUI system apart from that i've never noticed it's impact.
NGUI, like Unity is designed to be modular. To create the ui element that you desire might require you to piece together various scripts. For example an input field would require UILabel, UIInput script and a BoxCollider. Using all the scripts included in NGUI i've been able to create some pretty impressive interface prefabs. Being able to structure my interface visually in the scene view has been helpful as well.
These are the two UI systems i've used and have found uses for both.
Related
I just want to be able to see some text rendered in the world.
The only example code that I've found is this:
GameObject Text = new GameObject();
TextMesh textMesh = Text.AddComponent<TextMesh>();
textMesh.font = new Font();
mat.SetColor("_Color", Color.black);
mat.SetPass(0);
meshRenderer.material = mat;
textMesh.text = "Hello World!";
Where mat is defined by the code:
Shader shader = Shader.Find("Hidden/Internal-Colored");
mat = new Material(shader);
mat.hideFlags = HideFlags.HideAndDontSave;
mat.SetInt("_Cull", (int)UnityEngine.Rendering.CullMode.Off);
mat.SetInt("_ZWrite", 0);
mat.SetColor("_Color", Color.blue);
mat.SetPass(0);
This code is added to the Start of MonoBevaviour. And the script is tied to Game Main camera.
No text appears anywhere that I can see.
Ah I think I might have something.
I am not sure though if this works for VR devices - I know that Unity e.g. doesn't render Screenspace overlay canvas on XR.
But back to the point: There is a legacy UI system which is usually not used anymore except for in editor Inspector scripting IMGUI
I think it might actually fit your very special need using GUILayout.Label you should be able to draw a flat label onto the screen even in VR.
With GUI.Label you have full control over the pixel coordinates and size.
public class YourTextDrawer : MonoBehaviour
{
void OnGUI()
{
var color = GUI.color;
GUI.color = Color.green;
var textPosition = new Rect(Screen.width / 2 - 150, Screen.height / 2 - 100, 300, 200);
GUI.Label(textPosition, "Hello World!");
GUI.color = color;
}
}
Not tested, just scrabbling this down from memory right now
And actually thinking about it, this might even work for your image as well
Even the official documentation has borderline insane recommendations to solve what is probably one of the most common UI/3D interaction issues:
If I click while the cursor is over a UI button, both the button (via the graphics raycaster) and the 3D world (via the physics raycaster) will receive the event.
The official manual:
https://docs.unity3d.com/Packages/com.unity.inputsystem#1.2/manual/UISupport.html#handling-ambiguities-for-pointer-type-input essentially says "how about you design your game so you don't need 3D and UI at the same time?".
I cannot believe this is not a solved problem. But everything I've tried failed. EventSystem.current.currentSelectedGameObject is sticky, not hover. PointerData is protected and thus not accessible (and one guy offered a workaround via deriving your own class from Standalone Input Module to get around that, but that workaround apparently doesn't work anymore). The old IsPointerOverGameObject throws a warning if you query it in the callback and is always true if you query it in Update().
That's all just mental. Please someone tell me there's a simple, obvious solution to this common, trivial problem that I'm just missing. The graphics raycaster certainly stores somewhere if it's over a UI element, right? Please?
I've looked into this a fair bit and in the end, the easiest solution seems to be to do what the manual says and put it in the Update function.
bool pointerOverUI = false;
void Update()
{
pointerOverUI = EventSystem.current.IsPointerOverGameObject();
}
Your frustration is well founded: there are NO examples of making UI work with NewInput which I've found. I can share a more robust version of the Raycaster workaround, from Youtube:
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.InputSystem;
using UnityEngine.UI;
/* Danndx 2021 (youtube.com/danndx)
From video: youtu.be/7h1cnGggY2M
thanks - delete me! :) */
public class SCR_UiInteraction : MonoBehaviour
{
public GameObject ui_canvas;
GraphicRaycaster ui_raycaster;
PointerEventData click_data;
List<RaycastResult> click_results;
void Start()
{
ui_raycaster = ui_canvas.GetComponent<GraphicRaycaster>();
click_data = new PointerEventData(EventSystem.current);
click_results = new List<RaycastResult>();
}
void Update()
{
// use isPressed if you wish to ray cast every frame:
//if(Mouse.current.leftButton.isPressed)
// use wasReleasedThisFrame if you wish to ray cast just once per click:
if(Mouse.current.leftButton.wasReleasedThisFrame)
{
GetUiElementsClicked();
}
}
void GetUiElementsClicked()
{
/** Get all the UI elements clicked, using the current mouse position and raycasting. **/
click_data.position = Mouse.current.position.ReadValue();
click_results.Clear();
ui_raycaster.Raycast(click_data, click_results);
foreach(RaycastResult result in click_results)
{
GameObject ui_element = result.gameObject;
Debug.Log(ui_element.name);
}
}
}
So, just drop into my "Menusscript.cs"?
But as a pattern, this is terrible for separating UI concerns. I'm currently rewiring EVERY separately-concerned PointerEventData click I had already working, and my question is, Why? I can't even find how it's supposed to work: to your point there IS no official guide at all around clicking UI, and it does NOT just drop-on-top.
Anyway, I haven't found anything yet which makes new input work easily on UI, and definitely not found how I'm going to sensibly separate Menuclicks from Activityclicks while keeping game & ui assemblies separate.
Good luck to us all.
Unity documentation for this issue with regard to Unity.InputSystem can be found at https://docs.unity3d.com/Packages/com.unity.inputsystem#1.3/manual/UISupport.html#handling-ambiguities-for-pointer-type-input.
IsPointerOverGameObject() can always return true if the extent of your canvas covers the camera's entire field of view.
For clarity, here is the solution which I found worked best (accumulated from several other posts across the web).
Attach this script to your UI Canvas object:
public class CanvasHitDetector : MonoBehaviour {
private GraphicRaycaster _graphicRaycaster;
private void Start()
{
// This instance is needed to compare between UI interactions and
// game interactions with the mouse.
_graphicRaycaster = GetComponent<GraphicRaycaster>();
}
public bool IsPointerOverUI()
{
// Obtain the current mouse position.
var mousePosition = Mouse.current.position.ReadValue();
// Create a pointer event data structure with the current mouse position.
var pointerEventData = new PointerEventData(EventSystem.current);
pointerEventData.position = mousePosition;
// Use the GraphicRaycaster instance to determine how many UI items
// the pointer event hits. If this value is greater-than zero, skip
// further processing.
var results = new List<RaycastResult>();
_graphicRaycaster.Raycast(pointerEventData, results);
return results.Count > 0;
}
}
In class containing the method which is handling the mouse clicks, obtain the reference to the Canvas UI either using GameObject.Find() or a public exposed variable, and call IsPointerOverUI() to filter clicks when over UI.
Reply to #Milad Qasemi's answer
From the docs you have attached in your answer, I have tried the following to check if the user clicked on a UI element or not.
// gets called in the Update method
if(Input.GetMouseButton(0) {
int layerMask = 1 << 5;
// raycast in the UI layer
RaycastHit2D hit = Physics2D.Raycast(Camera.main.ScreenToWorldPoint(Input.mousePosition), Vector2.zero, Mathf.Infinity, layerMask);
// if the ray hit any UI element, return
// don't handle player movement
if (hit.collider) { return; }
Debug.Log("Touched not on UI");
playerController.HandlePlayerMovement(x);
}
The raycast doesn't seem to detect collisions on UI elements. Below is a picture of the Graphics Raycaster component of the Canvas:
Reply to #Lowelltech
Your solution worked for me except that instead of Mouse I used Touchscreen
// Obtain the current touch position.
var pointerPosition = Touchscreen.current.position.ReadValue();
An InputSytem is a way to receive new inputs provided by Unity. You can't use existing scripts there, and you'll run into problems like the original questioner. Answers with code like "if(Input.GetMouseButton(0)" are invalid because they use the old system.
I'm trying to set the background color of a GUI.Box:
void OnGUI()
{
string LatLong;
LatLong = map.calc.prettyCurrentLatLon;
var mousePosition = Input.mousePosition;
float x = mousePosition.x + 10;
float y = Screen.height - mousePosition.y + 10;
GUI.backgroundColor = Color.red;
GUI.Box(new Rect(x, y, 200, 200), LatLong);
}
However, the box is showing in a semi-transparent black, and the white text is subdued, not opaque white.
You have to use s gui style:
private GUIStyle currentStyle = null;
void OnGUI()
{
InitStyles();
GUI.Box( new Rect( 0, 0, 100, 100 ), "Hello", currentStyle );
}
private void InitStyles()
{
if( currentStyle == null )
{
currentStyle = new GUIStyle( GUI.skin.box );
currentStyle.normal.background = MakeTex( 2, 2, new Color( 0f, 1f, 0f, 0.5f ) );
}
}
private Texture2D MakeTex( int width, int height, Color col )
{
Color[] pix = new Color[width * height];
for( int i = 0; i < pix.Length; ++i )
{
pix[ i ] = col;
}
Texture2D result = new Texture2D( width, height );
result.SetPixels( pix );
result.Apply();
return result;
}
Taken from unity forum.
I'm gonna slide in with a more elegant solution here before this question gets old. I saw Thomas's answer and started to wonder if there is a way to do that without having to do the "InitStyles" in the OnGUI loop. Since ideally you only want to init the GuiSkin once in Awake or Start or wherever, but only once, and then never check to see if it's null ever again.
Anyway, after some trial and error, I came up with this.
private void Awake() {
// this variable is stored in the class
// 1 pixel image, only 1 color to set
consoleBackground = new Texture2D(1, 1, TextureFormat.RGBAFloat, false);
consoleBackground.SetPixel(0, 0, new Color(1, 1, 1, 0.25f));
consoleBackground.Apply(); // not sure if this is necessary
// basically just create a copy of the "none style"
// and then change the properties as desired
debugStyle = new GUIStyle(GUIStyle.none);
debugStyle.fontSize = 24;
debugStyle.normal.textColor = Color.white;
debugStyle.normal.background = consoleBackground;
}
REVISION - 17 July 2022 - GUI Style Creation and Storage
Prelude
Style creation through the methods provided by others are certainly functional methods of providing your custom editors with a unique look. They have some fundamental issues I should point out, which my method doesn't outright correct, just alleviate. This method still needs to be expanded upon and is still a partly experimental progression from a personal plugin.
Creating styles every OnGUI Call creates unnecessary, extra instructions for your editor window. This doesn't scale well past a handful (4~) styles.
By creating styles every time OnGUI is called, you're creating textures repeatedly for the background colour (not good). Over prolonged use of this method, memory leaks can occur although unlikely.
What does my method do differently?
Creates GUIStyle and Texture2D files. GUIStyles are saved as .JSON files, which is best compatible for [JSON <-> GUIStyle] conversion and storage.
Texture2Ds are encoded from raw data to PNG format through UnityEngine.
Checks if a style file is null before fetching or creating any missing styles again.
Contains a list of all styles through the use of a Style Manifest (struct) to store the names of all textures and styles to iteratively load on fetch.
Only creates styles if they are missing. Does not spend resources on creating pre-existing styles and pre-existing styles.
GUIStyles (as JSONs) and Texture2D files are stored in a Resources folder within the Plugin folder.
It should be noted that my style methods are done with the express understanding and consideration of GUISkins existing. They are not suitable for my UI/UX needs.
How is this done?
Plugin Style Handing Diagram
I separate Style Loading into a unique namespace for style handling and contain functions, as well as public variables for global plugin access, within. This namespace creates, loads and can send back styles on the requests sent by other scripts.
A call to a function is made when the plugin is opened to load the style manifest and subsequently all styles and textures are loaded, to be relinked for use.
If the styles manifest is missing then it is recreated along with all GUIStyle files. If the styles manifest is not missing but a style is then that style is recreated and the style manifest is modified to reference the new style.
Textures are handled separately from GUIStyle loading and are collected in a separate array. They are independently checked to see if they still exist and missing textures are recreated and encoded from raw data to PNG format, with the style manifest being modified when necessary.
Instead of repeatedly creating all styles or repeatedly loading them each frame, the plugin sends a request to fetch the first style from memory and checks if the result is null. If the first style returns as null then the plugin assumes all styles have been dereferenced and calls a reload or recreation of the relevant GUIStyle files (this can happen because of the engine entering/exiting play mode and is necessary to preserve UI/UX legibility).
If the style returns as a valid reference, plugins of mine do use it but this is risky. It's a good idea to also check at least one texture because textures are at risk of being dereferenced from the Texture2D array.
Once each check is done, the plugin renders the layout as normal and the next cycle begins. Using this method overall requires extra processing time and extra storage space for the plugin but in turn:
Quicker over a longer period of time due to styles being created or loaded only when necessary
Easier to modify themes for plugins, allowing individuals to customize the tools to their preferred theme. This can also be expanded on custom "theme packs" for a plugin.
Scalable for large amounts of styles to an extent.
This method still requires experience in GUI Styles, Data Saving, JSON Utilisation and C#.
I want to display UI logo images in their aspect ratio but in proper size that fit within its container. Already all logo images as per aspect ratio but few are too big or small compare to requirements.
At present this kind of thing happening:
Here is the code that I am using:
private void ShowGamePlayLogoViewed ()
{
for (int i = 0; i < DataCollection.companyDetailsList.Count; i++) {
Company company = DataCollection.companyDetailsList [i];
if (company.ViewedCounter > 0) {
GameObject companyItemObj = Instantiate (companyItemPref, gridViewContainer) as GameObject;
CompanyItem companyItem = companyItemObj.GetComponent<CompanyItem> ();
companyItem.companyId = company.CompanyId;
companyItem.UpdateCompanyLogo (company.CompanyLogo);
companyItem.UpdateCompanyName (company.CompanyName);
}
}
}
public void UpdateCompanyLogo (Sprite logoSprite)
{
logoImage.sprite = logoSprite;
logoImage.SetNativeSize ();
}
As you are seeing, logos overlapping the container. I want to display properly them in their respective containers also in aspect ratio too.
Let me clarify one more thing: all logos loaded from web server and they all are dynamic at a time, based on server data it will appear in mobile screen.
I have found solution through Unity Forum and I want to say thanks to #Hosnkobf for reply.
Here is the exact reply that worked for me properly:
adjust the image game object inside unity so that it has the height you are looking for. also adjust the anchors so that it scales with different resolutions properly.
Add an "AspectRatioFitter" component to the object. Make it "Height controls width".
Instead of logoImage.SetNativeSize (); do the following:
float aspectRatio = logoSprite.rect.width / logoSprite.rect.height;
var fitter = logoImage.GetComponent<UnityEngine.UI.AspectRatioFitter>();
fitter.aspectRatio = aspectRatio;
I hope this become useful to other members :)
I come from the flash world and new to Unity and struggling with backgrounds in 2D for mobile. That is, struggling with understanding how to create a parallax background that will fit on all mobile devices. Actually doesn't even have to be parallax. I've read several post on the issue and tried several things but none of them work for me.
I've tried scripts that change the camera size, that scale the images etc. Outcome is never good as one scales the images and they don't look right and the other methods don't display critical parts of the background.
What have I missed with 2D backgrounds and how can I address it?
Thank-you
As you are new to Unity explaining each and everything may take brief answer.
Have a look on this script it will help you if it doesn't comment and ask.
Code :
using UnityEngine;
using System.Collections;
public class Done_BGScroller : MonoBehaviour
{
public float scrollSpeed;
public float tileSizeZ;
private Vector3 startPosition;
void Start ()
{
startPosition = transform.position;
}
void Update ()
{
float newPosition = Mathf.Repeat(Time.time * scrollSpeed, tileSizeZ);
transform.position = startPosition + Vector3.forward * newPosition;
}
}