jjzjj

【CocosCreator入门】CocosCreator组件 | Sprite(精灵)组件

肩匣与橘 2023-07-01 原文

       Cocos Creator 是一款流行的游戏开发引擎,具有丰富的组件和工具,其中 Sprite 组件是最常用的之一。Sprite 组件用于渲染 2D 图像,并提供了许多可配置的选项,如图像纹理、尺寸、位置、旋转等。在本文中,我们将深入探讨 Sprite 组件的技术实现和使用方法。


目录

一、组件介绍

二、属性介绍 

三、渲染模式 

四、实现方式

五、使用方法


一、组件介绍

        Sprite 组件是 Cocos Creator 引擎中最重要的组件之一,它控制着 2D 图像的显示。Sprite 组件可以直接添加到场景中,也可以作为其他组件的子节点添加,例如 Canvas 组件或者 Layout 组件。

        每个 Sprite 组件都需要指定一个 SpriteFrame 对象,这个对象包含了 2D 图像的纹理和其他信息,例如图像的大小、偏移量、旋转中心等。一个 SpriteFrame 对象可以通过资源面板中的 Texture 资源创建,也可以通过代码动态创建。

        除此之外,Sprite 组件还有很多其他的属性可以配置,例如透明度、颜色、缩放比例、对齐方式等。这些属性可以通过编辑器界面或者代码来设置,以满足不同的需求。

二、属性介绍 

图示:

属性功能说明
AtlasSprite 显示图片资源所属的Atlas图集资源。(Atlas 后面的 选择 按钮,该功能暂时不可用,我们会尽快优化)
Sprite Frame渲染 Sprite 使用的 Sprite Frame图片资源
Type渲染模式,包括普通(Simple)、九宫格(Sliced)、平铺(Tiled)、填充(Filled)和网格(Mesh)渲染五种模式
Size Mode指定 Sprite 的尺寸, Trimmed 表示会使用原始图片资源裁剪透明像素后的尺寸, Raw 表示会使用原始图片未经裁剪的尺寸, Custom 表示会使用自定义尺寸。当用户手动修改过 Size 属性后,Size Mode 会被自动设置为 Custom,除非再次指定为前两种尺寸
Trim勾选后将在渲染时去除原始图像周围的透明像素区域,该项仅在 Type 设置为 Simple 时生效
Src Blend Factor当前图像混合模式
Dst Blend Factor背景图像混合模式,和上面的属性共同作用,可以将前景和背景 Sprite 用不同的方式混合渲染

三、渲染模式 

Sprite 组件支持五种渲染模式:

  • 普通模式(Simple):根据原始图片资源渲染 Sprite,一般在这个模式下我们不会手动修改节点的尺寸,来保证场景中显示的图像和美术人员生产的图片比例一致。
  • 九宫格模式(Sliced):图像将被分割成九宫格,并按照一定规则进行缩放以适应可随意设置的尺寸(size)。通常用于 UI 元素,或将可以无限放大而不影响图像质量的图片制作成九宫格图来节省游戏资源空间。详细信息请阅读 使用 Sprite 编辑器制作九宫格图像 一节。
  • 平铺模式(Tiled):图像将会根据 Sprite 的尺寸重复平铺显示。如果 SpriteFrame 包含 九宫格配置,平铺时将保持周围宽度不变,而其余部分重复。
  • 填充模式(Filled):根据原点和填充模式的设置,按照一定的方向和比例绘制原始图片的一部分。经常用于进度条的动态展示。
  • 网格模式(Mesh):必须使用 TexturePacker 4.x 以上版本并且设置 ploygon 算法打包出的 plist 文件才能够使用该模式。

四、实现方式

        Sprite 组件的实现依赖于底层的渲染引擎,Cocos Creator 引擎底层使用的是 OpenGL ES 技术,因此 Sprite 组件的渲染方式也是基于 OpenGL ES 的。

        在渲染一个 Sprite 组件时,引擎首先会将 SpriteFrame 对象中的纹理加载到显存中,并生成一个纹理 ID。然后,引擎会根据 Sprite 组件的属性来生成一个矩形区域,并将该区域映射到纹理坐标系中。最后,引擎会通过 OpenGL ES 的 API 来绘制这个矩形区域,从而实现 Sprite 组件的渲染效果。

