ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

CocosCreator 截屏(全屏,指定node区域)

2022-01-23 12:04:30  阅读:571  来源: 互联网

标签:node 截图 targetNode cc camera CocosCreator 截屏 let


参考:

cocos官方文档-摄像机截图

cocos版本:2.4.4

 

使用camera.targetTexture进行截图。

 

一  截图指定node

如下图,对heroNode进行截图。

 

 

MainScene.ts代码如下:

const { ccclass, property } = cc._decorator;


@ccclass
export default class MainScene extends cc.Component {

    @property(cc.Node)  //截图目标节点
    heroNode: cc.Node = null;

    start() {

        let node = this.screenShot(this.heroNode);
        node.x = 0;
        node.y = 0;
        node.parent = this.node;
    }

    /**
     * 截图
     * @param targetNode  截图目标节点,如果为null则表示截全屏
     * @returns 返回截屏图片的node
     */
    screenShot(targetNode: cc.Node = null) {
        //获取当前场景Camera
        let camera = cc.director.getScene().getComponentInChildren(cc.Camera);
        //创建新的texture
        let texture = new cc.RenderTexture();
        texture.initWithSize(cc.winSize.width, cc.winSize.height, (cc.game as any)._renderContext.STENCIL_INDEX8);
        //创建新的spriteFrame
        let spriteFrame = new cc.SpriteFrame();
        if (targetNode == null) {
            spriteFrame.setTexture(texture);
        } else {
            let nodeX = cc.winSize.width / 2 + targetNode.x - targetNode.width / 2;
            let nodeY = cc.winSize.height / 2 + targetNode.y - targetNode.height / 2;
            let nodeWidth = targetNode.width;
            let nodeHeight = targetNode.height;
            //只显示node部分的图片
            spriteFrame.setTexture(texture, new cc.Rect(nodeX, nodeY, nodeWidth, nodeHeight));
        }
        //创建新的node
        let node = new cc.Node();
        let sprite = node.addComponent(cc.Sprite);
        sprite.spriteFrame = spriteFrame;
        //截图是反的,这里将截图scaleY取反,这样就是正的了
        sprite.node.scaleY = - Math.abs(sprite.node.scaleY);
        //手动渲染camera
        camera.cullingMask = 0xffffffff;
        camera.targetTexture = texture;
        camera.render();
        camera.targetTexture = null;

        return node;
    }

}

 

截图效果,可见人物只截取了node范围内的部分。

 

 

二 截图全屏

直接调用上面代码的screenShot(),不传入参数,就是截图全屏。

    start() {
        let node = this.screenShot();
        node.x = 0;
        node.y = 0;
        node.parent = this.node;
    }

 

截图了全屏  

 

 

 

 

标签:node,截图,targetNode,cc,camera,CocosCreator,截屏,let
来源: https://www.cnblogs.com/gamedaybyday/p/15836011.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有