How to make background of modal popup darker and non transparent in unity? - unity3d

I have a modal pop up in which I show a list of stories title and a button to open a browser that points the link of the stories, but the pop up is now transparent I want the background to appear darker
Need to modify my modal pop up without a transparent background or make the background color darker, or how can I change the GUI modals opaque or can I set opaque value for this GUI?
please check my modal pop up code here:
using UnityEngine;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
// example:
// HFTDialog.MessageBox("error", "Sorry but you're S.O.L", () => { Application.Quit() });
public class HFTDialog : MonoBehaviour {
Rect m_windowRect;
Action m_action;
string m_title;
string m_msg;
string[] m_myNewsTitleColl;
string[] m_myColl;
GUIStyle labelStyle, labelStyleShadow, buttonStyle, sliderStyle, sliderThumbStyle;
// The position on of the scrolling viewport
public Vector2 scrollPosition = Vector2.zero;
private GUIStyle guiStyle; //create a new variable
static public void MessageBox(string[] myNewsTitleColl, string[] myColl,string title, string msg, Action action)
{
GameObject go = new GameObject("HFTDialog");
HFTDialog dlg = go.AddComponent<HFTDialog>();
dlg.Init(myNewsTitleColl,myColl,title, msg, action);
}
static public void CloseMessageBox(GameObject go)
{
Destroy(go.gameObject);
}
void Init( string[] myNewsTitleColl,string[] myColl,string title, string msg, Action action)
{
m_title = title;
m_msg = msg;
m_action = action;
m_myColl=myColl;
m_myNewsTitleColl=myNewsTitleColl;
}
void OnGUI()
{
const int maxWidth = 640;
const int maxHeight = 480;//480;
int width = Mathf.Min(maxWidth, Screen.width - 20);
int height = Mathf.Min(maxHeight, Screen.height - 20);
m_windowRect = new Rect(
(Screen.width - width) / 2,
(Screen.height - height) / 2,
width,
height);
GUI.color = Color.white;
GUI.backgroundColor = Color.yellow;
m_windowRect = GUI.Window(0, m_windowRect, WindowFunc, m_title);
}
void WindowFunc(int windowID)
{
const int border = 10;
const int width = 50;
const int height = 25;
const int spacing = 10;
guiStyle = new GUIStyle();
//guiStyle.fontSize = 14; //change the font size
guiStyle.fontStyle = FontStyle.Bold;
guiStyle.normal.textColor = Color.white;
int myNewsTitlePositionY=border + spacing;//Initial position
if(m_myNewsTitleColl.Length==0){
Rect l = new Rect(border, myNewsTitlePositionY,m_windowRect.width - border * 2,m_windowRect.height - border * 2 - height - spacing);
GUI.Label(l, "Currently No News Available ,Please try later..",guiStyle);//This is the news title label
}
else{
for(var i = 0; i < m_myNewsTitleColl.Length; i++)
{
var NewsTitle = m_myNewsTitleColl[i];
Rect l = new Rect(border, myNewsTitlePositionY,m_windowRect.width - border * 2,m_windowRect.height - border * 2 - height - spacing);
GUI.Label(l, NewsTitle,guiStyle);//This is the news title label
myNewsTitlePositionY=myNewsTitlePositionY+33;//next y position of the news title label
}
}
int myY=-15;
for(var i = 0; i < m_myColl.Length; i++)
{
var item = m_myColl[i];
// work with link item here to make a button
myY=myY+33; //Y position of button
Rect btn = new Rect(550,myY, width+25, height);
//Rect btn = new Rect(510,myY, width+25, height); //when scroll enable -
if (GUI.Button(btn, "Open Link"))
{
//open browser pointing the url
Application.OpenURL(item);
}
Debug.Log ("from string array value is :"+item);
}
//End Scrollview
// GUI.EndScrollView();
Rect b = new Rect(
m_windowRect.width - width - border,
m_windowRect.height - height - border,
width,
height);
if (GUI.Button(b, "close"))
{
Destroy(this.gameObject);
// m_action();
}
}
}

Related

Unity 2d Camera Scale to Screen Size

