Cocos Creator3D:制作可任意拉伸的 UI 图像

这篇具有很好参考价值的文章主要介绍了Cocos Creator3D:制作可任意拉伸的 UI 图像。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

Cocos Creator3D:制作可任意拉伸的 UI 图像,3d,ui

推荐:将 NSDT场景编辑器 加入你的3D工具链
3D工具集: NSDT简石数字孪生

制作可任意拉伸的 UI 图像

UI 系统核心的设计原则是能够自动适应各种不同的设备屏幕尺寸,因此我们在制作 UI 时需要正确设置每个控件元素的尺寸(size),并且让每个控件元素的尺寸能够根据设备屏幕的尺寸进行自动的拉伸适配。为了实现这一点,就需要使用九宫格格式的图像来渲染这些元素。这样即使使用很小的原始图片也能生成覆盖整个屏幕的背景图像,一方面节约游戏包体空间,另一方面能够灵活适配不同的排版需要。

Cocos Creator3D:制作可任意拉伸的 UI 图像,3d,ui

上图右边为原始贴图大小的显示,左边是选择 Sliced 模式并放大 size 属性后的显示效果。

编辑图像资源的九宫格切分

要使用可以无限放大的九宫格图像效果,我们需要先对图像资源进行九宫格切分。首先打开 Sprite 编辑器,在 资源管理器 中选中图像资源,然后点击 属性检查器 最下面的 编辑 按钮。如果您的窗口高度不够,可能需要向下滚动 属性检查器 才能看到下面的按钮。

打开 Sprite 编辑器 以后,可以看到图像周围有一圈绿色的线条,表示当前九宫格分割线的位置。将鼠标移动到分割线上,可以看到光标形状改变了,这时候就可以按下并拖拽鼠标来更改分割线的位置。

我们分别拖动上下左右四条分割线,将图像切分成九宫格,九个区域在 Sprite 尺寸(size)变化时会应用不同的缩放策略,见下图:

Cocos Creator3D:制作可任意拉伸的 UI 图像,3d,ui

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

Cocos Creator3D:制作可任意拉伸的 UI 图像,3d,ui

完成切分后别忘记点击 Sprite 编辑器 右上角的绿色对勾来保存对资源的修改。

设置 Sprite 组件使用 Sliced 模式

准备好九宫格切分的资源后,就可以修改 Sprite 的显示模式并通过修改 size 来制作可任意指定尺寸的 UI 元素了。

  1. 首先选中场景中的 Sprite 节点,将 Sprite 的 Type 属性设为 Sliced
  2. 然后通过 矩形变换工具 拖拽控制点使节点的 size 属性变大。您也可以直接在 属性检查器 中输入数值来修改 size 属性。如果图像资源是用九宫格的形式生产的,那么不管 Sprite 如何放大,都不会产生模糊或变形。

注意事项

在使用 矩形变换工具 或直接修改 Sliced Sprite 的 size 属性时,注意 size 的属性值不能为负数,否则不能以 Sliced 模式正常显示。文章来源地址https://www.toymoban.com/news/detail-536305.html

到了这里,关于Cocos Creator3D:制作可任意拉伸的 UI 图像的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 进击3D游戏界!Cocos Creator快速实现骨骼动画交互!

    最近公司需要转型,方向为 元宇宙 , AI , 数字人 , 区块链 等方向,博主为了跟上时代的步伐 为我们 伟大的公司 献出我的能力 (广告费5毛一条,公司财务看到麻烦转我一下) 便对 Web3.0 以及 3D可视化 这些前沿技术进行了研究,主要的研究方向为 VR (已概览技术栈有three.js,thing.js,Coc

    2024年02月13日
    浏览(97)
  • cocos creator新手教程:第003节3D模型的基本概念

    3.1 计算机如何制作一个3D模型 讲述这个问题之前,我们先来看下现实生活中我们要做一个模型,应该如何做呢?首先我们要把模型的形状给雕刻构建出来,现实生活中的物体都是由分子组成的连续的表面,计算机是离散的无法做到这点,所以计算机通过微分的方式,把一个曲

    2024年02月03日
    浏览(40)
  • Cocos Creator问题汇总

    [Window] Cannot read property ‘cameraPriority’ of null node.on(Node.EventType.TOUCH_END, this.onBlockClicked, this); 解决 :监听的时候,node节点上必须有UITransform组件 Camera priority error - Cocos Creator - Cocos Forums 新建的prefab在运行的时候ui不显示,只能看到按钮上的label文本内容。 解决 :检查是否有C

    2024年02月13日
    浏览(38)
  • Cocos Creator:AR 交互

    推荐:将 NSDT场景编辑器

    2024年02月09日
    浏览(69)
  • FariyGUI × Cocos Creator 入门

    程序员向的初探Cocos Creator结和FairyGUI的使用,会比较偏向FairyGUI一点,默认各位读者都熟练掌握Cocos Creator以及js/ts脚本编写。 初探门径,欢迎大佬指教,欢迎在评论区或私信与本人交流,谢谢! 都不需要科学上网,非常友好。 下载fgui:https://www.fairygui.com/ 下载Cocos Creator并安

    2024年02月22日
    浏览(44)
  • cocos creator 鼠标画笔|画线

    cocos creator 版本使用 至少适配版本2.3.2以上 案例: 简要思路:MOUSE_MOVE事件和Graphics组件实现 前端也可以通过canvas和mousemove事件实现,原理一致 具体步骤如下: 1.添加节点Node 2.在Node节点上绑定 组件Graphics 3.添加下方脚本drawcontroll.ts 4.注意Node节点的锚点和位置(如果不想要这个

    2024年02月11日
    浏览(42)
  • cocos creator踩坑记录

    cocos creator踩坑记录 removeFromParent 和removeAllChildren cocos2dx直接从父节点移除并回收内存 creator 则只是从父节点移除,回收内存则需要使用destory,creator 使用destroy并不会立即在父节点中移除该节点,会延后执行。 官方文档地址 模拟器 Android APP点击EditBox报错 Function: JSB_showInputBo

    2024年02月15日
    浏览(40)
  • Cocos Creator 使用protobufjs

    在使用cocos creator开发微信小程序的时候,服务器是使用的skynet,服务器与前端的通讯想使用protobuf,网上有文档,但不多,经过一天的奋斗,终于是让cocos creator能够使用protobuf 官网文档参考: https://www.npmjs.com/package/protobufjs https://docs.cocos.com/creator/3.5/manual/zh/scripting/modules/example.html p

    2024年02月05日
    浏览(49)
  • cocos creator 学习第一篇

    unity 编程语言主要为c# 早期cocos2d 等用c++ 或者lua cocos creator 编程语言主要为js 所以cocos 适合h5 小游戏,而且跨平台性更好,unity性能可能更好 cocos creator简介 cocos2d-python cocos 1.x 2d cocos 2.x 也是2d 为了不影响2d版本,单独出了3d版本,只有一个版本 cocos 3.x 在cocos 3d基础上 又将2d加

    2024年02月04日
    浏览(41)
  • cocos creator 节点的镜像反转

    自己在做横版小游戏的时候,想左右运动时精灵图直接旋转,但是一直搞不懂那个旋转,后面才发现2d情况下,旋转时没有z轴,就只能是原地转圈上下颠倒,而想要镜像反转的话就需要开启3d模式了 如果是在编辑器上的话直接点击左上角最右边的3D按钮就行了 如果是想在代码

    2024年02月12日
    浏览(62)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包