营销型网站的分类,摄影设计思路,新网站建设怎么样,网站图标psd接下来#xff0c;我们来尝试制作一下我们的UI#xff0c;我们会学习unity基本的UI系统
**************************************************************************************************************
我们要先安装一个好用的插件到我们的unity当中#xff0c;帮助…接下来我们来尝试制作一下我们的UI我们会学习unity基本的UI系统
**************************************************************************************************************
我们要先安装一个好用的插件到我们的unity当中帮助我们分类我们的hierarchy窗口
我们在AssetsStore商城当中下载到这款免费的插件可以帮助我们把hierarchy窗口变得更好看一些可以更直观的看到这些都是怎样的分类 添加后点击在unity当中打开也可以在unity--package manage--MyAssets来下载所有的资源和插件
Download--import然后就可以看出我们接下来要导入什么内容了
只选择需要的内容就可以了不需要导入样例Scene场景取消勾选其他内容导入import 点击打开M Studio下边的子文件夹Color Palette在这里面我们就有各种各样的颜色和关键词的设置了
例如打上“///”就可以显示背景为蓝色 点击Player在他的名字前加“///”修改好之后如果没有立即改变可以先点击一些播放的按钮就可以产生变化同样也可以选中字体的对齐方式 **************************************************************************************************************
接下来来实现UI系统
我们希望在我们Scene的左上角可以显示人物的血量和头像
我们在hierarchy窗口中来创建一下我们的UI
在空白位置按鼠标右键添加UI--Canvas画布然后他会自动帮我们创建一个Event System这个EventSystem非常重要只有有了EventSystem所有的屏幕的点击按钮滑动条这些才能够被识别到才能够进行点按和滑动如果没有这个东西所有的UI都失效了 选中这个EventSystem也可以在右侧看到由于我们现在使用的是全新的input System我们需要把它替换一下点击Replace With InputSystem现在我们就成功替换了 目前他默认的使用的是ActionAsset是我们的inputSystem自带的我们可以点击右侧的选择标识
找到我们自己创建的PlayerInputControl这样我们就成功的把下面的所有的这些选项点击移动等等都切换到我们自己创建的那个input action当中
之前我们在inputaction当中也创建了对应UI的这些按钮稍后我们来进行绑定
默认的UI的确认功能可以使用键盘的Enter
任何的键我们都可以来设置一个指定的键
EventSystem设置好了之后就放在这里不动了
接下来我们来看Canvas画布我们在Scene的场景中来看一下选中Canvas按住键盘上的F键锁定Canvas可以看到Canvas的左下角是我们的场景
Canvas非常的大因为Canvas是覆盖我们整个屏幕画面的可以看到右侧的Canvas的Render Mode是Screen Space-Overlay也就是整个屏幕是多大Canvas就有多大它可以完全覆盖整个屏幕也就是他跟我们的场景是完全分离的这一点就不用担心在不同的设备上有不同的效果了我们能保证在所有的设备上都能满屏的填充我们的整个的画布
还有一个选项我们要注意就是Canvas Scale里边可以调整他现在的比例是采用什么样的模式我们在下拉菜单当中可以选择Scale With SCreen Size根据我们实际游戏的画面分辨率来调整我们UI的布局 所以之前的视频有提示过在Game窗口当中尽量在左上角选择一个固定的画面比例这样方便参考制作UI以及其他的东西
比如我们选择一个1080我们可以在Reference Resolution里面输入1920*1080 然后他是按照怎样的比例有限排列呢在ScreenMatchMode当中我们可以选择同时符合他的高度或者符合他的宽度或者把它完全拉伸在此处我们选择Match Width Or Height。
Match设置为0.5这个的作用有些同学使用的是带鱼屏带鱼屏的宽度会非常的宽比如说2560所以如果希望优先考虑宽度就拉到左边优先考虑高度就拉到右边如果去0.5他会综合一下长和高然后取一个中间值 另外这个ReferePixelPerUnit图片画面像素比例所引用的像素比例我们所有的图片像素都是16所以我们输入16就好了 目前还没有什么效果接下来我们一起来创建一下首先在Hierarchy窗口中Canvas下创建一个UI--image创建了一个图片
可以看到他在我们的Scene窗口中显示出来一个白色的方块默认是方形 我们看一下Scene的场景然后我可以按照设置他的锚点位置来确定他跟随的点我们看一下Inspector窗口我们可以看到他的transform类型是Rect Transform然后他有middlecanter这些点以及Anchorspivot 我们点击之后其实就是一个Anchor Presets我们以什么位置作为他的锚点预制比如说以左上角作为可以看到左上角出现了很多的箭头也就代表我现在这个方块的位置是以左上角为基准点以他为锚点位置相对的位移。 这样的好处就是无论我们的画面切换成怎样的比例切换一个不一样的比例就会产生相对的位移因为它是基于左上角这个位置进行的变化所以这个锚点预制方便我们在不同的设备不同的画面当中获得相同的位置 我们在RectTransform当中也可以按住Alt键这时候我们可以看到画面有一些变化意思是我要把这个方块拖拽到那个位置再按住Shift键我们就可以把它定位到那个位置 然后我们可以拖拽这个image按键盘的W拖拽一个相对的位置我们就可以看到它大概在哪了 然后我们在这个游戏当中所以使用的UI的图片都在我们的Art Assets然后找到地图的文件夹下的HUD--Base-UI在这里我们同样要进行一些切割我们来简单设置一下这个图片
设置好之后打开图片我们可以看到这里面有非常多的UI按钮滑动条选择我们的血量框我们选择绿色的血量背景填充一个红色的血量一个渐变的效果
先来切割图片Slice选择自动切割 因为自动切割他不可能很精准的判断到每一个位置我们需要手动的来调整一下
适当改一下名字方便我们查找
红色和绿色血条也调整一下
小一点的框一会我们会制作人物滑铲的时候用作他的power能量条能量条会衰减然后随着时间慢慢增长能量条我们用黄色的如果自动切割没有识别出图片可以按鼠标画一下就可以识别出来了同样修改一下名字 目前我们暂时有了这些条保存如果有需要可以重新进行调整。
因为是切割的但是我们不会用Till map的方式来进行添加我们是直接使用下面的图片可以将其中任何一种图片拖拽进去。
选择我们的image在选择窗口中Source Image我们可以搜索一下首先我们想添加一个Frame选择healthFrame
当前添加进去的图片是按照我们方块的比例来显示的想要按照原始比例我们可以选择下面的一个按钮SetNativeSize这样就还原了图片最原始的比例
当前在UI窗口当中它显示的非常小我们可以适当的调整一下它的大小把它拉的大一点然后在Game窗口中我们也可以参考一下它的大小适当进行调整 接下来我可以把它直接原地复制出来每一个改一下名字
我们新创建的image现在绿色的血量条
出现问题新创建的血量条遮盖住了血量框hierarchy窗口的叠层关系下面的覆盖上面的调整一下它的顺序这样我们的条就可以反向覆盖了
适当调整一下绿色条的大小同时改个名字
调整了之后我们需要手动的去关注一下它的整体位置让他能够填充在当中这样的方式很容易有误差所以我们要精准的调整一下它的坐标将Frame定好了之后我们就可以对应的修改中间的填充部分首先我们要确定它的坐标位置在Game窗口可以逐一的去调整
这样我们就做好了这个血量条
这个血量条位置我们希望它作为一个内容的填充所以我们怎样实现这个填充效果呢。就是随着我们血量的减少它也跟着减少
我们选中我们填充的这个Green图片在image这个组件下方我们选择imageType下拉菜单当中选择Filled填充方式默认当前360度转圈的填充
更改一下模式把360度转圈填充改为Horizontal横向填充
可以拉动下方的滑动条可以看到当前可以从右往左的显示出来了 另外我们将HealthFillGreen复制一个出来命名为HealthFillRed显示红色放到最上方要设置一个红色渐变的效果一旦受伤的话绿色的快速减少后边有个红色的跟他有有一个时间的位移差这样的话会有一个渐变的效果
在减血时大概是这样的一个效果。一旦受伤了绿色先减掉然后红色快速跟上稍后在代码当中继续实现这个功能以上就是在我们左上角与Health有关的内容
我们将以上图片全选按鼠标右键我们给他创建一个空的parentcreate empty parent方便我们来管理起名叫做Health Bar有了一个父类之后我们就可以很方便的去拖拽他调整他的位置
我们也可以相对应调整一下HealthBar的位置 接下来选中Bar中的所有内容我们把它放到中间
然后再按W键可以调整它具体的所在位置这样可以统一来安排他在一个框当中可以看一下血量框在Game窗口差不多的位置我们尽量把它取整 接下来我们还需要用同样的方法来制作一下下面的能量条
可以原地复制一个HealthBar出来更改一下名字PowerBar调整一下位移修改一下图片和填充颜色把红色的条删掉 我们也可以整体修改一下这个能量框的大小根据大小自己修改一下
拖拽的时候按住Alt键可以以中心点为基点左右放大就好了 接下来我们来制作一下人物的头像框
再来查看一下头像框的图片
我们选择这个棕色的方块作为头像框修改一下名字。
记得点击Apply
给我们的Canvas改一个名字//MAINCANVAS
在MAINCANVAS下再添加一个image起名为Face Frame 选中之后设置成我们刚才改好名字的图片
调整一下它的位置设置以左上角为基准点 我们将血量条能量条头像框整体都选中再次为他们创建一个父类的空物体叫做Player Stat Bar方便进行管理所有跟他的状态有关的 把父类的锚点设置为左上角
血量条能量条头像框整体都选中再次调整一下他们的位置
接下来我们要来做一个人物的头像
我们的图片素材当中并没有人物头像我们要来学习一个方法用切割的方式来获得一个头像首先我们在Face Frame当中创建一个空的imgae叫做Cut
我们保留这个空的白色的框在Cut下再创建一个image起名为Face
Face这张图片我们找到人物的图片找一个Idle的状态然后我们调整一下他的大小只保留一个头像的位置
然后我们选择上一层的Cut在他的身上我们来添加一个组件叫做Mask
可以看到现在我们就成功切割了一个图片出来
但是背景当中仍然有白色的部分我们取消勾选Cut当中的Show Mask Graphic
这样我们就获得了人物的头像我们可以适当的调整一下头像的位置
这样我们就成功做好了头像框血条能量条
后面我们会调用FillAmount来调整里面的填充内容之后要创造代码来进行设置
