Cocos Creator 开发微信小游戏踩坑
Cocos Creator 开发微信小游戏踩坑
关键帧动画
因为小游戏不支持 gif
关键帧动画,animation 如果要指定大小,需要指定父节点大小 animation 的大小,貌似是不能改变的(设置为 trim 可以裁剪掉透明的像素)
点击动画编辑器 - 打开编辑模式
添加 Animation 组件 - 新建 AnimationClip(会保存为一个 .anim 文件)- 点击属性列表中的 add property 按钮,选择添加 cc.Sprite.spriteFrame
然后将图片一个个拖动到时间轴上
参考 https://www.jianshu.com/p/7d9574f179eb
圆形实现
选择 mask-ellipse 作为父元素遮罩层,再添加子元素,但是效果有锯齿
listView
适用于一屏展示不下的滚动列表
添加 scrollview,添加完后结构为:
scrollview
scrollbar
bar
view
content
我们在 content 里添加东西,需要设置的是 content 的高度
自定义字体
打包成 wx 小游戏后,自定义字体失效,暂时还没找到解决方案
可能的参考:
实现有 border 的矩形(按钮)
暂时没找到解决方案,图片或者默认的 btn 代替
碰撞检测
TODO
https://blog.csdn.net/agsgh/article/details/79723394
拖拽
TODO
用户拖动场景里的元素,然后碰撞检测
微信 avatarUrl 展示
TODO
cc.loader.load({
url: avatar,
type: 'jpg'
}, function (err, texture) {}
)
富文本实现
小游戏不支持直接渲染 html 代码(虽然小程序也不支持,但是可以用第三方工具支持,比如 wx-parser),所以我想了个办法,先将 html 转为图片,然后小游戏前台直接渲染图片
授权
wx 去掉了调用获取用户信息的接口前,先弹授权窗的逻辑,而推荐在界面上给一个授权按钮,然后用户主动点击授权按钮,进行授权
这个逻辑有点复杂,我直接在页面上放了个 100% 的透明层作为授权按钮,授权后,这个蒙层消失掉,如果没有授权,则点击任何部分,就会先授权(这个方案的弊端是,点击任何部位都会先弹授权框,而无论你这个部位是否有东西)
https://developers.weixin.qq.com/community/develop/doc/0000a26e1aca6012e896a517556c01
https://developers.weixin.qq.com/community/develop/doc/000c2424654c40bd9c960e71e5b009
https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/authorize.html
获取用户授权与否情况,如果是还没授权,则有两种可能,一种是从未授权,此时能弹出授权框,另一种是被用户拒绝了,此时弹不出授权框,但是程序判断不了是哪种情况
插入视频
cocos vedioview 组件暂时不支持转为小游戏,所以只能用 wx 原生的,但是用 wx 原生的,不太好掌握 video 绘制的位置,因为 cocos 的坐标系是基于设计稿的(比如我习惯的 720*1280),框架内部会根据手机实际尺寸去适配,但是 wx 原生绘制的 video,是直接绘制到实际屏幕上的,所以我的处理是不绘制到实际 cocos 屏幕上,屏幕上只是个封面图,然后点击的时候,再出现个蒙层(黑色背景),上面只绘制这个 video
微信开发者编辑器里调试小游戏 api
TODO
debug sourcemap 模式调试(可以用 createVideo 的位置来调试)
为了调试微信小游戏 api,可以开启 source map,同时关闭微信编辑器的 ES6 转 ES5(不确定)
if (cc.sys.platform === cc.sys.WECHAT_GAME) {
// wechat exclusive logic
}
长按保存图片
因为小游戏并不提供这个功能(小程序好像有这个功能)
先实现 "监听" 长按的功能(假设 1s 为长按):
this.node.on(cc.Node.EventType.TOUCH_START, () => {
console.log('touch start')
// 假设 1000ms 后还没结束长按,则确保这期间一直是按下状态
this.touchDownHandler = setTimeout(() => {
this.save()
}, 1000)
})
this.node.on(cc.Node.EventType.TOUCH_END, () => {
clearTimeout(this.touchDownHandler)
})
然后实现 save 函数:
/**
* 长按保存图片
*/
save () {
console.log('保存图片')
if (cc.sys.platform === cc.sys.WECHAT_GAME) {
const canvas = cc.game.canvas
console.log(canvas)
const tempFilePath = canvas.toTempFilePathSync({})
wx.saveImageToPhotosAlbum({
filePath: tempFilePath,
success (res) {
wx.showToast({
title: '保存成功'
})
},
fail () {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
}
ipx 适配
TODO 我认为可能是这个项目中最难的,至今还没有实现,ipx 这种屏幕上下会留黑
背景图加长,来适配长屏幕
返回上一个场景
TODO 目前用 loadScene 做跳转,而不是单纯的返回上一个场景,也无法传递参数
如何设置所有场景有一个统一的入口文件
TODO 目前看来好像没有办法,只能在每个场景的 script 里指定?
文件没引用 也会执行?参考 mock.js
TODO 待查 目前是这么个效果,猜测是 cocos 会打包所有文件,那么如果我将 mock 写成函数导入应该没有问题了把
普通的 webpack 打包会有这个问题吗?
微信小游戏开放数据域
TODO 做朋友之间的排名会用到
https://docs.cocos.com/creator/2.1/manual/zh/publish/publish-wechatgame-sub-domain.html
https://developers.weixin.qq.com/minigame/dev/tutorial/open-ability/open-data.html
粒子特效
项目中并没有用到
热重载
使用 when-changed
模块,当脚本更新的时候,执行 curl xxx
触发预览热重载
prefab
重复的元素可以用 prefab 实现,可以理解成 js 中的类,可以 new 出来一些重复的对象,比如游戏中的怪物,2048 中的格子等
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体