制作精灵(UI Sprite)

怎样判断是否应该使用精灵

  在一套UI中,精灵是一种非常常见的元件。当制作UI时,如果需要显示一张图片,需要先判断这个图片是否应该制作到图集里去,然后用精灵的方式去使用它,一般来说,可以遵循以下规律。

  1.首先说明一点,精灵是一个很基础的UI元件,经常不会独立使用,很多其他控件都会用到精灵。所以,精灵有的时候并不用独立使用的。

  2.对于一些展示型的图片,不会变化,只是起一个展示作用,如果它不大,它一般都是以精灵的方式去制作。

  3.如果要显示一个图片,它形状不规则,长宽不是2的N次方,那么一定要使用精灵。因为Unity对非2的N次方的图片处理要慢很多。

  4.如果这个UI元件经常性地出现,那么最好使用精灵,因为,这样它就可以和图集一起被载入内存,并不用新增一个DrawCall去渲染它。

创建精灵

  1.第一种创建方式

  单击Unity顶部菜单中的NGUI菜单,选择Create->Sprite。会自动创建出一个带Sprite组件的物体,这就算创建成功了。

  特别说明一下,NGUI创建物体时会在选中的那个UI物体(可视为一个节点)下进行创建,如果没有选中任何的UI节点,它会默认在UI Root下创建。创建出的UI控件的本地坐标都为0(相当于Reset了一下,和父节点的位置保持一样),所以,使用3D UI的时候要注意,不要在UI Root所附带的Camera下面创建UI元件,否则会导致UI和相机在一个位置,导致相机看不到。

  2.第二种创建方式

  使用旧版本的创建方式,在Unity顶部菜单中选择NGUI菜单,选择Open->Widget(Wizard(Legacy))。

  打开后,其中选择想要创建的精灵所在的Atlas,然后再Template中选择Sprite,在Sprite栏单击会弹出你所设置的图集中的所有精灵,从中选择要创建的精灵,Pivot是精灵的锚点(中心点的位置,默认在图片中心点)。AddTo是选择要在哪一个UI节点下机型创建(额可以通过拖动的方式将UI节点物体拖到这里来),这个AddTo的默认值是在打开这个菜单之前所选中的UI节点物体。然后单击AddTo按钮,即可完成创建。

  3.第三种创建方式(不推荐)

  这种方式是不用NGUI的菜单来创建,通过Unity的空物体,然后为其附加相应组件来自制UI控件。

  首先在Unity顶部菜单中选择GameObject,然后选择CreateEmpty,这样就在场景中创建了一个空物体,再将这个空物体拖动到UI Root下,使它成为UI Root下的一个子物体,将这个空物体的transform组件Reset一下,这样这个物体就和UI Root根节点保持一样的位置了。然后将这个空物体的Layer改为和UI Roote的Layer一样,否则UI摄像机将无法渲染它。在这个空物体的Inspector面板中,单击Add Component按钮,选择NGUI,选择UI,再选择NGUI Sprite,就为这个空物体附上了Sprite组件。

  在这个Sprite组件中单击第一行的Atlas按钮,选择要创建的精灵所在的图集,然后单击第二行的Sprite按钮,会弹出这个图集所有的精灵预览界面,从中选择所要的精灵。精灵就自制完成了。

