Wednesday, December 10, 2014

Unity 4.6 UI Touch and Mouse Input Tutorial


This Unity touch tutorial for Unity 4.6+ will show you how to call custom functions on any object in your scene when you touch or click on UI elements. This is perfect for menus, on-screen touch controls, and anything else that you want to happen when you touch/click on UI buttons.

Time Breakdown:
0:45 - I'm planning on redoing some of my old TouchLogic videos to work with the 4.6 UI
1:04 - How to create a GUITexture in Unity 4.6 (if you still need to use that old system)
1:45 - Creating a 4.6 GUI Button, explaining what the various gameobjects do
2:29 - Click / touching the button with the Unity remote... multitouch is limited on the Unity Remote
3:18 - Multitouch does work if you build the game and play it on your mobile device
3:50 - OnClick and the Event System
4:30 - Creating a custom script to call OnClick
5:53 - Image class is found in the UnityEngine.UI namespace
7:40 - Demonstration of calling our custom function OnClick
8:20 - Adding an EventTrigger component for more event types
9:55 - Demonstration of multitouch on an Android build
10:52 - Outro, thanks for watching :D

Monday, December 1, 2014

Unity 4.6 UI Tutorial - Scale UI to the right size for every resolution using anchors



This Unity tutorial will show you how to properly set up your Images for scaling, tiling, and positioning in your Unity 4.6 UI
See here for how to do this for the old GUITextures: https://www.youtube.com/watch?v=hzvQnYkS9O4
And here for how to do this for the old GUIText: https://www.youtube.com/watch?v=_9mOh7_xX2o

Google+ Community: https://plus.google.com/communities/108584850180626452949
Twitter: https://twitter.com/Devination3D
Facebook: https://www.facebook.com/unity3Dtutorialsbydevin

Time Breakdown:
0:45 - Make sure your images are imported as sprites
1:15 - Introduction to anchors
3:00 - Setting up our sprite for 9-slice scaling and tiling for the Image Type
6:00 - Customize your anchors to avoid strange scaling issues
6:50 - Preserve Aspect of the image
7:35 - Setting up Text to scale and be positioned correctly
10:20 - Thanks for watching!

Saturday, November 8, 2014

Unity GUI Tutorial - Scale GUIText to the right size for every resolution

A while ago I did a video on how to do this for GUITextures, both that video and this one can be found on this page: http://www.devination.com/2014/01/unity-gui-tutorial-scale-gui-to-right.html

Check out the code below the videos
GUIText




This Unity Tutorial will show you how to make your GUI automatically scale to the right size for every screen resolution and aspect ratio.

Google+ Community: https://plus.google.com/communities/108584850180626452949
Twitter: https://twitter.com/Devination3D
Facebook: https://www.facebook.com/unity3Dtutorialsbydevin

Support Further Tutorial Development
Comments?
Check out the videos above to hear the explanation and see the code in action
/*/
* Script by Devin Curry
* www.Devination.com
* www.youtube.com/user/curryboy001
* Please like and subscribe if you found my tutorials helpful :D
* Google+ Community: https://plus.google.com/communities/108584850180626452949
* Twitter: https://twitter.com/Devination3D
* Facebook Page: https://www.facebook.com/unity3Dtutorialsbydevin
*
* Attach this script to a GUITexture or GUIText to fix its scale to the aspect ratio of the current screen
* Change the values of scaleOnRatio1 (units are in % of screenspace if the screen were square, 0f = 0%, 1f = 100%) to change the desired ratio of the GUI
* The ratio is width-based so scaleOnRatio1.x will stay the same, scaleOnRatio1.y will based on the screen ratio
*
* The most common aspect ratio for COMPUTERS is 16:9 followed by 16:10
* Possible aspect ratios for MOBILE are:
* 4:3
* 3:2
* 16:10
* 5:3
* 16:9
/*/
using UnityEngine;
using System.Collections;

public class GUIAspectRatioScale : MonoBehaviour 
{
 public Vector2 scaleOnRatio1 = new Vector2(0.1f, 0.1f);
 private Transform myTrans;
 private float widthHeightRatio;

 void Start () 
 {
  myTrans = transform;
  SetScale();
 }
 //call on an event that tells if the aspect ratio changed
 void SetScale()
 {
  //find the aspect ratio
  widthHeightRatio = (float)Screen.width/Screen.height;
  
  //Apply the scale. We only calculate y since our aspect ratio is x (width) authoritative: width/height (x/y)
  myTrans.localScale = new Vector3 (scaleOnRatio1.x, widthHeightRatio * scaleOnRatio1.y, 1);
 }
}