[COCOS2DX-LUA]0-001.利用ClippingNode实现放大镜功能
用过Iphone的都知道,Iphone在定位光标位置的时候会把内容进行放大,这样我们就能很快的把光标移动到指定的位置。那么在我们的Cocos2dX的游戏中,怎么可以实现这种功能呢。起先我就是想起了Iphone自带的功能,但是这样的话,我们必须做个接口,然后有Iphone和Android两种实现才能完成。在Cocos2dx中,我们更希望的是能过写一套代码能够兼容两个系统,那么我们就要尽量使用Cocos2dx的代码。
后面跟一些朋友讨论后,得出了一个解决方法。
首先我们需要一个东西,能实现把你所要放大的东西按指定的形状进行显示,然后再把显示的内容进行放大。抱着这么一个理念,我们很容易想到了ClippingNode根据指定的模版对精灵进行截取。那么初步思路有了。但是,放大后我们要保证图片的位置不变,放大的区域是以放大镜的中心为锚点放大的,这就要求我们要获得每次放大镜位置改变后被放大物体的锚点,锚点改变后,相应的位置也得改变,才不会造成图像偏移。
好,讲了这么多,大家都应该很好奇效果。那就上两张效果图吧。
我们可以看到了熊猫位置的背景被放大了。
下面我们看看代码怎么实现
--这个不重要,就是示例用的快速创建的层和场景local scene, layer = game:enterDemoScene()--获取自己的层local mainLayer = require("app.test.layer.MainLayer")--移除测试层,添加自己的层 layer:remove()layer = mainLayer.new():p(0,0):to(scene)--放大镜效果--magnifier 放大镜图片--parent 放大镜父亲节点--point 放大镜的位置--magnifierNode 被放大的精灵function layer:magnifier(magnifierImage,parent,point,magnifierNode)--放大镜的模板,也是放大区域 local magnifierRect = D.img(magnifierImage):p(point):to(parent,1) if parent._mclip ~= nil thenparent._mclip:removeFromParentAndCleanup(true)parent._mclip = nil end --创建ClippingNode,这里要将模板传进去 parent._mclip = CCClippingNode:create(magnifierRect)parent._mclip:setInverted(false)parent._mclip:setAlphaThreshold(0)parent._mclip:setZOrder(1)parent:addChild(parent._mclip) --添加放大镜照片,盖在放大镜区域上parent.magnifierNode = magnifierNode:anchor(D.BOTTOM_LEFT):p(0,0):to(layer._mclip)parent.magnifierNode:setScale(1.2) --真实的放大镜 local magnifier = D.img(magnifierImage):p(point):to(parent,2) --在放大镜上绑定点击功能 magnifier:bindTouch() function magnifier:onTouchBegan(x,y,touches) return true end --移动的时候实时计算放大物件的锚点和位置,当然还有放大模板的位置 function magnifier:onTouchMoved(x,y,touches)self:p(x,y)magnifierRect:p(x,y) local anchor1 = parent.magnifierNode:getAnchorPoint() --把锚点定位到要放大的位置parent.magnifierNode:setAnchorPoint(ccp(x/magnifierNode.width ,y/magnifierNode.height)) local anchor2 = parent.magnifierNode:getAnchorPoint()parent.magnifierNode:p(ccp(parent.magnifierNode:px() + parent.magnifierNode:px() * (anchor2.x - anchor1.x),parent.magnifierNode:py()+ parent.magnifierNode:py() *(anchor2.y - anchor1.y) )) end function magnifierRect:onTouchEnded(x,y,touches) end end --调用代码,要指定width和height,后面计算锚点用 local magnifierNode = mainLayer.new();magnifierNode.width = 960magnifierNode.height= 640 layer:magnifier("panda/panda_1.png",layer,ccp(480,320),magnifierNode)
以上是用ClippingNode实现放大镜效果的代码!
结语
- 实现了放大镜功能,学会了ClippingNode使用
本站文章为 宝宝巴士 SD.Team 原创,转载务必在明显处注明:(作者官方网站: 宝宝巴士 )
转载自【宝宝巴士SuperDo团队】 原文链接: http://www.cnblogs.com/superdo/p/4495550.html
转载于:https://www.cnblogs.com/superdo/p/4495550.html
[COCOS2DX-LUA]0-001.利用ClippingNode实现放大镜功能相关推荐
- Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1)
Cocos2d-x 3.2:通过ClippingNode实现一个功能完善的跑马灯公告(1) 本文转载至深入理解Cocos2d-x 3.x:一步一步通过ClippingNode实现一个功能完善的跑马灯公 ...
- Cocos2d-x v3.0物理系统 利用PhysicsEditor创建多边形
Cocos2d-x 3.0的新物理系统我就不必多说了,接触一段时间,感觉还是不错的.对于那些基本概念,网上的教程已经泛滥了,就不多说了,不过对于创建多边形物体的教程,还真不多,很多都是创建圆形和矩形, ...
- (原创) cocos2d-x 3.0+ lua 学习和工作(4) : 公共函数(5): 返回指定表格中的所有键(key):table.keys...
这里的函数主要用来做:返回指定表格中所有的键.参考资料为quick_cocos. 星月倾心贡献~~~ --[[ -- 返回指定表格中的所有键(key) -- example:local t = ( a ...
- (原创) cocos2d-x 3.0+ lua 学习和工作(4) : 公共函数(8): 生成只读table
这个函数的作用是:生成只读table. --[[ -- 生成只读table -- @param table t 需要不允许修改的tableexample:local tb = {"星期一&q ...
- 最新cocos2d-x 3.0博客教学 小游戏[史上最坑爹的游戏] 001主画面以及关卡选择画面的制作
cocs2d的开发环境我相信大家都能搭建好了,下面我们直接的进入正题,开始做我们的小游戏,如果对搭建环境还有不懂的童鞋请看我写的这篇博文 cocos2d-x 3.0游戏开发xcode5帅印博客教学 0 ...
- Cocos2dx Lua开发环境搭建
本文记录在 Windows 下搭建 cocos2dx lua 开发环境,还有调试设置. 系统:Windows 7 64 IDE:Mircrosoft Visual Studio 2013 Cocos2 ...
- cocos2d-x lua 学习笔记(1) -- 环境结构
Cocos2d-x 3.0超过环境的版本号来建立和前Cocos2d-x 2.0 差异较大的版本,从同时Cocos2d-x 3.0项目打包成apkAndroid的应用程序文件,步骤,构建环境有些乏味安德 ...
- cocos2d-x lua 学习笔记(1) -- 环境搭建
Cocos2d-x 3.0以上版本的环境搭建和之前的Cocos2d-x 2.0 版差异较大的,同时从Cocos2d-x 3.0项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后, ...
- Cocos2d-x Lua中实例:帧动画使用
Cocos2d-x Lua中实例:帧动画使用 下面我们通过一个实例介绍一下帧动画的使用,这个实例如下图所示,点击Go按钮开始播放动画,这时候播放按钮标题变为Stop,点击Stop按钮可以停止播放动画. ...
最新文章
- 通信工程和计算机科学会议,计算机科学论坛--2019年IEEE第二届国际计算机与通信工程技术会议(CCET 2019)...
- Android 打印log 在logcat 看不到
- 作为本科大学生比较适合的水准比较好的,嵌入式软件系统的会议
- 解决Can't connect to MySQL server on 'localhost' (10048)
- 微信红包的支撑架构原理是什么?
- redis基本数据类型之String
- jQuery两把利器
- 无代码绘制基因表达箱线图
- 在ASP.NET Web Application 中如何处理图片 【转】-有用
- markdown入门4--矩阵空格公式方程组
- CISCO 路由器(1)
- flash计算机代码怎么写,应用程序操作NorFlash示例代码分享(norflash接口使用方法)...
- 代码文件夹带有红色感叹号_接口测试平台代码实现7:菜单的开发
- 数据错误循环冗余检查是什么意思_德尔西曼.交换机是一种什么设备?通过什么方式进行交换?...
- window.print打印pdf
- 盘点软件可以解决哪些固定资产盘点问题
- PXI-10024100KSps、24Bit数据采集模块
- 2021年东莞高新企业补贴政策
- redis集群伸缩【转】
- QT窗口:透明与半透明、不规则异形窗口、控件透明与半透明、不规则异形按钮
热门文章
- 资源地址整合与备份,即时更新
- Python基本语法[二],python入门到精通[四] (转)
- Running Trinity in multiple steps
- 《几何与代数导引》习题1.18——Ceva 定理
- 与Android数据库一起工作
- Vue中虚拟DOM的理解
- cassandra 数据库_使用Apache Cassandra构建分布式NoSQL数据库
- VSCode自定义代码片段9——JS中的面向对象编程
- 推荐 | 作为IDEA的死忠粉,这样设置,效果棒棒哒!
- es6 Promise.prototype.catch()方法