Sprite组件的设置

  在Sprite组件面板中,可以设置如下的一些参数。

  1.Atlas。单击Atlas按钮将会弹出图集选择界面,可以选择要使用哪一个图集(如果弹出的图集选择界面没有我们要的图集,记得单击该面板中的ShowAll按钮)。

  2.Sprite。单击Sprite按钮,将会弹出该图集所拥有的精灵的预览界面,只需要在其中找到需要的精灵,然后双击,就完成了设置。

  3.Type和Flip。这里Type有5个选项:Simple(普通类型)、Sliced(切片类型)、Tiled(平铺类型)、Filled(填满类型)、Advanced(高级类型)。Flip选项是翻转选项,相应的Type下有不同的设置。

    Simple:这种类型下,图片会正常显示出来,图片是什么样它就是什么样显示。当将一个精灵的尺寸拉大时,它会以原图拉伸(可能会导致原图发生形变)的方式来完成,将精灵的大小通过拉动四周的蓝色锚点拉大,精灵就被拉伸了。

      在这种类型下,Flip有几个选项,分别是:Noting(不翻转)、Horizontally(水平翻转)、Vertically(竖直翻转)、Both(既水平又竖直翻转)。

      这里的翻转和Photoshop中的图片翻转式一个意思。

    Tiled:平铺类型,选择了之后,精灵尺寸会保持原来的尺寸不变,然后将精灵的尺寸拉大时,精灵会以平铺的方式来填充,并不会以拉伸的方式来填充。

    Filled:填满模式,这种模式可以设置图片填充一块区域的方式

      在Filled模式下,会多出Fill Dir、Fill Amount、Invert Fill 3个设置项。其中FillDir是指选择填充的方式,默认为360度填充。Fill Amount可以设置填充的比例,默认为1全部填充。InvertFill是设置填充的方向,不勾选是正方向,勾选是反方向。

  4.Widget模块。Widget模块是NGUI的控件组件都具有的一个模块。该模块的参数设置如下:

    Color:通过这里可以整体改变控件的颜色和透明度,改变颜色的规则为:原色值乘以这里设置的色值(Unity中,会把RGB色值从0~255转变为0~1的一个浮点数)。

      单击这个白色区域会弹出调色板,可以随意地在这里设置空间的颜色值和透明度。

      值得注意的是,如果通过这个控件改变了透明度,那么这个物体的自物体的控件透明度也会跟着被改变。

    Pivot:锚点设置,默认为中心点。通过这一排按钮可以设置出左上、顶中、右上、中左、中心、中右、左下、低中、右下一共9个点。

      这个锚点设置,改变的是图片的中心点位置,这个UI控件和其他UI控件之间的相对位置就是以这个点作为标准的。

    Depth:深度设置。可以通过单击Back和Forward来减1和加1,也可以直接输入一个深度数字来完成设置。

    Dimensions:尺寸,这里指的是控件的像素尺寸。单击Snap可以将图片的像素尺寸直接设置为原大小(这个图片被改成图集之前的图片大小)。

    AspectRatio:宽高比,AspectRatio后面的数字为当前该控件的宽高尺寸比例,后面有一个模式选择按钮,默认为Free,可为图片随意设置高和宽。这里除了Free以外,还有两个模式:以宽为基础、以高为基础。如果选择以宽为基础,那么图片的高度设置不论怎么设置都无效,都会以宽度和当前的宽高比计算得出。同理,如果选择了以高为基础,那么图片的宽度就无法被设置,它的宽度都会以高度和当前的宽高比计算得出。

时间: 2024-10-12 14:59:11

制作精灵(UI Sprite)的相关文章

精灵(Sprite)

// 创建精灵 auto sprite = Sprite::create("MyScene.png"); // 将精灵加入层中 this->addChild(sprite, 0);

利用pixi.js制作精灵动画

CSS Sprites 技术对于广大的前端工程师来说应该是一点也不陌生.国内开发者昵称为CSS精灵,通过一定的技术手段,让精灵动起来,我称其为精灵动画,那么目前有哪些实现方式 呢?下面让我们详细的聊聊. 关于实现精灵动画的方式有很多种,我自己实践过的主要有三种: 1: 把动作分解成一系列连续的编号的图片,如img0.jpg,img1.jpg,img2.jpg...,然后利用setIntval等定时器不断的去更换图片地址. 2: 把动作按照一定的间距排列在一张图片上,利用css3的动画帧,做出动画

Coco2d-x 3.x : Cocos Studio 制作的UI无法正确显示,出现绿色或白色底

