【中英双语教程】桌球小游戏(1)

How to make a simple snooker game with Cocos Creator (1)

桌球小游戏是 BigBear 老师设计、撰写的中英双语的 Cocos Creator 入门教程,面向 Cocos Creator 初学者,但不论你技术如何,相信你会在 BigBear 老师的文章中有所收获。

Shawn 昨天推送了完整的中文版本,为了让大家有一个好的学习体验,我将《Cocos Creator入门实战:桌球小游戏》一文拆分成若干篇中英双语的教程,我们一起学习游戏、学习英语(看我公众号的名字就知道Shawn的英语有多low)!

开始之前 Before Start

640?wx_fmt=png

在开始桌球小游戏之前,我们需要对creator有一定了解以及熟悉,对js语法有一定的了解。在开始同样还是希望大家能够仔细的阅读一遍官方文档,以便理解。

Before start things with Cocos Creator to make our game, you should have a familiarity understanding with Cocos Creator and JavaScript. if there are any questions in the production, pls check those Cocos's offical document:

所涉及到的知识点参考:

  • 物理系统

  • UI系统

  • 监听和发射事件

  • 动作列表

  • 预制体Prefab

  • 图集资源

  • Physics

  • UI System

  • Listen to and launch events

  • Actions and Action Lists

  • Prefab

  • Atlas Asset

ps:本项目所使用的Cocos Creator版本为 v2.0.10

ps: this tutorial is based with Cocos Creator v2.0.10

开启物理系统  Use physics system

为了尽量达到真实的效果,我们对于桌球的运动均采用物理模拟来实现。在Cocos Creator中物理系统是默认关闭的,我们可以通过下面的代码来开启物理系统:

We use physical simulation to acheieve the movement of the balls, so the balls can move as much as reality movement. Physics system is closed by default in Cocos Creator, we can open it with those code:

let physicsManager = cc.director.getPhysicsManager();
physicsManager.enabled = true;	

同时我们也可以通过设置debugDrawFlags来开启一些调试信息的显示,方便我们开发预览:

also we can set physics system to a debug mode that we can see more debug info in preview:

cc.director.getPhysicsManager().debugDrawFlags =	
    cc.PhysicsManager.DrawBits.e_aabbBit |	
    cc.PhysicsManager.DrawBits.e_pairBit |
    cc.PhysicsManager.DrawBits.e_centerOfMassBit |
    cc.PhysicsManager.DrawBits.e_jointBit |
    cc.PhysicsManager.DrawBits.e_shapeBit;	

你可以复制上面的代码来开启物理系统,但还是建议安装一个叫做"PhysicsManager.js"的脚本,代码如下:

you can copy those code in your script to open the physics system, but usually I suggest that we can create a 'physicsManager' component to implement those setting features. Like:

/**
 * physics manager component script
 */
 
cc.Class({
    extends: cc.Component,

    properties: {
       active: {
           default: true,
           tooltip: 'open physics system on component enabled',
       },
       aabb:{
           default: true,
           tooltip: 'drawing AABB rect debug info',
       },
       pair: {
           default: true,
       },
       centerOfMass: {
           default: true,
           tooltip: 'drawing collider's center of mass'
       },
       joint: {
           default: true,
           tooltip: 'drawing joint info between colliders'
       },
       shape: {
           default: true,
           tooltip: 'drawing shape info of colliders'
       },
       gravity: {
           default: cc.v2(0,-960),
           tooltip: 'the physics worl gravity, default is -960 y-axis'
       }
    },

    onEnable() {
        //open or close physics system
        let physicsManager = cc.director.getPhysicsManager();
        if (physicsManager.enabled && this.active) {
            cc.warn('The physical system is enabled!');
        }
        physicsManager.enabled = this.active;

        if (!this.active) {
            return;
        }
        //set gravity value
        physicsManager.gravity = this.gravity;

        //set physics debug flag info
        let drawBits = cc.PhysicsManager.DrawBits;
        if (CC_PREVIEW) {
            physicsManager.debugDrawFlags =
            (this.aabb && drawBits.e_aabbBit) |
            (this.pair && drawBits.e_pairBit) |
            (this.centerOfMass && drawBits.e_centerOfMassBit) |
            (this.joint && drawBits.e_jointBit) |
            (this.shape && drawBits.e_shapeBit);
        } else {
            physicsManager.debugDrawFlags = 0;
        }
    },
    
    onDisable() {
        //close physics system when this component is disabled
        let physicsManager = cc.director.getPhysicsManager();
        physicsManager.debugDrawFlags = 0;
        physicsManager.enabled = false;
    }
});

编写完脚本后,我们将这个组件挂载到Canvas节点下,在属性面板中我们可以看到:

when you completed this script, you can add it to 'Canvas' node, then you can see its proprty setting panel like:

640?wx_fmt=png可视化的编辑,非常的方便。勾上Active开启物理系统,这里调试开关我们开启Shape即可,由于我们这个桌游游戏demo是一个俯视的视角,因此Gravity重力我们设置为(0,0),让小球不会受到重力的影响向下坠去。

make sure that you had set gravity to 0,0 and opened physics system. for a good preview, selected Shape option. why we set the gravity to 0,0 ? because our game is a top view game, if we use defalut gavity 0,-960 , then the balls will fall down influence by gravity.we do not want it happend, so we use 0,0

<end>



小游戏的完整代码以及工程,请在公众号回复【桌球】获取!


640?wx_fmt=jpeg

  1. CreatorPrimer 30篇教程汇总

  2. 我的B站视频开通啦!

  3. 从“新手引导”到“自动化测试”

  4. CreatorPrimer|飞机大战(一)

  5. CreatorPrimer|飞机大战(二)

  6. CreatorPrimer|飞机大战(三)

  7. 微信小游戏,个人开发者还可以上吗?

  8. Creator MVVM方案—为人生节省时间!

  9. Creator2.x 摄像跟随实现RPG地图

  10. 遇见未知的自己,奎特尔成长之路!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值