Unity 3D – Game Engine – Responsive and Adaptive Apps

Unity 3D – Game Engine – Responsive and Adaptive Apps

Responsive Web Design (RWD) is a Apps design approach aimed at crafting sites to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from mobile phones to desktop computer monitors)

Basics Screen.width and Screen.height

Inside Hierarchy create:

– Main Camera
– GUI Text
– GUI Texture> Inspector> W=200(width pix) H=200(height pix), attach ‘Adaptive.js’

Adaptive.js

#pragma strict

// Hierarchy DRAG E DROP over var GUI Text in Inspector
var scoreTextX : GUIText;
private var screenres  : String;

function Update () {   
        // it will check resolution every frame 
        screenres = Screen.width + " " + Screen.height;                            
        scoreTextX.text = "Screen width & height (pix) "+ screenres;
        }

Hierarchy> GUI Texture> Adaptive.js DRAG AND DROP over public var ‘scoreTextX’ the ‘GUI Text’ game object.

The result on my Samsung SmartPhone (Landscape) is: Screen width & height (pix) 800 480

GUI Texture – Full Screen

Adaptive.js

#pragma strict

// Hierarchy DRAG E DROP over var GUI Text in Inspector
var scoreTextX : GUIText;
private var screenres  : String;

function Update () {   
        // it will check resolution every frame 
        screenres = Screen.width + " " + Screen.height;                            
        scoreTextX.text = "Screen width & height (pix) "+ screenres;
        // Move the object to (0, 0, 0)
	transform.position = Vector3(0, 0, 0); // equal than Inspector> Position X=0 Y=0 Z=0
        guiTexture.pixelInset = new Rect(0f, 0f, Screen.width, Screen.height); // equal than Inspector> W=800 H=480
        }

Notice:
Position X=0 Y=0 Z=0
Inspector> W=800 H=480

GUI Texture – Half Left Screen

Adaptive.js

#pragma strict

// Hierarchy DRAG E DROP over var GUI Text in Inspector
var scoreTextX : GUIText;
private var screenres  : String;

function Update () {   
        // it will check resolution every frame 
        screenres = Screen.width + " " + Screen.height;                            
        scoreTextX.text = "Screen width & height (pix) "+ screenres;
        // Move the object to (0, 0, 0)
	transform.position = Vector3(0, 0, 0);
        guiTexture.pixelInset = new Rect(0f, 0f, Screen.width*0.5, Screen.height);
        }

GUI Texture – Half Right Screen

Adaptive.js

#pragma strict

// Hierarchy DRAG E DROP over var GUI Text in Inspector
var scoreTextX : GUIText;
private var screenres  : String;

function Update () {   
        // it will check resolution every frame 
        screenres = Screen.width + " " + Screen.height;                            
        scoreTextX.text = "Screen width & height (pix) "+ screenres;
        // Move the object 
	transform.position = Vector3(0.5, 0, 0);
        guiTexture.pixelInset = new Rect(0f, 0f, Screen.width*0.5, Screen.height);
        }

GUI Texture – Square – bottom left

#pragma strict

// Hierarchy DRAG E DROP over var GUI Text in Inspector
var scoreTextX : GUIText;
private var screenres  : String;

function Update () {   
        // it will check resolution every frame 
        screenres = Screen.width + " " + Screen.height;                            
        scoreTextX.text = "Screen width & height (pix) "+ screenres;
        // Move the object, these values are fronm 0 to 1 
	transform.position = Vector3(0, 0, 0);
	// Create a square based on Screen.height*0.5 (half of screen height)
        guiTexture.pixelInset = new Rect(0f, 0f, Screen.height*0.5, Screen.height*0.5);
        }

GUI Texture – Square – top left

#pragma strict

// Hierarchy DRAG E DROP over var GUI Text in Inspector
var scoreTextX : GUIText;
private var screenres  : String;

function Update () {   
        // it will check resolution every frame 
        screenres = Screen.width + " " + Screen.height;                            
        scoreTextX.text = "Screen width & height (pix) "+ screenres;
        // Move the object, these values are fronm 0 to 1 
	transform.position = Vector3(0, 0.5, 0);
	// Create a square based on Screen.height*0.5 (half of screen height)
        guiTexture.pixelInset = new Rect(0f, 0f, Screen.height*0.5, Screen.height*0.5);
        }

GUI Texture – Square – center

#pragma strict

// Hierarchy DRAG E DROP over var GUI Text in Inspector
var scoreTextX : GUIText;
private var screenres  : String;

private var btnWidth : int;
private var btnHeight : int;
private var insetX : int;
private var insetY : int;

function Update () {   
        // debug code - it will check resolution every frame 
        screenres = Screen.width + " " + Screen.height;                            
        scoreTextX.text = "Screen width & height(pix) "+ screenres;
        
        // texture size is based on display resolution (pixel)
        btnWidth  = Screen.height*0.5;
        btnHeight = Screen.height*0.5; // if you want change aspect ratio here
        
        // calcolate inset (pixel)
        insetX = -1*(btnWidth/2); // we need negative value (pixel)
        insetY = -1*(btnHeight/2);
        
        // center position X Y (Z is used to create layers of textures (values from 0 to 1)
	transform.position = Vector3(0.5, 0.5, 0);
	// GUI Texture responsive size and position
        guiTexture.pixelInset = new Rect(insetX, insetY, btnWidth, btnHeight);
        }