【翻译】动手动脑玩转Web游戏之三：人物动起来、敌人出现、自定义视角

让角色动起来

   当键盘上特定的按键被按下时，为了让我们创建的角色同步地动起来，需要让Gamma来为我们改变对象水平、垂直方向的位置状态。在本章节，我们将实现如下功能：

·        键盘上向左的方向键控制角色往左移动

·        键盘上向右的方向键控制角色往右移动

·        键盘上的空格键控制角色跳跃

按键码

    首先我们得知道这三个按键(左键，右键和空格键)分别对应的键码(译者注：就是我们所说的按键所对应的ASCII码)。通过查阅键码表 我可以知道左键对应的ASCII码值是37，右键是39，空格是32。

移动角色的函数

    然后，我们得弄清楚Gamma提供了哪些函数可以用于改变角色的位置状态。当游戏开始后，一旦我们给角色下达了向右移动的按键指令，那么角色就会以一个固定的速率动起来。本例中我们主要会用到Gamma提供的move 和jump 两个API库函数。调用move时为其传递LEFT参数实现角色向左移动的功能，同理，让角色向右移动时只要将move函数的参数改为RIGHT即可。调用 jump就可以实现角色的跳跃动作。move和jump函数都需要一个按键事件的对象作为其输入参数。

我们使用Gamma提供的registerAPI为按键注册响应处理函数。响应处理函数被调用时系统会为其传递一个键盘事件，用于区分是按键被按下还是按键弹起。

gma.keyHandler.register(37, function (keyEvent) {

    manager.character.move(gma.constants.LEFT,keyEvent);

});

 

gma.keyHandler.register(39, function (keyEvent) {

   manager.character.move(gma.constants.RIGHT, keyEvent);

});

 

gma.keyHandler.register(32, manager.character.jump);

 

    为按键注册消息处理功能的API包含gma.keyHandler包里，所以在game.js开头的require函数里需要导入gma/events依赖包。

科里化/闭包

    上面的代码不是很优美，我们可以使用Javascript的科里化功能。科里化是一种根据输入参数返回函数的函数，是闭包最伟大的应用之一(译者注)。例如下面的(f1 和f2)函数是等价的。创建f2时，根据其第一个输入参数对其进行科里化之后，就只需要一个按键事件作为其输入参数就可以了：

f1 = function (keyEvent) {

   manager.character.move(gma.constants.LEFT, keyEvent);

};

f2 =manager.character.move.curry(gma.constants.LEFT);

 

    所以，前面关于按键消息处理函数的注册代码可以简化成：

gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT);

gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT);

gma.keyHandler.register(32, manager.character.jump);

 

最终示范代码

require([

    'gma/base',

    'gma/manager',

    'gma/entities/character',

    'gma/events'

],

    function(gma) {

        var manager = gma.manager({

           width : 600,

           height : 500

       });

       manager.character = gma.character({

           left     : 0,

           bottom   : 0,

           width    : 3,

           height   : 6,

           depth    : 3

       });

 

        var myLevel = {

           spawn : {

               main : [15, 24]

            },

           entities : [

               {top:0, left:0, width:30, height:3},

               {top:0, left:36, width:30, height:3}

           ]

       };

       manager.storeLevels(myLevel);

 

       gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));

       gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));

       gma.keyHandler.register(32, manager.character.jump);

 

       manager.init();

    }

);

添加障碍

        Gamma也提供了一些用于定义障碍的对象，这些对象都有自己的行为方式。如果要在游戏关卡里添加障碍，必须将其放置在一个数组里。

    在本篇中，我们会用gma.platformEnemy创建一个从一边移动到另一边的场景障碍，用gma.patrolEnemy创建一个在两点之间移动的巡逻障碍，以及用gma.jumpingEnemy创建一些不断跳跃的障碍物：

entities : [

   gma.platformEnemy({bottom:0, left:45, width:3, height:6}),

   gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),

   gma.jumpingEnemy ({bottom:0, left:7,  width:1, height:2}),

   gma.jumpingEnemy ({bottom:3, left:8,  width:1, height:2}),

   gma.jumpingEnemy ({bottom:6, left:9,  width:1, height:2})

]

    场景障碍和跳跃的障碍只需要限定其大小和位置即可，而巡逻障碍还需要设置它巡逻时的范围，即最大左右边界点limitLeft 和 limitRight。

类型

    如果以普通属性来创建游戏中的障碍物，可以将其设置成一个用户自定义类型。在创建障碍时来引用该类型以降低代码冗余。我们用addCustomDefinitions来定义类型。例如：

