《动手动脑玩转Web游戏之六：创建HUD、为游戏增色》译文

创建抬头信息显示器(HUD)

抬头信息显示器（）是屏幕上一块用于显示游戏相关信息的区域，这些信息可能包括玩家剩余生命条数或实时分数等。

创建HUD

调用方法，并传入一个参数specification，该参数包含了需要显示的信息及位置，调用方法如下所示：

manager.hud.setup(specification);

manager.hud.setup({
    top_left: {
        "Score": function() {return character.score;}
    }
});

作为本指南的一部分，我们将创建一个在屏幕右下角显示游戏的帧速率(FPS)的HUD：

manager.hud.setup({
    bottom_right: {
        fps : manager.getFPS
    }
});

更改HUD的样式及位置

页面中每一部分的样式及位置都是由CSS而非HUD对象控制的。我们可以利用如下所示的样式表格式来更改HUD所显示的信息的样式：

/* Setup the bars */

#top_hud, #bottom_hud {
    height:2em;
    position:absolute;
    left:0em;
    width:100%;
    background-color: black;
    color: white;
    background-color: rgba(0, 0, 0, 0.7);
}

#top_hud {
    top:0em;
}
#bottom_hud {
    bottom:0em;
}

/* Setup left and right part of each bar */

#bottom_hud dl, #top_hud dl {
    margin: 0.3em;
}

#bottom_hud dl.left, #top_hud dl.left {
    float: left;
}
#bottom_hud dl.right, #top_hud dl.right {
    float: right;
}

/* Setup labels for each item */

#bottom_hud dt, #top_hud dt,
#bottom_hud dd, #top_hud dd {
    display: inline-block;
    line-height: 1.4em;
    margin: 0;
}

#bottom_hud dt, #top_hud dt {
    padding-right: 0.5em;
}

#bottom_hud dd, #top_hud dd {
    text-align: right;
}
dl.left dd {
    padding-right: 1em;
}
dl.right dt {
    padding-left: 1em;
}

将上面的CSS样式拷贝到与game.js 文件在同一文件夹下的game.css 中，然后将HTML 文件中的下面这行取消注释：

<!--
    Include any style sheets here
    <link rel="stylesheet" type="text/css" href="gamma.css" media="all"/>
-->

注意

点击查看更多其他创建HUD的方法。

完整的脚本

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events',
    'gma/entities/enemy',
    'gma/entities/door'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.hud.setup({
            bottom_right: {
                fps : manager.getFPS
            }
        });
        manager.character = gma.character({
            left : 0,
            bottom : 0,
            width : 3,
            height : 6,
            depth : 3,
            template : 'gorilla'
        });
        manager.addCustomDefinitions({
            templates : {
                greencube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    material : {color : "#090"}
                }],
                gorilla : ['colladaTemplate',
                {
                    collada : {
                        document : 'gorilla.dae'
                    },
                    yRot : 1.57,
                    yOffset : -0.5,
                    yScale:0.7
                }],
                brickscube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    texture : {
                        src:'bricks.jpg',
                        repeatX:0.5,
                        repeatY:0.5
                    }
                }]
            },

            types : {
                jumpingJack: ['jumpingEnemy', {
                    width : 1,
                    height : 2,
                    template : 'greencube'
                }]
            }
        });

        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:55, width:0.5, height:9, level:1}),
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {template:'brickscube', 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}
            ]
        };

        var otherLevel = {
            spawn : {
                main : [0, 0]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:25, width:0.5, height:9, level:0}),
                {template:'brickscube', top:0, left:0, width:30, height:3}
            ]
        };

        manager.storeLevels(myLevel);
        manager.storeLevels(otherLevel);

        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 提供的方法，下面我们在主平台下方创建这个平台并将其涂成红色：

// Create a deathplatform type

types : {
    lava : ['deathPlatform', {template : 'redcube', depth:50}]
}
// Add this lava / death platform to the list of entities

entities : [
    {type:'lava', top:-10, left:-50, width:1000, height:50},
]

使角色复生

我们还需要将键盘上的某一按键与角色的复生关联起来（当角色死掉之后）。注册方法使其在字母’r’（可看作reload/restart/respawn的首字母）被按下的时候能够被调用：

gma.keyHandler.register(82, function(e) {
    manager.respawn("main");
});

最终完整的脚本

整个指南介绍完毕，游戏的整个脚本(game.js) 如下所示：

require([
    'gma/base',
    'gma/manager',
    'gma/entities/character',
    'gma/events',
    'gma/entities/enemy',
    'gma/entities/door'
],
    function(gma) {
        var manager = gma.manager({
            width : 600,
            height : 500
        });
        manager.character = gma.character({
            left : 0,
            bottom : 0,
            width : 3,
            height : 6,
            depth : 3,
            template : 'gorilla'
        });
        manager.addCustomDefinitions({
            templates : {
                greencube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    material : {color : "#090"}
                }],
                gorilla : ['colladaTemplate',
                {
                    collada : {
                        document : 'gorilla.dae'
                    },
                    yRot : 1.57,
                    yOffset : -0.5,
                    yScale:0.7
                }],
                brickscube : ['meshTemplate', {
                    mesh : gma.unitCubeInfo.mesh,
                    texture : {
                        src:'bricks.jpg',
                        repeatX:0.5,
                        repeatY:0.5
                    }
                }]
            },

            types : {
                jumpingJack: ['jumpingEnemy', {
                    width : 1,
                    height : 2,
                    template : 'greencube'
                }],
                lava : ['deathPlatform', {template : 'redcube', depth:50}]
            }

        });

        manager.hud.setup({
            bottom_right: {
                fps : manager.getFPS
            }
        });


        var myLevel = {
            spawn : {
                main : [15, 24]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:55, width:0.5, height:9, level:1}),
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {template:'brickscube', top:0, left:39, width:30, height:3},
                {type:'deathPlatform', top:-10, left:-50, width:1000, height:50, depth:50},
                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}
            ]
        };

        var otherLevel = {
            spawn : {
                main : [0, 0]
            },
            camera : {
                attached : ['character', 0, 6, 60]
            },
            light : {
                myLight : {
                     type : GLGE.L_POINT,
                     rotY : 1.54,
                     color : "#fff",
                     attached : ['character', 0,5,20]
                }
             },
            entities : [
                gma.door({bottom:0, left:25, width:0.5, height:9, level:0}),
                {template:'brickscube', top:0, left:0, width:30, height:3},
                {type:'deathPlatform', top:-10, left:-50, width:1000, height:50, depth:50}
            ]
        };

        manager.storeLevels(myLevel);
        manager.storeLevels(otherLevel);

        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);
        gma.keyHandler.register(82, function(e) { manager.respawn("main"); });
        manager.init();
    }
);

下一步该做什么呢？

我们建议您试着开发更大一点儿的更富趣味性的游戏，同时可以阅读下面的内容：；如果您想开发更加专业一点的商业游戏的话，请通读如下内容：。

**********************************************************************************

译后感想：其实介绍的内容本身难度并不大，照着一步步做下来再加上提供的脚本源码就很容易了；所以我们也看到了，学习使用一个新的库并没有想象中那么难，外表花哨的技术内在可能很简单，关键是我们要静下心来拿出时间去研究，当然以优秀的书籍或文章作为指引也是必不可少的。