I am looking to scale a orthographic camera in unity 2d to screen size.
When you edit your game you orient the camera in a way you want it to be, view all your objects etc.
But then when you maximise it your camera zooms out showing maybe other things you don't want to show
Images for example
Edit Mode View
Maximised
Thank you if you can answer my question
Best Regards
Dawid
Attach the following component to your camera. Make sure to set the target aspect ratio in the inspector (16/9 for example).
using UnityEngine;
[ExecuteAlways]
[RequireComponent(typeof(Camera))]
public class ViewportScaler : MonoBehaviour
{
private Camera _camera;
[Tooltip("Set the target aspect ratio.")]
[SerializeField] private float _targetAspectRatio;
private void Awake()
{
_camera = GetComponent<Camera>();
if (Application.isPlaying)
ScaleViewport();
}
private void Update()
{
#if UNITY_EDITOR
if (_camera)
ScaleViewport();
#endif
}
private void ScaleViewport()
{
// determine the game window's current aspect ratio
var windowaspect = Screen.width / (float) Screen.height;
// current viewport height should be scaled by this amount
var scaleheight = windowaspect / _targetAspectRatio;
// if scaled height is less than current height, add letterbox
if (scaleheight < 1)
{
var rect = _camera.rect;
rect.width = 1;
rect.height = scaleheight;
rect.x = 0;
rect.y = (1 - scaleheight) / 2;
_camera.rect = rect;
}
else // add pillarbox
{
var scalewidth = 1 / scaleheight;
var rect = _camera.rect;
rect.width = scalewidth;
rect.height = 1;
rect.x = (1 - scalewidth) / 2;
rect.y = 0;
_camera.rect = rect;
}
}
}
I'd like to expand on #sean-carey 's very useful answer.
I modified his code in order to add a min and max aspect ratio, so the viewport will be full screen in between those two aspects, and will pillarbox when < min and letterbox when > max
using UnityEngine;
[ExecuteAlways]
[RequireComponent(typeof(Camera))]
public class ViewportController : MonoBehaviour
{
private Camera _camera;
[Tooltip("Set the target aspect ratio.")]
[SerializeField] private float _minAspectRatio;
[SerializeField] private float _maxAspectRatio;
private void Awake()
{
_camera = GetComponent<Camera>();
if (Application.isPlaying)
ScaleViewport();
}
private void Update()
{
#if UNITY_EDITOR
if (_camera)
ScaleViewport();
#endif
}
private void ScaleViewport()
{
// determine the game window's current aspect ratio
var windowaspect = Screen.width / (float) Screen.height;
// current viewport height should be scaled by this amount
var letterboxRatio = windowaspect / _minAspectRatio;
var pillarboxRatio = _maxAspectRatio / windowaspect;
// if max height is less than current height, add letterbox
if (letterboxRatio < 1)
{
SetRect(1, letterboxRatio, 0, (1-letterboxRatio)/2);
}
// if min height is more than current height, add pillarbox
else if (pillarboxRatio < 1)
{
SetRect(pillarboxRatio, 1, (1-pillarboxRatio)/2, 0);
}
// full screen
else
{
SetRect(1, 1, 0, 0);
}
}
private void SetRect(float w, float h, float x, float y)
{
var rect = _camera.rect;
rect.width = w;
rect.height = h;
rect.x = x;
rect.y = y;
_camera.rect = rect;
}
}

How to make a panel with light white border by script (I want to to add my label and button to a panel ) in unity

