天天看點

unity像素遊戲裡面的像素自适應關系和移動抖動閃爍問題分析

補充這篇的http://blog.csdn.net/shenmifangke/article/details/49611567

unity想要做像素遊戲最好錄影機用正交視圖(不排除可以用透視的)

這樣裡面就隻有size可以調節,預設是5,就是半個螢幕的高度

注意這裡的5是unity裡機關距離,一個quad不進行縮放的情況下寬度就是1

plane的話不進行縮放時10*10也就是錄影機設定成正交,并且位置歸為0位置,那麼plane正好在高度上适應

可以看到下圖關系

unity像素遊戲裡面的像素自适應關系和移動抖動閃爍問題分析

然後說的是像素遊戲

遊戲一般使用的都是sprite裡面有個設定叫pixel per unity 就是unity機關長度裡像素的個數,這個後面再說

下面是一般圖檔導入設定

  1. sprite Mode根據是否是單一進制素調節
  2. FIlter Mode,不需要抗鋸齒就改成Point
  3. 大部分情況下像素遊戲沒有遠近的話Mip Maps勾也能去掉
  4. 還有下面的Max Size千萬不要比你原圖小,那樣會對像素進行模糊的,大一點可以
  5. format改成True color
  6. 記得修改pixel per unity(見後面分析)

還有就是場景上的問題

遊戲的分辨率,這個決定了實際遊戲的視窗大小,進而也決定你設計遊戲像素應該放大的倍數問題

這裡假設用的是5倍像素放大(就是1個像素實際顯示是5個像素大小)

想要的遊戲視窗是500*400 那麼遊戲元素大小應該是100*80

那麼接下來就是分析

如果用的正交錄影機Size是5,也就是螢幕高度是機關距離10,如果一個機關表示上sprite裡預設100像素長度的話,

高度上就有1000個像素,這個都超出了實際視窗大小,顯然不是我們要的效果

是以這裡sprite上的pixel per unity可以調節為 400/10 = 40,這裡意思就是如果要1一個像素對應一個像素的話設定為40

但是我們需要的是5倍大小 是以40/5=8,這樣就行了

下面放上一個10*10的測試圖檔

unity像素遊戲裡面的像素自适應關系和移動抖動閃爍問題分析

(可以另存為 因為放大是以模糊了,實際上并不模糊)

因為實際上遊戲畫面是100*80的是以橫排可以鋪10個,我們驗證一下見下面的圖

unity像素遊戲裡面的像素自适應關系和移動抖動閃爍問題分析

像素效果現在看起還行

unity像素遊戲裡面的像素自适應關系和移動抖動閃爍問題分析

上面這個圖是動态示範移動效果,如果覺得這種鋸齒效果還ok,那就沒問題了

但是如果覺得效果不好,比如像素在移動的時候有抖動效果,這是因為設定成point後,取值截斷而沒有抗鋸齒的原因

如果想去掉這種明顯的鋸齒效果,那就要重新找種方案了,另外說下這時在錄影機上加上抗鋸齒腳本并不能解決問題,因為這種鋸齒是被放大的,point采樣造成的誤差也被放大了,是以不可能用簡單的抗鋸齒腳本去掉的

視覺效果最大的問題就是會造成物體在緩慢移動的時候有變大變小的效果(應該也是不明顯的,在sprite邊緣單個像素内發生)

然後如果想要簡單解決這種問題就是,像素在完成後直接放大一定倍數再導入

point方式像素移動是産生的抖動,像素拉伸stretch,和變化鋸齒的主要原因(這些在其他引擎裡也适用)

如果像素不是按照整數來移動,而且采樣方式又是point,就會造成像素點在局部的拉伸

是以一個解決思想就是整數化移動(當然這種方式并不适合大量物體,或者某些嵌套子物體)

void LateUpdate () {
transform.position = new Vector3(Mathf.Round(truePos.x),Mathf.Round(truePos.y), z);
}
           

還有方法當然是讓錄影機移動整數個像素距離(這種隻适合像素場景不被拉伸)

