cocos-js,clippingNode的使用(1)
2016年5月11日下午2:14 一.基本定义
二.上手实例游戏中,新手引导算是一个比较重要的部分,指引玩家一步步了解游戏,深入游戏,作用相当于老司机啊,告诉我们正确的打开方式。
下面拿我们游戏中的代码做一下演示: //-------------------1.只显示高亮区域-------------------// //获取需要高亮的控件 that.rootNode = ccs.load("res/ArenaMain.json").node; that.addChild(that.rootNode); var btn_change = that.seekWidgetByName(that.rootNode,"btn_change") that.widget = btn_change //创建裁剪节点 var clipNode = new cc.ClippingNode() that.addChild(clipNode) //创建底板,将屏幕遮灰 that.layerBg = new cc.LayerColor(cc.color(0,150)) clipNode.addChild(that.layerBg) clipNode.setInverted(true)//设置底板可见 //创建模板 var sentcil = new cc.LayerColor(cc.color(255,255,100)) clipNode.setStencil(sentcil)//设置裁剪模板 var worldPosition = btn_change.getParent().convertToWorldSpace(btn_change.getPosition()) sentcil.setPosition(worldPosition) sentcil.ignoreAnchorPointForPosition(btn_change.isIgnoreAnchorPointForPosition()) sentcil.setContentSize(btn_change.getContentSize()) sentcil.setAnchorPoint(btn_change.getAnchorPoint()) //-------------------------------------------------------// 效果图: //-------------------2.只能触摸高亮区域-------------------// var listener = cc.EventListener.create({ event: cc.EventListener.TOUCH_ONE_BY_ONE,swallowTouches: true,onTouchBegan: function (touch,event) { if(that.widget){ //如果触摸点位于高亮区域,则可向下传递触摸,否则吞噬掉触摸 var isHit = that.widget.hitTest(touch.getLocation()) if(isHit){ listener.setSwallowTouches(false) }else{ listener.setSwallowTouches(true) } } //cc.log("wade setTouch 111") return true; },onTouchMoved:function (touch,event){},onTouchEnded:function (touch,event){ },onTouchCancelled:function (touch,event){ } }) cc.eventManager.addListener(listener,that.layerBg) //-------------------------------------------------------// 三.深入研究1.举例:小球透视
代码实现: //创建最底层的温馨场景图 this.sprite = new cc.Sprite("res/bg1.jpg") this.sprite.attr({ x: cc.winSize.width / 2,y: cc.winSize.height / 2,}) this.addChild(this.sprite) //创建裁剪节点 var clipNode = new cc.ClippingNode() clipNode.attr({ x: 0,y: 0,anchorX : 0,anchorY : 0,}) this.addChild(clipNode) //设置alpha阈值 clipNode.setAlphaThreshold(0.05) //创建底板 var content = new cc.Sprite("res/powered.png") content.attr({ x: cc.winSize.width/2,y: cc.winSize.height/2,anchorX : 0.5,anchorY : 0.5,}) clipNode.addChild(content) //底板可见 clipNode.setInverted(true) //创建模板 var ball1 = new cc.Sprite("res/SpookyPeas.png") var ball2 = new cc.Sprite("res/SpookyPeas.png") var ball3 = new cc.Sprite("res/SpookyPeas.png") var ball4 = new cc.Sprite("res/SpookyPeas.png") ball1.setPosition(cc.winSize.width/2-40,cc.winSize.height/2-40) ball2.setPosition(cc.winSize.width/2+40,cc.winSize.height/2-40) ball3.setPosition(cc.winSize.width/2-40,cc.winSize.height/2+40) ball4.setPosition(cc.winSize.width/2+40,cc.winSize.height/2+40) var sentcil = new cc.Node() sentcil.attr({ anchorX : 0,}) sentcil.addChild(ball1) sentcil.addChild(ball2) sentcil.addChild(ball3) sentcil.addChild(ball4) clipNode.setStencil(sentcil) 效果展示: 分析总结:
主要函数:
clipNode.setInverted(false)
具体说明:
结论:
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- c# – 高级:如何优化我的复杂O(n2)算法
- ruby-on-rails – Railstutorial.org验证唯一的电子邮件
- ruby-on-rails – Ruby / Rails – 上周五获得? (上周五)
- Highcharts+Ajax+Json+Sturts2实现的图形异步实时刷新的一个
- 为什么要在PostgreSQL中创建空(没有行,没有列)表
- cocos2dx android winSize 由来
- objective-c – OSX上的IBOutletCollections和Interface Bu
- SQLite数据库的操作
- Flex Socket安全策略<policy-file-request/>及应对方法
- 8种Nosql数据库系统对比