五、使用方法

        使用 Sprite 组件非常简单,只需要将 Sprite 组件拖放到场景中即可。然后,可以通过编辑器界面或者代码来修改 Sprite 组件的属性。

        例如,如果要更改 Sprite 组件的纹理,可以通过资源管理器面板中的 Texture 资源进行操作。如果要更改 Sprite 组件的位置、旋转或者缩放比例,可以直接在编辑器界面中进行调整。如果要通过代码来修改 Sprite 组件的属性,则需要使用 Cocos Creator 提供的 API 进行操作。

        下面是一个示例代码,展示如何通过代码来创建并设置一个 Sprite 组件的属性:

// 创建一个 SpriteFrame 对象
let spriteFrame = new cc.SpriteFrame();
spriteFrame.setTexture(texture);

// 创建一个 Sprite 组件并设置属性
let sprite = node.addComponent(cc.Sprite);
sprite.spriteFrame = spriteFrame;
sprite.node.position = cc.v2(100, 100);
sprite.node.scale = 2.0;

        在这个示例中,我们首先创建了一个 SpriteFrame 对象,并将其设置为纹理资源。然后,我们创建了一个 Node 节点,并向其中添加了一个 Sprite 组件。最后,我们通过代码来设置了 Sprite 组件的属性,包括 SpriteFrame 对象、位置和缩放比例。 


        Sprite 组件是 Cocos Creator 引擎中最重要的组件之一,它用于渲染 2D 图像。Sprite 组件的实现基于底层的 OpenGL ES 技术,可以通过编辑器界面或者代码来修改其属性。使用 Sprite 组件非常简单,只需要将其拖放到场景中并设置好属性即可。

