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  阅读次数:4154

2006 - 2024,推荐分辨率 1024*768 以上,推荐浏览器 Chrome、Edge 等现代浏览器,截止 2021 年 12 月 5 日的访问次数:1872 万 9823 站长邮箱

沪 ICP 备 18037240 号-1

沪公网安备 31011002002865 号