Unity3D – 2D Games – Pixel Perfect 2D Game

Unity3D – 2D Games – Pixel Perfect 2D Game

Un rendering ‘pixel perfect’ lo abbiamo quando la risoluzione in uscita di un gioco e la dimensione di uno sprite corrispondono in pixel.
Immaginiamo di avere un progetto in WebPlayer di 800×600 pixel, di importare uno sprite di 400×600, se lo sprite ricopre metà del display allora è un rendering ‘pixel perfect’

Unity3D isn’t designed for pixel perfect rendering, this cause artifacts, and pixel blurring.

Perfect user interface buttons

To remove artifacts you have to do:

1. Import Texture 512×512
Migliora l’interpolazione di Unity3D

2. Texture> Inspector>
– Filter Mode: Bilinear
Pulisce l’interno della texture

Format TrueColor
Elimina la compressione del colore per far scomparire l’effetto squadrettato tipo JPG

3. Material> Shader Transparent/Cutout/Soft Edge Unlit
Rende più morbido il bordo della maschera alfa

Perfect spritesheet

To remove artifacts you have to do:

– You will likely need a texture with “power of 2” dimensions, e.g. 256 – 512 – 1024px.
– Texture filter mode should be “point”
– Turn off texture compression
– If you are using Unity ‘Sprite’ texture type, take care with your sprite pixels to units setting
– Take care with your orthographic camera scale relative to your screen dimensions

If you want the orthographic camera to match your screen resolution, then set the camera Size to be half of your screen height. So, in this case, if your window is 600 pixels, set your camera Size value to be 300.

For italian people:

– Importare texture multiple di 2px ‘128 – 256 – 512 – 1024px’
-> per evitare l’interpolazione applicata da Unity automaticamente per portarle a dimensioni multiple di 2

– Project> my-spritesheet> Inspector> Filter Mode> Point
-> RENDE I PIXEL PIU’ DEFINITI perchè toglie i filtri bilineari e trilineari

– Project> my-spritesheet> Inspector> Default> Format> Truecolor
-> elimina la compressione dei colori della texture

– Project> my-spritesheet> Inspector> Pixels to Units
-> definisce la corrispondenza tra il numero di pixel e le unità Unity3D ad esempio: 100px per 1 unità Unity3D
Ottimizzare questo parametro per gestire la dimensione degli sprite a video.

– Main Camera> Projection> Orthographic
-> per utilizzare una camera senza deformazioni prospettiche.

– Main Camera> Size
-> definisce quante unità Unity3D in altezza sarà la vista della camera, ad esempio: 15 significa che la camera in altezza inquadrerà lo spazio di 15 unità.
Ottimizzare questo parametro per gestire la dimensione degli sprite a video.

– MAIN TOP MENU> Edit> Project Settings> Quality> Texture Quality> Full Res

Se si vuole che la camera ortografica corrisponda alla risoluzione a video, settare il camera ‘Size’ alla metà dell’altezza della risoluzione a video. Ad esempio se l’altezza del video è 600px il camera ‘Size’ sarà 300.

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – 2D Games – Pixel Perfect 2D Game

Unity 3D – Animation calls Functions – Animation Events – JavaScript

Unity 3D – Animation calls Functions – Animation Events – JavaScript

Animation Events, which allow you to call functions in the object’s script at specified points in the timeline.

Official docs: http://docs.unity3d.com/Manual/animeditor-AnimationEvents.html

1. Create a Cube

2. Attach Cube.js:

// This JavaScript function can be called by an Animation Event
function PrintFloat (theValue : float) {
    Debug.Log ("PrintFloat is called with a value of " + theValue);
}

3. Select the Cube GameObject, MAIN TOP MENU> Window> Animation> Animation Toolbar>
> Add Keyframe, create your animation
> Add Event, Select a function, setup a value

4. Play

By |Unity3D, Video Games Development|Commenti disabilitati su Unity 3D – Animation calls Functions – Animation Events – JavaScript

Unity3D – Texture Mover – Javascript

Unity3D – Texture Mover – Javascript

How to move texture via code.

Create a Plane with
– Material with a _MainTex (if you use a diffuse material it is the main color texture)
– TextureMover.js

Simple code:


#pragma strict

    // Scroll main texture based on time
	var scrollSpeed : float; // Assign in Inspector, start try 0.5

function Start () {
    // setup Main Texture (scaleX,scaleY) 
    // x = 0.5 perchè la texture che uso è il doppio in larghezza della dimensione del piano
    // il piano è 16:9, ta texture 32:9 per avere un landscape più ampio
	renderer.material.SetTextureScale ("_MainTex", Vector2(0.5,1));
}// END Start()

function Update () {
        var offset : float = Time.time * scrollSpeed;
		renderer.material.SetTextureOffset ("_MainTex", Vector2(offset,0));
}// END Update()

Play to see the final result

Pro code:


#pragma strict

    var isVertical : boolean = false; // check in Inspector if you need a vertical scrool 
    
    var invertDirection : boolean = false; // check in Inspector if you need change scrool direction
    
    // Scroll main texture based on time
	var scrollSpeed : float; // Assign in Inspector, start try 0.5
	
	var scaleX : float; // X scale of the texture
	var scaleY : float; // X scale of the texture

function Start () {

    // setup Main Texture (scaleX,scaleY) START ###############################################
    // ad esempio scaleX = 0.5 se la texture che uso è il doppio in larghezza della dimensione del piano
    // il piano è 16:9, la texture 32:9 
	renderer.material.SetTextureScale ("_MainTex", Vector2(scaleX,scaleY));
	// setup Main Texture (scaleX,scaleY) END #################################################
	
}// END Start()

function Update () {

        MoveTexture(); // devo richiamarla da update perchè si deve aggiornare ad ogni frame
        
}// END Update()

function MoveTexture(){

        var offset : float; // lo spostamento della texture...
        
        // left->right or right->left or up->down or down->up ----------------------------------------------
	    if (invertDirection){ // positivo
	    offset = Time.time * -scrollSpeed; 
	    } 
	    
	     if (!invertDirection){ // negativo
	    offset = Time.time * scrollSpeed; 
	    }
        // vertical or horizontal  -------------------------------------------------------------------------
	    if (isVertical) { // in verticale 
	        renderer.material.mainTextureOffset = Vector2 (0, offset);  
	    }else{  // in orizzontale
	        renderer.material.mainTextureOffset = Vector2 (offset, 0);  
	    } 
  
}// END MoveTexture()


Setup in Inspector the value of variables

Play, you can change values on the fly into Inspector!

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Texture Mover – Javascript

Unity3D – Materials – SetTextureScale – JavaScript

Unity3D – Materials – SetTextureScale – JavaScript

Create a Plane with
– Material with a _MainTex (if you use a diffuse material it is the main color texture)
– TextureScale.js


#pragma strict

function Start () {
        // setup Main Texture (scaleX,scaleY) 
	renderer.material.SetTextureScale ("_MainTex", Vector2(0.5,1));

}

function Update () {

}

Play to see the final result

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Materials – SetTextureScale – JavaScript

Unity3D – Mouse Buttons Codes

Unity3D – Mouse Buttons Codes


        // Detects clicks from the mouse and prints a message
	// depending on the click detected.

	function Update() {
		if(Input.GetMouseButtonDown(0))
			Debug.Log("Pressed left click.");

		if(Input.GetMouseButtonDown(1))
			Debug.Log("Pressed right click.");

		if(Input.GetMouseButtonDown(2))
			Debug.Log("Pressed middle click.");
	}

By |Unity3D, Video Games Development|Commenti disabilitati su Unity3D – Mouse Buttons Codes