有关【CocosCreator入门】CocosCreator组件 | Sprite(精灵)组件的更多相关文章

  1. LC滤波器设计学习笔记(一)滤波电路入门 - 2

    目录前言滤波电路科普主要分类实际情况单位的概念常用评价参数函数型滤波器简单分析滤波电路构成低通滤波器RC低通滤波器RL低通滤波器高通滤波器RC高通滤波器RL高通滤波器部分摘自《LC滤波器设计与制作》,侵权删。前言最近需要学习放大电路和滤波电路,但是由于只在之前做音乐频谱分析仪的时候简单了解过一点点运放,所以也是相当从零开始学习了。滤波电路科普主要分类滤波器:主要是从不同频率的成分中提取出特定频率的信号。有源滤波器:由RC元件与运算放大器组成的滤波器。可滤除某一次或多次谐波,最普通易于采用的无源滤波器结构是将电感与电容串联,可对主要次谐波(3、5、7)构成低阻抗旁路。无源滤波器:无源滤波器,又称

  2. 微信小程序开发入门与实战(Behaviors使用) - 2

    @作者:SYFStrive @博客首页:HomePage📜:微信小程序📌:个人社区(欢迎大佬们加入)👉:社区链接🔗📌:觉得文章不错可以点点关注👉:专栏连接🔗💃:感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序(🔥)目录自定义组件-behaviors    1、什么是behaviors    2、behaviors的工作方式    3、创建behavior    4、导入并使用behavior    5、behavior中所有可用的节点    6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors    1、什么是behaviorsbehaviors是小程序中,用于实现

  3. 【Java入门】使用Java实现文件夹的遍历 - 2

    遍历文件夹我们通常是使用递归进行操作,这种方式比较简单,也比较容易理解。本文为大家介绍另一种不使用递归的方式,由于没有使用递归,只用到了循环和集合,所以效率更高一些!一、使用递归遍历文件夹整体思路1、使用File封装初始目录,2、打印这个目录3、获取这个目录下所有的子文件和子目录的数组。4、遍历这个数组,取出每个File对象4-1、如果File是否是一个文件,打印4-2、否则就是一个目录,递归调用代码实现publicclassSearchFile{publicstaticvoidmain(String[]args){//初始目录Filedir=newFile("d:/Dev");Datebeg

  4. ES基础入门 - 2

    ES一、简介1、ElasticStackES技术栈:ElasticSearch:存数据+搜索;QL;Kibana:Web可视化平台,分析。LogStash:日志收集,Log4j:产生日志;log.info(xxx)。。。。使用场景:metrics:指标监控…2、基本概念Index(索引)动词:保存(插入)名词:类似MySQL数据库,给数据Type(类型)已废弃,以前类似MySQL的表现在用索引对数据分类Document(文档)真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

  5. 区块链入门教程(6)--WeBASE-Front节点前置服务安装 - 2

    文章目录1.任务背景2.任务目标3.相关知识点4.任务实操4.1安装配置JDK4.2启动FISCOBCOS4.3下载解压WeBASE-Front4.4拷贝sdk证书文件4.5启动节点4.6访问节点4.7检查运行状态5.任务总结1.任务背景FISCOBCOS其实是有控制台管理工具,用来对区块链系统进行各种管理操作。但是对于初学者来说,还是可视化界面更友好,本节就来介绍WeBASE管理平台,这是一款微众银行开源的自研区块链中间件平台,可以降低区块链使用的门槛,大幅提高区块链应用的开发效率。微众银行是腾讯牵头设立的民营银行,在国内民营银行里还是比较出名的。微众银行参与FISCOBCOS生态建设,一定

  6. Tcl脚本入门笔记详解(一) - 2

    TCL脚本语言简介•TCL(ToolCommandLanguage)是一种解释执行的脚本语言(ScriptingLanguage),它提供了通用的编程能力:支持变量、过程和控制结构;同时TCL还拥有一个功能强大的固有的核心命令集。TCL经常被用于快速原型开发,脚本编程,GUI和测试等方面。•实际上包含了两个部分:一个语言和一个库。首先,Tcl是一种简单的脚本语言,主要使用于发布命令给一些互交程序如文本编辑器、调试器和shell。由于TCL的解释器是用C\C++语言的过程库实现的,因此在某种意义上我们又可以把TCL看作C库,这个库中有丰富的用于扩展TCL命令的C\C++过程和函数,所以,Tcl是

  7. Simulink方法总结和避坑指南(一)——Simulink入门与基本调试方法 - 2

    文章目录一、项目场景二、基本模块原理与调试方法分析——信源部分:三、信号处理部分和显示部分:四、基本的通信链路搭建:四、特殊模块:interpretedMATLABfunction:五、总结和坑点提醒一、项目场景  最近一个任务是使用simulink搭建一个MIMO串扰消除的链路,并用实际收到的数据进行测试,在搭建的过程中也遇到了不少的问题(当然这比vivado里面的debug好不知道多少倍)。准备趁着这个机会,先以一个很基本的通信链路对simulink基础和相关的debug方法进行总结。  在本篇中,主要记录simulink的基本原理和基本的SISO通信传输链路(QPSK方式),计划在下篇记

  8. ESP32学习入门:WiFi连接网络 - 2

    目录一、ESP32简单介绍二、ESP32Wi-Fi模块介绍三、ESP32Wi-Fi编程模型四、ESP32Wi-Fi事件处理流程 五、ESP32Wi-Fi开发环境六、ESP32Wi-Fi具体代码七、ESP32Wi-Fi代码解读6.1主程序app_main7.2自定义代码wifi_init_sta()八、ESP32Wi-Fi连接验证8.1测试方法8.2服务器模拟工具sscom58.3测试代码8.4测试结果前言为了开发一款亚马逊物联网产品,开始入手ESP32模块。为了能够记录自己的学习过程,特记录如下操作过程。一、ESP32简单介绍ESP32是一套Wi-Fi(2.4GHz)和蓝牙(4.2)双模解决方

  9. ruby-on-rails - Rails 还是 Sinatra? PHP程序员入门学习哪个好? - 2

    按照目前的情况,这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持,但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开,visitthehelpcenter指导。关闭10年前。我使用PHP的时间太长了,对它感到厌倦了。我也想学习一门新语言。我一直在使用Ruby并且喜欢它。我必须在Rails和Sinatra之间做出选择,那么您会推荐哪一个?Sinatra真的不能用来构建复杂的应用程序,它只能用于简单的应用程序吗?

  10. css - 使用 Compass/Sass 删除附加到 Sprite 文件名的随机字符串 - 2

    我最近一直在使用Compass和Sass来做一些CSSspriting,因为它非常有用。但是,文件名总是附加一个随机字符串。例如。图标-s5eb424578c.png。而且我不希望附加这个随机字符串,因为这意味着每次发生更改时我都需要上传新的CSS文件和新的Sprite图像。那么,有人知道Compassgem目录中哪个Ruby或其他配置文件附加了这个随机字符串吗?然后我可以只注释掉那个位的代码。除非我缺少官方变量,否则我可以在Compass中设置以告诉它我不想附加此字符串?提前感谢您对此提供的任何帮助。 最佳答案 尝试将这些行添加到

随机推荐