截图!长按保存分享!Cocos Creator

2023-04-24 23:44:27 来源:程序员客栈

一种3D截图方案


(资料图片仅供参考)

背景

参考 TRUE SPACE with Cocos 技术分享[1]中的动态生成海报的介绍,以及作者的支持。实现一个长按保存分享截图的方案。

效果

在微信浏览器中预览效果如下

环境

Cocos Creator 3.7.1

Web 浏览器

原理

原作者讲的非常清楚,只需要按照以下步骤实现即可。

3D相机生成一个RT 赋予给2D精灵

摆上一些二维码等UI

UI相机再生成一张RT

读取RT中的数据,传给 canvas

canvas 生成图片数据传给 Image

适配Image对象大小位置

视频

录了一段操作视频[2]供大家参考。

代码

这段代码的截图功能是按照高度适配的方式写的,如有其他需求,可自行修改相关逻辑。仅供大家参考学习。

import{_decorator,Component,Node,Camera,RenderTexture,view,UITransform,log,game,screen,NodeEventType}from"cc";const{ccclass,property}=_decorator;@ccclass("CaptureImage")exportclassCaptureImageextendsComponent{@property(Camera)copyCamera:Camera=null!;@property(Node)targetNode:Node=null!;@property(Node)captureBtn:Node=null!;@property(Node)closeBtn:Node=null!;rt:RenderTextureprivate_image:HTMLImageElement_canvas:HTMLCanvasElement=null!;_buffer:ArrayBufferView=null!;start(){log("欢迎关注微信公众号【白玉无冰】https://mp.weixin.qq.com/s/4WwCjWBtZNnONh8hZ7JVDA")this.rt=newRenderTexture();this.rt.reset({width:view.getVisibleSize().width,height:view.getVisibleSize().height,})this.copyCamera.targetTexture=this.rt;this.captureBtn.active=true;this.closeBtn.active=false;this.captureBtn.on(NodeEventType.TOUCH_END,this.copyRenderTex,this)this.closeBtn.on(NodeEventType.TOUCH_END,this.clearCapture,this)}privatecopyRenderTex(){constwidth=this.targetNode.getComponent(UITransform).width;constheight=this.targetNode.getComponent(UITransform).height;constanchorPoint=this.targetNode.getComponent(UITransform).anchorPoint;constworldPos=this.targetNode.getWorldPosition();this._buffer=this.rt.readPixels(Math.round(worldPos.x-width*anchorPoint.x),Math.round(worldPos.y-height*anchorPoint.y),width,height);if(!this._canvas){this._canvas=document.createElement("canvas");this._canvas.width=width;this._canvas.height=height;}else{letctx=this._canvas.getContext("2d");ctx.clearRect(0,0,this._canvas.width,this._canvas.height);}letctx=this._canvas.getContext("2d")!;letrowBytes=width*4;for(letrow=0;row

其他

最近写文偏笔记的形式,主要是记录一下代码,下次要用的时候再翻出来。希望对大家有所帮助。

参考资料

[1]

TRUE SPACE with Cocos 技术分享:https://forum.cocos.org/t/topic/146459

[2]

视频:https://www.bilibili.com/video/BV1w84y1N7XQ

往期精彩:

3DUI Cocos Creator

三渲二 Cocos Creator

零代码实现面片效果(UV滚动,帧动画) Cocos Creator

游戏开发资料合集,2022年版

点击“阅读原文”查看精选导航

“点赞“ ”在看”鼓励一下▼

标签:

多情是什么意思解释_多情是什么意思_天天热闻

2023-04-23 12:11:10

短讯!我国深海油气勘探开发核心装备实现产业化

2023-04-23 11:41:44

24考研专业课重点之钟敬文《民俗学概论》考研真题精选

2023-04-23 11:31:51

广州人有多会读书?请查收这份《广州阅读图鉴》

2023-04-23 11:05:52

财政部下达12.51亿元资金,支持河南等地开展农作物重大病虫害防控工作-世界头条

2023-04-23 10:46:41

北京延庆着力打造新能源产业融合发展新高地 最新消息

2023-04-23 10:27:09

开卷品书香-全球热讯

2023-04-23 09:42:46

全球最资讯丨2万球迷现场观看美国职业女足联赛,我们呢?

2023-04-23 09:25:53

西咸新区构建氢能“生产—储运—应用”全产业链中国新能源国际博览会暨高峰论坛永久会址落户西咸新区-天天速看

2023-04-23 09:03:14

瓦茨克:罗伊斯是多特的绝对功勋,他的续约7-10天会有结果

2023-04-23 08:39:24

汽车保养有哪些项目是必须的(汽车保养有哪些项目)|焦点日报

2023-04-23 08:14:48

世界简讯:?威少赛后带上自己6岁儿子接受采访

2023-04-23 07:54:14

【全球新要闻】肚子疼一天上好几次大便是怎么回事_一天大便好几次是怎么回事

2023-04-23 07:16:22

家常羊肉面的做法,简单快手,汤鲜肉嫩面条劲道,太过瘾了 焦点关注

2023-04-23 06:43:32

筑牢安全防线,苏州太平街道开展安全生产培训会_世界热头条

2023-04-23 06:07:15
x 广告
x 广告

Copyright @  2015-2023 港澳晚报网版权所有  备案号: 京ICP备2023022245号-31   联系邮箱:435 226 40 @qq.com