ClippingNode 用于对节点进行裁剪或遮罩,继承于Node。根据指定的模版(Stencil)裁剪图片生成不同的形状,可像普通的节点放到Node,Layer,Scene中。其原理图如下:

模版(Stencil):可设定任意形状

底板: 根据模版形状裁切底板

Layer: 用于显示裁切出来的图片

在策略动作游戏中,我们经常会看到人物属性表,如下效果图:

为了美观,我们需要两张图资源,一张用于背景,另一张用于裁切。其图片为正六边形,如下:

其正六边形斜线上点的位置计算图示如下:

其Demo实现代码如下:

local winSize = cc.Director:getInstance():getWinSize()
local ClipTest = class("ClipTest", function()return cc.Layer:create()
end)function ClipTest:ctor()self:creatClipWnd()
end function ClipTest:creatClipWnd()-- 添加背景local bgSprite = cc.Sprite:create("clip_2.png")bgSprite:setPosition(cc.p(winSize.width/2, winSize.height/2))self:addChild(bgSprite)local bgSize = bgSprite:getContentSize()local bgPosX, bgPosY = bgSprite:getPosition()local center = cc.p(bgPosX,bgPosY)          -- 中心点位置local radius = bgSize.height/2              -- 半径 local angle = math.rad(30)                  -- 角度-- 测试数据local numList = {70,10,80,90,60,50}local textList = {[1] = {name = "攻击", pos = cc.p(bgPosX, bgPosY + radius+ 10)},[2] = {name = "防御", pos = cc.p(bgPosX+radius*math.cos(angle)+20, bgPosY+radius/2)},[3] = {name = "生命", pos = cc.p(bgPosX+radius*math.cos(angle)+20, bgPosY-radius/2)},[4] = {name = "暴击", pos = cc.p(bgPosX,bgPosY - radius - 10)},[5] = {name = "闪避", pos = cc.p(bgPosX-radius*math.cos(angle)-20, bgPosY-radius/2)},[6] = {name = "魅力", pos = cc.p(bgPosX-radius*math.cos(angle)-20, bgPosY+radius/2)},}-- 属性文本for i = 1, 6 do local label = ccui.Text:create(textList[i].name, "Arial", 18)label:setPosition(textList[i].pos)self:addChild(label)end -- 使用DrawNode绘制六边形,可参考:https://www.cnblogs.com/SkyflyBird/p/10133960.html-- 每条半径点上的位置要进行等比换算,公式: X/num = radius/100, 求X-- 攻击local pos1 = {}pos1.x = center.xpos1.y = center.y + math.floor((numList[1]*radius)/100)-- 防御local pos2 = {}local radius2 = math.floor((numList[2]*radius)/100)   pos2.x = center.x + math.cos(angle)*radius2pos2.y = center.y + math.sin(angle)*radius2-- 生命local pos3 = {}local radius3 = math.floor((numList[3]*radius)/100)pos3.x = center.x + math.cos(angle)*radius3pos3.y = center.y - math.sin(angle)*radius3-- 暴击local pos4 = {}pos4.x = center.xpos4.y = center.y - math.floor((numList[4]*radius)/100)-- 闪避local pos5 = {}local radius5 = math.floor((numList[5]*radius)/100)pos5.x = center.x - math.cos(angle)*radius5pos5.y = center.y - math.sin(angle)*radius5-- 魅力local pos6 = {}local radius6 = math.floor((numList[6]*radius)/100)pos6.x = center.x - math.cos(angle)*radius6pos6.y = center.y + math.sin(angle)*radius6-- local drawnode = cc.DrawNode:create()local vertices = {pos1,pos2,pos3,pos4,pos5,pos6}drawnode:drawSolidPoly(vertices, 6, cc.c4b(0,1,0,1))-- 将绘制的六边形作为模版,对其clipSprite进行裁切local clipSprite = cc.Sprite:create("clip_1.png")clipSprite:setPosition(cc.p(bgPosX,bgPosY))-- local clipnode = cc.ClippingNode:create()clipnode:setPosition(cc.p(0,0))-- 设置alphaclipnode:setAlphaThreshold(1) -- 添加底板
    clipnode:addChild(clipSprite) -- 设置模板
    clipnode:setStencil(drawnode) -- true底板可见,false模板可见    clipnode:setInverted(false)            self:addChild(clipnode,100)
endreturn ClipTest

转载于:https://www.cnblogs.com/SkyflyBird/p/10166374.html

