FairyGui

FairyGui


FairyGui初识

<p><strong>工具栏</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/6137ecf9a1a1688b40ddd619b65c809b" alt="" /> <strong>新建包( 如下图)</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/5194a238fe6f47a20ce02c35e8544288" alt="" /> 简介: 包是用于管理资源重要手段,通常我们把某个模块的资源(切图,效果图)放入该包中,包中再分类管理,包中常常再分 切图 效果图 组件 三个文件夹用于管理 (如下图),如果该模块 按钮很多,还可以再细分一个 按钮文件夹,模块复杂的还可以更加细粒化划分(如切图下 分地图 贸易 车马等文件夹方便管理),具体多细看个人,基本的 三个文件夹是规定需要的 注意: 每个项目都有一个公共资源文件夹(Common),该文件夹没有上个三个文件的规则,该文件夹用于存放公用的图片和组件,(公用:如某个X按钮多个地方用到 某个弹窗多个地方用到) <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/6ca580c89fc620cb997c26629e36b7f7" alt="" /> 切图 文件夹: 用于存放美术给的图片资源 效果图 文件夹:用于存放美术给的 效果图 图片资源 组件 文件夹:用于存放 在FairyGUI做好的组件存放(组件概念下面有) (如何导入资源:直接拉图过来过来就可)</p> <p><strong>新建组件</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/538f023175fc648d4960b7dc92c73391" alt="" /> 新建组件:一般只用于新建某个模块的主页面用到,后续的面板会通过转为组件功能生成(转为组件功能后续会说) 组件名: 新建出来的组件名称 大小:大小的数值需要根据游戏开发是按照哪个大小来设定的,一般横屏1920 1080,竖屏1080 1920, 实在不知道就问程序 创建位置:顾名思义,是创建出来的组件在哪</p> <p><strong>新建进度条</strong> ( 中间跳过了部分是因为基本用不到或者用其他方式创建比较方便) <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/98c69b61dffd8927badca128927dfc44" alt="" /></p> <p><strong>进度条高光制作:(初始的进度条是没有进度条的高光的</strong>) <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/d81a3e3af957ec20cb772519fa36778e" alt="" /></p> <p><strong>进度条检查:</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/fd6cf13ff9ed6835497e5d748d613362" alt="" /> <strong>滑动条的自作跟进度条同理(这里就不再细做了)</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/b6d574d09a7f6b3c3f80e3c67c072b6a" alt="" /></p> <p><strong>新建位图字体(何为位图字体:简单来说就是图片字体这些)</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/348222b5037efbf92ae10ed8193144ac" alt="" /> <strong>位图字体的制作</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/419227bdaec52f8b3ffbbc352288ffb4" alt="" /> (注意 4. 修改 号 字 双击)</p> <p><strong> 位图字体的应用:</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/570339581a7a70a0aa0ab62c16a38f7e" alt="" /></p> <p><strong>工具栏(创建都是先点一下这边的某个工具,箭头会变,再点击舞台即可)</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/62747cc57f4be99dd53d019c6a6b7d07" alt="" /></p> <p><strong>文本</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/2f3f2bead20e9637347bf02f2a4ffa5b" alt="" /> 上面 位图字体的时候介绍过了, 红框内的细节可以自己试着玩一下,顾名思义</p> <p><strong>输入文本</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/83e87b383700a3504a45a485e15c0286" alt="" /> 大致上于 2.1的文本一致,不一样的是 输入文本是支持点击输入的内容的,且多了一个设置为密码(密码输入内容变成*****),键盘弹出的类似</p> <p><strong>图形</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/01f251b2546b4c832c901005a0bffcd3" alt="" /> (遮罩后面会有)</p> <p><strong>List(列表)</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/2a2c779dc8d74e45b843869b8b495f38" alt="" /> <strong>列表的东西很多 一般列表用到的属性有</strong>: 列表布局 行数 列数 行距 列距 对齐(看项目需要) 溢出处理(一般是 某某滚动) 编辑列表数据 </p> <p><strong>列表Item的制作</strong> 把相应的图片 字体等 拖到 制作好表现 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/3bc43c1f5aad15271b5ebc3a733d481c" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/eb2db8126037f777cd11d79466ce7236" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/5a56c21fb26b6509f98b9133a6df999b" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/c5d17f61acbdb536df1b608af28d185b" alt="" /></p> <p><strong>特殊的列表 动态列表</strong> 动态列表的使用条件:Item数量过多(一两百个,或者可以无限生成,类似排行榜功能),但是这是对于程序而言,对于UI方面,把Item拖到项目资源即可 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/fa7fcaa0dc879b5638b62bed171f75db" alt="" /></p> <p><strong>装载器</strong> 装载器:装载器用于某个图片需要变换的,比如头像可以更换 技能框可以更换 这些地方 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/30a397f154f0dfb531a9b1cfebcb8f1b" alt="" /> <strong>填充方式根据需要选择,得美术提供图片了,可以自行测试一下效果</strong></p> <p><strong>组合</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/f29fdd7dd1d9be19cc7cbabf9f4878c4" alt="" /> <strong>注意:</strong> 普通组于高级组的区别 普通组是发布的时候是不带进去的 高级组是真正在其上行程一个空节点进行管理</p> <p><strong>按钮的制作</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/26020c0b7bf1986fb2cc14d8b7ae4ff1" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/0484dd02bfe6f75e4628e45389195c34" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/7c31efbc065ed81841e78e201a5c52ff" alt="" /></p> <p><strong>动效(动画)</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/f5e6e5ae8f1191c4929abb0981bba6fa" alt="" /></p> <p><strong> Tween :勾选Tween 会添加过度效果,而不会出现 移动闪现</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/ed23c8e70dfae4a61c871c0558f753a2" alt="" /></p> <p><strong>控制器(控制器可以控制物体在某个状态下显示于隐藏,如 男女显示按钮的使用)</strong> 创建控制器 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/42763dd500b1122c6f016c2f06b252b2" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/d83435022fc3b38fa6a3e38043e2c778" alt="" /></p> <p>当第一个星星选择 属性控制 c1 为1时, 因为当前c1的状态是0,所以该星星会消失</p> <p><strong> 导出设置:</strong> 把需要组件或者图片等(注意:只有组件或者需要在程序加载的图片需要设置) ,设置为导出,设置为导出 会有小红点的存在,没有设置为导出的,发布包时该资源是不会被发布的(效果图切记不用设置为导出),别的包的资源不设置为导出也用不了</p> <p><img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/4509db78b907c83e7eabd22cbb76acde" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/6393602dee41a2b68b33a822f9cbd091" alt="" /></p> <p><strong>制作技巧</strong> 当我们制作某个页面的时候,点击组件空白处,把效果图拖入到 设计图的资源里,该资源是不会附带导出的,只是方便于制作参照,还可以调节透明度 偏移等 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/a440f4aa210ad410c81db9ac42ea2e22" alt="" /></p> <p><strong>渲染顺序:自上而下 ,意思就是上面的会被下面的遮挡住</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/021824026403ab9778a31f1f8f02060d" alt="" /></p> <p><strong>测试(浏览效果)</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/f040d9c0e5308d373cf1071c2753492e" alt="" /> 还可以测试适配 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/94c68a006adce3a399edd7446509e7c5" alt="" /></p> <p><strong>显示与锁定</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/fceb8efd87a848e5bb22a02fedb45914" alt="" /> 显示与影藏 顾名思义 锁定:选择锁定 该组件不会被点击到,适用于自制叠加的组件时使用 最上面的 是全部显示或影藏 锁定于取消锁定</p> <p><strong>适配:关联系统</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/e24ed1ee171dd0930530c6b1d4d5d1e4" alt="" /> 关联可以选择对 容器(容器就是本身所在的根组件) 对其他元件:可以选择舞台中其他的组件进行关联 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/82a460e1e20ac9db75ab77f0206fbbf4" alt="" /></p> <p>根据组件来选择关系: 如: <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/06bfe64b13b5aa848a2b3556c8a4e9e3" alt="" /> 左左 进度条左边会保持跟列表左边固定这个间距 带%的 可以自行进行效果测试</p> <p><strong>弹窗适配</strong> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/7a15a95878863b73fa014cc26f2e1383" alt="" /> 如果组件是弹窗,那不必要设置关联适配,让程序做适配,但需要设置 <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/9e793fec53f2cbdff19c27fb72ce5dcc" alt="" /> <img src="https://www.showdoc.com.cn/server/api/attachment/visitfile/sign/c12eb91239ca48366b50b7d10b34e0c1" alt="" /></p> <p>相关学习资料:<a href="http://www.sikiedu.com/course/139">http://www.sikiedu.com/course/139</a> 视频教学 一看就会 <a href="https://www.fairygui.com/docs/editor">https://www.fairygui.com/docs/editor</a> 详细资料</p>

页面列表

ITEM_HTML