CocosCreator开发系列教程（五）：Cocos Creator Sprite精灵组件详解

最新推荐文章于 2025-03-09 22:22:03 发布

编程畅谈

最新推荐文章于 2025-03-09 22:22:03 发布

阅读量1.5k

点赞数 44

分类专栏： cocos 文章标签： cocos2d 游戏引擎

本文链接：https://blog.csdn.net/qq_42182650/article/details/145655340

版权

cocos 专栏收录该内容

8 篇文章

订阅专栏

本章内容

了解Sprite精灵组件的相关知识

文章目录

本章内容
一、创建Sprite
二、Sprite组件基本属性
三、代码修改精灵的图片

一、创建Sprite

Sprite 组件是用于显示和管理图像资源的基本组件，Cocos引擎已经为我们做好了这个组件。下面介绍一下Sprite的使用方法

1.导入一些图片资源到项目中
在这里插入图片描述

2.创建一个空节点，并添加一个Sprite渲染组件
在这里插入图片描述
3.将一个图片资源拖入到Sprite组件中

4.这样编辑器中就显示了这张图片

二、Sprite组件基本属性

1.Atlas

使用图片所在的图集，如果没有，就使用的是单张图片。

这里需要解释一下：图集（Atlas）也称作 Sprite Sheet，是游戏开发中常见的一种美术资源。图集是通过专门的工具将多张图片合并成一张大图，并通过 plist 等格式的文件索引的资源。可供 Cocos Creator 使用的图集资源由 plist 和 png 文件组成。下面就是一张图集使用的图片文件：

atlas sheep

那么为什么要使用图集资源
在游戏中使用多张图片合成的图集作为美术资源，有以下优势：

合成图集时会去除每张图片周围的空白区域，加上可以在整体上实施各种优化算法，合成图集后可以大大减少游戏包体和内存占用
多个 Sprite 如果渲染的是来自同一张图集的图片时，这些 Sprite 可以使用同一个渲染批次来处理，大大减少 CPU 的运算时间，提高运行效率。

更详细的解释会在后续章节中讲解

这里使用一下准备好的图集资源
在这里插入图片描述
这样图片资源就变成图集中的一张图片资源

2.Type

精灵的模式：5种模式: Simple, FIll, Sliced, Tiled, Mesh模式

在这里插入图片描述

Type类型	含义
SIMPLE	普通类型
SLICED	切片（九宫格）类型
TILED	平铺类型
FILLED	填充类型
MESH	以 Mesh 三角形组成的类型

SIMPLE：将图片内容直接缩放到我们的目标大小
TILED：图片看作是一块块地板砖，节点大小看作是地面，将地板砖平铺到地面
SLICED：切片模式，又叫九宫格模式，指定图片的拉伸区域

将一张图片的大小改为960 * 640，那么默认的SIMPLE模式就会将图片拉伸到对应的大小
在这里插入图片描述
而TILED模式则是一个个平铺过去，在做地图的时候，采用这种平铺的方式，可以大幅减少资源

SLICED：
如果直接将左边的小图片，拉伸到右边的大图，看起来会非常的模糊

那么采用SLICED模式，在编辑中调整图片的拉伸区域
在这里插入图片描述

