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