cocos creator 动态设置精灵图片

最新推荐文章于 2023-03-29 18:58:03 发布

原创最新推荐文章于 2023-03-29 18:58:03 发布 · 4.1k 阅读

14 ·

CC 4.0 BY-SA版权

cocos creator 专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用 Cocos Creator 开发游戏时的脚本示例，通过创建 Sprite 节点并给其挂载脚本来实现图片的显示。具体步骤包括创建节点、编写脚本以及在编辑器中配置资源。

1、创建sprite节点。

2、给该节点挂上脚本，内容如下。（picture可以不设置为数组）

cc.Class({
    extends: cc.Component,

    properties:{
        picture: [cc.SpriteFrame],
    },

    start(){
        this.node.getComponent(cc.Sprite).spriteFrame = this.picture[1];
    }

});

3、在节点的属性检查器中拖拽图片到该脚本的picture参数中。（Customer是我取的脚本名）

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

Hillbox

关注关注

3
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Cocos Creator - 制作精灵帧动画

仿真推演的博客

03-16

1万+

本文档主要根据官方文档上的图集资源、动画系统、音乐和音效等章节内容进行综合使用。 1、制作图集制作图集有两种工具： TexturePacker Zwoptex（只能在Windows上使用）我这里使用TexturePacker进行图集制作： 1.准备原始图片，如下图：这些都是单张的图，按顺序播放的话，能看出是佐助在释放千鸟技能的一个动画，我们现在就是要将这些图做成图集，并使用......

精选资源

cocos creator开发的精灵大师小游戏源码分享，支持h5安卓微信小游戏等多平台

11-23

在Cocos Creator中，"精灵"（Sprite）是2D游戏开发中的基本元素，通常用于展示静态或动态的图像。在这个项目中，"精灵大师"可能涉及到大量的精灵动画设计，通过组合不同的精灵帧来实现角色的动作和表情变化，这需要...

1 条评论您还未登录，请先登录后发表或查看评论

1 条评论

顾tutu 2023.06.14
为什么我加载不出来啊

cocos creator 3.8 事件派送、监听、移除

11-21

cocos creator 3.8 事件派送、监听、移除

cocosCreator 精灵图片加载（一键还原大小+动态修改图片）

huanghuipost的博客

10-21

3613

问题：在cocosCreator中没找到对图片重置大小的按钮（在cocos2d-x中，图片可以通过重置大小来快速还原图片的原本大小）所以在cocosCreator中替换资源的时候，图片资源和原来不同时，会出现变形。解决办法：打开sprite手册这里Size Mode 的三种模式介绍要想使用图片原尺寸，就选择Trimmed或者Raw 有时候需要动态改变图片的大小或者形状...

cocos2dx 3.x(动态改变精灵的背景图片)

weixin_34128534的博客

11-07

1082

//更换精灵CCSprite的图片有两种方式。 //直接通过图片更换 //使用setTexture(CCTexture2D*)函数，可以重新设置精灵类的纹理图片。 // auto bg = Sprite::create(); Texture2D* texture = Director::getInstance()-&gt...

cocos creator 动态创建精灵

weixin_33877092的博客

05-30

2562

var node = new cc.Node();var sprite = node.addComponent(cc.Sprite);sprite.spriteFrame = new cc.SpriteFrame(tex);cc.director.getScene().addChild(node);

CocosCreator-精灵动态加载图片资源，实例化精灵

iwanghang(一个播音与主持艺术专业、干过网游打金工作室，做过海鲜小吃排挡的新手程序员)

06-28

3637

以上是核心代码，以下是完整代码注意，完整代码里，没有使用动态加载，相关代码被注释了，使用的是声明spriteFrameEnemyBig，然后在属性检查器里，对ts脚本中的spriteFrameEnemyBig直接赋值enemy_big图片资源的方法......

cocos creator 绳子

10-25

1. **刚体设置**：在Cocos Creator中，你可以为游戏对象添加刚体组件，选择动态或静态类型。动态刚体会受到物理力的影响，如重力；静态刚体则不会移动，常用于固定物体。在绳子的两端，你需要创建两个动态刚体，分别...

精选资源

【cocos creator】2.4.10，2d人物+3d背景，人物移动，透视视角