I want to make a panel by script in unity and add my label and button to the panel
My existing Gui modal popup code is as shown below
using UnityEngine;
using System;
using System.Collections.Generic;
using System.Collections.ObjectModel;
// example:
// HFTDialog.MessageBox("error", "Sorry but you're S.O.L", () => { Application.Quit() });
public class HFTDialog : MonoBehaviour {
Rect m_windowRect;
Action m_action;
string m_title;
string m_msg;
string[] m_myNewsTitleColl;
string[] m_myColl;
GUIStyle labelStyle, labelStyleShadow, buttonStyle, sliderStyle, sliderThumbStyle;
// The position on of the scrolling viewport
public Vector2 scrollPosition = Vector2.zero;
private GUIStyle guiStyle; //create a new variable
static public void MessageBox(string[] myNewsTitleColl, string[] myColl,string title, string msg, Action action)
{
GameObject go = new GameObject("HFTDialog");
HFTDialog dlg = go.AddComponent<HFTDialog>();
dlg.Init(myNewsTitleColl,myColl,title, msg, action);
}
static public void CloseMessageBox(GameObject go)
{
Destroy(go.gameObject);
}
void Init( string[] myNewsTitleColl,string[] myColl,string title, string msg, Action action)
{
m_title = title;
m_msg = msg;
m_action = action;
m_myColl=myColl;
m_myNewsTitleColl=myNewsTitleColl;
}
void OnGUI()
{
const int maxWidth = 640;
const int maxHeight = 480;//480;
int width = Mathf.Min(maxWidth, Screen.width - 20);
int height = Mathf.Min(maxHeight, Screen.height - 20);
m_windowRect = new Rect((Screen.width - width) / 2,(Screen.height - height) / 2,width,height);
GUI.color = Color.white;
GUI.backgroundColor = Color.yellow;
m_windowRect = GUI.Window(0, m_windowRect, WindowFunc, m_title);
}
void WindowFunc(int windowID)
{
const int border = 10;
const int width = 50;
const int height = 25;
const int spacing = 10;
Rect ls = new Rect(
border,
border + spacing,
m_windowRect.width - border * 2,
m_windowRect.height - border * 2 - height - spacing);
//Start Scrollview test
scrollPosition = GUI.BeginScrollView(ls, scrollPosition, new Rect(0, 0, 600, 4800));//Increase the height if more scrolling is needed
guiStyle = new GUIStyle();
guiStyle.fontStyle = FontStyle.Bold;
guiStyle.normal.textColor = Color.white;
int myNewsTitlePositionY=border + spacing;//Initial position
if(m_myNewsTitleColl.Length==0){
Rect l = new Rect(border, myNewsTitlePositionY,m_windowRect.width - border * 2,m_windowRect.height - border * 2 - height - spacing);
GUI.Label(l, "Currently No News Available ,Please try later..",guiStyle);//This is the news title label
}
else{
for(var i = 0; i < m_myNewsTitleColl.Length; i++)
{
var NewsTitle = m_myNewsTitleColl[i];
Rect l = new Rect(border, myNewsTitlePositionY,m_windowRect.width - border * 2,m_windowRect.height - border * 2 - height - spacing);
GUI.Label(l, NewsTitle,guiStyle);//This is the news title label
myNewsTitlePositionY=myNewsTitlePositionY+33;//next y position of the news title label
}
}
int myY=-15;
for(var i = 0; i < m_myColl.Length; i++)
{
var newsItemLink = m_myColl[i];
// work with news link item here to make a button
myY=myY+33; //Y position of button
//Rect btn = new Rect(550,myY, width+25, height);
Rect btn = new Rect(510,myY, width+25, height); //when scroll enable -
if (GUI.Button(btn, "Open Link"))
{
Application.OpenURL(newsItemLink );//open browser pointing the url
}
Debug.Log ("from string array value is :"+newsItemLink );
}
//End Scrollview
GUI.EndScrollView();
//Close button
Rect b = new Rect(
m_windowRect.width - width - border,
m_windowRect.height - height - border,
width,
height);
if (GUI.Button(b, "close"))
{
Destroy(this.gameObject);
// m_action();
}
}
}
Panel must be as shown in the picture (my blue color drawing is assumed as a panel - in which the label and button must be held together):
Also how can I make my modal popup background more darker ,is there a way to make it opaque or can I set opaque value for this Modal GUI?

Unity3D GUI.Label is not displayed

I am currently trying to make "Welcome!" string and a button appear on screen by using the GUI Label and GUILayout Button, but it does not appear and there are not any errors that I know of. Unity emulator is ok, but the "Welcome!" string is not displayed in android.
Here is my code, can someone please tell me my problem and if I might have forgotten to do something.
public class MainMenu : MonoBehaviour
{
public GUISkin Skin;
public Texture btnTexture;
public void Awake() { }
public void OnGUI()
{
if (this.Skin != null)
{
GUI.skin = this.Skin;
}
GUI.skin.button.fontSize = 30;
Rect content = new Rect(30, 100, Screen.width-60, Screen.height-200);
GUILayout.BeginArea(content);
GUILayout.BeginHorizontal();
GUIStyle TextStyle = new GUIStyle(GUI.skin.label);
TextStyle.fontSize = 50;
// Load and set Font
Font myFont = (Font)Resources.Load("font/stingray", typeof(Font));
GUI.skin.font = myFont;
// Set color for selected and unselected
TextStyle.normal.textColor = Color.yellow;
TextStyle.hover.textColor = Color.yellow;
// Display and set the style in string
GUI.Label(new Rect(50,50,300,70), "Welcome!", TextStyle);
GUILayout.EndHorizontal();
GUILayout.BeginHorizontal();
GUILayout.FlexibleSpace();
if (GUILayout.Button("Join", GUILayout.Width(300), GUILayout.Height(80)))
{
SceneManager.LoadSceneAsync("SingleMenu");
}
GUILayout.FlexibleSpace();
GUILayout.EndHorizontal();
GUILayout.EndArea();
}
void Start () { }
void Update () { }
}

Indentation messing up Nested Property Drawers

