【翻译】动手动脑玩转Web游戏之二:准备、添加平台并新建一个角色

开发你的第一个游戏

   本章我们将一步一步学习如何用Gamma来开发游戏。

·         准备

·         添加平台

·         添加角色

·         移动角色

·         添加敌人

·         自定义游戏视角

·         添加光线

·         添加纹理

·         使用Collada

·         创建多级关卡

·         创建HUD

·         为游戏添加平滑的光照反射效果

  准备

   在安装指南 里我们已经将开发环境搭建好,创建的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方法 */

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

 

    function(gma) {

        //游戏的具体定义包括在这个函数中.

        ...

    }

);

 

    该函数只接受gma 包作为其输入参数.

创建场景

    其次,在game.sj中我们用代码 var manager = gma.manager();. 创建了一个管理器(译者注:在Gamma游戏开发中这个管理器充当了场景的作用,后面我们都将Gamma的管理器称为场景)。缺省情况下,该场景会在html文件里id名为"gamma"div标签里显示出来。(在创建游戏场景时我们还可以设置它的 containerID 属性。设置方法请参考: containercanvas.)

    另外,创建场景时还可以通过widthheight属性来指定其宽度和高度。下面这个例子创建了一个宽、高各为600500的场景:

/*全局的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}

    ]

};

 

    最后,我们用storeLevels方法将关卡添加到场景里:

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

    }

);

 

    提示

    关于如何定义一个平台的更多详情请参考平台帮助主题 的相关章节

 

 添加角色

    创建游戏角色时需要调用gma.character 方法实例化一个角色对象,然后将它和manager.character关联起来。下面的代码创建角色时指定了其位置和大小:

manager.character = gma.character({

    left     : 0,

    bottom   : 0,

    width    : 3,

    height   : 6,

    depth    : 3

});

    以上代码,需要将gma/entities/character 添加到require函数的依赖数组中。

设置角色的出生点位

        spawn 用于定义了角色的出现位置,一般在关卡对象用标签属性来定义。当关卡被加载后,角色的显示位置就由spawn对象里main标签的值来确定。

        Gamma中,角色位置是由角色左下角的xy坐标值确定。下面的例子创建了的出生点位是:x=15y=24

var mylevel = {

    spawn : {

        main : [15, 24]

    }

}

   提示

    如果关卡中,spawn对象没有用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();

    }

);

    后记:

    之前从来没接涉足过游戏开发领域,这次CU提供了这么好的机会,正好可以挑战一下自己。通过查阅游戏开发过程中会用到的一些术语、名词,并结合自己多年的“被游戏玩”的经验,耗时两个 mornings ,终于翻译完了。当然,作为门外汉,翻译的准确性用词的合理性方面在专业游戏大牛们看来或许有些绕口。如果有游戏方面的大牛路过俺家门口,还请大虾们不吝赐教,谢谢了咯。
<script>window._bd_share_config={"common":{"bdSnsKey":{},"bdText":"","bdMini":"2","bdMiniList":false,"bdPic":"","bdStyle":"0","bdSize":"16"},"share":{}};with(document)0[(getElementsByTagName('head')[0]||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>
阅读(1630) | 评论(0) | 转发(0) |
给主人留下些什么吧!~~
评论热议
已标记关键词 清除标记
相关推荐
<p> <b><span style="background-color:#FFE500;">【超实用课程内容】</span></b> </p> <p> <br /> </p> <p> <br /> </p> <p> 本课程内容包含讲解<span>解读Nginx的基础知识,</span><span>解读Nginx的核心知识、带领学员进行</span>高并发环境下的Nginx性能优化实战,让学生能够快速将所学融合到企业应用中。 </p> <p> <br /> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><br /> </b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b><span style="background-color:#FFE500;">【课程如何观看?】</span></b> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> PC端:<a href="https://edu.csdn.net/course/detail/26277"><span id="__kindeditor_bookmark_start_21__"></span></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a> </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 移动端:CSDN 学院APP(注意不是CSDN APP哦) </p> <p style="font-family:Helvetica;color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 本课程为录播课,课程永久有效观看时长,大家可以抓紧时间学习后一起讨论哦~ </p> <p style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <br /> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <strong><span style="background-color:#FFE500;">【学员专享增值服务】</span></strong> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> <b>源码开放</b> </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 课件、课程案例代码完全开放给你,你可以根据所学知识,自行修改、优化 </p> <p class="ql-long-24357476" style="font-family:"color:#3A4151;font-size:14px;background-color:#FFFFFF;"> 下载方式:电脑登录<a href="https://edu.csdn.net/course/detail/26277"></a><a href="https://edu.csdn.net/course/detail/27216">https://edu.csdn.net/course/detail/27216</a>,播放页面右侧点击课件进行资料打包下载 </p> <p> <br /> </p> <p> <br /> </p> <p> <br /> </p>
©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页