移动四条边后，点击对勾保存
![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/865e15ff37954ee0bf4388f234f7f3d3.png

这样看上去，图片的四周比较平滑
在这里插入图片描述
聊天框、气泡框等都会大量用到九宫格

FILLED模式，百分比填充模式, 按照百分比来填充图片

类型	描述
HORIZONTAL	水平方向填充
VERTICAL	垂直方向填充
RADIAL	径向填充

这里将图片的FillType设置为FILLED，就获得了一个类似人物血条的效果
在这里插入图片描述
fillStart：从哪个百分比开始, fillRange：范围的百分比

RADIAL模式，就像一个倒计时一样（圆形、扇形等）
在这里插入图片描述

3.SizeMode

精灵尺寸调整模式，有3种模式: CUSTOM, TRIMMED, RAW

Type类型	含义
CUSTOM	使用节点预设的尺寸
TRIMMED	自动适配为精灵裁剪后的尺寸
RAW	自动适配为精灵原图尺寸

CUSTOM(用户自定义模式), RAW原始大小模式, TRIMMED裁剪掉透明度大小

Trim勾选框：节点约束框内是否包含透明像素区域，勾选此框会去除节点约束框内的透明区域

当将Sprite的SizeMode模式调整为RAW，并去掉Trim，那么图片将按照原始的尺寸显示出来，包含了图片中的透明区域

在这里插入图片描述
如果这时勾选上Trim，那么图片会在裁剪掉透明区域后，再拉伸到原来的尺寸，看上去会更大一些

当将Sprite的SizeMode模式调整为TRIMMED，并勾选Trim，那么Sprite中的透明区域将会被裁剪，并且节点的长宽也会变化
在这里插入图片描述
注意，有时候做帧动画的时候，如果你勾选了Trim, 那么会裁剪掉图片透明的区域，因此动画的大小可能会改变，所以就不能勾选Trim，并选择RAW模式

4.Blend

图片Alpha混合的规则

在这里插入图片描述

类型	含义
srcBlendFactor	指定原图的混合模式，这会克隆一个新的材质对象，注意这带来的开销
dstBlendFactor	指定目标的混合模式

BlendFactor 枚举

索引	含义
ONE	全部使用
ZERO	全部不用
SRC_ALPHA	使用源颜色的透明度
SRC_COLOR	使用源颜色
DST_ALPHA	使用目标颜色的透明度
DST_COLOR	使用目标颜色
ONE_MINUS_SRC_ALPHA	减去源颜色的透明度
ONE_MINUS_SRC_COLOR	减去源颜色
ONE_MINUS_DST_ALPHA	减去目标颜色的透明度
ONE_MINUS_DST_COLOR	减去目标颜色

5.材质

材质（Material）是用于定义和渲染游戏对象外观的重要组件‌。材质描述了对象的外观属性，如颜色、纹理、透明度、光照等，这些属性决定了对象在屏幕上的显示效果。材质在游戏开发中起到了以下几个重要作用：

‌1.定义外观属性‌：材质允许你定义对象的颜色、纹理、透明度等属性。通过调整这些属性值，可以改变对象的外观，使其呈现出不同的样式和效果‌

2‌.实现纹理贴图‌：材质可以将纹理应用到对象上，实现贴图效果。纹理可以是图片、图集或其他可用于渲染的图像资源。通过设置材质的纹理属性，可以将指定的纹理映射到对象表面，使对象呈现出细节和图案‌

‌3.控制对象透明度‌：材质的透明度属性可以控制对象的可见性。通过调整透明度值，可以实现对象的淡入淡出效果，或者创建半透明的对象，使其能够显示下方的内容‌

4‌.影响光照和阴影‌：材质可以与光源一起使用，影响对象的光照和阴影效果。通过设置材质的光照属性，可以控制对象的反射、折射、漫反射和高光等效果，使对象在不同的光照条件下呈现出真实感和立体感‌

‌5.实现特殊效果‌：通过组合和调整材质属性，可以实现各种特殊效果，如镜面反射、扭曲、发光、水面效果等，为游戏对象添加独特和吸引人的视觉效果‌

通常使用的是引擎默认的材质
在这里插入图片描述
类似一个配置文件

三、代码修改精灵的图片

1.创建一个脚本组件，并挂载到图片节点上
在这里插入图片描述
编写代码,由于还没有讲解代码加载资源的相关内容，这里用比较简单的编辑器绑定的方式来加载资源（后续也会讲到）

cc.Class({
    extends: cc.Component,

    properties: {
        //编辑器上绑定一个名字叫img的组件
        img: {
            type: cc.SpriteFrame,
            default: null,
        },
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {
        // step1: 找节点: this.node;
        // step2: 节点上组件实例;
        let sp = this.node.getComponent(cc.Sprite);
        // step3: 修改图片的内容
        sp.spriteFrame = this.img; // cc.SpriteFrame资源对象
    },

    // update (dt) {},
});

这样节点组件上就多了一个名字叫img的组件，就可以将一个图片资源拖入到这里
在这里插入图片描述