使用cocos creator制作小游戏总结

要点

  • UI界面重构:可以把设计稿作为最底层节点,逐步把节点对齐设计稿,这样可以免计算节点位置。
  • 使用 VS Code 激活脚本编译(快捷键ctrl+p):配置地址
  • 少使用active属性,使用其会触发递归遍历场景,开销较大,可以通过设置opacityscale,或者修改位移达到隐藏和显示的效果
  • Label文字组件添加描边:LabelOutline组件
  • 对象浅拷贝与深拷贝:
浅拷贝:
var obj1 = {name:'lily',age:12}
var obj2 = obj1
obj2.age = 13 //obj1,obj2的age都变成13

深拷贝:
function copy(obj){
    var newObj = {}
    for(var attr in obj){
        newObj[attr] = obj[attr]
    }
    return newObj
}
var obj1 = {name:'lily',age:12}
var obj2 = copy(obj1)
obj2.age = 13
  • loading的制作:
1.`cc.Sprite`组件的`type`属性改成`FILLED`
横向loading:
fillType: HORIZONTAL
fillStart:0  //从左边开始
fillRange:0  //填充的百分比,0~1
扇形loading:
fillType: RIDICAL //扇形
fillCenter:(0.50.5//中心点开始
fillStart:0.25  //最上边
fillRange:0   //填充的百分比,负为顺时针,正为逆时针
扇形讲解图:
            ^y
        0.25|              
  0.375 ----|---0.125
        |   |   |
  0.5---|---|---|0----->x
        |   |   |       
   0.625----|---0.875
           0.75
2.通过脚本修改`fillRange`属性即可
cc.loader.onProgress = (completedCount, totalCount, item) => {
   const progress = (completedCount / totalCount).toFixed(2)
   // 顺时针
   this.loading.getComponent('cc.Sprite').fillRange = -progress
   }
 }
  • 锚点anchor:左下角是(0,0),右上角是(1,1)
  • 当在对战游戏中出现各种动画时,譬如:2s后根据对方或者自己开始某个动画,倘若一开始回合属于对手,该动画不应该在自己回合出现。但在2s的时间内对手已经完成自己的回合,此时回合到自己,这时2s后这个动画就认为一开始是自己的回合,导致动画执行错误,此时,需要添加一些判断条件,是否开始了一回合,以防止在某段时间内参数改变导致动画出错。
  • 随着新场景的切换,内存占用就会不断上升。除了使用 cc.loader.release等API来精确释放不使用的资源,我们还可以使用场景的自动释放功能,在场景属性管理器中设置自动释放资源选项。
  • 判断是在小游戏内还是app的webview内:cc.sys.isBrowser
  • 谷歌浏览器跨域调试:完全退出chrome浏览器后,在终端输入命令:
    open -a "Google Chrome" --args --disable-web-security —user-data-dir
  • 对于打包web以及其他平台后,修改页面loading时出现的cocos creator官方的loading样式,修改该样式的方法(mac中,windows原理一样):
1.右键点击cocos creator软件选择“打开包内容”
2.去到文件路径路径:Contents/Resources/static/build-templates/shares/下修改style-mobile.css对应样式
  • 新建资源和删除资源要从cocos creator中进行操作,不要在vs code编辑器中操作,因为在vs code中操作删除只是删除了一个文件,没有把相应的.meta文件删掉。
  • 碰撞检测
    a.在编辑器中添加Collider,根据物体形状进行选择,使用矩形,圆形还是多边形碰撞
    b.在 项目-项目设置-分组管理 中添加分组,然后勾选会进行碰撞的组,例如 灯 和 人,然后在编辑器中的Node中的Group中选择相对应的碰撞分组
    c.给碰撞对象绑定组件,并在组件中添加碰撞检测代码,并做相应碰撞效果处理:
onCollisionEnter (other, self) {
   console.log('on collision enter')
   },
onCollisionStay (other, self) {
  console.log('on collision stay')
},
onCollisionExit (other, self) {
   console.log('on collision exit')
  }

d.并开启碰撞检测:

this.manager = cc.director.getCollisionManager()
// 开启碰撞检测
this.manager.enabled = true
// 开启碰撞边缘绘制调试
manager.enabledDebugDraw = true
// 开启包围盒绘制调试
manager.enabledDrawBoundingBox = true

e.如果需要去掉相同预制节点中不需要进行碰撞检测的节点,可以指定节点关闭

