首页 欧洲联赛正文

剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债

作者介绍:

咱们好,我是麒麟子, 开源棋牌《幼麟棋牌-四川麻将》(走漏版叫 《达达麻将》)作者,成都幼麟科技创始人。

自 09 年进入游戏职业以来,不知不觉现已度过了十个春秋。从前我也风华正茂,从前我也青春年少。岁月如梭,日月如梭,如今已是而立之年。退去了青涩懵懂,换来了浑身的神采飞扬。期望鄙人一个十年,能够用自是谁呼叫舰队己所学的经历,浪迹这个充溢爱恨情仇的游戏江湖。

教程介绍:

《麒麟子 Cocos Creator 实用技巧》为麒麟子的漫笔记载,首要记载一些麒麟子在运用 Cocos Creator 制造棋牌和微信小游戏的时分,遇到的问题的处理计划。期望能够用自己所学,为遇到困难的同学带来必定的协助,为 Cocos 社区尽一份绵薄之力,为游戏教育职业注入一丝丝清流。

截止今天,技巧系列合计更新了 5 则,包含:

  • 怎么正确地显现微信头像
  • 微信姓名切断(支撑表情)
  • 微信小游戏中音效中止问题处理
  • 打包原生 App 截图白屏处理计划
  • 技术 CD 作用制造
  • ……

更多实用教程连续更新中,欢迎感兴趣的开发者重视论坛原贴。

原贴地址:

https://forum.cocos.com/t/cocos-creator/76914

技巧一:怎么正确地显现微信头像

不管是游戏 APP,仍是 H5,又或许是微信小游戏,凡是接入了微信登录的运用,都或许需求显现微信头像。

在 Cocos Creator 中,咱们常见的显现方法是像下面这样:


var headimg = 'http://thirdwx.ql王丹怡栗ogo.cn/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAq朱佳熠noFDTn剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债ltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132'; cc.loader.load({url:headimg,type:'jpg'},function(err,tex){ self.icon.spriteFrame = new cc.SpriteFrame(tex);});

这样做大部分情况下是没有问题的,但简略踩到两个坑:

  • 假定用户在微信中上传的头像不是 JPG 格局,将会显现为黑屏
  • 假定是 H5 中运用上述代码,会提示跨域拜访

而最近新出了一个古怪的工作,便是 Android 体系 7.0+ 的机器,在 4G 网下无法正常显现微信头像,包含腾讯《欢喜斗地主》里的排行榜也显现不出来。

这个问题我猜想,是 4G 的 Android 7.0+ 的 HTTP 头和其他环境下不相同,导致腾讯拒绝了头像拜访,应该是封杀某音的剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债时分,误伤。

处理这个问题最直接的方法,便是在自己的服务器上,装备一条 NGINX 转发协议。


