Phaser.js是一款开源的javascript2D游戏引擎,我个人觉得它还是十分强大的。我看了一些博客然后又去官网系统的看了文档(话说还真没有人翻译啊...)基本上能仿一些案例做点小游戏了。我个人感觉这个引擎就是在‘画’游戏,还是十分容易上手的。而且它还可以选择用webGL还是canvas渲染,很人性化哈。
完整地画了一个flappy bird但是太俗了所以就不放上来了,我还准备做去年百度ife的那个游戏班的项目,就先用phaser做然后边做边用吧,开学以后就不一定有时间做了。
先放上教程的传送门吧: 点击打开链接 这是2.4.6的地址,应该是最新的了。例子很多、API文档很详细、但下载地址打开很慢...所以我是在github上直接找到它然后down到本地的。
对了,我踩的坑里面最大的一个就是要运行在自己的web server里,我用的是appserv,一个很方便搭建的WAMP。否则Phaser就加载不了了。
然后我就开始看和写(抄),再改一改,改出来一个flappy bird,然后还改出来一个这个:
var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', {preload: preload, create: create, update: update });
var player;
var cursors;
var pipe;
var jumpTimer = 0;
function preload() {
game.load.image('pipe', 'img/pipe.png');
}
function create() {
game.time.desiredFps = 30;
game.physics.startSystem(Phaser.Physics.ARCADE);
game.physics.arcade.gravity.y = 1000;
game.stage.backgroundColor = '#565656';
// This sprite was created with the Phaser Gen Paint app
// also available in the Phaser Examples repo and on the Phaser site.
var dudeData = [
'..E.............',
'.DEEEEEEDDD.....',
'..EEEEEEDDD.....',
'..EE00EE77778666',
'..EEEEEE77777666',
'..EEEE7777777666',
'..EEEE7655567666',
'EEEEEE7777757666',
'EEEEEEDD555.7666',
'..DEEEEEDDD.....',
'..EEEEEEDDD.....',
'.7EEEEEEDDD.6...',
'.77EEEEEDDD66...',
'..77......66....'
];
game.create.texture('phaserDude', dudeData, 4, 4, 2);
player = game.add.sprite(game.width / 2, game.height - 40, 'phaserDude');
player.anchor.set(0.5);
game.physics.enable(player, Phaser.Physics.ARCADE);
player.body.collideWorldBounds = true;
cursors = game.input.keyboard.createCursorKeys();
pipe = game.add.sprite(100, 200, 'pipe');
}
function update() {
player.body.velocity.x = 0;
if (cursors.left.isDown)
{
player.body.velocity.x = -200;
player.scale.x = -1;
}
else if (cursors.right.isDown)
{
player.body.velocity.x = 200;
player.scale.x = 1;
}
if (cursors.up.isDown && player.body.onFloor() && game.time.now > jumpTimer)
{
player.body.velocity.y = -500;
jumpTimer = game.time.now + 1000;
}
}
就是一个用那个数组画出来的鸟(这个效果着实让我震惊了,就那个texture,还能通过改变第三个参数来选择颜色,是不是好强大!),然后能用键盘左右和上来控制左右走和向上跳,代码很短但是有了这个'鸟'还设置了重力设置了不得超出边框,不知不觉我还没怎么学就已经能做这么多事了。
Phaser.js很适合我这种懒人,接下来我得先勤奋一下把它掌握个50%,然后就开始做游戏了。但是要做的游戏是移动端的,那里恐怕也有不少坑。