Cocos 引擎 UI 全新升级：进一步提升编辑器体验

最新推荐文章于 2024-03-30 11:52:01 发布
最新推荐文章于 2024-03-30 11:52:01 发布
阅读量241 收藏
点赞数
Cocos Creator 3D 全面公测已有一段时间，距离正式发布已经不远了。 为了迎接即将发布的 Cocos Creator 3D，我们对 Cocos Creator 的图标进行了全新升级，力求在满足多元化需求的同时，保持 Cocos 品牌的统一性。 为了进一步提升产品的视觉体验，我们对   Cocos Creator 编辑器 UI 也进行了诸多改进。
新图标
Cocos Creator 新版本的 图标 是在原版 图标 的基础上升级而来，设计团队保留了大部分的视觉元素，在玻璃质感的基础上添加了一层细细的金属质感，从而呈现出更加精致、成熟的感觉，立体感也得到了大幅提升，这象征着 Cocos Creator 在3D 领域的发展变化。

640?wx_fmt=png

值得注意的是，Cocos Creator 3D 的图标是 Cocos Creator 图标的变体：浅色底的是 Cocos Creator，深色底的是 Cocos Creator 3D。在保持品牌视觉统一的基础上，降低了认知门槛，方便大家区分两款产品，提升产品辨识度。
新编辑器 UI
Cocos Creator v2.2.0 正在论坛进行公测，待版本稳定后正式发布。 新版本除了会启用新版图标之外，还将启用了新的编辑器 UI，新编辑器 UI 进行了众多改进，在视觉体验上会更加协调。

640?wx_fmt=jpeg
>> 输入控件： 优化了各种输入控件的样式：

640?wx_fmt=png
>> 属性检查器： 我们为属性检查器加入了宽度调整功能，用以解决在某些组件上属性名显示不全的问题。 现在用户无需大幅调整整个面板的尺寸，只需要拖动属性名右侧的分割线就可以自由调节分割比例。

640?wx_fmt=gif
640?wx_fmt=gif

>> Spin Button：我们改良了输入框的 Spin Button，使其可以自动隐藏，这样可以更好地展示 3D 坐标。

640?wx_fmt=gif
 
新的 UI 字体
在包含大量文字的 Cocos Creator 编辑器中，文字的精准呈现举足轻重。 要在 Windows 和 Mac 上获得可靠一致的体验是一项艰难的挑战，因为不同的操作系统解析渲染字体的方式并不一样。

为了 确保优良的视觉效果，我们在 2.2 中升级了编辑器所用的字体，并且对文本样式进行了细心打磨，使得新的字体能够在 Windows 和 Mac 上获得更加一致和精准的定位。

由于 Cocos Creator 有大量的国内用户，我们还对中文显示进行了重点支持。相比其它字体，新的 UI 字体能够满足纯中文和中英文混排的需要，确保文本效果始终出色。

设计理念

此 次改版延续了 Cocos Creator 从 1.10 以来的进化方向，我们的设计理念是：

>> 高级感： 我们希望为用户提供一流的编辑器使用体验，给人精致、高端的感觉，与行业标准保持一致。
>> 时尚感： Cocos Creator 是一款 2014 年就立项的产品，我们希望它的 UI 风格能够与时俱进，与主流的桌面和移动操作系统保持协调，符合设计师的审美需求。

>> 节约屏幕空间： 由于使用 Cocos Creator 制作的大型项目越来越多，特别是 3D 开发者不断增加，我们需要为越来越复杂的使用场景优化屏幕空间，让编辑器能展示更大的可视化区域，方便用户同时编辑更多的参数。

>> 减少视觉干扰： 作为用户每天都会频繁使用的生产工具，我们希望用户能够把宝贵的精力投入到内容创作上，而不用过于关注编辑器本身。因此我们认为“最理想的设计就是没有设计”，我们逐步去除了过于风格化的设计元素，打破了 Cocos Creator 和其它生产工具之间的藩篱，让用户能在多任务切换的过程中更加放松、专注。