server { listen 80; #server_name h5.ooxx.cn; root /root/wwwroot/; location /image { proxy_redirect off; proxy_set_header Host $host; proxy_set_heade李久衍r X-Real-IP $remote_addr; proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; proxy_pass $arg_url; } }

假定,咱们的外网IP或许域名是 h5.ooxx.cn, 端口是 80,或许其他的。咱们修正上面的拜访方法为如下:


var headimg = 'http://thirdwx.qlogo.cn/mmopen/vi_32/DYAIOgq83erD6MOUwRKV9NyBAqnoFDTnltzAe2zWOkKxyDOFibVBb1ZV5CaATJwYAuNqZ5sXMBC4c8iacaHDf8RA/132';var url = 'http://h5.ooxx.cn:port/image?url=' + headimg + '&sb=213.jpg'; cc.loader.load(url,function(err,tex){ self.icon.spriteFrame = new cc.Spr富钟水牛iteFrame(tex);});

这样改的原因如下:

1、假定你做的是 H5 项目,h5.ooxx.cn 域名刚好便是你的页面加载域名,那么你将处于同域中,不再有跨域问题。

2、当咱们恳求终究组成的 URL 时,NGINX 会将 URL 参数作为恳求地址,转发出去,而且将获取到的信息,原路回来。而咱们增加的 proxy_redirect off 将会抹去咱们体系机型为咱们增加的各种 HTTP HEADER,不会再呈现 Android 7.0+ 4G 网加载不了的问题。

3、增加 &sb=213.jpg 参数,是为了让 cc.loader.load 函数识别到这是一个图片加载,但因为不是强制的填写 type,即便 PNG 也是能够正常显现的。

C 姐弥补:微信头像加载问题,咱们在 Cocos Creator v2.0.10 和 v2.1.1 也会完善,到时分将会直接支撑噢!

技巧二:微信姓名切断(支撑表情)

在咱们日常游戏开发中,常常会面对将玩家侍小妖姓名切断的需求。

假定玩家是在咱们游戏中创立的姓名,那么能够简略粗犷地制止玩家运用手机表情输入即可。

但如调教赏罚果咱们是第三方账号登录,且运用了第三权色方账号的用户昵称,那么这个就欠好确保了。

因而,为了合作界面的显现,咱们一般需求在特定界面上进行姓名切断。

举一个比方,假定我的姓名是 麒麟子 ,咱们一眼看过去,是 5 个字。

但在核算机中可不是 5 个字,即便是悉数用 UTF8 表明字符的 Javascript 中,console.log('麒麟子哈'.length) 也是8.

也便是说表情符号占用了 4 个字符,假如咱们按 UTF8 去切断,必然会导致乱码。

因而咱们界说以下规矩:

  • ascii 字符,算 1 个字符
  • 汉字,算 2 个字符
  • 手机体系表情,算2 个字符 (因为它们尽管占了 4 个字符,可是从显现宽度上来看,依然是 2 个字符)。

下面的函数 strClamp 可助你一臂之力, 这是麒麟子从《幼麟棋牌》最新 5.0 结构中抠出来的代码,期望能够协助到咱们。


//str 需求切断的字符长春吉康串//maxChars 保存的汉字长度//suffix 增加的后缀 (留意,假如后缀不为null或许'' ,则要占用一个汉字的方位,详细看下方的示例代码) function strClamp(str, maxChars, suffix) { 良师通var toCodePoint = function(unicodeSurrogates) { var r = [], c = 0, p = 0, i = 0; while (i < unicodeSurrogates.length) { var pos = i; c = unicodeSurrogates.charCodeAt(i++);//回来方位的字符的 Unicode 编码 if (c == 0xfe0f) { continue; } if (p) { var value = (0x10000 + ((p - 0xD800) << 10) + (c - 0xDC00)); r.push({ v: value, pos: pos, }); //核算4字节的unicode p = 0; } else if (0xD800 <= c && c <= 0xDBFF) { p = c; //假如unicode编码在oxD800-0xDBff之间,则需求与后一个字符放在一同 } else { r.push({ v: c, pos: pos }); //假如是2字节,直接将码点转为对应的十六进制方式 } } return r; } suffix = suffix==null? '...' : suffix; maxChars *= 2; var codeArr = toCodePoint(str); var numChar = 0; var index = 0; for (var i = 0; i < codeArr.length; ++i) { var code = codeArr[i].v; var add = 1; if (code >= 128) { add = 2; } //假如超过了约束,则按上一个为准 if (numChar + add > maxChars){ break; } index = i; //累加 numChar += add; } if(codeArr.length - 1 == index){ return str; } var more = 噶公suffix? 1:0; return str.substring(0, codeArr[index - more].pos + 1) + suffix;}

//示例: var str = '麒麟子哈;strClamp(str,3,'...') // 得到 麒麟...strClamp(str,3,'') //韩竺 得到 麒麟子

技巧三:微信小游戏中音效中止问题处理

音效可谓是一个小游戏的魂灵了。

某些玩法离开了音效更是不或许,比方《别踩白块》,或许一些以速度为主的游戏类型。

麒麟子公司最近有一款斗地主上微信小游戏,别的还做了两款休闲类小游戏。

当咱们觉得差不多功德圆满的时分,有用户反响说,背景音乐忽然就没了,要回来大厅再进游戏场景才有。

我其时榜首反响便是,正在播映的音乐被干掉了,从头播映又是 OK 的。

依据这个假定,那就表明这不是 Cocos Creator 的锅。

通过多方测验,找到了触发微信小游戏声响消失的重现方法:

  • 打接电话
  • 接触 iPhone X 底部的那个白色操作条

接下来便是一顿,百度,论坛,微信文档操作,终究确定了一个微信 API

wx.onAudioInterr剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债uptionEnd

监听音频中止完毕事情,在收到 onAudioInterruptionBegin 事情之后,小程序内一切音频会暂停,收到此事情之后才可再次播映成功。

微信小游戏官方文档地址:

https://developers.weixin.qq.com/minigame/dev/api/wx.onAudioInterruptionEnd.html

与它配套的还有一个 wx.onAudioInterruptionBegin 事情,可是咱们是要康复播映,只需求处理这个end 事情就好了。

处理方法:

加上这个处理方法,是便利急着处理 BUG 的同学们,疏忽之前的剖析进程,直接确定终究成果拿走,不谢!


wx.onAudioInterruptionEnd(function(){ //强行暂停音乐 假如不暂停,调用resumeMusic是无剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债效的,因为是微信让声响消失了 cc.audioEngine.pauseMusic(); //康复音乐播映,比方调用 cc.audioEngine.resumeMusic(); //self.refreshBG(); //console.log('refreshBG');});

留意:必需求先强行调用 cc.audioEngine.pauseMusic,再调用 cc.audioEngine.resumeMusic, 因为这个声响是微信小游戏关掉的,Cocos Creator 的音乐管理器并不知情。

技巧四:打包原生 App 截图白屏处理计划

咱们在做棋牌 App 或许一些特定需求的时分,需求截取当时游戏屏幕内容保存。

咱们一般是选用 cc.RenderTextur四福晋杂记e 来截图并保存到游戏的可写目录。

有时分会遇上,截出来的图紫花玉簪片是白屏,或许部分白屏。

通过多方测验,咱们发现,是 剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债Mask 的锅,用了 cc.Mask 的界面,截图的时分,就会遇上这样的问题。

假如遇上这样的问题,只需求查看你的 cc.RenderTexture 初始化的时分,是否少了参数。最首要的是第三个参数,必定要是 RGBA8888


var texture = new cc.RenderTexture(w, h, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES);

完好示例如下:


function captureScreen(){ var size = cc.director.getWinSize(); var fileName = "result_share.jpg"; var fullPath = jsb.fileUtils.getWritablePath() + fileName; if (jsb.fileUtils.isFileExist(fullPath)) { jsb.fileUtils.removeFile(fullPath); } var width = Math.floor(size.width); var height = Math.floor(size.height); var texture = new cc.RenderTexture(width, height, cc.Texture2D.PIXEL_FORMAT_RGBA8888, gl.DEPTH24_STENCIL8_OES); texture.setPosition(cc.p(size.width / 2, size.height / 2)); texture.begin(); cc.director.getRunningScene().visit(); texture.end(); texture.saveToFile(fileName, cc.IMAGE_FORMAT_JPG);} 

技高占武导弹巧五:技术 CD 作用制造

此作用不只能够用于技术 CD,一些按钮的 CD 也是能够用的。

麒麟子一开始预备了两个套路:

一、是预备 100 张图片,然后依据 CD 进展进行切换

关于榜首个计划,肯定是可行的,且不需求引擎供给特别支撑。而因为麒麟子的 PS 功力有限,没有折腾出来。值得阐明的是,此计划适用于任何引擎,只需有对应的美术图片合作就行。

二、制作 100 个 Graphics 作为缓存,然后依据 CD 进展进行切换

麒麟子创立了一剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债个节点,增加了一个 cc.Graphics 组件。终究发现,cc.Graphics 的 a剁椒鱼头的做法,Cocos Creator 开发小游戏的实用技巧,国债rc 函数,并不能制作出我想要的作用。已然没有直接支撑的函数,想必 Cocos Creator 并不引荐这样的操作,抛弃了。

思索了半分钟,抱着试一试的心态,打开了 Pro顾奕南许风gressB青岛老六铁板鸭肠加盟ar 的组件,究竟,CD 作用从本质上来说,是一个倒着播映的进展条。

三、终究,找到了依据 ProgressBar 组件的处理计划

1、场景树右键 --> 新建 --> UI 组件 -->ProgressBar 组件

2、修正 New ProgressBar 以及其子节点 bar 的宽高, 调为正方形,且锚点为 0.5,0.5

3、修正 bar 的填充形式,如下(留意赤色箭头部分)

4、修正 New ProgressBar 的参数如下(留意赤色箭头部分)

然后拖动 Progress 就能看到变化了。

四、DEMO

DEMO 向咱们展现了以下内容:

  • 技术点击呼应
  • 技术 CD 依据王亚烁不同的时刻,进行 CD 作用旋转
  • 为了匹配技术作用,我旋转了技术 CD 层的节点

DEMO 源代码地址:

https://gitee.com/qilinzi/qlz_ccc_tips(目录 05_skill_cd)

非常感谢麒麟子带来的 Cocos Creator 干货共享,信赖关于 Cocos 新手小白党应该很有学习含义,上述提及到的跟引擎相关的问题,咱们也将在后续版别中进行完善,等待麒麟子后续带来更多的教程。

一起也非常感谢各位开发者对 Cocos 社区所做出的奉献以及对 Cocos 的信赖与支撑,在有賀ゆあ引擎的运用进程中,如有遇到任何问题,或许是有对 Cocos 的定见和主张,欢迎咱们多多在社区中发帖沟通噢,祝咱们周末愉快!

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。