By Richard Davey on 20th February 2018 @photonstorm

英文原文地址 中文译文官网原发地址(黄复雄译)


在底层,代码this.add.image生成一个新的Image(图形)类游戏对象,并把它添加到当前场景的显示列表(display list)中。你的所有游戏对象都活在这个列表中。你可以把图像放置在任何位置,Phaser不会介意。当然,如果图像位于0x0到800x600这个区域之外,那么你视觉上看不到它,因为它已“脱离画面”,但它仍旧在场景中存在。

场景(Scene)自身没有确定的尺寸,在所有方向上都是无限延展的。镜头(Camera)系统控制着你观看场景的视野,你可以随意移动、推拉已激活的镜头。你还可以另外生成一些镜头,用于别的观看场景的视野。这一话题已经超出本特定教程,完全可以说,Phaser 3 的镜头系统,能力大大地超过Phaser 2的。以前完全不可能的东西现在可以了。

现在让我们搭建场景,添加一张背景图像和几个平台。这是更新后的create函数:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
var platforms;

function create ()
{
    this.add.image(400, 300, 'sky');

    platforms = this.physics.add.staticGroup();

    platforms.create(400, 568, 'ground').setScale(2).refreshBody();

    platforms.create(600, 400, 'ground');
    platforms.create(50, 250, 'ground');
    platforms.create(750, 220, 'ground');
}

快速扫一眼这些代码,你可以看到一个对this.physics的调用。这意味着我们在使用Arcade(游乐场)物理系统(Physics system),不过在此之前我们还需要把它添加到游戏配置中,以便告诉Phaser我们的游戏需要它。所以让我们更新一下,引入对物理系统的支持。这是修订后的游戏配置:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 300 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

新加的是physics属性。这些代码就位之后,如果运行它(你可以在本教程的zip文件中part4.html中找到),你将看到一个更有游戏样子的场景:

image

我们有了一个背景和一些平台,可以这些平台到底怎么样才能运作起来呢?

评论