翻译——《动手动脑玩转Web游戏之二：准备、添加平台并新建一个角色》

创建你的第一个游戏

以下教程将手把手教你创建游戏的过程。

·        

·        

·        

·        

·        

·        

·        

·        

·        

·        

·        

·        

准备

请阅读，搞清楚如何创建游戏，这一步做完之后game.js将如下所示：

require(['gma/base', 'gma/manager'],



    function(gma) {

        // 本函数将完成对游戏的设置

        var manager = gma.manager();

        manager.storeLevels({});

        manager.init();

    }

);

require函数

关于game.js首先值得注意的是通过调用require方法，我们得以“引入”Gamma库中所需要的部分。require方法的参数是Gamma库中的一组包名称 (如gma/base 和 gma/manager) 以及一个在所有包被解析之后可以执行的函数。

/*全局require函数 */

require(['gma/base', 'gma/manager'],



    function(gma) {

        // 本函数将完成对游戏的设置

        ...

    }

);

函数的唯一参数是包。

创建画布

接下来你可能会注意到这条语句var manager = gma.manager()，缺省情况下将在某一分区中创建一个以"gamma"为id的画布。(也可在创建管理器时通过设置 属性来改变默认状态，更多内容请参考：及。)

画布的高度和宽度可在创建管理器时通过设置和属性进行指定。下面的例子创建了一个高度为600像素、宽度为500像素的画布：

/*全局require函数 */

require(['gma/base', 'gma/manager'],



    function(gma) {

        var manager = gma.manager({

            width : 600,

            height : 500

        });

    }

);

设置游戏循环

为使游戏运行起来，我们必须设置。为此我们需要在管理器中存储一个图层并调用其init方法。本例中我们将存储一个空图层：

manager.storeLevels({});

manager.init();

添加平台

接下来我们创建一个仅包含几个平台的简单图层。将平台添加到游戏中是通过将其添加到图层中实现的。

平台本身是一种entity，因此对平台的设置其实就是设置图层中的entity数组，例如：

var myLevel = {

    entities : [

        {type: 'platform', top:0, left:0, width:30, height:3},

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

    ]

};

由于平台是缺省的entity，因此可直接写作：

var myLevel = {

    entities : [

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

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

    ]

};

最后，我们要使用将图层添加到管理器中：

manager.storeLevels(myLevel);

最终结果

require(['gma/base', 'gma/manager'],



    function(gma) {

        var manager = gma.manager({

            width : 600,

            height : 500

        });

        var myLevel = {

            entities : [

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

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

            ]

        };

        manager.storeLevels(myLevel);

        manager.init();

    }

);

注意

其他设置平台的方法请参考。

添加角色

为添加角色，我们需要实例化 类的一个对象，并将其赋给 。下面的例子创建了一个指定了位置和层次的角色：

manager.character = gma.character({

    left     : 0,

    bottom   : 0,

    width    : 3,

    height   : 6,

    depth    : 3

});

我们还需要将gma/entities/character包添加到require函数的参数列表里。

设置角色的初始位置

角色的初始位置就是其刚一出场的所在位置。初始位置是与图层对象中的一个标签关联在一起的。当图层被加载时，角色的初始位置将由标签main后面的参数指定。

Gamma库使用角色左下角的x、y坐标来标识其位置。下面的例子将一个角色的初始位置用main标签设置在x=15，y=24：

var mylevel = {

    spawn : {

        main : [15, 24]

    }

}

注意

如果一个图层没有使用main标签指定角色的初始位置，那么将默认指定角色初始位于坐标[0, 0]点处。

最终结果

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);

        manager.init();

    }

);

ps:算起来是第二次参加活动了，事实上翻译本身不是目的，将内容理解消化才是根本。翻译的过程中最大的挑战莫过于专业词汇，因为不是搞Web开发，对很多专业词汇不知道拿捏得是否准确，例如画布（canvas）、图层（level）、管理器（manager）等等，还请有经验的读者不吝赐教。顺便期待第三期更加精彩！