cocos ClippingNode 之绘制六边形战力(一)相关推荐

  1. 米家app扫描不到石头机器人_2000元档新擂主?详解石头扫地机器人 P5战力值

    原标题:2000元档新擂主?详解石头扫地机器人 P5战力值 透过这个令人不堪回首的长假,方了解自己的懒惰底线在哪,晨起的生物钟被调到了自然醒,每天饿到下午吃挂面--望着地板上日益渐厚的灰尘,悄然打起了 ...

  2. 如何打印网页版的发票_梦幻西游网页版:陷入瓶颈期,如何快速提升战力?氪金能解决问题...

    在梦幻西游网页版中,战力的高低直接影响着玩家的游戏体验,因此大家都将注意力放到了这上面.然而,提升战力并非易事,随着等级越来越高,难度也会逐渐提升.前不久,就有一位玩家遇到了麻烦,据他描述,目前的战力 ...

  3. 修复版超强大微信小程序源码-内含几十款功能王者战力查询

    介绍: 这是一款特别强大的一款微信小程序源码,初步算了一下,该款小程序目前包含了几十个功能. 具体功能如以下: 游戏扫码登录: 王者战力查询: 改名生成(多种生成方式): 头像框制作(N款模板): 王 ...

  4. 项目开发中如何提升团队的战力?

    前言 曾有一些好友和同事问我: 伴随着团队人数的增加,怎么样能让整个团队的产出是 1+1 >2? 起码也是 1+1 = 2 . 结合我自身的一些角度和经验,我给出了我的一些想法和做法. (这里的 ...

  5. 王者荣耀微信哪个服务器怎么选,王者荣耀:国服战力对比!手Q和微信哪个大区的战力更胜一筹?...

    原标题:王者荣耀:国服战力对比!手Q和微信哪个大区的战力更胜一筹? 每个玩家都希望自己能够获得国服称号,想要获得的难度却是非常大的,但这也不妨玩家们对国服最高战力的讨论. 在王者荣耀里将国服战力分成了 ...

  6. uniapp中制作战力计算器

    uniapp中制作战力计算器 <template><view class="calculate-wrap"><!-- 计时器-start --> ...

  7. 鸿蒙时期人物排行榜,《永生》之战力排行榜,那些经典角色你还记得吗

    <永生>之人物战力排行榜,主角方寒不纳入排行榜 第十:轮回道人 修为十几个混沌纪元.是鸿蒙道人师弟,实力超越天君,曾是一尊冥神修成大道,被神界始祖圣王击杀,功力传给了黄泉大帝. 第九:电母 ...

  8. 一战封神——提升奇珍提高战力

    在一战封神中等级十分重要,我们吸在游戏中提升到相应的等级,才能解锁更多的剧情和游戏玩法,因此怎么才能在游戏中快速升级就显示得十分重要.如何提升可以从多方面来提升. 提升披风,选择自动提升或者提升,提升 ...

  9. 小程序源码:王者荣耀改重复名,空白名最低战力查询助手-多玩法安装简单

    这是一款由重复名,空白名.和各区战力查询组合的一款微信小程序源码! 重复名支持一键生成几十个,就再也不怕都被别人用过了! 空白名支持多种空白名,王者荣耀空白名,贵族居中空白名,QQ微信专属空白名 战力 ...

  10. 小程序源码:王者战力查询,游戏扫码登录,王者巅峰信息查询等等支持流量主收益和CPS收益-多玩法安装简单

    这是一款特别强大的一款微信小程序源码 初步算了一下,该款小程序目前包含了几十个功能 具体功能如以下: 游戏扫码登录 王者战力查询 改名生成(多种生成方式) 头像框制作(N款模板) 王者巅峰数据查询 王 ...

最新文章

  1. 如何优化你的网站快速提高流量
  2. iOS应用代码注入防护
  3. 5、Power Query-抓取网页数据做漂亮的图表
  4. Spring中HibernateTemplate类的使用
  5. while 循环的理解
  6. GridView中的格式化
  7. Memory Management (内存管理)
  8. Ubuntu上,如何成功的安装pygrib
  9. android 自动打开qq,qq自动发消息脚本
  10. zabbix3.0监控详解
  11. EN 13329强化木地板规范要求和试验方法
  12. 0x00007FF73361E515 处(位于 基于多态的职工管理系统.exe 中)引发的异常: 0xC0000005: 职工岗位输入不是1,2,3,而是其他乱七八糟的
  13. 安利一个很棒的html背景图片网站
  14. 数码相册的实现(手势切换图片,用链表加快效率,jpeg解码)
  15. 小红书七夕营销攻略,玩出新花样(内附小红书推广方案干货)
  16. 互联网信息服务安全评估报告
  17. CAD设置超链接(网页版)
  18. EffectiveJava阅读感想一
  19. 电脑重装系统后U6连不上服务器了,重装系统后电脑怎么连不上网络?电脑连接网络步骤...
  20. Elasticsearch 异常处理

热门文章

  1. 软件工程——团队答辩
  2. tp801单板微型计算机英文全称,TP801型微型计算机在低压铸造与差压铸造液面加压控制系统中的应用.pdf...
  3. 嵌入式系统上电,程序的运行过程
  4. LeetCode:459.重复的子字符串 Python3 | 判断输入的字符串是不是可以由子串多次重复构成
  5. mysql 允许主码重复_数据库主码可以重复吗
  6. 刷IP工具、刷IP软件的原理和工作过程
  7. Node.js web框架Clouda初接触
  8. 与现代教育技术有关的计算机知识,基于计算机的现代教育技术手段的利用与开发...
  9. 房地产开发项目管理浅析
  10. 2022-10-11 myql-exists子查询外表关联记录