• 简略的帧动画


    本人也是个0基础的开发人员,这里仅仅是作为一个学习的总结,假设哪里的理解错了,欢迎纠正。


    帧动画的实现能够用第三方的插件,类似2DToolkit,能够非常easy的实现帧动画,但有时还是不要太过于依赖第三方的插件。有时间还是得自己研究怎样实现,不能一直穿着别人的内裤啊~



    这个是本次项目的终于效果图:



    关于在Unity3d下怎样用代码生成面,这里雨松MOMO已经有相关的博文:

    http://www.xuanyusong.com/archives/780


    理解下一张Material的坐标系,这里用了网上找的一张图片:

    每一个Material都有自己的这个坐标系。

    而假设须要把一张纹理贴到一个面上,则须要把贴图上的UV坐标(UV坐标就是上面的坐标系)相应到面的每一个顶点上,如图(又是网上的图片):

    比方有以下一张图片:


    图片总宽高为:192x152,单张精灵的宽高为48x38;

    假设我们仅仅想显示左上角的1张图片,代码例如以下

    using UnityEngine;
    using System.Collections;
    
    public class ViewImage : MonoBehaviour {
    	
    	
    	public int widthCount , heightCount;
    	
    	//图片的宽高比例//
    	public float width = 48,height = 38;
    	
    	//素材贴图//
    	public Material	material;
    	
    	//顶点数//
    	private int verticesCount = 4;
    	
    	
    	private Vector2 size;
    	
    	private Mesh mesh;
    	
    	public int frameIndex = 0;
    	
    	private MeshRenderer meshRenderer;
    
    	// Use this for initialization
    	void Start () {
    		initFace();
    	}
    	/// <summary>
    	/// 初始化一个面
    	/// </summary>
    	private void initFace(){
    		//得到MeshFilter对象//
    		MeshFilter meshFilter = gameObject.GetComponent<MeshFilter>();
    		if(meshFilter == null){
    			//为null时,自己主动加入//
    			meshFilter = gameObject.AddComponent<MeshFilter>();
    			meshRenderer = gameObject.AddComponent<MeshRenderer>();
    			meshRenderer.sharedMaterial = material;
    		}
    		//得到相应的网格对象//
    		mesh = meshFilter.mesh;
    		
    		//三角形顶点的坐标数组//
    		Vector3[] vertices = new Vector3[verticesCount];
    
    		//得到三角形的数量//
    		int trianglesCount = verticesCount - 2;
    
    		//三角形顶点数组//
    		int[] triangles   = new int[verticesCount *3];	
    		
    		float tmpWidth = 1.0f;
    		float tmpHeight = 1.0f ;
    		
    		vertices[0] = new Vector3(0,0,0);
    		vertices[1] = new Vector3(0,tmpHeight,0);
    		vertices[2] = new Vector3(tmpWidth,0,0);
    		vertices[3] = new Vector3(tmpWidth,tmpHeight,0);		
    		
    		mesh.vertices = vertices;
    		
    		/*
    		 * 
    		 * 假设以下的顶点连线看不明确,看这里
    		triangles[0] = 0;
    		triangles[1] = 1;
    		triangles[2] = 2;
    		triangles[3] = 1;
    		triangles[4] = 3;
    		triangles[5] = 2;
    		*/
    		
    		//起始三角形顶点//
    		int start = 0;
    
    		//结束三角形的顶点//
    		int end = 2;
    
    		for(int i = start; i <end; i++)
    		{
    			for(int j = 0; j < 3; j++)
    			{
    				if( i%2 ==0)
    				{
    					triangles[3*i + j] = i +j;
    				}else
    				{
    					triangles[3*i + j] = i + 2-j;
    				}
    			}
    		}
    		
    		
    
    		mesh.triangles = triangles;		
    		
    		Vector3 localScale = new Vector3(width,height,1.0f);
    		transform.localScale = localScale;
    		size =  new Vector2 (1.0f / widthCount , 1.0f / heightCount);
    		setUVPosition(frameIndex,mesh);
    		
    	}
    	
    	
    	
    	//设置uv坐标
    	private void setUVPosition(int index,Mesh mesh){
    			
    		//得到相对于图片的行列坐标//
    		int uIndex = index % widthCount;	//列坐标//
    		int vIndex = index / heightCount;	//行坐标//
    		
    		//左下角的坐标点;//
    		Vector2 vertices0 =  new Vector2 (uIndex * size.x, 1.0f - size.y - vIndex * size.y);
    		//左上角坐标//
    		Vector2 vertices1 = new Vector2(vertices0.x , vertices0.y + size.y);
    		//右下角坐标//
    		Vector2 vertices2 = new Vector2(vertices0.x + size.x , vertices0.y );
    		//右上角坐标//
    		Vector2 vertices3 = new Vector2(vertices0.x + size.x , vertices0.y + size.y);
    		
    		mesh.uv = new Vector2[]{vertices0 , vertices1 , vertices2 , vertices3};
    		
    
    	}
    }
    

    代码上面都有凝视,这里关于用图片的素材球的Shader说明下。一開始我用Transparent/Diffuse,可是在执行时,切换uv坐标时控制台打印了Shader wants normals, but the mesh  doesn't have them 这个消息。Google下也不知道为什么,最后用Unlit/Transparent就没有打印了。所以哪位大神知道原因告诉我下~~


    继续,如今已经能够从一张大贴图中显示当中的一张图片了,接下来整理成动画就是把这些帧图片整合在一起,在Update里头切换就KO了,代码例如以下:

    	//控制动画帧数//
    	public int[] aniArray;	
    	void Update(){
    		if(Time.frameCount % 8 == 0){
    			int len = aniArray.Length;
    			
    			
    			int curIndex = aniArray[frameIndex];
    			
    			setUVPosition(curIndex,mesh);
    			
    			frameIndex ++;
    			
    			frameIndex %= len;
    			
    		}
    		
    		
    	}

    以下是项目的一张截图,用红线圈起来的部分是动画帧的下标数组。

    WidgetCount:大贴图x方向上有多少张图片。

    HeightCount:大贴图y方向上有多少张图片。

    Width:分隔的小贴图的宽度。

    Height:f分隔的小贴图的高度。

    FrameIndex:当前播放到第几帧的下标。

    Ani Array:帧动画的下标集合数组。



    O了。这篇事实上好早就在写。但一直没去完毕..今天光棍就顺便完毕掉~

  • 相关阅读:
    Vue axios 使用记录
    Vue CLI 项目创建
    Vue中的事件修饰符。
    js 中控制打印方向横向还是纵向。
    element ui 列表中删除只能删除最后一项
    文件上传formData上传之前查看对象里的值
    GridControl_gridView 单元格内容换行(wrap)
    SqlTest(2013-07-10)
    printPreviewControl1 打印预览
    避免button处理事件过程中 点击按钮触发事件的方法
  • 原文地址:https://www.cnblogs.com/clnchanpin/p/6888406.html
Copyright © 2020-2023  润新知