Unity UI系统-NGUI-AtlasMaker

2020-10-30 14:00发布

一,AtlasMaker制作图集:

1,Atlas:图集,图片的一个集合,或者说打包格式,NGUI中的UISprite组件显示图片,需要用到图集,就和UIlabel显示需要用到字体是一样的道理,


2,什么是AtlasMaker

AtlasMaker :图集制作器,NGUI提供的打包Atlas的工具


3,制作图集的步骤:

点击NGUI下的Open下的AtlasMaker工具,弹出窗口点击“New”按钮:

将需要打包成Atlas的图片选中;

点击“Create”按钮,给新图集命名并且保存,,,


4,Atlas结构分析:

每个Atlas都是由三个文件组成的:

xxx.png :贴图文件,小图片拼成的大图片(随着图集的更改而自动变化)

xxx.mat :材质球文件,使用xxx.png为素材制作的图集文件

xxx.prefab:图集文件,使用xxx.mat为素材制作的图集文件

依赖关系:png --> mat --> prefab

二,图集的常用修改和操作

往图集中增加新的图片:

1,打开AtlasMaker,选中需要修改的图集,

2,选中需要添加的图片,AtlasMaker面板会自动添加

3,最后点击面板上的“Add/Update”按钮,新的图集会自动保存

从图集中删除图片;

1,打开AtlasMaker,选中需要修改的图集;

2,选中要删除的图片后面的“X”按钮,然后点击Delete;


UISprite面板控制:

1,UISprite 显示图片

a,创建UISprite组件,步骤:NGUI --> Create --> Sprite;

b,选择图集,选中要显示的图片;

c,widget中点击“Snap” 按钮,让图片原始按原始大小显示;

d,widget中“Aspect选中Based On Width”,便于等比例调整图片的大小,


2,UISprite面板属性

a,Type(类型/模式)

simple:简单模式,展示默认效果

Sliced :九宫模式 ,选中后点击Sprite后面的Edit属性面板会改变,然后调整Sprite Details下的Border属性值,将图片分为九宫格,然后点击Hierarchy面板即可,,,此属性设置完成后在改变widget下的size就只是中间的格子在变化,其余的八个不会改变

Tiked:平铺模式:使用该图片平铺于widget中的size区域,一般用来做背景图片

Filled:进度模式 最复杂的一种图片模式

FillDir 填充方向

Fill Amount 填充量

invertFill 翻转填充

实例:



代码动态创建UISprite:

1思路和我们可是化操作是一样的:

2动态控制UISprite的属性:

获取到UISprite对象,以“.”的形式调出属性进行复制,属性的名称和Inspecctor面板上组件属性名保持一致

代码如下:


using UnityEngine;

 

/// <summary>

/// 使用代码动态创建UISprite

/// </summary>

public class UIlabel : MonoBehaviour {

    UILabel goldNum;

    Transform tran;

// Use this for initialization

void Start () {

        //获取父级物体的世界坐标

        tran = this.GetComponent<Transform>();

        //动态创建一个Go对象,命名为UIGo

        GameObject uiSprite = new GameObject("UIGo");

        //将uiSprite设置为UIRoot的子物体

        uiSprite.GetComponent<Transform>().SetParent(tran);

        //重置Scale

        uiSprite.GetComponent<Transform>().localScale = Vector3.one;

        //动态添加组件

        UISprite sprite = uiSprite.AddComponent<UISprite>();

        //读取图集,Resources是Unity特定的加载文件夹

        UIAtlas atlas = Resources.Load<UIAtlas>("MyAtlas");

        //给组件指定图集

        sprite.atlas = atlas;

        //给组件指定图片“图片名称”

        sprite.spriteName = "11000414";

}   

}



作者:Czhenya

链接:https://czhenya.blog.csdn.net/article/details/77651912

来源:CSDN
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。