关于编辑器:Cocos-Creator3D制作可任意拉伸的-UI-图像

27次阅读

共计 1019 个字符,预计需要花费 3 分钟才能阅读完成。

举荐:将 NSDT 场景编辑器退出你的 3D 工具链
3D 工具集:NSDT 简石数字孪生制作

https://www.mvrlink.com/cocos-creator3d-use-sliced-sprite-to-…

可任意拉伸的 UI 图像 UI 系统核心的设计准则是可能主动适应各种不同的设施屏幕尺寸,因而咱们在制作 UI 时须要正确设置每个控件元素的尺寸(size),并且让每个控件元素的尺寸可能依据设施屏幕的尺寸进行主动的拉伸适配。为了实现这一点,就须要应用九宫格格局的图像来渲染这些元素。这样即便应用很小的原始图片也能生成笼罩整个屏幕的背景图像,一方面节约游戏包体空间,另一方面可能灵便适配不同的排版须要。

上图左边为原始贴图大小的显示,右边是抉择 Sliced 模式并放大 size 属性后的显示成果。编辑图像资源的九宫格切分要应用能够有限放大的九宫格图像成果,咱们须要先对图像资源进行九宫格切分。首先关上 Sprite 编辑器,在 资源管理器 中选中图像资源,而后点击 属性查看器 最上面的 编辑 按钮。如果您的窗口高度不够,可能须要向下滚动 属性查看器 能力看到上面的按钮。关上 Sprite 编辑器 当前,能够看到图像四周有一圈绿色的线条,示意以后九宫格分割线的地位。将鼠标挪动到分割线上,能够看到光标形态扭转了,这时候就能够按下并拖拽鼠标来更改分割线的地位。咱们别离拖动上下左右四条分割线,将图像切分成九宫格,九个区域在 Sprite 尺寸(size)变动时会利用不同的缩放策略,见下图:

而下图中形容了不同区域缩放时的示意(图片来自 Yannick Loriot 的博客):

实现切分后别忘记点击 Sprite 编辑器 右上角的绿色对勾来保留对资源的批改。设置 Sprite 组件应用 Sliced 模式筹备好九宫格切分的资源后,就能够批改 Sprite 的显示模式并通过批改 size 来制作可任意指定尺寸的 UI 元素了。首先选中场景中的 Sprite 节点,将 Sprite 的 Type 属性设为 Sliced。而后通过 矩形变换工具 拖拽控制点使节点的 size 属性变大。您也能够间接在 属性查看器 中输出数值来批改 size 属性。如果图像资源是用九宫格的模式生产的,那么不论 Sprite 如何放大,都不会产生含糊或变形。注意事项在应用 矩形变换工具 或间接批改 Sliced Sprite 的 size 属性时,留神 size 的属性值不能为正数,否则不能以 Sliced 模式失常显示。

正文完
 0