第一个u3d程序,hello world(UGUI) - 博客频道 - CSDN.NET
9527的专栏
首先，本文中都使用ugui控件。不使用gui.xxx来画在最表面，因为需要控制层次。
1 首先新建一个u3d项目，使用2D视角
2 在场景中新建一个text组件
注意：这里新建好了以后会带一个canvas，此tex组件存在于此canvas中
3 将项目中的camera拖拽到text组件的canvas中。
4 选择canvas当前的视角模式为world place,并把camera播放到canvas的camera组件中
5 选择text控件，修改为hello unity
这个网站解决了大家开始设计阶段的问题，轻量级的各种设计模型，强烈推荐
nynyvkhhiiii
排名：第9006名
（53）（12）（9）（4）（3）（31）（3）（1）（5）（1）（1）（1）（1）（1）（2）（1）（1）（19）（1）（1）（1）（1）（1）（4）（1）（4）（1）（4）（1）（1）（1）（0）（1）（4）（2）（1）（2）（1）（1）（3）（0）（4）（3）（7）（8）（1）（1）（4）（0）（1）（1）（5）（1）（1）（1）（1）（1）（1）（1）（3）（1）（1）个人心得（2）
写本文的目的
希望那些像我一样想从事游戏开发，但对这些基础知识了解甚少的人做一些简单讲解。在图文并茂、理论与实践结合的讲解之后，让那些不了解的初学者能够明白这些基础的原理（也就是为啥要这么用）以及实际应用
图集，在unity引擎中第一次看到，还是在用NGUI的时候，看到有一个叫做atlas的东东。当时不知道这是何物。网上搜了下，也没能得到太清晰的答案。
百度百科里的解释如下：
1. 图片的集合，如地图集，影集，把图片分门别类装订成册。
2. 图示的集合。如设计图集，按照一定规则编制的规范样本及说明文件的集合。
3. 国家指定的技术科研部门出版的图集，是指导规范各种专业实体，具有鉴定与约束效力的法规性质的技术文件。
乍一看上面的解释，很难对游戏里的图集有一个具体的认识吧？
但是如果接触过游戏开发，或者在网上搜过一些游戏的素材包，应该可以看得到一些类似下图的图片
这就是图集，Atlas！
所谓图集，就是图片的集合。上面的图集中，有很多个小的图片单元。它们大小不一，像那把刀的图片，相对来说就大一些；而那些拳头的图片，甚至那些锁链的图片，就小很多。
这里找到一个关于介绍图集的原理的视频，可惜是英文版的，自己没能力将其翻译成中文的，也仅仅是能够听个大致意思。如果英文比较好的同学可以看看这里，相信你对图集会有更全面的认识！这里是视频地址：
上面这个视频如果没看的同学，我这里也只能简单的给大家讲下视频的大致意思，毕竟自己英文水平还不够高，好尴尬，哈哈。。
个人对视频内容的理解是：
例如上面的图集中，里面的每个小图片都是一个图片单元。本来图片单元是各自在不同的图片，甚至是各自单独占据一张图片。那么对于计算机来说，每次为了读取图片中的信息，会将整张图片的信息都独到内存中来。那么，空白的地方虽然没有图片信息，但是也会有空数据来占据内存。所以假如上面的图集是分别存放在不同的图片中，那么计算机为了读取到这些图片，就不得不花费很多的时间和内存来读取和存放这些图片。但是我们可以清楚的看出，每张图片都只占据了那么大的空间，即使是在同一张图集中，仍然也只有那么大。而游戏中要用到的图片何止这么多，做过游戏开发或者研究过游戏素材包的同学应该很清楚，图片那是相当的多。所以为了在游戏运行时减少计算机的消耗，开发人员就发明了图集这样一种神奇的东东！
而图集展示给我们的也很清楚，有这么多图片，但中间仍然有空隙。这个有两部分原因：
1.每个图片单元虽然很小，并且都放在了同一张图集中，但仔细观察会发现，它们和周边的空白部分都可以组成一些有规则的图形（一般来说为了计算机读取方便，都是正方形或者矩形）。例如我们仍然可以用左下角的两个小图片单元为例，仔细观察，应该可以看出它们之间有那么一点点（很小，甚至可能是一像素）的间隙，由于无法完美展现出两者之间的距离，只能用QQ截图的办法来做个示意图，希望大家能理解我的意思：
下图中，图1和图2之间的距离大概也就是这个红线框的宽度吧（目测1像素）。
有同学可能会问了，那计算机是如何读取这些图片单元的呢？也就是这些小图片都在这一张图集中，如何来判断读取的是哪张图片呢？
这个问题问的好！之前做开发的时候，也遇到过这种问题。上图中图1的大小是一个矩形，而矩形可以通过三个数据来保存：起始点，宽度，高度。起始点呢，可以将图片看成是一个2D坐标系，实际上游戏开发过程中也就是将其看作一个2D坐标系，坐标系中是由很多个像素块组成的。因为是像素块是最小单位了，所以该坐标系中只会有整数，木有小数（浮点数）。所以一般来说图1的起始点就是红线框的左上角（也有可能是右下角，根据不同的图像处理引擎或者游戏引擎而定）。宽度和高度就不用再解释了。
这样我们就能告诉计算机，某张图片在图集中的具体位置了。然后我们可以将该图片的信息存放到一个数据结构（比如数组、链表等），或者存放到字典中等，在取用的时候，只需要根据索引或者对应的信息来取想要的图片即可。
2.虽然每张图片单元有自己的大小，但是有一些空白明显是没有任何图片的。这些空白可能的原因：
1）对于每个图集来说，原则上存放的都是相关的图片，比如这个图集中存放的都是某一个怪物的UI或者是某一个界面的UI，而这个界面中只用到了这么多图片，所以一张图集中就会有这些空白。
2）对于相关的图片，可能其尺寸不一样，有的大有的小，有的太大不适合放在一个图集里，只能单独存放为一个图集（比如一些游戏的loading界面），而小的图片则存放同一个图集中。该图集中剩余的位置不够存放其他大图片，因此图集中一般来说都会有空白。
UGUI中图集的应用
说到图集，理论的上面讲了一大堆，也不知道大家明白了没。自己觉着说的还算凑合，有不对的地方，如果大神看到了还请多喷几句。
下面来说下应用吧。
首先来说说UGUI中如何给控件加图片。
1.首先在U3D中创建一个新场景
2.然后随便从网上找了张图片，任何格式的都可以（理论上来说，U3D支持 PSD, TIFF, JPG, TGA, PNG, GIF, BMP, IFF, PICT这些格式的图片）。
3.将图片导入u3d中，然后在空场景中添加一个image控件
4.然后将图片拖到image控件上
这时我们发现，图片无法拖上去！这是为何？在往3D物体中拖图片的方法，2D中竟然行不通了！
无奈，在网上搜了下，发现是图片的类型不对。这里我们需要在U3D中修改下图片的类型：
5.在U3D中选中图片，在右侧的inspector界面中可以看到图片的Texture Type，默认其类型为Texture。这里我们将其设为Sprite(2D and UI)，然后在下方的Max Size选择合适的大小。然后点击右下角的apply按钮应用设置使图片变成想要的类型。接下来我们就可以把图片拖给2D控件了。
这里我们要讨论的是UGUI的图集使用。所谓图集，就是图片的集合，所以这里就得找两张图片。导入U3D，然后将其设置为Sprite(2D and UI)类型的图片格式，选择之后，可以看到inspector界面里有Packing Tag这一项，该项的意思是图片打包图集的图集顺序。比如你希望第一张图片打包到第一个图集里，第二张图片打包到第二个图集里。那两张图片的tag分别设置为1、2即可。这里为了讨论UGUI的图集使用，将其均设置为1。这里设置完，然后我们需要去系统设置里修改一个UGUI打包图集的选项：
这里我用的是5.0.1f，点击Edit-&Project Setting-&Editor，然后在右侧可以看到Editor的选项，最后一项Sprite Packer，选择Always Enabled即可。之后，在U3D中新建两个图片控件，分别将他们的Source Image设置为前面说的两张图片。设置好后，点击Windows-&Sprite Packer，打开图集打包界面，点击pack按钮，就将图集打包好了，在Sprite Packer界面中可以看到两张图片被打包到同一个图集里了。
这里也只是简单介绍了下UGUI图集的使用。更多详细信息，大家可以参考U3D官网的资料，也可以看这里，一个很权威的大神写的帖子，很详细：
第一次发技术性帖子，感觉写了好多东西，但仔细看来，也没太多深入的东东。而且后面写的东西有点太简单了，还犯懒直接把雨松大神的文章传送门给出来。。一方面感觉自己研究的还少，另一方面，雨松大神写的确实很到位，大家看这里应该会有不少收获。好吧，先到这里了。
PS：在Unity5.0之后，stat 里显示的draw call被修改为SetPass calls，其实都是一回事。
&&相关文章推荐
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：3926次
排名：千里之外
(2)(1)(6)(2)(3)扫一扫，访问微社区
后使用快捷导航没有帐号？
签到成功!您今天第{todayrank}个签到，签到排名竞争激烈，记得每天都来签到哦！已连续签到:{constant}天，累计签到:{days}天
UGUI学习日记() Image,RawImage,Text,UGUI内置特效
阅读&5434 |
5.Image and RawImage&UGUI源码地址:https://bitbucket.org/Unity-Technologies/ui/downloads官方示例,在assetsStore中 可以下载到. & Unity Samples: UIImage 主要用来显示Sprite的.Image的属性:Sourece Image: 被制作成Sprite的目标图片.Color:图片的颜色.透明度.Material:材质球 实现一些特殊的渲染效果.Image type: 图片类型.&{ simple, &//简单类型 sliced, & //九宫切片 tiled , & &//平铺 filled & & &//填充}Preserve Aspect: true &只缩放不拉伸.Preserve Aspect: false 缩放同时拉伸图片.set native size 回到图片初始大小.要是ImageType选择 sliced:可能会提示,警告:这个图片没有边框,此时可以在project中选中这个图片.点击Sprite Editor. 可以添加九宫格.划分边界.然后再去选择ImageType为sliced就不报警告了.Image type为Filled模式的.这种下面会有 FIll method.水平,上下,旋转某角度. 根据FillAmount的值变化.填充会变化.clockwise=true 顺时针, false 逆时针.点选中project中一张图片.在Inspector面板中可以看这个Image的属性设置将textureType改为Sprite(2D and UI)Sprite Mode (可选signle就是单一图片,multiple多图模式:)&选Sprite Mode为Multiple模式.然后 点SpriteEditor 按钮.打开切片编辑界面. &通过shift+鼠标左键可以选多个切片区.此时.点开Project.中此图片下.就有所有切成的sprite图片.用哪个选那个就行.关于材质球: 新建一个材质球,他的Inspector面板中材质球的Shader中专门多出来了一个UI分类的 UI专用材质.例子:官方UGUI示例,Lighting.中 slider 看起来是立体的.其实就是一张普通图.用了材质球.//--------------------------------------------------------------------------RawImage 组件可以用来显示任意文理.包括RenderTexture,MovieTexture.从网上下载一张图片一般用RawImage显示.例子:官方UGUI示例,RenderTexture旋转的战斗机.6.Text 简介-------------------------------------------------------------Text组件用来显示文字. 4.6 版本之后的Text可以直接显示中文了.支持.ttf,otf字体.字体属性:...字体的属性面板中Character字符集.可以自己设置.比如这个选用Custoner set.在下面的Font Chars中定义要显示的字符集. 那么此时写在Text组件text中的内容只有 字符集内的显示.其他的不显示.richText 富文本. 这个可以让文本内容通过加xml标签来改变.富文本支持的标签:&b&hello &/b& 粗体&i&yes &/i& 斜体&size& no&/size& 字号&color&world&/color&字颜色例如Text组件的内容可以写:&b&Hello World&/b&&i&who is your daddy?&/i&&color=green&hello kitty.&/color&&color=blue& &b&hello kitty.&/b&&/color&段落属性:...比如字体内容中填写很长一行:&b&Hello World&/b&&i&who is your daddy?&/i&&color=green&hello kitty.&/color&&color=blue& &b&hello kitty.&/b&&/color&Alignment对齐方式.Horizontal Overflow: 水平方向处理字符超出的规则.( wrap, 字体内容超出自动换行& &overflow &字体内容超出边框就超出.不鸟它.)Vertical Overflow:垂直方向处理字符超出的规则.(& &truncate, 超出Text控件外边框范围的文字内容的就截断.&& &overflow 不鸟它,超出就超出.)best fit = 下面就会出来俩 变量. minSize, maxSize可以设置可以设置最佳匹配.color : 可以设置那些没有用 &color& &/color&标签特殊赋颜色的字内容的颜色.Material:文字要应用的材质.u3d ugui 使用技巧;ugui 图片拉伸
作者的其他最新博客
评论 ( 个评论)