游戏引擎phaser.js3的使用之图片资源加载及显示

上一篇有说基础的使用，这篇接着说如何把图片正确的加载进去

首先在preload里面加载资源，引入你的图片加载进去

function preload ()
{
    this.load.image('sky', 'assets/sky.png');
    this.load.image('ground', 'assets/platform.png');
    this.load.spritesheet('dude',
        'assets/dude.png',
        { frameWidth: 32, frameHeight: 48 }
    );
}

资源加载好后，就去create里面add，这里面有个顺序的问题，后放的会在最上面，当然如果想控制这个顺序，也是有api可用的，这个就可以控制，sky.setDepth(101);括号中的数字越大就会在最上面

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

像上面这样的就可以显示一个天空的图片和一个星星的图片了

this.add.image(0, 0, 'sky');

如果控制图片的显示位置，就可以设置坐标，上面的(0,0)定位点就直接显示在左上角了，因为上面用的是宽800，高600，那么(400,300),就会直接定位中心点就会显示在中间了。

下一节加载静态物理组合，下期见！