manager.addCustomDefinitions({

    types: {

       jumpingJack: ['jumpingEnemy', {

           width    : 1,

           height   : 2

       }]

    }

});

    在定义障碍的类型时，需要将其放在数组里，且数组的第一个元素是类名，用它来实例化一个具体的对象，例如我们所要创建gma.jumpingEnemy的跳跃障碍的对象；数组的第二个参数是一个对象，该对象里包含了一些属性值，这些属性会被应用到所有实例化的对象上面。

    下面我们通过引用上面定义的jumpingJack类型来重新创建跳跃障碍：

// 此时，引用自定义类型junpingJack

entities : [

   gma.platformEnemy({bottom:0, left:45, width:3, height:6}),

   gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),

   {type:'jumpingJack', bottom:0, left:21},

   {type:'jumpingJack', bottom:3, left:24},

   {type:'jumpingJack', bottom:6, left:27}

]

提示

    后面我们不再显式的调用gma.jumpingEnemy函数来创建跳跃障碍，而是通过设置其宽、高属性来定义它们。因为我们已经有了类型这个神奇的法宝(译者注)。

模板

    默认情况下，所有被创建出来的障碍都是一个蓝色的方形柱体结构，这是由对象的模板属性决定的。对象的缺省模板是一个立方体，可以用下面的方法来设置其模板属性(虽然这一步操作显得多此一举)：

manager.addCustomDefinitions({

    types: {

       jumpingJack: ['jumpingEnemy', {

           width    : 1,

           height   : 2

           template : 'cube'

        }

    }

});

    如果需要自定义障碍的外观，就必须通过创建模板来实现。下面的代码中，我们用模板助手gma.meshTemplate创建了一个绿色的方柱体的模板：

manager.addCustomDefinitions({,

   templates : {

       greencube : ['meshTemplate', {

           mesh : gma.unitCubeInfo.mesh,

           material : {color : "#090"}   // 非常的绿

        }

    }

});

    让后将这个模板应用到前面定义的jumpingJack类型里：

manager.addCustomDefinitions({

    types: {

       jumpingJack: ['jumpingEnemy', {

           width    : 1,

           height   : 2

           template : 'greencube'

        }

    }

});

提示

    默认情况下，Gamma已经提供了蓝色和红色模板，可以使我们很方便的就创建红色和蓝色立方体。在外观 章节的目录里，有模板对象类型的详细介绍，以及它们的用法。

    另外，Gamma中的游戏障碍缺省情况下都有一个默认的类型，使用蓝色模板定义的一个平台障碍gma.platform。

最终示范代码

require([

    'gma/base',

    'gma/manager',

    'gma/entities/character',

    'gma/events',

    'gma/entities/enemy'

], function(gma) {

        var manager = gma.manager({

            width : 600,

           height : 500

       });

       manager.character = gma.character({

           left     : 0,

           bottom   : 0,

           width    : 3,

           height   : 6,

           depth    : 3

       });

       manager.addCustomDefinitions({

           templates : {

               greencube : ['meshTemplate', {

                    mesh :gma.unitCubeInfo.mesh,

                    material : {color : "#090"}

               }]

           },

           types : {

                jumpingJack: ['jumpingEnemy', {

                    width    : 1,

                    height   : 2,

                    template : 'greencube'

               }]

           }

       });

        var myLevel = {

           spawn : {

                main : [15, 24]

           },

           entities : [

               {top:0, left:0, width:30, height:3},

               {top:0, left:39, width:30, height:3},

               gma.platformEnemy({bottom:0, left:45, width:3, height:6}),

                gma.patrolEnemy({bottom:0, left:6, width:3, height:6, limitLeft: 3, limitRight:12}),

               {type:'jumpingJack', bottom:0, left:21},

               {type:'jumpingJack', bottom:3, left:24},

               {type:'jumpingJack', bottom:6, left:27}

           ]

       };

       manager.storeLevels(myLevel);

       gma.keyHandler.register(37, manager.character.move.curry(gma.constants.LEFT));

       gma.keyHandler.register(39, manager.character.move.curry(gma.constants.RIGHT));

       gma.keyHandler.register(32, manager.character.jump);

       manager.init();

    }

);

自定义视角

        Gamma创建的默认视角是跟随角色一起移动的，位于角色前50个单位，z坐标也是50。

    在关卡里我们可以在camera标签里设置其属性值来改变视角。在每个关卡里只需设置一个视角。注意：如果在你的关卡里提供了新视角，那么Gamma提供的默认视角将会被覆盖。

    下面这段代码的效果和缺省视角的效果是等效的：

var myLevel = {

    camera : {

        locZ : 50,

        attached : ['character']

     }

 };

 

    接下来，我们设置一个距离角色稍微远一点点，并且总是比角色只高那么一丁点的视角：

var myLevel = {

    camera : {

        locZ : 60,

        attached : ['character',0, 6]

     }

 };