实际上 Cocos Creator 此前多个版本，都朝着以上目标逐步优化着，下面是两个例子，你能找出它们的变化吗？

>> 标签栏设计演变：

640?wx_fmt=png
>> 工具栏设计演变：

640?wx_fmt=png
小结
自 2016 年正式发布以来，Cocos Creator 已快速成长为世界瞩目的内容创作工具，拥有大量不同行业的用户群体。 作为一款强大的生产工具，保持优良的用户体验大于一切。 在今后的发展中，我们会继续将重心从推出新功能转移到改善现有功能，优化核心交互和工作流程。

本文中所介绍的 UX 改进成果，是 Cocos 各个团队齐心协力的结果，包括：编辑器团队、UX 团队、产品团队、品牌部门和 QA 团队。如果你对 Cocos Creator 的设计有任何反馈意见，欢迎留言，感谢！

640?wx_fmt=png

640?wx_fmt=jpeg

640?
640?wx_fmt=png

Creator星球游戏开发社区

长按二维码，关注我们！

我就知道你“在看”640?wx_fmt=png
晓衡的成长日记
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
cocos2dx ui编辑器生成界面的管理
后大学时代学习笔记
03-18 3929
说这个问题之前，先说不用各种UI编辑器的时候，开发一个界面的样子。         比如我们要做这样一个界面（图片素材来自百度图片，侵权不怪我。。。）         我们应该肿么处理这个界面，为了代码好看，可以复用等原因，显然是应该分层分组件，就像这样。         然后我们开始编辑代码，分3个layer，每个layer里面加各种按钮，写上各种触发函数。然后其他地方要用，只需要
thinknode:基于 createjs 和 cocos2d 的游戏UI编辑器
06-25
thinknode html5 animation and game 基于 createjs 和 cocos2d 的游戏/UI编辑器
Cocos2d-x-UIEditor
05-01
使用cocos2d-x编写的ui编辑器（界面编辑器），实现了ui的可视化编辑，支持sprite、button、label、scale9sprite等等，导出配置文件格式为json格式-Cocos2d-x prepared ui interface editor, ui visual editing support sprite, button, label, scale9sprite export configuration file format json format
cocoStudio UI编辑器 学习总结
dianxixian1343的博客
12-03 201
一、控件 控件基类 UIWidget：所有UI控件的基类 addChild：添加UIWidget类型的节点 addRenderer：添加CCNode类型的节点 所有UIWidget，都可以设置成触摸setTouchEnable(true) setTouchEnable(true) addTouchEventListener(CCObject* tar...
8、Cocos Creator UI 组件（一）
最新发布
qq_38248841的博客
03-30 107
1。
Cocos2d-x3.0游戏实例之《别救我》第五篇——使用Cocostudio UI编辑器创建操作界面
热门推荐
笨木头
05-06 2万+
这一篇内容其实很简单，已经对Cocostudio比较熟悉的朋友就可以随便扫一下了~（小若：熟悉Cocostudio的人谁还有空看你的基础教程呢）
cocos下的UI编辑器--BoomEditor使用教程（3）--动画编辑模式
weixin_30748995的博客
09-06 129
BoomEditor是支持动画模式的，支持多个动画，可以选择手动播放，自动播放，自动循环播放 首先打开编辑器，打开SampleProject，打开任意bui文件，我们以bui/room/Room.bui为例，打开后，选择project->AnimView，控制台面板就变成了动画编辑面板，如图 其实，这个动画编辑器面板是cocos实现的一个html5界面，其界面本身也是由Boom...
FairyGUI-cocoscreator:Cocos Creator 的灵活 UI 框架
07-24
FairyGUI-cocoscreator A flexible UI framework for Cocos Creator, working with the FREE professional Game UI Editor: FairyGUI Editor. ...UIProject UI 工程,可以FairyGUI编辑器打开 获取fair
cocosUI.zip
04-14
主要是测试cocosStdio这款编辑器中的各个UI控件，在UI编辑器中编辑，在代码中实现。demo里面还有对序列帧动画和骨骼动画的测试~
cocos2d-x开发自己的编辑器
12-31
《使用cocos2d-x开发各种编辑器》文章里的DEMO源码
CCSceneMenu:为 Cocos Creator 场景编辑器添加上下文菜单
08-04
Cocos Creator场景编辑器右键菜单插件 原帖地址: 背景 Cocos Creator的场景编辑器没有自带的右键菜单，也不提供右键菜单的扩展方法（截止目前v2.2.2版）。关卡编辑时，如果将常用功能登记到右键菜单内，可以避免在主...
CocoStudio(cocos2dx编辑器，集合动作，UI，等）
04-16
About CocoStudio is a game development tool kit based on Cocos2d-x. It breaks down tasks in game development into different roles, it includes: UI editor for UI graphic artists, Animation editor for graphic artists, Number cruncher for game data designers, Scene editor for game designers CocoStudio forms a complete game development solution. The UI editor The UI was designed to serve its only purpose: create UI for games. Its simple and intuitive interface allows graphic artists to focus on their expertise, without worrying about other aspects such as programming. Currently the UI editor has 12 different UI elements ready to be used in games, new UI elements will be added with each and every release of CocoStudio, Other key features that the UI editor supports are: Texture packaging - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. Multi-resolution adaption - Automatically adapts to multiple resolution sizes with relative UI positioning. Templating - Reuse the same UI layout across different games, swap out texture resources to give it a new look. The Animation editor The Animation editor was designed to feel like Adobe Flash, which makes graphic artists feel right at home. The Animation editor brings skeletal animation to Cocos2d-x. What advantage does skeletal animation holds against the traditional frame animation? Lower memory consumption - An animation with the traditional frame based solution could use dozens of individual textures, but with skeletal animation, only 1 set of body parts is required to make infinite number of different animations. Smaller file size - due to less number of assets. Animation blending - you can combine animations together to easily make new animation, for example, you could blend attacking animation with walk animation to create "attacking while walking animation". Animation reuse - you can share skeletal animations with another character with the same skeleton setup. Smooth interpolation - traditional frame based animation is very choppy especially in slow motion. Skeletal animation interpolates between 2 sets of key frames, so animation is always played at the same frame rate as the game. However Skeletal animation cannot replace the traditional frame based animation, for example, it cannot make isometric character, it cannot make explosion, that is why we did not forget frame based animation, we even made it better and simpler. You only have to drag and drop frame sequences to the work space, and the animation editor will automatically creates the frame animation for you. Other highlight of Animation editor includes: WYSIWYG collision box editing - editing collision box in wysiwyg way has never being easier and accurate. Reference point - enables characters to wield swords, mount horses, and attaching other objects easily. Texture packing - Automatically packs individual texture files into a single large sprite, which further saves memory and improves game performance. The Data Cruncher The data Cruncher imports excel tables and converts the data into a format readable by cocos2d-x, which can also be used as a component for the Scene editor. The Scene editor The scene editor pieces all the assets made by the UI editor, Animation editor, and the Data Cruncher into a game scene, it can then simulate the game inside the editor. The scene editor also supports many assets made from third party editors such as particle designer, tiled etc. The scene editor relies on the CocosStudio Framework. CocoStudio Framework CocoStudio Framework is an open source higher level framework on top of Cocos2d-x, it employes entity and component system, it is used to read the data saved from the scene editor. The Scene editor saves data in a MVC like fashion, it includes all entities and events used in the current scene, and exports to corresponding code template for the programmers. A programmer can then write the code in Javascript to bring the game alive. CocoStudio的安装 1.CocoStudio的运行平台是Windows操作系统，推荐使用Windows7操作系统。 2.安装CocoStudio之前，确保电脑中安装了.Net 4.0 Framework 3.安装目录尽量不要在C盘的Program Files文件夹下，可能会导致启动器无法启动编辑器。当然，通过“以管理员身份运行”的方式也可以打开软件 4.在Xp和Windows8的操作系统下，可能会出现的闪屏或无法运行的问题。这个问题会尽快修复
【cocos2d-x 手游研发----界面UI设计】
weixin_34088838的博客
11-12 273
简单探讨一下如何在cocos2d-x的游戏引擎里面去制作各做交互UI界面，常见的UI如下： 人物头像，血条值，经验条，技能按钮，以及各种玩家交互的界面按钮：背包，人物属性，门派，等； 类似上面的图示交互UI，他们是悬浮于窗体上的。那么按照我现在做的层级架构就是这些UI操作，是不属于任何CCObject的，或者被继承的； 回到第一篇我对整个架构的分析，这些交互UI属于事件，和任务类型！对于...
Cocos Creator 3D v1.0 正式发布
奎特尔星球
10-16 268
从深耕开发技术到注重游戏生态，Cocos 始终坚持以前瞻性的眼光放眼未来，“逢山开路、遇水架桥”，走在需求的前面，主动寻求技术突破。随着 5G、云和智能化时代的到来，游戏...
Cocos Creator-2.UI系统
joyyi9的博客
12-14 1357
Cocos Creator-2.UI系统前言一、常用 UI 控件二、Canvas（画布）组件三、Widget (对齐挂件) 组件四、Button（按钮）组件1.案例1五、Layout 组件六、EditBox 组件七、RichText 组件八、ScrollView 组件（***）九、ScrollBar 组件十、ProgressBar 组件十一、Toggle 组件十二、ToggleContainer 组件十三、Slider 组件1.案例十四、PageView 组件1.案例总结 前言 我简直太爱Cocos的官.
cocos入门7：cocos creator 中的ui系统
weixin_36020178的博客
10-29 1895
cocos creator中的label、sprite、button
Cocos Creator教程 ——（二）UI系统介绍（上）
然后就去远行
10-23 2277
目录前言一、Sprite（精灵）二、Label（文字）三、Weight（对齐挂件）四、Layout（自动布局） 前言 这里会通过一个demo项目去介绍现在的UI系统有生产什么游戏的能力，以及在制作UI的过程中的各种实现细节；Cocos Creator实现了彻底的脚本化、组件化以及数据驱动的特点，还有一个好用的UI系统，现在我们看一个UI的demo；由于视频作者没有提供源代码素材，所以这里只能简单进行素材的替换并进行演示。所有的UI界面的生成都是由UI元素拼装而成，我们会这里会分别介绍Sprite精灵，Lab
Cocos 引擎最新里程碑，面向数据的可定制渲染管线
Cocos的博客
06-13 330
5 月 27 日至 28 日，为期两天的 2023 GOTC 全球开源技术峰会（以下简称“大会”）于上海举行，大会由开放原子开源基金会、 上海浦东软件园、Linux 基金会亚太区和开源中国联合发起，大会期间，与会者一起探讨元宇宙、安全、3D 引擎、eBPF、Web3.0、区块链等热门技术主题，以及开源治理、汽车软件、AIGC、AI 编程、开源教育培训、云原生等热门话题，共话开源未来，助力开源发展。...
Cocos Creator - 塞尔达的3D渲染风格，能在小游戏跑起来？
qq_14965517的博客
05-19 1097
塞尔达的3D渲染风格，能在小游戏跑起来？ 渲染系统作为游戏引擎的核心模块，是引擎画面表现力的天花板，直接决定了游戏所能输出给玩家的内容上限。Cocos Creator 3.x 的渲染系统，从架构到设计都是以面向未来、高性能、跨平台为目标，支持开发者制作出更加精致的游戏画面。新版本 Cocos Creator 3.1 已发布，欢迎大家前往下载体验！ 近日引擎渲染组使用 Cocos Creator 3.1，参考塞尔达/原神的吉卜力（Ghibli） 卡通渲染风格做了有趣的尝试，大家先看一段编辑器里的操作视频： [
cocos creator 中UI的显示顺序怎么调整，比如点击哪个哪个优先显示
05-25
在 Cocos Creator 中，UI 的显示顺序可以通过节点的 z 轴坐标来控制。z 轴坐标越大的节点会显示在 z 轴坐标较小的节点之上。因此，如果需要调整 UI 的显示顺序，可以通过修改节点的 z 轴坐标来实现。 具体来说，...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值