simplify the life

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 中的格子等

posted on   lessfish  阅读(2340)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 清华大学推出第四讲使用 DeepSeek + DeepResearch 让科研像聊天一样简单!
· 推荐几款开源且免费的 .NET MAUI 组件库
· 实操Deepseek接入个人知识库
· 易语言 —— 开山篇
· 【全网最全教程】使用最强DeepSeekR1+联网的火山引擎,没有生成长度限制,DeepSeek本体

导航

点击右上角即可分享
微信分享提示