node.getComponent(cc.CircleCollider).enabled = false
  • 两人赛跑之间的位移差视觉处理:对不同物体选择不同的参照物
    a.当我停止对手在跑的时候,我与背景相对静止状态,对手向前跑
    b.当我跑的并且对手也在跑的时候,我和对手相对静止
    c.当我跑,对手停止的时候,对手和背景相对静止

难点

  • 几个场景公用一条websocket连接:建立ws模块,在游戏逻辑模块进行托管处理
// ws模块:
const WS = {
  ws: null,
  wsUrl: null
  },
  _setWsCloseFunc: function () {},
  _setOpenFunc: function () {},
  _setMessageFunc: function () {}
}
// 连接websocket
WS._createWebSocket = function (url) {
  try {
    this.ws = new WebSocket(url)
    this._initEventHandle()
  }
  catch (e) {
    console.log('catch', e)
  }
}

// websocket事件
WS._initEventHandle = function () {
  this.ws.onclose = () => {
    this._setWsCloseFunc()
  }
  this.ws.onerror = (err) => {
  }
  this.ws.onopen = () => {
    this._setOpenFunc()
  }
  this.ws.onmessage = (event) => {
    this._setMessageFunc()
  }
}
module.exports = WS

// 游戏逻辑模块
import WS from './ws'
cc.Class({
  extends: cc.Component,
  properties: {
  },
  onLoad () {
  },
  start () {
    WS._setOpenFunc = this._setOpenFunc.bind(this)
    WS._setMessageFunc = this._setMessageFunc.bind(this)
    WS._setWsCloseFunc = this._setWsCloseFunc.bind(this)
  },
  // onclose
  _setWsCloseFunc () {
  },
  // onopen
  _setOpenFunc () {
  },
  // onmessage
  _setMessageFunc () {
  },

})

  • 弹窗事件穿透:对遮罩层添加默认事件
node.on(cc.Node.EventType.TOUCH_START, () => { })
  • ios web中不能自动播放音频(浏览器的限制策略),必须手动触发事件播放,解决此问题,在微信中,需要用WeixinJSBridge:
    WeixinJSBridge.invoke('getNetworkType', {}, (e)=> {这里执行播放音乐});
  • creator中开启音乐的时候默认场景间会共享这个音乐,如果需要跨场景关闭音乐,可全局保存一个audioId,用来关闭
  • 解决多次点击动画显示问题:例如:动物弹起和坐下是两个位置变化的动画,弹起显示可移动方向箭头,如果多次点击,可能会造成动画错乱现象,可以定义好在某个动作在进行时,stop其他动画。
  • 对于棋盘类游戏,一般分别定义一个二维数组存储棋盘信息,一个二维数组保存棋盘UI信息,通过更新二维数组信息,以更新界面UI
  • iphoneX以及高屏适配问题:在设计分辨率使用FIT HEIGHT模式的前提下,采用整体缩放根节点的方式适配:(设计分辨率在720*1280前提下,在各种设备下,高始终是1280,宽度小于720时缩放canvas)
this.windowRatio = this.node.width / 720
if (this.node.width < 720) {
  this.node.scale = this.windowRatio
}
  • h5压后台游戏停止导致时间停滞问题:
    a.在自己回合的时候压后台,利用setTimeout递归控制时间,每一秒进行时间设置的时候都记录两个时间戳,对这两个时间戳进行相减,如果为1,则时间正确,否则用realTime=timer - timeStamp
...
this._controlTime(turn, timer)
...
_controlTime (turn, timer) {
    timer--
    const timeStamp1 = Date.parse(new Date()) / 1000
    setTimeout(() => {
        const timeStamp2 = Date.parse(new Date()) / 1000
        const timeStamp = parseInt(timeStamp2 - timeStamp1)
        let realTime = 0
        if (timeStamp === 1) {
          realTime = timer
        }
        else {
          realTime = timer - timeStamp
        }
        console.log(timeStamp, realTime)
        this._controlTime(turn, realTime)
    }, 1000)
}

b.在对方回合压后台,一开始记录连接ws的时候用后台的时间戳与本地时间戳做一个校准,表示服务器与客户端相差多少时间deltaTimer,在每个回合变换时间的时候,用后台的时间戳与本地时间戳和矫正时间戳做比较,设置正确的timer。

timer = serviceTimer - localTimer - deltaTimer

点击查看原文

未经允许不得转载:cocos集中营 » 使用cocos creator制作小游戏总结
微信公众号:zs40086
免vip看全网视频,抢先福利电影啥都有!
10000人已关注
分享到:
赞(1) 打赏