天天视点!截图!长按保存分享!Cocos Creator

首页>资讯 > 正文
2023-04-09 19:57:00

来源:程序员客栈

一种3D截图方案


(相关资料图)

背景

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

效果

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

环境Cocos Creator 3.7.1Web 浏览器原理

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

3D相机生成一个RT 赋予给2D精灵摆上一些二维码等UIUI相机再生成一张RT读取RT中的数据,传给 canvascanvas 生成图片数据传给 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年版

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

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

标签:

THE END
免责声明:本文系转载,版权归原作者所有;旨在传递信息,不代表热讯制鞋网的观点和立场。

相关热点

新华社电 上海市文化和旅游局近日发布《上海市密室剧本杀内容备案管理规定(征求意见稿)》,并截至12月8日面向社会公众广泛征求意见。这
2021-11-19 13:46:03
《中国证券报》17日刊发文章《备战2022 基金经理调仓换股布新局》。文章称,距离2021年结束仅剩一个多月,基金业绩分化明显。部分排名靠前
2021-11-19 13:46:03
交通运输部办公厅 中国人民银行办公厅 中国银行保险监督管理委员会办公厅关于进一步做好货车ETC发行服务有关工作的通知各省、自治区、直
2021-11-19 13:45:58
新华社北京11月17日电 题:从10月份市场供需积极变化看中国经济韧性新华社记者魏玉坤、丁乐读懂中国经济,一个直观的视角就是市场供需两端
2021-11-19 13:45:58
全国教育财务工作会议披露的消息称,2020年,中国国家财政性教育经费投入达4 29万亿元,占GDP总量的4 206%,我国国家财政性教育经费支出占G
2021-11-19 13:45:48
如果你也热爱“种草”,前方高能预警!让你心心念念、“浏览”忘返的网络平台,可能早已成为一块块“韭菜地”。近日,据《半月谈》报道,有...
2021-11-19 13:45:48
日前,工业和信息化部印发《“十四五”信息通信行业发展规划》(以下简称《规划》),描绘了未来5年信息通信行业的发展趋势。《规划》指出...
2021-11-19 13:45:40
本报讯(中青报·中青网记者 周围围)2021年快递业务旺季正式拉开帷幕。国家邮政局监测数据显示,仅11月1日当日,全国共揽收快递包裹5 69
2021-11-19 13:45:40
人民网曼谷11月17日电 (记者赵益普)17日上午,中国援柬埔寨第七批200万剂科兴新冠疫苗抵达金边国际机场。当天,柬埔寨政府在机场举行了
2021-11-19 13:45:35
金坛压缩空气储能国家试验示范项目主体工程一角受访者供图依托清华大学非补燃压缩空气储能技术,金坛压缩空气储能项目申请专利百余项,建立
2021-11-19 13:45:35
视觉中国供图42亿立方米据有关部门预计,今年山西煤炭产量有望突破12亿吨,12月份山西外送电能力将超过900万千瓦,今冬明春煤层气产量将达4
2021-11-19 13:44:34
14省份相继发布2021年企业工资指导线——引导企业合理提高职工工资今年以来,天津、新疆、内蒙古、陕西、西藏、山东、江西、山西、福建、四
2021-11-19 13:44:34
中新网客户端北京11月18日电 (记者 谢艺观)“一条路海角天涯,两颗心相依相伴,风吹不走誓言,雨打不湿浪漫,意济苍生苦与痛,情牵天下喜
2021-11-19 13:44:31
近日,交通运输部等三部门发布《关于进一步做好货车ETC发行服务有关工作的通知》。通知提到,对不具备授信条件的用户,商业银行可在依法合
2021-11-19 13:44:31
欧莱雅面膜陷优惠“年度最大”风波 涉及该事件集体投诉超6000人次美妆大牌双十一促销翻车?近日,因预售价格比双十一现货贵出66%,欧莱雅
2021-11-19 13:44:13
43 6%受访者会在工作两三年后考虑跳槽54 3%受访者认为跳槽对个人职业发展有利有弊如今对不少年轻人来说,想对一份工作“从一而终”不太容易
2021-11-19 13:44:13
超八成受访青年表示如有机会愿意开展副业 规划能力最重要64 4%受访青年指出做副业跟风心态最要不得如今,“身兼数职”已成为年轻人当中的
2021-11-19 13:44:01
发展氢能正当其时【科学随笔】氢能是一种二次能源,它通过一定的方法利用其他能源制取,具有清洁无污染、可储存、与多种能源便捷转换等优点
2021-11-19 13:44:01
“千杯不醉”的解酒“神药”能信吗?专家:网红“解酒药” 其实不算药俗话说,“酒逢知己千杯少”,酒一直是国人饭桌上至关重要的存在。尽...
2021-11-19 13:43:57
最新文章

相关推荐