cocosCreator 图片和文字的动态加载

Posted 2023-04-16

参考技术A 1.图片的动态加载

cc.loader.loadRes("imgs/silver", cc.SpriteFrame, function (err, spriteFrame)
self.fristImageItem.spriteFrame = spriteFrame
);

// cc.loader.load( url: " http://cdn.baifm.cn/1/wxb/img/heag_default.png ", type: 'png' , function (err, texture)
// // Use texture to create sprite frame
// if (err)
// return;
// me.itemFccLogo.spriteFrame = new cc.SpriteFrame(texture);
// );

Creator 提供了 cc.loader.loadRes 这个 API 来专门加载那些位于 resources 目录下的 Asset。和 cc.loader.load 不同的是，loadRes 一次只能加载单个 Asset。调用时，你只要传入相对 resources 的路径即可，并且路径的结尾处不能包含文件扩展名。

2.文字的颜色动态变化

this.FCCLabel.node.color = new cc.color(255, 76, 76, 1)

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
 */