cocosCreator 之 Sprite动态加载和远程加载

版本： 3.4.0

语言： TypeScript

环境： Mac

简介

图片是很多项目中的重要资源。主要有两类：

• 单一的图片，格式主要有JPG和PNG
• 图集，在程序中使用图集资源中某个资源一般叫做精灵帧

在cocosCreator中，图片资源的特性很有意思， 看下继承的Asset结构：

将单一的图片资源或图集资源加入到编译器后，如图所示：

在cocosCreator中，图片资源会分为三部分：

• ImageAsset 图像源资源
• spriteFrame 图像的精灵帧资源
• texture 图像的贴图资源

在编译器中设置资源的时候，只需设置SpriteAtlas和SpriteFrame即可

注：如果没有图集，则设置SpriteFrame即可

但如果是动态加载的话，我们需要了解各种的加载方式，以备不时之需。

本篇博客的主要内容有：

• resources.load通过ImageAsset，SpriteFrame， Texture实现图片的更换
• resources.load通过SpriteAtlas图集获取精灵帧实现图片更换
• 远程下载图片，实现图片更换

resources.load动态加载

---

使用resource.load动态加载的资源，仅限于assets/resources目录下的资源，切记！

使用ImageAsset

let url = "textures/PurpleMonster";
let sprite = this.node.getComponent(Sprite);
// 方式1：构建SpriteFrame和Texture2D
resources.load(url, ImageAsset, (err, imageAsset) => {
  if (err) {
    return console.error("ImageAssert load failed, err:" + err.message);
  }
  const spriteFrame = new SpriteFrame();
  const texture = new Texture2D(); 
  texture.image = imageAsset;
  spriteFrame.texture = texture;
  sprite.spriteFrame = spriteFrame;
});

// 方式2: 使用SpriteFrame的createWithImage方法将ImageAsset对象创建SpriteFrame
resources.load(url, ImageAsset, (err, imageAsset) => {
  if (err) {
    return console.error("ImageAssert load failed, err:" + err.message);
  }
  sprite.spriteFrame = SpriteFrame.createWithImage(imageAsset);
});

使用SpriteFrame

let url = "textures/gold/spriteFrame";
resources.load(url, SpriteFrame, (err, spriteFrame) => {
  if (err) {
    return console.error("SpriteFrame load failed, err:" + err.message);
  }
  const sprite = this.node.getComponent(Sprite);
  sprite.spriteFrame = spriteFrame;
});

注： 获取图片资源的spriteFrame，需要在路径处添加后缀spriteFrame

使用texture

let url = "textures/gold/texture";
resources.load(url, Texture2D, (err: any, texture: Texture2D) => {
  if (err) {
    return console.error("SpriteFrame load failed, err:" + err.message);
  }
  const spriteFrame = new SpriteFrame();
  spriteFrame.texture = texture;
  const sprite = this.node.getComponent(Sprite);
  sprite.spriteFrame = spriteFrame;
});

注： 使用图片资源的texture，需要在路径处增加texture

使用图集获取精灵帧

let url = "textures/emoji";
resources.load(url, SpriteAtlas, (err:any, atlas) => {
  if (err) {
    return console.error("SpriteAtlas load failed, err:" + err.message);;
  }
  // 根据键值获取指定的精灵帧
  let spriteFrame: SpriteFrame = atlas.getSpriteFrame("emoji3");
  sprite.spriteFrame = spriteFrame;
});

远程资源加载

---

放置在资源服务器或者其他平台的资源，需要通过assetManager.loadRemote进行加载。

资源的特点是：带有http/https修饰，可能没有文件的后缀。

因条件限制，资源的路径主要来源于微信小游戏的官方文档：wx.showShareMenu 示例中的路径

// 不带有后缀的，必须指证文件类型
let url = "http://unknown.org/emoji?id=124982374";
assetManager.loadRemote<ImageAsset>(url, {ext:'.png'}, (err, imageAsset) => {
  const spriteFrame = new SpriteFrame();
  const texture = new Texture2D();
  texture.image = imageAsset;
  spriteFrame.texture = texture;
	this.sprite.spriteFrame = spriteFrame;
});

// 带有后缀的
let url = 'https://res.wx.qq.com/wxdoc/dist/assets/img/demo.ef5c5bef.jpg';
assetManager.loadRemote<ImageAsset>(url, (err, imageAsset) => {
  if (err) {
    return console.error("ImageAsset loadRemote failed:" + err.message);
  }
  let spriteFrame = SpriteFrame.createWithImage(imageAsset);
  this.sprite.spriteFrame = spriteFrame;
});

带后缀的示意图：

至此，文章结束，祝大家学习生活愉快!