09-20

标签"cocoscreator 游戏开发"表明这个项目是使用Cocos Creator引擎进行游戏开发的实例。Cocos Creator支持多平台发布，这意味着开发者可以在完成开发后，将游戏发布到PC、移动设备或者网页等不同平台。这为游戏的...

精选资源

cocoscreator刷新文件夹内所有的资源uuid

04-20

- 在Cocos Creator中，资源是项目的核心组成部分，包括图片、音频、场景、精灵、脚本等。每个资源都有一个唯一的UUID，用于区分不同的资源。 - UUID的重要性在于确保每个资源都能被正确地引用和加载，尤其是在资源...

Cocos Creator 动态改变sprite图片

weixin_33979745的博客

06-04

7677

首先将存放图片最外层文件夹命名为resources 　　 changeBj: function(){ 　　　　var url = 'globalUI/video/gVideoPlayClick'; 　　　　var _this = this; cc.loader.loadRes(url,cc.SpriteFrame,function(err,spriteFrame) 　　　　{ 　　　　　　　...

cococreator 动态设置精灵

zhang804633234的专栏

08-01

664

代码】cococreator动态设置精灵。

cocos2dx 更改精灵图片方法

RandowWrite

12-27

3565

.h //声明背景精灵 Sprite * main_bg; .cpp //获取cocostudio中的背景控件 main_bg = (Sprite*)rootNode->getChildByName("spritr_bg"); //获取当前关卡数 int _levelNum =DataManager :: getLevelNum(); //给字符串分配空间 char str[25

cocos creator 动态生成图片，改变大小问题

最新发布

03-27

### 如何在 Cocos Creator 中动态设置图片在 Cocos Creator 中，可以通过脚本实现动态更换精灵图的功能。以下是具体方法以及相关说明。 #### 使用 `Sprite` 组件动态更改图片 Cocos Creator 提供了 `Sprite` 组件来显示图像资源。为了动态更改为其他图片，可以使用 `SpriteFrame` 对象作为目标资源并赋值给 `Sprite.spriteFrame` 属性[^2]。以下是一个完整的代码示例： ```typescript @property(Node) // 被替换的图片节点 EnergyBy: Node = null; @property(SpriteFrame) // 替换的新图片 img: SpriteFrame = null; start() { if (this.EnergyBy && this.img) { // 确保节点和新图片都已加载 const spriteComponent = this.EnergyBy.getComponent(Sprite); if (spriteComponent) { spriteComponent.spriteFrame = this.img; // 将新的 SpriteFrame 应用到组件上 } } } ``` 上述代码展示了如何通过脚本将一个现有的 `Node` 上绑定的 `Sprite` 图片替换成另一个 `SpriteFrame` 的过程。 --- #### 加载远程或本地图片资源如果需要从项目外部加载一张图片并将其应用为 `SpriteFrame`，则需先获取该图片资源（通常为 `ImageAsset` 类型），再转换成 `SpriteFrame` 后才能应用于 `Sprite` 组件[^3]。下面是一段演示如何加载本地路径中的图片并完成替换的操作： ```typescript loadImg(path: string, callback: Function): void { cc.resources.load(path + "/spriteFrame", SpriteFrame, (err, spriteFrame) => { if (!err && spriteFrame) { callback(spriteFrame); // 成功加载后回调函数处理 } else { console.error("Failed to load image resource:", err); } }); } start() { this.loadImg('images/new_image', (newSpriteFrame) => { const spriteComp = this.EnergyBy.getComponent(Sprite); if (spriteComp) { spriteComp.spriteFrame = newSpriteFrame; } }); } ``` 此代码片段利用了 `cc.resources.load()` 方法异步加载指定路径下的资源，并最终实现了动态更新图片的效果。 --- #### 注意事项 1. **确保资源预设**：无论是静态还是动态方式，在运行前都需要确认所需的目标图片已经存在于项目的 Resources 文件夹中。 2. **性能优化**：频繁切换大量不同纹理可能会影响渲染效率，建议合理规划素材大小与数量。 3. **错误检测**：当尝试访问未初始化的对象或者不存在的资源时应加入适当异常捕获机制以防止程序崩溃。 ---