最新公告
  • 欢迎您光临起源地模板网,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入钻石VIP
  • COCOS快速上手指南

    正文概述 掘金(coderRick)   2021-05-03   1007

    背景

    作为一个h5前端开发,怎么能不会使用cocos开发游戏呢,今天就分享一下我的cocos学习之路。其实事情是这样的:当时我正沉浸在业务需求里面,美滋滋的用着vue,react,心流模式一开,耳机一戴,一天就过去了。 正值周四,突然来了一个会,要开发小游戏,你画我猜,下周开始。瞬间来了压力。

    1. 没玩过cocos
    2. 没做过游戏
    3. 没接过游戏后端,长连也是之前做了一点点聊天需求,根本不熟悉
    4. 时间紧,手上的业务需求还有三个未提测
    5. 很多东西没定,很难下手

    然而事情没那么简单,困难接踵而至:周二之前提供画猜demo。好吧,首要任务已定,2天之内,熟悉cocos,并实现画布。

    开始学习

    1. 看文档

    还好暂时不是3D的游戏,直接新手上路 docs.cocos.com/creator/man…

    2. 写demo

    官方文档提供了一个摘星星的小游戏demo资源,从头到尾写了一遍。

    3. 理清思路

    写了一个小游戏后,大概明白了cocos的开发顺序

    1. 新建项目,这个没什么好解释的。
    2. 新建scene场景,(draw这个像火一样的图标)

    COCOS快速上手指南

    所有的实现都是基于某个场景的,你游戏画面的每一次切换,其实也就是场景的切换,你的布局,物体的运动,保存等,也是基于某个场景。

    1. 布局

    COCOS快速上手指南

    在你选中的场景中进行布局,提前构思布局结构,他的大致思路就是canvas一点点绘制,也就是说css的很多布局就无法使用,比如border属性,你想要实现,必须两个节点嵌套。(这点很烦)

    1. 绑定脚本

    重要节点都要做一些初始化的执行,这个时候你就需要写一些js的代码,并和该节点深度绑定,这样就能自动执行了,有类似于vue的created()。 还有一些需要初始化的属性,也需要一些脚本

    1. 绑定事件

    当你点击,或者按下键盘时要触发的某些操作,你也需要写一些js方法,用它提供的方法进行绑定等。

    4. 画布需要哪些东西

    熟悉了它的开发模式,就要找我需要的资源,我需要克服的难点。

    1. 画布的api

    网上百度一番,终于找到了,Graphics组件。基本满足我的需求,链接奉上: docs.cocos.com/creator/man…

    1. 圆角的实现

    设计稿就圆角,以前border-radius就好了,现在就没那么简单了,通过问同事,百度,找到了,RoundRectMask,别人写好的一个mask组件脚本,可自行百度,一看代码,和在canvas上实现圆角如出一辙。核心代码如下:

    COCOS快速上手指南

    1. 绑定点击事件
    • 把方法写在某个脚本中,(这里写在game.js)

    COCOS快速上手指南

    • 将该脚本绑定在某个节点上,(这里绑定在canvas节点上)

    COCOS快速上手指南

    • 确保需要点击的节点上存在button组件
    • clickEvent属性改为1,绑定一个事件

    COCOS快速上手指南

    • 将canvas节点拖到cc.Node上,选中组件Game,选择你写好的事件

    开始开发

    1. 创建项目

    COCOS快速上手指南

    1. 在assets下新建scene(draw)

    COCOS快速上手指南

    1. 布局

    这里简单看一部分

    COCOS快速上手指南

    1. 写脚本

    总共两个脚本,Game.js中实现所有的操作,颜色选择,尺寸选择,橡皮擦,清除等事件,Brush.js中实现画布的逻辑,改变颜色,尺寸,监听键盘事件等。脚本代码如下:

    // Game.js
    cc.Class({
        extends: cc.Component,
    
        properties: {
            toolBox:cc.Node,
            brush:cc.Node,
            colorNode:cc.Node,
            sizeNode:cc.Node
        },
        // 工具显示隐藏
        handleToolBtn(){
            this.toolShow=!this.toolShow
            cc.tween(this.toolBox).to(0.2,{x:this.toolShow?130:210}).start()
            this.toolBox.x=this.toolShow?130:210
        },
        // 橡皮擦
        handleEraserBtn(){
            this.brush.getComponent('Brush').setBrushColor('#ffffff')
            this.brush.getComponent('Brush').setBrushLineWidth(20)
        },
        // 颜色
        handleColorBtn(e,params){
            this.color=e.currentTarget.color
            this.brush.getComponent('Brush').setBrushColor(this.color)
            this.brush.getComponent('Brush').setBrushLineWidth(this.size)
            this.colorNode.children.forEach((v,i)=>{
                if(i==params){
                    v.children[0].color=cc.color('#ffffff')
                }else{
                    v.children[0].color=cc.color('#E9E6F0')
                }
            })
            this.sizeNode.children.forEach(v=>{
                v.children[0].children[0].children[0].color=this.color
            })
        },
        // 尺寸
        handleSizeBtn(e,params){
            this.size=e.currentTarget.width;
            this.brush.getComponent('Brush').setBrushLineWidth(this.size)
            this.sizeNode.children.forEach((v,i)=>{
                if(i==params){
                    v.children[0].color=cc.color('#ffffff')
                }else{
                    v.children[0].color=cc.color('#E9E6F0')
                }
            })
        },
        // 清除
        handleClearBtn(){
            this.brush.getComponent('Brush').clearDraw()
        },
        onLoad(){
            this.toolShow=true
            this.color='#111111'
            this.size=6
        },
        start(){
            this.brush.getComponent('Brush').setBrushColor(this.color)
            this.brush.getComponent('Brush').setBrushLineWidth(this.size)
        }
    });
    
    
    // Brush.js
    cc.Class({
        extends: cc.Component,
    
        properties: {
            
        },
        onLoad () {
            this.ctx=this.getComponent(cc.Graphics)
            this.ctx.lineJoin=cc.Graphics.LineJoin.ROUND
            this.ctx.lineCap = cc.Graphics.LineCap.ROUND;
            this.node.on('touchstart',this.onTouchStart,this)
            this.node.on('touchmove',this.onTouchMove,this)
        },
        onTouchStart(e){
            const pos=this.node.convertToNodeSpaceAR(e.getLocation())
            this.setBrushPos(pos.x,pos.y)
        },
        onTouchMove(e){
            const pos=this.node.convertToNodeSpaceAR(e.getLocation())
            this.drawTo(pos.x,pos.y)
        },
        setBrushPos(x,y){
            this.ctx.moveTo(x,y)
        },
        // 宽度
        setBrushLineWidth(lineWidth){
            this.ctx.lineWidth=lineWidth;
        },
        // 颜色
        setBrushColor(color){
            this.ctx.strokeColor=color;
            this.ctx.fillColor=color;
        },
        // 绘制
        drawTo(x,y){
            this.ctx.lineTo(x,y);
            this.ctx.stroke();
            this.ctx.moveTo(x,y);
        },
        // 清空
        clearDraw(){
            this.ctx.clear()
        }
    });
    
    
    1. 绑定脚本,事件

    将Game绑定到canvas上,Brush绑定到brush节点上。把点击事件绑定完成。 6. 打完收工。

    结束语

    其实有时候一个新的技术并不是真的很难,只是自己给他设置了门槛,导致自己无法迈出第一步,加油,我的成长之路,我的体验人生。 -- END --


    起源地下载网 » COCOS快速上手指南

    常见问题FAQ

    免费下载或者VIP会员专享资源能否直接商用?
    本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
    提示下载完但解压或打开不了?
    最常见的情况是下载不完整: 可对比下载完压缩包的与网盘上的容量,若小于网盘提示的容量则是这个原因。这是浏览器下载的bug,建议用百度网盘软件或迅雷下载。若排除这种情况,可在对应资源底部留言,或 联络我们.。
    找不到素材资源介绍文章里的示例图片?
    对于PPT,KEY,Mockups,APP,网页模版等类型的素材,文章内用于介绍的图片通常并不包含在对应可供下载素材包内。这些相关商业图片需另外购买,且本站不负责(也没有办法)找到出处。 同样地一些字体文件也是这种情况,但部分素材会在素材包内有一份字体下载链接清单。
    模板不会安装或需要功能定制以及二次开发?
    请QQ联系我们

    发表评论

    还没有评论,快来抢沙发吧!

    如需帝国cms功能定制以及二次开发请联系我们

    联系作者

    请选择支付方式

    ×
    迅虎支付宝
    迅虎微信
    支付宝当面付
    余额支付
    ×
    微信扫码支付 0 元