【中英双语教程】桌球小游戏（1）

最新推荐文章于 2021-01-10 18:46:32 发布

晓衡的成长日记

最新推荐文章于 2021-01-10 18:46:32 发布

阅读量442

点赞数

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 &amp;&amp; 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 &amp;&amp; drawBits.e_aabbBit) |
            (this.pair &amp;&amp; drawBits.e_pairBit) |
            (this.centerOfMass &amp;&amp; drawBits.e_centerOfMassBit) |
            (this.joint &amp;&amp; drawBits.e_jointBit) |
            (this.shape &amp;&amp; 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