CocosCreator-精灵动态加载图片资源,实例化精灵
Posted iwanghang
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了CocosCreator-精灵动态加载图片资源,实例化精灵相关的知识,希望对你有一定的参考价值。
CocosCreator-3.0-精灵动态加载图片资源,实例化精灵
var spriteFrameEnemyBigGlobal:SpriteFrame; // 精灵框架敌人大号全局变量
onLoad()
console.log(' - Life onLoad - ');
// 加载 SpriteFrame,image 是 ImageAsset,spriteFrame 是 image/spriteFrame,texture 是 image/texture
resources.load("images/enemy_big/spriteFrame", SpriteFrame, (error, spriteFrame) =>
if (error)
console.log("resources.load - " + error);
spriteFrameEnemyBigGlobal = spriteFrame;
);
// 创建一个新的节点,因为Sprite是组件不能直接挂载到节点上,只能添加到为节点的一个组件
let enemyBigNode = new Node('enemyBigNode');
// 调用新建的node的addComponent函数,会返回一个sprite的对象
let enemyBigSprite = enemyBigNode.addComponent(Sprite);
// 给sprite的spriteFrame属性 赋值
enemyBigSprite.spriteFrame = spriteFrameEnemyBigGlobal;
以上是核心代码,以下是完整代码
注意,完整代码里,没有使用动态加载,相关代码被注释了,使用的是声明spriteFrameEnemyBig,然后在属性检查器里,对ts脚本中的spriteFrameEnemyBig直接赋值enemy_big图片资源的方法
import _decorator, Component, Node, Label, Sprite, Vec3, Prefab, instantiate, director, resources, SpriteFrame, Layers, UITransform, Canvas, view, View from 'cc';
const ccclass, property = _decorator;
// 全局变量
var nodeFatherX:Node;
var frame:number = 0; //总共绘制的帧数
var arrayPlane = [];
var arrayPlaneNunber:number = -2; //累计生成敌人数
var spriteFrameEnemyBigGlobal:SpriteFrame; // 精灵框架敌人大号全局变量
var gameWidthX:number = 0; //游戏宽度
var gameHeightX:number = 0; //游戏高度
@ccclass('Fish')
export class Fish extends Component
// [1]
// dummy = '';
// [2]
// @property
// serializableDummy = 0;
@property(type: SpriteFrame)
public spriteFrameEnemyBig: SpriteFrame|null = null; // 精灵框架敌人大号
// onLoad 回调会在节点首次激活时触发,比如所在的场景被载入,或者所在节点被激活的情况下。
// 在 onLoad 阶段,保证了你可以获取到场景中的其他节点,以及节点关联的资源数据。
// onLoad 总是会在任何 start 方法调用前执行,这能用于安排脚本的初始化顺序。
// 通常我们会在 onLoad 阶段去做一些初始化相关的操作。
onLoad()
console.log(' - Life onLoad - ');
// 获取主要Node
nodeFatherX = this.node;
// 加载 SpriteFrame,image 是 ImageAsset,spriteFrame 是 image/spriteFrame,texture 是 image/texture
resources.load("images/enemy_big/spriteFrame", SpriteFrame, (error, spriteFrame) =>
if (error)
console.log("resources.load - " + error);
spriteFrameEnemyBigGlobal = spriteFrame;
);
// 获取游戏可见宽高
const gameCanvas = view.getVisibleSize();
gameWidthX = gameCanvas.width;
gameHeightX = gameCanvas.height;
console.log('gameVisibleSize = ' + gameWidthX + "*" + gameHeightX);
start ()
// [3]
update (deltaTime: number)
// [4]
// 第一次绘制时,将战斗机移到Canvas的 水平方向的1/3,垂直方向的中心
if(frame == 0)
// float centerX = canvas.getWidth() / 3 - combatAircraft.getWidth() / 2;
// float centerY = canvas.getHeight() / 2;
// combatAircraft.centerTo(centerX, centerY);
// 每隔100帧随机添加Sprite
if(frame % 10 == 0)
// createRandomSprites(canvas.getWidth(), canvas.getHeight());
this.createRandomSprites();
frame++;
// 生成随机的Sprite
createRandomSprites ()
arrayPlaneNunber ++;
// 创建一个新的节点,因为Sprite是组件不能直接挂载到节点上,只能添加到为节点的一个组件
let enemyBigNode = new Node('enemyBigNode');
// 调用新建的node的addComponent函数,会返回一个sprite的对象
let enemyBigSprite = enemyBigNode.addComponent(Sprite);
// 给sprite的spriteFrame属性 赋值
enemyBigSprite.spriteFrame = this.spriteFrameEnemyBig; // 在xml定义
// enemyBigSprite.spriteFrame = spriteFrameEnemyBigGlobal; // 动态获取
// 获取enemyBigNode的宽高 - 得到图片的宽高,不是真实的宽高
const enemyBigUITransform = enemyBigNode.getComponent(UITransform)!;
const enemyBigWidth = enemyBigUITransform.width;
const enemyBigHeight = enemyBigUITransform.height;
// console.log('enemyBigUITransform = ' + enemyBigWidth + "*" + enemyBigHeight);
// FixMe - 获取enemyBigNode的宽高
// const enemyBigWidth = spritePlane.getComponent;
// const enemyBigHeight = spritePlane.
// console.log('enemyBigUITransform = ' + enemyBigWidth + "*" + enemyBigHeight);
// let spriteLabel = nodePlane.addComponent(Label);
// spriteLabel.string = "112233444555666";
// enemyBigNode.setPosition(gameWidthX-enemyBigWidth,-gameHeightX/2+arrayPlaneNunber*enemyBigHeight,0);
enemyBigNode.setPosition(gameWidthX/2-enemyBigWidth/2,gameHeightX/2-enemyBigHeight/2,0);
// nodePlane.parent = this.node; // 将新节点作为当前节点的子节点
enemyBigNode.parent = nodeFatherX; // 将新节点作为当前节点的子节点
enemyBigNode.layer = Layers.Enum.UI_2D
/**
* [1] Class member could be defined like this.
* [2] Use `property` decorator if your want the member to be serializable.
* [3] Your initialization goes here.
* [4] Your update function goes here.
*
* Learn more about scripting: https://docs.cocos.com/creator/3.0/manual/en/scripting/
* Learn more about CCClass: https://docs.cocos.com/creator/3.0/manual/en/scripting/ccclass.html
* Learn more about life-cycle callbacks: https://docs.cocos.com/creator/3.0/manual/en/scripting/life-cycle-callbacks.html
*/
以上是关于CocosCreator-精灵动态加载图片资源,实例化精灵的主要内容,如果未能解决你的问题,请参考以下文章