另外使用sprite的另一種材質,隻要建立Sprites/Default shader 并打開 pixel snap,然後直接拖到sprite上即可(不需要放圖檔,自動的)可以在一定程度上很小的提高一點像素品質,但效果在移動上還是不明顯

當然還有一種像素遊戲情況是和螢幕像素1:1的這個有個shader可以解決閃爍問題

Shader "Sprites/Pixel Snap/Alpha Blended"
{
	Properties
	{
		_MainTex ("Sprite Texture", 2D) = "white" {}
		_Color ("Main Color", Color) = (1,1,1,1)
	}

	SubShader
	{
		Tags
		{ 
			"Queue"="Transparent" 
			"IgnoreProjector"="True" 
			"RenderType"="Transparent" 
		}

		Cull Off
		Lighting Off
		ZWrite Off
		ZTest Always
		Fog { Mode Off }
		Blend SrcAlpha OneMinusSrcAlpha

		Pass
		{
		CGPROGRAM
			#pragma vertex vert
			#pragma fragment frag
			#pragma fragmentoption ARB_precision_hint_fastest
			#include "UnityCG.cginc"

			sampler2D _MainTex;
			float4 _MainTex_ST;
			fixed4 _Color;

			struct appdata_t
			{
				float4 vertex   : POSITION;
				float2 texcoord : TEXCOORD0;
			};

			struct v2f
			{
				float4 vertex        : POSITION;
				float2 texcoord      : TEXCOORD0;
			};

			v2f vert(appdata_t IN)
			{
				v2f OUT;
				OUT.vertex = mul(UNITY_MATRIX_MVP, IN.vertex);
				OUT.texcoord = TRANSFORM_TEX(IN.texcoord, _MainTex);

				// Snapping params
				float hpcX = _ScreenParams.x * 0.5;
				float hpcY = _ScreenParams.y * 0.5;
			#ifdef UNITY_HALF_TEXEL_OFFSET
				float hpcOX = -0.5;
				float hpcOY = 0.5;
			#else
				float hpcOX = 0;
				float hpcOY = 0;
			#endif	
				// Snap
				float pos = floor((OUT.vertex.x / OUT.vertex.w) * hpcX + 0.5f) + hpcOX;
				OUT.vertex.x = pos / hpcX * OUT.vertex.w;

				pos = floor((OUT.vertex.y / OUT.vertex.w) * hpcY + 0.5f) + hpcOY;
				OUT.vertex.y = pos / hpcY * OUT.vertex.w;

				return OUT;
			}

			fixed4 frag(v2f IN) : COLOR
			{
				return tex2D( _MainTex, IN.texcoord) * _Color;
			}
		ENDCG
		}
	}

}
           

下圖gif就是使用了上面方法後的結果,左側三個使用了這種shader,右邊三個使用的是預設的

unity像素遊戲裡面的像素自适應關系和移動抖動閃爍問題分析

可以看出正常移動效果好了,但是旋轉後移動的效果并不完美

誰能得到更好的效果可以進一步交流

參考網站

http://blogs.unity3d.com/2015/06/19/pixel-perfect-2d/

http://forum.unity3d.com/threads/help-fixing-a-major-flaw-in-unity2d.244014/http://forum.unity3d.com/threads/pixel-perfect-2d-in-4-3.210497/

http://www.gamasutra.com/blogs/EduardoCabrera/20150203/235483/Unity_Set_Up__Pixel_Perfect.php

https://www.reddit.com/r/Unity2D/comments/2bsoj1/recommended_best_practices_for_pixel_art_games/

http://tieba.baidu.com/p/4031440265

http://forum.unity3d.com/threads/solved-2d-sprites-flicker-shake-on-camera-movement.270741/

http://forum.unity3d.com/threads/unity-5-2d-and-pixel-perfection.310023/

http://wiki.unity3d.com/index.php?title=SnapToGrid

http://answers.unity3d.com/questions/725621/best-method-for-dealing-with-rough-sprite-edges-du.html