制作新的图片/文字

Mode 下面选择Toggle（单选框）toggle改大里面才能放进更大

add Toggle group component to Mode

只能有一个激活 所以把自由模式的toggle is on cancel

put toggle group in toggle

use toggle in clothes too

按键放大 全部拉升

可以在坐标上直接运算

UGUI 渲染顺序是按在canvas中由上zhi'xia

图片虚化

Toggle

锚点

UGUI有渲染顺序。

坦克那个是直接加的image。它根据order 

小黄人蛇

注意，UGUI的渲染顺序是层级面板的前后顺序，所以应该注意大面板与控制面板与文字的先后关系

 

1.为界面添加食物图片，添加Image，源图片添加食物图片，重复以上操作，添加所有食物图片

 

2.设计控制面板：

       技巧：先设计第一个，规范第一个大小，字体，样式后直接复制

                 锚点大小快捷设置可以将图片快捷填充到父对象大小

                 对多个游戏对象的同一属性赋同样的值，可以全选中在赋

 

 

     ·在控制面板下创建三个Text，分别为

------------------------

          “皮肤”：锚点四点控制面板上边中

             皮肤下创建一个toggle，改名Blue，锚点上边中，背景锚点大小全铺，对勾锚点左上角，位置左上，字体为“科技小蛇”

             在背景下创建几个Image，源文件拖入几个蛇的元素，组成一条蛇，舌头教徒转90

 

            复制粘贴Blue，创建另一条“小黄人蛇”

            设置单选框组

 

-------------------------

          “模式”：锚点四点控制面板左线中

             在模式下创建一个UI-Toggle单选框

             Label改变：Text“边界模式”，设置字体，字体颜色，为单选框的Label添加OutLine组件

              BackGround改变：改变大小，改到合适，锚点左边中，改变颜色透明度

              CheckMark摁住alt，在锚点大小快捷设置里alt摁最后一个，勾勾会填充到父对象大小

              复制边界模式，改名自由模式

              由于自由模式与边界模式的单选框是互斥的，在模式父对象下加一个组件ToggleGroup，表示两个单选框为一组

              将父对象Mode拖入 自由模式与边界模式的Toggle组件下的Group属性表示其为一组

              找到边界模式，将Toggle组件下InOn(取消激活)的钩去了

 

----------------------------------------

          “历史”：锚点四点控制面板下边中

                   在历史下设置两个子对象Text：

                   “上次：长度0，分数0”、

                   “最好，长度0，分数0”

                    锚点上边中

 

 

            （锚点快捷设置都是以父对象为基准）

 

 

 

在Bg里建一个Image,把Food文件中的icecream-01拖入Source Image ，调整宽、高均为80，透明度为175，重命名为Food1,重复上述把icecream-02到icecream-10的元素调整到画板各个位置

ControPanel建一个Text,输入皮肤，Font Style:Bold aND Italic Font Size:35 Width 200 Height:50 PosX:0 Pos Y-50,重命名Skin

ControPanel建一个Text,输入模式，Font Style:Bold aND Italic Font Size:35 Width 200 Height:50 PosX:150 Pos Y-50,重命名Mode

ControPanel建一个Text,输入分数，Font Style:Bold aND Italic Font Size:35 Width 200 Height:50 PosX:0 Pos Y165,重命名Score，在Score中建Text,输入“上次：长度0，分数：0”Width:250 Height:50 PosX:0 Pos Y-75,重命名为Last。复制粘贴Last,改名为Best,输入“最好：长度0，分数：0”Width:250 Height:50 PosX:0 Pos Y-125。

Mode中建Toggle,Width:200 Height:50 Left :55输入“边界模式”调为居中，Font Size:30 color:#FF5858FF,加Outline,Background调整Width：35 Height: 35 Pos X:30  Pos Y:0 color:#F89D9DC8 透明度：200，将BackGround重命名Border,复制粘贴重命名为NoBorder,将Border选中调节锚点位置Pos X:0 Pos Y:-85,NoBorder选中调节锚点位置Pos X:0 Pos Y:-150,输入“自由模式”，其BackGround的color:#97C599C8。

Mode里，挂主键Toggle Group,选中NoBorder,勾掉Is On,把Mode拖入Group。

在Skin中建Toggle,Width 280 Height:100 PosX:0 Pos Y-115,重命名：Blue,调节BackGround的锚点，颜色改为蓝色，Checkmark调整Right 50 Height:50 PosX:50 Pos Y-25 Label调整Right:0 Height:50 PosX:0 Pos Y-25,输入“科技小蛇”，Font Size:25.在BackGrond中建Image,将文件SnakePart中的sh01拖到Source Image，Rotion Z:90,Pos X:-100 PosY:-20,将Image复制粘贴，,Pos X:-65PosY:-20，再复制粘贴,Pos X:-30PosY:-20，再复制粘贴,Pos X:40PosY:-20，再复制粘贴,Pos X:75PosY:-20。把Blue复制粘贴，重命名为Yellow,重复上述步骤，输入“小黄人蛇”，拖入sh02,勾掉Is On。Skin上加Toggle Group,最后将Blue 和Yellow的Group设定。

 

建议1.5倍观看。

 

toggle:选择器

toggle group：互斥选择器组

UGUI渲染是按顺序渲染

透明度在颜色里面调

Toggle Group

• Toggle Group组件，使得只能单选
• 按照层级顺序渲染，因此背景首先渲染总要放在上面。

贪吃蛇大战