截图!长按保存分享!Cocos Creator
背景一种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年版
点击“阅读原文”查看精选导航
“点赞“ ”在看”鼓励一下▼
关键词:
下一篇:最后一页
- 巴中科技合作不断结出丰硕成果 每日观察
- 我省“打假治敲”专项行动再获战果 哈尔滨市警方打获两名假“央视栏目”记者 焦点热文
- 世界热消息:【东海期货4月14日宏观金融日报】:美元继续走弱,全球风险偏好大幅升温
- 美股财报季即将揭幕!疲弱盈利如何左右美股反弹?_环球视点
- 强强联合!卡奥斯与IDS合作再推进
- 全球实时:自然资源部公开曝光 部分地方仍“毁田造景”
- 焦点速看:华泰证券:新旧周期切换 中资寿险新业务价值复苏在即
- 今日热门!林志玲被曝日本“拍片”!大尺度片段流出,网友:你怎么沦落成这样……
- 双代号网络图经典例题视频_双代号网络图经典例题_环球快讯
- 赚翻了!全球最大奢侈品集团一季度营收1590亿元
-
世界关注:首套“无废课程”在杭发布,未来将融入学校德育体系
无废城市,杭州正从娃娃抓起,将从“无废学校”作为创建无废城市的切入点。今天(4月13日),杭州市“无废学校”建设现场推进
-
河南省宝丰县发布大风蓝色预警
宝丰县气象台2023年04月13日19时42分发布大风蓝色预警信号:预计未来24小时内,宝丰县所辖乡镇和街道将受大风影响,平均风力可达6级以上,阵风
-
生物多样性_环球速看
1、生物多样性,生态学术语,是一个描述自然界多样性程度的一个内容广泛的概念,不同学者提出了多种定义。2、在《保护生物学》
-
太古股份公司B(00087)4月13日斥资约260.64万港元回购27.5万股
太古股份公司B(00087)发布公告,于2023年4月13日斥资约260 64万港
-
全球信息:智力障碍儿童生活适应学科实施指南_对于智力障碍儿童生活适应学科实施指南简单介绍
1、《智力障碍儿童生活适应学科实施指南》是2020年8月南京师范大学出版社出版的图书,作者是华东师范大学中国言语听觉康复
-
长春高新:注射用人生长激素新适应症补充申请获得批准
证券时报e公司讯,长春高新4月13日晚间公告,近日,公司控股子公司金赛药业注射用人生长激素新适应症补充申请获得批准。增加的适应症如下①用
-
周到晨报丨申城今天阴有时有阵雨;网传明年中旬上海绿牌蓝牌要合并?市经信委回应;杜鹃担当主题花旦,2023上海(国际)花展来啦~
沙尘走了,雨又来了!申城今天阴有时有阵雨,老友们记得备好雨具沙尘虽下线,但冷空气余威尚在,申城今天早晨气温13℃左右,算是近期最低,最
-
教师资格考试(笔试)成绩今日发布 当前关注
教师资格考试(笔试)成绩今日发布来源:教育部教育考试院|作者:|时间:2023-04-13|责编:曾瑞鑫一、发布时间2023年4月13日19时
-
牛皮癣皮肤发痒有什么症状特点? 哈尔滨治疗牛皮癣有哪些方法?
牛皮癣皮肤发痒有什么症状特点?牛皮癣皮肤发痒有什么症状特点?皮肤发痒疾病是经常会出现的皮肤疾病之一,n & 039;p & 039;x出现的临床表现就是瘙痒,对
-
港股午评:恒指跌0.5% 科指跌1.11%
恒生指数早盘收跌0 5%,报20209 07点。恒生科技指数收跌1 11%,报4120 4点。医药、媒体等板块走强,节假
X 关闭
全球头条:新能源布局加速落子 风电光伏建设正酣
每日速递:气体传感器的发展现状与未来展望
当前速递!国内三大石油企业发布半年报 目光投向新能源
【全球聚看点】如何在智能建筑物联网与隐私之间取得平衡
快资讯:欧洲7月电动汽车销量同比下滑5%
X 关闭
抖音集团与三星堆博物馆签订框架合作协议
第八个全民国家安全教育日丨各地多形式宣传普及总体国家安全观
超九倍溢价收购 莲花健康能解净利亏损、营收下滑烦恼?|每日精选
山东烟台芝罘区山火已被扑灭 无人员伤亡 每日快讯
环球热消息:做到99元的ARM工业级核心板到底有哪几款?