Noticias

¡RECUERDA QUE SI ERES UN NUEVO USUARIO, DEBES PRESENTARTE PARA PODER PUBLICAR MENSAJES! | TENEMOS CANAL OFICIAL DE TELEGRAM: t.me/unity3dspain

Tutorial Pixel Perfect

Iniciado por kingtrase, Febrero 11, 2017, 12:56:42 PM

Tema anterior - Siguiente tema
Tutorial Pixel Perfect
 


  •    Hola a todos, Me decido a hacer este minitutorial ya que se pregunto sobre este asunto hace relativamente poco, y simplemente para tenerlo mas ordenado he decidido crear el tutorial para que encontrar una solucion a pixel perfect sea mas rapida.


  •    La teoria: Para crear la relacion perfecta del pixel hay que; encontrar el tamaño ortografico exacto segun la resolucion de pantalla.


Script: PixelPerfect.cs (El script fue creado por Marrt, en este caso yo solo hice unas modificaciones minimas)
 

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
 
//PixelPerfect Camera in Unity
//from Marrt
 
public    enum SnapMode {SnapToScreenPixel, SnapToArtPixel};
 
public class PixelPerfect : MonoBehaviour {
 
    public    static PixelPerfect instance;    //Asegurate de que solo existe una instancia de este script.
 
    //PIXELPERFECT VIEWPORT
    public    Camera        cam;
    public    Transform    camAnchor;
 
    public    Transform    followTarget;
 
    public    SnapMode snapMode = SnapMode.SnapToArtPixel;
 
    //pixel perfect & zoom                                  
    private    float    orthoSize;
    public    float    pxPerUnit        = 16f;        //Medidor de unidad, aqui poner el valor de pixel per unity de vuestras texturas.
    private    float    subPixelFactor    = 1f;        //Nivel de Zoom
 
    private    bool    pixelSnapOn = true;
    private    float    snap = 0F;    //Distancia de división del grid
 
    void Awake(){  
        instance = this;  
        Zoom (1F);
    }
 
    void Update(){
        if(Input.GetKey(KeyCode.LeftControl))
        {
        if(Input.GetKeyDown(KeyCode.F1)){Zoom(0.5f);}
        if(Input.GetKeyDown(KeyCode.F2)){Zoom(1f);}
        if(Input.GetKeyDown(KeyCode.F3)){Zoom(2f);}
        if(Input.GetKeyDown(KeyCode.F4)){Zoom(3f);}
        if(Input.GetKeyDown(KeyCode.F5)){Zoom(4f);}    
        }
    }
 
    void LateUpdate(){
        //camerafollow
        if(followTarget==null)return;
        if(pixelSnapOn){
            camAnchor.position = snapMode == SnapMode.SnapToArtPixel?RoundToArtPixelGrid(followTarget.position) : RoundToScreenPixelGrid(followTarget.position);
        }else{
      camAnchor.position = new Vector3(followTarget.position.x,followTarget.position.y,-10);
      
        }
    }
   
    private    void Zoom(float subPxFactor){
        orthoSize    = GetPixelPerfectOrthoSize(subPxFactor);  
        StartCoroutine(ZoomTransition());
    }
 
    private    IEnumerator ZoomTransition(){ //durante la transiccion, no se aplica pixel perfect
        float timer = 1F;
        while(timer >0F){
            cam.orthographicSize = Mathf.Lerp(cam.orthographicSize, orthoSize, Time.deltaTime *10F);
            timer-= Time.deltaTime;      
            yield return null;
        }  
        cam.orthographicSize = orthoSize;
    }
 
    private    float GetPixelPerfectOrthoSize(float screenPixelPerSpritePixelWidth){
   
        subPixelFactor = screenPixelPerSpritePixelWidth;    //1 medio 1 ArtPixel = 1 ScreenPixel, 2 medio 1 Art = 2x2 Screen  
        float s = pxPerUnit *subPixelFactor;  
        snap = 1F/pxPerUnit    /subPixelFactor;
        return cam.pixelHeight / s / 2F;
    }
 
    //tomando esta funcion, pasamos la Camara a Screen Pixels
    public    static Vector3 RoundToScreenPixelGrid(Vector3 worldPos){
        float snapArt    = PixelPerfect.instance.snap;
        return new Vector3(    Mathf.Round( worldPos.x / snapArt    )    *snapArt,
                            Mathf.Round( worldPos.y / snapArt    )    *snapArt,
                            -10);
    }
 
    //tomando esta funcion, pasamos la Camara a Art Pixels
    public    static Vector3 RoundToArtPixelGrid(Vector3 worldPos){
        float snapArt    = PixelPerfect.instance.snap * PixelPerfect.instance.subPixelFactor;
        return new Vector3(    Mathf.Round( worldPos.x / snapArt    )    *snapArt,
                            Mathf.Round( worldPos.y / snapArt    )    *snapArt,
                            -10);
    }
   
    //UI-Button (Funciones para usar desde la UI de Unity.)
 
    public    void PixelSnapOn(bool on){
        pixelSnapOn = on;
    }
 
    public    void ToggleSnappingMode(bool art){
        if(art){
            snapMode = SnapMode.SnapToArtPixel;
        }else{
            snapMode = SnapMode.SnapToScreenPixel;
        }
    }
}

 
Una vez creado el script, lo arrastramos al GameObject de la Camara.
 

 


  1.    Aqui arrastramos el componente Camera del mismo gameobject.


  2.    Igual pero con el transform


  3.    Si queremos que la camara siga a algun GameObject, si no es asi lo dejamos vacio.


  4.    El tipo de ajuste de Pixel Perfect, la diferencia entre uno y otro es minima.


  5.    Pixel per unit segun los PxperUnit de tus texturas, suele ser 100.



 
Esta es la configuracio de mi textura, si os dais cuenta Pixels Per Unit esta en 1 igual que en PixelPerfect.cs, y Filter Moder siempre en Point.
 
Y ahora hay que hacer un cambio en las opciones de calidad del proyecto.
 

 
Tenemos que deshabilitar el AntiAliasing , Ya que esta opcion lo que hace es suavizar los bordes de los pixeles, y no es lo que queremos, ya que necesitamos que nuestros pixeles se vean completos.
 
Y esto es todo lo que necesitais hacer, Espero que sea de ayuda, Un Saludo!

····>Desarrollando un videojuegos online-arcade para Android.


····>Programador en:C,C#,VB.net,PHP,HTML5,SQL,JS,Ruby.


····>Trabajando en: Desarrollo de paginas web y bushistudios.


                    ๑۩۞۩๑_(▀▄)KINGTRASE(▄▀)_๑۩۞۩๑ 





Parece muy bueno y eso que ni lo lei jajaj, ahora mismo me pongo despacito desde arriba. Gracias

Febrero 11, 2017, 06:22:20 PM #4 Ultima modificación: Febrero 11, 2017, 06:23:20 PM por kingtrase
@pioj A.K.A soberano de estas tierras) Gracias muchachos, Lightbug jajajaja me alegro que te guste sin leerlo!!

····>Desarrollando un videojuegos online-arcade para Android.


····>Programador en:C,C#,VB.net,PHP,HTML5,SQL,JS,Ruby.


····>Trabajando en: Desarrollo de paginas web y bushistudios.


                    ๑۩۞۩๑_(▀▄)KINGTRASE(▄▀)_๑۩۞۩๑ 



Etiquetas: