gwuj 发表于 2017-7-9 17:44:10

【翻译】动手动脑玩转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]
   }
};

                                 


<script>window._bd_share_config={&quot;common&quot;:{&quot;bdSnsKey&quot;:{},&quot;bdText&quot;:&quot;&quot;,&quot;bdMini&quot;:&quot;2&quot;,&quot;bdMiniList&quot;:false,&quot;bdPic&quot;:&quot;&quot;,&quot;bdStyle&quot;:&quot;0&quot;,&quot;bdSize&quot;:&quot;16&quot;},&quot;share&quot;:{}};with(document)0[(getElementsByTagName('head')||body).appendChild(createElement('script')).src='http://bdimg.share.baidu.com/static/api/js/share.js?v=89860593.js?cdnversion='+~(-new Date()/36e5)];</script>阅读(1546) | 评论(0) | 转发(0) |


0　　上一篇：【翻译】动手动脑玩转Web游戏之二：准备、添加平台并新建一个角色
　　下一篇：【翻译】动手动脑玩转Web游戏之五：Collada模型、多层创建


相关热门文章

[*]Qt学习笔记---信号与槽...
[*]MyBatis 入门(五)--分页查询（...
[*]Cisco VPP简介
[*]zabbix自定义key出现ZBX_NOTSU...
[*]2016年Web设计10大趋势


[*]关于SSI
[*]IP Sec VPN与NAT破镜重圆
[*]JS模拟鼠标自动点击
[*]UT2.0正式版下载
[*]tomcat6.0配置(含配置视频下载...


[*]linux dhcppeizhi roc
[*]关于Unix文件的软链接
[*]求教这个命令什么意思，我是新...
[*]sed -e &quot;/grep/d&quot; 是什么意思...
[*]谁能够帮我解决LINUX2.610...



给主人留下些什么吧！~~


评论热议
页: [1]
查看完整版本: 【翻译】动手动脑玩转Web游戏之三：人物动起来、敌人出现、自定义视角