cocos ClippingNode 之绘制六边形战力(一)
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 之绘制六边形战力(一)相关推荐
- 米家app扫描不到石头机器人_2000元档新擂主?详解石头扫地机器人 P5战力值
原标题:2000元档新擂主?详解石头扫地机器人 P5战力值 透过这个令人不堪回首的长假,方了解自己的懒惰底线在哪,晨起的生物钟被调到了自然醒,每天饿到下午吃挂面--望着地板上日益渐厚的灰尘,悄然打起了 ...
- 如何打印网页版的发票_梦幻西游网页版:陷入瓶颈期,如何快速提升战力?氪金能解决问题...
在梦幻西游网页版中,战力的高低直接影响着玩家的游戏体验,因此大家都将注意力放到了这上面.然而,提升战力并非易事,随着等级越来越高,难度也会逐渐提升.前不久,就有一位玩家遇到了麻烦,据他描述,目前的战力 ...
- 修复版超强大微信小程序源码-内含几十款功能王者战力查询
介绍: 这是一款特别强大的一款微信小程序源码,初步算了一下,该款小程序目前包含了几十个功能. 具体功能如以下: 游戏扫码登录: 王者战力查询: 改名生成(多种生成方式): 头像框制作(N款模板): 王 ...
- 项目开发中如何提升团队的战力?
前言 曾有一些好友和同事问我: 伴随着团队人数的增加,怎么样能让整个团队的产出是 1+1 >2? 起码也是 1+1 = 2 . 结合我自身的一些角度和经验,我给出了我的一些想法和做法. (这里的 ...
- 王者荣耀微信哪个服务器怎么选,王者荣耀:国服战力对比!手Q和微信哪个大区的战力更胜一筹?...
原标题:王者荣耀:国服战力对比!手Q和微信哪个大区的战力更胜一筹? 每个玩家都希望自己能够获得国服称号,想要获得的难度却是非常大的,但这也不妨玩家们对国服最高战力的讨论. 在王者荣耀里将国服战力分成了 ...
- uniapp中制作战力计算器
uniapp中制作战力计算器 <template><view class="calculate-wrap"><!-- 计时器-start --> ...
- 鸿蒙时期人物排行榜,《永生》之战力排行榜,那些经典角色你还记得吗
<永生>之人物战力排行榜,主角方寒不纳入排行榜 第十:轮回道人 修为十几个混沌纪元.是鸿蒙道人师弟,实力超越天君,曾是一尊冥神修成大道,被神界始祖圣王击杀,功力传给了黄泉大帝. 第九:电母 ...
- 一战封神——提升奇珍提高战力
在一战封神中等级十分重要,我们吸在游戏中提升到相应的等级,才能解锁更多的剧情和游戏玩法,因此怎么才能在游戏中快速升级就显示得十分重要.如何提升可以从多方面来提升. 提升披风,选择自动提升或者提升,提升 ...
- 小程序源码:王者荣耀改重复名,空白名最低战力查询助手-多玩法安装简单
这是一款由重复名,空白名.和各区战力查询组合的一款微信小程序源码! 重复名支持一键生成几十个,就再也不怕都被别人用过了! 空白名支持多种空白名,王者荣耀空白名,贵族居中空白名,QQ微信专属空白名 战力 ...
- 小程序源码:王者战力查询,游戏扫码登录,王者巅峰信息查询等等支持流量主收益和CPS收益-多玩法安装简单
这是一款特别强大的一款微信小程序源码 初步算了一下,该款小程序目前包含了几十个功能 具体功能如以下: 游戏扫码登录 王者战力查询 改名生成(多种生成方式) 头像框制作(N款模板) 王者巅峰数据查询 王 ...
最新文章
- 如何优化你的网站快速提高流量
- iOS应用代码注入防护
- 5、Power Query-抓取网页数据做漂亮的图表
- Spring中HibernateTemplate类的使用
- while 循环的理解
- GridView中的格式化
- Memory Management (内存管理)
- Ubuntu上,如何成功的安装pygrib
- android 自动打开qq,qq自动发消息脚本
- zabbix3.0监控详解
- EN 13329强化木地板规范要求和试验方法
- 0x00007FF73361E515 处(位于 基于多态的职工管理系统.exe 中)引发的异常: 0xC0000005: 职工岗位输入不是1,2,3,而是其他乱七八糟的
- 安利一个很棒的html背景图片网站
- 数码相册的实现(手势切换图片,用链表加快效率,jpeg解码)
- 小红书七夕营销攻略,玩出新花样(内附小红书推广方案干货)
- 互联网信息服务安全评估报告
- CAD设置超链接(网页版)
- EffectiveJava阅读感想一
- 电脑重装系统后U6连不上服务器了,重装系统后电脑怎么连不上网络?电脑连接网络步骤...
- Elasticsearch 异常处理
热门文章
- 软件工程——团队答辩
- tp801单板微型计算机英文全称,TP801型微型计算机在低压铸造与差压铸造液面加压控制系统中的应用.pdf...
- 嵌入式系统上电,程序的运行过程
- LeetCode:459.重复的子字符串 Python3 | 判断输入的字符串是不是可以由子串多次重复构成
- mysql 允许主码重复_数据库主码可以重复吗
- 刷IP工具、刷IP软件的原理和工作过程
- Node.js web框架Clouda初接触
- 与现代教育技术有关的计算机知识,基于计算机的现代教育技术手段的利用与开发...
- 房地产开发项目管理浅析
- 2022-10-11 myql-exists子查询外表关联记录