本文主要实现了类似于折纸翻书的效果。

主要技术点:

  • 多边形遮罩

  • 节点截图

  • 自定义assmbler

分析

一眼看上去图像分为三部分:其中【1】的区域是图中【1】+【2】那么大。

基本思路

【1】部分使用多边形遮罩,这样的好处是【1】内的spine等动画还可以继续播放,另一个好处是假设第二页在第一页的下面,当第一页使用多边形遮罩后,其实第二页直接就露出来了,这样第二页的所有动画其实都不受影响。

先不考虑2的区域如何实现,现在就变成了「当手指move时,不断的去计算1的包围盒,并且设置多边形遮罩,使第二页的页面露出来」,效果如图:

「多边形遮罩主要核心代码:」

    mask._updateGraphics = function (polygon) {let node = this.node;// @ts-ignorelet graphics = mask._graphics;// Share render data with graphics contentgraphics.clear(false);// @ts-ignorelet width = node._contentSize.width;// @ts-ignorelet height = node._contentSize.height;// @ts-ignorelet x = -width * node._anchorPoint.x;// @ts-ignorelet y = -height * node._anchorPoint.y;if (!polygon) {graphics.rect(x, y, width, height);graphics.close();graphics.fill();return;}graphics.lineWidth = 10;graphics.fillColor.fromHEX("#ff0000");if (polygon.length === 0) polygon.push(cc.v2(0, 0));graphics.moveTo(polygon[0].x, polygon[0].y);for (let i = 1; i < polygon.length; i++) {graphics.lineTo(polygon[i].x, polygon[i].y);}graphics.lineTo(polygon[0].x, polygon[0].y);graphics.fill();};

【2】部分使用的是自定义assmbler,这部分东西需要多多理解。群里大佬有过一些详细的讲解,我贴几个链接。

  1. https://forum.cocos.org/t/topic/103699

  2. https://forum.cocos.org/t/topic/95087

官方文档

https://docs.cocos.com/creator/manual/zh/advanced-topics/custom-render.html

思路:假设我们已经拿到了2区域的位置坐标,如何将下一页的纹理显示到这个区域里面?

  • 获取下一页的截图。

  • 将截图纹理进行自定义渲染。第一步很好做到,重点是第二步。

在说第二步之前还是得回归到前面的一个问题,就是我们已经假设拿到了所有的区域坐标,这部分坐标是如何获取到的?贴一个白玉无冰大佬的教程:https://forum.cocos.org/t/topic/112045

大佬的文章里有如何获取到手指划过时得到两个区域的方法。

注:上述链接中的代码是3.0引擎的,很多api和2.x区别还是很大滴,主要是理解数学计算的过程。

借鉴到大佬的分割代码之后,我们可以得到两个关键的东西splitPolygons和splitUvs。

splitPolygons是两个区域的分割坐标组成的数组,splitUvs是两个区域的分割的纹理坐标组成的数组。

如果我们将前面截图获取到的纹理的顶点坐标设置成splitPolygon,将其纹理坐标设置成splitUv,并且设置了正确的索引数组,那么得到的就是一个看起来被调整了角度的只有部分显示的图片。效果如图:

这时可以发现,宇智波鼬变得有点可怕呢......

出现这个情况的原因是我们的uv取得是漏出来区域的部分的坐标,需要轴对称一下采样当前纹理相对于y轴对称的另一面的纹理。方法就是 1-当前纹理坐标.x。

这样效果就OK了。

真的ok了吗?

完善

  1. 给翻页的缝隙加一点阴影。没啥技术含量,就是算坐标然后贴一个黑乎乎的九宫格图片上去,调整一下透明度就ok了。

  2. 翻到中轴线自动切页。更没啥技术含量,翻到一半自动翻过去......体验稍微好一点,要不然可能会出现从底下往上翻的情况......

关于自定义assmbler的知识,没接触过的需要一点点时间去梳理,上面大佬们和官方的文章已经讲解的很好了,这里就不再赘述了。

总结

  1. 当前页面用多边形遮罩;

  2. 当点击屏幕时根据坐标判断是【下一页】的操作还是【上一页】的操作,然后调整下层页面的zindex,使漏出来的页面是对应的上下页;

  3. 此时把预先截好的图拿出来作为纹理,通过自定义assmbler渲染出来即可。

其实整体思路和@白玉无冰大佬的折纸很像。引擎方面测试了 2.3.2 和2.4.4 都可以运行。

在社区捡了这么些年的便宜,一直想尝试做出点贡献,源码已经提交Cocos Store资源商店,感谢大家的支持。

链接:https://store.cocos.com/app/detail/2983

参考链接

  1. https://forum.cocos.org/t/topic/103699

  2. https://forum.cocos.org/t/topic/95087

  3. https://forum.cocos.org/t/topic/112045

-完-

Creator星球游戏开发社区,欢迎大家投稿分享技术,让我们链接到更多的伙伴,助力开发者技术精进,知识变现!

  • Creator游戏开发教程PDF免费下载(800+页)

  • 编写高效 TS 的一些建议

  • JavaScript 内存详解 & 分析指南

  • Creator 最佳文字书写解决方案!

  • Creator 2.x 大项目卡顿有救了!

超实用的折纸翻书,开发出这款漫画绝对爆了!相关推荐

  1. 十年游戏老兵,如何开发出一款受索尼青睐的VR游戏?

    导语:本期公开课,雷锋网邀请到姚堃(Kun,更多的被人称为"姚姚丸"). 提及当下VR的应用场景,VR游戏无疑是最火的,也是最能够吸引消费者的.但针对目前三大头显平台Oculus ...

  2. 如何开发出一款仿映客直播APP项目实践篇 -【服务器搭建+推流】

    如何开发出一款仿映客直播APP项目实践篇 -[原理篇] 如何开发出一款仿映客直播APP项目实践篇 -[采集篇 ] 如何开发出一款仿映客直播APP项目实践篇 -[服务器搭建+推流] 如何开发出一款仿映客 ...

  3. 网上有一款测试人血压的软件,中国和加拿大合作新研究开发出一款可通过自拍测量血压的软件...

    中国杭州师范大学和加拿大多伦多大学研究人员借助透皮光学成像技术开发出的一款可通过自拍测量血压的软件. 据了解,中国杭州师范大学和加拿大多伦多大学研究人员借助透皮光学成像技术开发出的一款可通过自拍测量血 ...

  4. 普本在校生是如何零基础在一个月内开发出第一款微信小程序的

    先自我介绍一下,我是一个普通本科的大三在读生,在2020年春节前后,自己一个人开发并上线了第一款微信小程序,后续陆续开发了N款小程序,并且自己通过毕设.课设的开发在2020年上半年的疫情期间挣了一万多 ...

  5. android 如何开发出一款知名应用:构思篇

    为什么80%的码农都做不了架构师?>>>    导读:能在应用市场中站住脚跟,捞得一桶金的只是少数.想了解如何炮制成功应用,我们可以从这些赢家身上窥得一二.产品构思与定位,决定了一款 ...

  6. python能做什么游戏-你也可以用Python开发出一款火遍全球的游戏!

    还记得这款火遍全球的像素小鸟游戏吗? 没有精细的动画,极简的游戏机制.却成为苹果商店下载量最多的免费 app,并为游戏制作人带来了数百万美元的收益. 当姜文说"站着把钱挣了"的时候 ...

  7. 如何开发出一款直播APP项目实践篇 -【原理篇】

    [ 主要模块] 主播端: 把主播实时录制的视频,经过(采集.美颜处理.编码)推送到服务器 服务器: 处理(转码.录制.截图.鉴黄)后分发给用户播放端 播放器: 获取服务器地址, 进行拉流.解码.渲染 ...

  8. 当我用C++开发出一款打字练习程序分析分享

    include <iostream> #include <cstdlib> #include <ctime> #include <windows.h> ...

  9. 震惊!!十五天开发出一款安卓打卡app,并且成功发布!

    震惊!十五天开发一款安卓APP并成功发布 摘要 功能展示,页面展示 功能展示 项目查看 安卓app下载: 简化版的微信小程序 开发过程 界面设计 功能设计 后台开发 前端开发 安卓app一些功能的实现 ...

最新文章

  1. Metasploit***技巧:后***Meterpreter代理
  2. 限定filesize的数据泵导入导出操作案例
  3. CentOS-6.9升级到Python-3.5
  4. tp3.2 复合查询
  5. Log4j 2配置与IntelliJ IDEA控制台颜色
  6. KNN算法检测手势动作
  7. (12)FPGA面试技能提升篇(IUS、PT、Leda)
  8. 如何从Web浏览器远程监视Linux服务器和桌面
  9. 苹果公司为什么不给iPhone设计大容量电池和快充?
  10. QString、QByteArray 相互转换、和16进制与asc2转换
  11. linux 已有目录挂载磁盘
  12. 中科大EPC课程爬取
  13. win10资源管理器窗口无法缩小
  14. Python ctypes的byref和pointer区别
  15. fireBug网络面板数据说明(转)
  16. linux 查看硬盘空间
  17. Android 刘海屏适配全攻略
  18. octobercms mysql_手把手教你选择一款适合自己的CMS/博客程序
  19. 统计单词个数———有穷状态机编程
  20. Mac上出现多个版本选择打开edge浏览器

热门文章

  1. ubuntu20.04-server版获取电源使用情况
  2. jquery获取th的值
  3. SD卡格式化恢复怎么操作?只用这招!
  4. 关于统一模型法线的方法(如果模型法线不统一,断开的,那么顶点动画会让模型破面)
  5. sncr脱硝技术流程图_SNCR锅炉脱硝技术工艺流程图
  6. 创新奇智上市首日破发:市值蒸发37亿港元,技术含金量略显不足
  7. 告别阳台储物,把它变成城市中舒适和安静的避难所
  8. [code]自动白平衡white blance
  9. 计算机关机重启后黑屏,电脑关机后重启屏幕黑屏怎么办
  10. 快速放松的11种简单方法。