01 加载一张图像

原文地址：http://www.phaser.io/examples/v2/basics/01-load-an-image。

效果

源代码

window.onload = function () {
    var game = new Phaser.Game(600, 400, Phaser.AUTO, 'phaser_container', { preload: preload, create: create });

    function preload() {

    //  在preloader函数中可以加载所需的素材

    //  我们加载了一张图像。第一个参数是该图像在代码中的唯一名称，我们可以通过这个名称使用这个图像。

    //  第二个参数是图像的相对URL地址
    game.load.image('einstein', 'images/phaser/einstein.png');

}

function create() {

    //  使用刚才加载的图像创建一个简单的sprite，然后将它显示在屏幕上。
    game.add.sprite(0, 0, 'einstein');

}

解释

首先创建一个Phaser.Game对象的实例并赋值给本地变量game，以此来激活Phaser。把这个对象叫做game是惯例，但不是必需的。前两个参数是Phaser要创建的canvas元素的宽高。这里是600*400像素，它是游戏要显示的分辨率，可以是你喜欢的任意尺寸。第三个参数可以是Phaser.CANVAS，Phaser.WEBGL，或Phaser.AUTO，它是你想使用的渲染上下文。推荐的参数是Phaser.AUTO，它会自动尝试使用WebGL，如果浏览器或设备不支持它就会回滚成Canvas。 第四个参数是你想插入Phaser创建的canvas元素的DOM元素的id。如果为空字符串，canvas元素会简单地被附加到body。最后一个参数是一个包含Phaser基本函数引用的对象，这里我们只使用了2个：preload，create。

通过在preload函数里调用game.load来完成加载素材的任务。

通过在create函数中调用game.add.sprite创建一个新的Phaser.Sprite对象，然后把它添加到游戏世界中。

发布时间：2016/7/28 下午10:41:49  阅读次数：4881