可以在论坛看到, 修改一处即可. 文件位置在: frameworks\cocos2d-x\cocos\platform\android\java\src\org\cocos2dx\lib\Cocos2dxActivity.java 然后找到 public Cocos2dxGLSurfaceView onCreateView() 函数. 修改如下: 1 public Cocos2dxGLSurfaceView onCreateView() { 2 3 Cocos2dxGLSurfaceView g

Photoshop制作Android UI:怎样从大图片中准确剪切出圆角正方形 图片

如题所看到的,最初我是直接用PS的剪切工具,但发现有时不太好用. 由于你必须提前设好要剪切的尺寸. 也可能是我这小白不知道咋用. 下为摸索到的最好方法: 1.打开原图.新建图层,假设是png图片就不用新建图层了. 2.选择工具栏里的圆角矩形工具.快捷键U.在上面能够设置圆角的半径. 另外还要设置模式为路径而非形状图层. 3.先按下shift,就会成正方形选择.然后就拉区域,最后先松开鼠标.再松开shift.得到下图: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi

制作第一个UI图集

按钮分有两种形式,一种是普通按钮,也就是一张没有文字的按钮图片,在需要用时,就在上面写上不同的.当前所需要的文字.量一种按钮则是图片按钮,这种按钮的特点是整个按钮就是一张图片,它既是按钮也是图片. 在剖析UI资源结构时一定要秉承一下几个原则: 1.尽量保证还原设计图的效果,不损失质量,这是前提. 2.尽量发现重复的元件,而且重复的元件只需要一份就足够. 3.尽量分割得零碎一点,避免多个元件合并一起出图,这样对项目不利. 4.尽量使用九宫格来制作比较大的底板.底框等. 5.UI切图全部让美术人员以

(2)基本工作流(制作场景与UI)

1.认识cocos编辑器主界面.   2.制作新场景:   1)打开我们新建的HelloCocos项目,新建场景名称为“Scene”,如下图:   2)点击新建,场景就被创建出来了,如下图:   3)右键“资源面板”,选择“导入资源..”,选择要导入的资源,如下图:   4)导入了Common.LevelSelecttion资源文件夹,如下图:   5)做一个设计分辨率为 640 960的场景,现在默认是 960640,点击切换分辨率切换按钮“”,改变效果如下图:   6)从对象面板的“基础对象

OGEngine游戏开发之精灵(sprite)

Spirte简介 sprite可以说是游戏中的主角,我们建立各种图片,人物的显示都离不开它.sprite类很丰富,如果看过源代码的不难发现,可用的类型很多:基础精灵Spirte.动画精灵AnimatedSpirte.按键精灵ButtonSprite. 你可以有多种选择,可以直接使用AnimatedSprite来绘制人物动画,可以使用ButtonSprite来绘制按钮,也可以继承Sprite类实现自己的精灵.因此,我们在此介绍Sprite的使用,首先让我们了解下精灵的相关知识: 纹理Texture

【我所理解的Cocos2d-x】第六章 精灵Sprite 读书笔记

简介: 精灵是2D游戏里最重要的元素.游戏场景中大部分可见的元素都直接或间接地与精灵相关. 在Cococs2d-xz中,精灵使用Sprite表示,它将一张纹理的一部分或者全部的矩形区域绘制在屏幕上. 使用精灵表(将多个精灵合并在一个纹理上)可以减少OpenGL ES绘制的次数. Sprite也可以用来播放动画,也可以设置其颜色,或与场景中其他元素的混合模式等 另外,一些复杂的元素,譬如地图.粒子系统.字体等,则是基于Sprite构建的. -----------------------------

Cocos2dx学习笔记7:精灵(Sprite)

Cocos2dx的Sprite由Texure,frame和animation组成,由openes负责渲染.在游戏里,精灵是一个重要的概念,游戏背景.NPC.人物.道具等.在cocos2d-x引擎中,只要是用图片展示的,基本上需要使用精灵类. 一.创建精灵常见的三种方法: 1.直接使用Sprite的create方法创建 auto sprite = Sprite::create("HelloWorld.png");//创建一个精灵 this->addChild(sprite, 0);