I have this Class called ToggledFloat. It wraps a float but also adds a bool telling if it is enabled or not.
[System.Serializable]
public class ToggledFloat
{
public float value;
public bool enabled = false;
}
[System.Serializable]
public class ClassWIthNestedProp
{
public ToggledFloat aTogFloat;
}
public class Test : MonoBehaviour
{
public ClassWIthNestedProp eCA;
public ToggledFloat tF;
}
I can easily make a Custom Property Drawer for this, and it looks right, when the editor draws this property at indentation level "0". However when I look at ToggledFloat properties nested inside another property they look wrong.
My propertyDrawer looks like this:
[CustomPropertyDrawer(typeof(ToggledFloat))]
public class ToggledPropertyEditor : PropertyDrawer
{
public override float GetPropertyHeight (SerializedProperty property, GUIContent label)
{
var propVal = property.FindPropertyRelative("value");
float contentUnfoldedHeight = EditorGUI.GetPropertyHeight (propVal, label);
return contentUnfoldedHeight;
}
// Draw the property inside the given rect
public override void OnGUI(Rect position, SerializedProperty property, GUIContent label)
{
int iL = EditorGUI.indentLevel;
//EditorGUI.indentLevel = 0; //- Set this to "0" to make thing work but non-indented
SerializedProperty valueProp = property.FindPropertyRelative("value");
SerializedProperty enabledProp = property.FindPropertyRelative("enabled");
//Label left of checkbox
float labelWidth = GUI.skin.label.CalcSize(label).x;
Rect labelRect = new Rect(0/*position.x*/, position.y, labelWidth, 16);
EditorGUI.LabelField(labelRect, label, GUIContent.none);
EditorGUI.DrawRect(labelRect, new Color(0,0,1,.1f));
//Checkbox
Rect enableRect = new Rect();
enableRect.xMin = labelRect.xMax;
enableRect.yMin = labelRect.yMin;
enableRect.width = 16;
enableRect.height = 16;
EditorGUI.PropertyField(enableRect, enabledProp, GUIContent.none);
EditorGUI.DrawRect(enableRect, new Color(0,1,0,.1f));
//Value
Rect valueRect = new Rect();
valueRect.xMin = enableRect.xMax;
valueRect.yMin = enableRect.yMin;
valueRect.xMax = position.xMax;
valueRect.yMax = position.yMax;
EditorGUI.DrawRect(valueRect, new Color(1,0,0,.1f));
bool enabled = GUI.enabled;
GUI.enabled = enabledProp.boolValue;
EditorGUI.PropertyField(valueRect, valueProp, new GUIContent(""), true);
GUI.enabled = enabled;
EditorGUI.indentLevel = iL;
}
}
When the inspector draws an instance of class Test, it looks like this:
The Colored rects are only there for allowing me to debug where those rects actually are. The weird thing is that the text-labels are offset from the coloured rects, even though they get the same rect as argument. This is of course only a problem if I want coloured rects in my inspector - but the real problem is that it seems that this offset problem causes nested checkboxes to not work. I cannot click checkboxes on a nested property.
If I then explicitly set EditorGUI.IndenLevel = 0, then the coloured rects and the labels coincide and the toggle buttons work properly - but I then loose the automatic indentation, that I would really like to use.
Can someone tell me what I am overlooking
The DrawRect method doesn't consider the indent level. You have to adjust rect yourself to draw indented rectangle. Fortunately, There is a function to get the intented rect.
From UnityCsReference EditorGUI
static void DrawIndentedRect(Rect rect, Color color)
{
EditorGUI.DrawRect(EditorGUI.IndentedRect(rect), color);
}
Captured Inspector IndentedRect
However it doesn't work properly.
From the implementation of IndentedRect, it reduces the width of rect.
static void DrawIndentedRect(Rect rect, Color color)
{
// Indent per level is 15
rect.x += EditorGUI.indentLevel * 15;
EditorGUI.DrawRect(rect, color);
}
or
static void DrawIndentedRect(Rect rect, Color color)
{
var indentedRect = EditorGUI.IndentedRect(rect);
indentedRect.width = rect.width;
EditorGUI.DrawRect(indentedRect, color);
}
Captured Inspector DrawIndentedRect

Take picture from Gallery And Crop that picture in the selected circle portion In Unity 3d?

I am working on a project. I want to take a picture from gallery of android device.
1. How can i take a picture from gallery of android device?
2. How can i Crop the picture selected circle portion in unity3d?
You can use below code for cropping image. I only pass Texture2D and set centre and radius automatically according to texture; but you can pass them manually if you want to.
Texture2D RoundCrop (Texture2D sourceTexture) {
int width = sourceTexture.width;
int height = sourceTexture.height;
float radius = (width < height) ? (width/2f) : (height/2f);
float centerX = width/2f;
float centerY = height/2f;
Vector2 centerVector = new Vector2(centerX, centerY);
// pixels are laid out left to right, bottom to top (i.e. row after row)
Color[] colorArray = sourceTexture.GetPixels(0, 0, width, height);
Color[] croppedColorArray = new Color[width*height];
for (int row = 0; row < height; row++) {
for (int column = 0; column < width; column++) {
int colorIndex = (row * width) + column;
float pointDistance = Vector2.Distance(new Vector2(column, row), centerVector);
if (pointDistance < radius) {
croppedColorArray[colorIndex] = colorArray[colorIndex];
}
else {
croppedColorArray[colorIndex] = Color.clear;
}
}
}
Texture2D croppedTexture = new Texture2D(width, height);
croppedTexture.SetPixels(croppedColorArray);
croppedTexture.Apply();
return croppedTexture;
}