phaser.js入门篇
家西岭
基础知识
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title>Test Phaser</title>
<script src="js/phaser.js"></script>
<style>
#container{ height:600px; width: 600px; margin: 10px auto; outline: 3px solid #f00; overflow: hidden;}
</style>
</head>
<body>
<!-- 如果不指定phaser的容器,会默认挂在body下 -->
<div id="container"></div>
<script>
//------------------创建游戏---------------
// 画布wh
// renderer:渲染方式, Phaser.CANVAS,Phaser.WEBGL,Phaser.AUTO
// parent:存放画布元素的容器
// state:游戏场景;transparent:画布元素是否透明,默认不透明;
// antialias:是否开启抗锯齿模式;phCon:物理引擎配置
// new Phaser.Game(width, height, renderer, parent, state, transparent, antialias,physicsConfig);
var game = new Phaser.Game(300, 400, Phaser.AUTO, 'container', state);
// true表示暂停
// game.paused = false;
// game.add; //对游戏工厂的引用
// game.camera
// game.input 游戏中的用户交互事件的引用
// game.load 游戏资源加载模块的引用
// game.scale 游戏缩放模块的引用
// game.sound
// game.stage
// game.world
// game.particles 游戏粒子系统的引用
// game.physics
// game.state 游戏场景管理对象的引用
//------------------创建场景-------------------
// 场景管理对象Phaser.StateManager
// init()
// preload() 加载游戏资源
// create 创建游戏显示对象或注册资源
// update()
// render()
// 五个函数的执行顺序,从上到下
function state( ) {
this.init = function () {};
this.preload = function () {};
this.create = function () {};
this.update = function () {};
this.render = function () {};
}
//------------------管理场景-----------------
// 添加场景
game.state.add('state', state);
// 启动场景
game.state.start('state');
//------------------资源加载-----------------
// 资源加载对象Phaser.Loader
// 资源加载必须写在preload方法中
// image(key, url)
// spritesheet(key, url, frameWidht, frameHeight) //加载的图片由多张大小相同的图片合成
// atlas(key, url, atlasURL, atlasData, format) //atlasURL,atlasData来描述小图片的信息,与spritesheet不同的地方,小图尺寸可以不同
// audio(key, url, autoDecode)
// autdiosprite(key, url, jsonURL, jsonData, autoDecode)
// text()
// xml()
// binary()
// 当某个资源加载完成时触发
// game.load.onFileComplete.add(function(){})
// game.load.process 表示所有资源的加载进度,百分制
// 当所有资源加载完成时触发
// game.load.onLoadComplete.add(function(){})
//---------------------舞台---------------------
// 舞台对象Phaser.Stage
// game.stage.setBackgroundColor(backgroundColor); //改变舞台背景颜色
function state(game) {
this.create = function () {
game.stage.setBackgroundColor(0xff0000);
}
}
//----------------------世界--------------------
// 世界对象Phaser.World
// game.world.setBounds(x, y, width, height) //设置世界的边界大小
//---------------------摄像机------------------
// Phaser.Camera //原点在左上角
// game.camera.x = 100;
// game.camera.y = 100
// game.camera.focusOn(disObj);
// game.camera.focusOnXY(x, y)
// game.camera.follow(target) //跟随
function state(game) {
var jiqimao;
this.preload = function () {
game.load.image('bg', 'assets/bg.jpg');
game.load.image('jiqimao', 'assets/jiqimao.png');
}
this.create = function () {
game.world.setBounds(0, 0, 2000, 600);
game.add.image(0, 0, 'bg');
jiqimao = game.add.image(200, 300, 'jiqimao');//创建一个机器猫
jiqimao.anchor.set(0.5, 0.5);
game.input.onDown.add(function(){
game.camera.focusOn(jiqimao);
});
game.camera.follow(jiqimao);
}
this.update = function () {
var keys = game.input.keyboard.createCursorKeys();
if(keys.right.isDown) game.camera.x += 1;
else if (keys.left.isDown) game.camera.x -= 1;
else if (keys.up.isDown) game.camera.y -= 1;
else if (keys.down.isDown) game.camera.y += 1;
jiqimao.x += 1;
}
}
// -------------------缩放控制--------------------
// Phaser.ScaleManager
// 三种模式: EXACT_FIT 缩放到父元素的大小,SHOW_ALL, USER_SCALE自定义缩放
// game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
function state(game) {
this.init = function () {
game.scale.pageAlignHorizontally = true ; //水平居中
game.scale.pageAlignVertically = true;
//game.scale.scaleMode = Phaser.ScaleManager.EXACT_FIT;
//game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
game.scale.setUserScale(0.5, 0.5);
}
this.preload = function () {
game.load.image('jiqimao', 'assets/jiqimao.png');
}
this.create = function () {
game.add.image(game.width/2, game.height/2, 'jiqimao').anchor.set(0.5, 0.5);
}
}
</script>
</body>
</html>实例(进度加载)
<!--index.html-->
<!DOCTYPE html>
<head>
<meta content="width=device-width, user-scalable=no" name="viewport">
<meta charset="utf-8">
<title>Flappy Bird</title>
<style>
#container canvas {
margin: 0 auto;
}
</style>
<script src="js/phaser.js"></script>
<script src="js/boot.js"></script>
<script src="js/loader.js"></script>
</head>
<body>
<div id="container"></div>
<script>
var game = new Phaser.Game(320, 505, Phaser.AUTO, 'container');
game.state.add('boot', bootState);
game.state.add('loader', loaderState);
game.state.start('boot');
</script>
</body>
</html>
<!--boot.js-->
var bootState = function (game) {
this.preload = function () {
game.load.image('loading', 'assets/loading.gif');
}
this.create = function () {
game.state.start('loader');
}
}
<!--loader.js-->
var loaderState = function (game) {
this.init = function () {
// 添加图片
var sprite = game.add.image(game.world.centerX, game.world.centerY, 'loading');
// 设置图片锚点
sprite.anchor = { x:0.5, y:0.5 };
progressText = game.add.text(game.world.centerX, game.world.centerY + 30,'0%', { fill:'#fff', fontSize:'16px' });
progressText.anchor = { x:0.5, y:0.5 };
}
this.preload = function () {
game.load.image('loading', 'assets/loading1.gif');
game.load.onFileComplete.add(function(progress){
progressText.text = progress + '%';
});
}
}
类似资料：