![](https://box.kancloud.cn/140a6f3ed9750e7e19987ec1077c68c5_942x475.png)
舞台是固定大小的,所展示出的一面,世界是大小可设置的,甚至无限大的。
![](https://box.kancloud.cn/51f2225900c3b9686b7a74268d85f39c_936x325.png)
![](https://box.kancloud.cn/de0b2c5695a26eb3d94c5fb0dd9406d4_428x228.png)
![](https://box.kancloud.cn/6b696ce0fd182428b797e502ec24ef7d_362x541.png)
![](https://box.kancloud.cn/986601506ee62e1b2ac4ce6521d2fb47_983x373.png)
![](https://box.kancloud.cn/eea4f8fa32059a0c82b2274878031599_922x427.png)
摄像机大小默认是世界大小,如果设置世界大小很大 摄像机就可以移动啦,
例子:
~~~
var play = function(game){
this.init=function(){}
this.preload = function(){
var fj = game.add.image(0,0,'fj')
fj.anchor = {x:0.5,y:0.5} //设置图片锚点
}
this.create = function(){
console.log('play')
game.world.setBounds(0,0,2000,600)//设置是世界大小 参数 左上角xy坐标,宽高
}
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.down.isDown){game.camera.y += 1}
else if(keys.up.isDown){game.camera.y -= 1}
}
this.render = function(){}
}
~~~
相机即可跟着键盘移动而移动啦
相机聚焦到某个物体
~~~
var play = function(game){
this.init=function(){}
this.preload = function(){
var fj = game.add.image(0,0,'fj')
}
this.create = function(){
console.log('play')
game.world.setBounds(0,0,2000,600)//设置是世界大小 参数 左上角xy坐标,宽高
pig = game.add.image(200,300,'pig')
pig.anchor.set(0.5,0.5)
game.camera.focusOn(pig) //相机聚焦到小猪上
}
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.down.isDown){game.camera.y += 1}
else if(keys.up.isDown){game.camera.y -= 1}
}
this.render = function(){}
}
~~~
![](https://box.kancloud.cn/2c8a2b249c37735fdbda8436a464f6ad_332x512.png)
让相机跟随小猪移动`
~~~
game.camera.follow(pig)
~~~`
- 以专业工程师的标准要求自己
- JS
- 函数的this
- 函数的argument
- 函数的apply、bind、call方法
- 创建对象
- 构造函数创建对象
- 原型结合构造函数创建对象
- 原型
- 继承
- 闭包
- 正则表达式
- Ajax
- 设计模式
- ES6
- es6的模块化
- 定义变量的新方式
- 函数扩展
- 数组扩展
- 性能与工程化
- 关于http与缓存
- 重排(reflow、layout)与重绘
- 页面性能
- gulp
- webpack
- 一些项目回顾总结
- 移动端&微信H5游戏
- 微信小程序
- Vue.js
- 随手记录
- 如何通过前端技能获取2018世界杯门票
- jsonp
- es6 javascript对象方法Object.assign()
- 一份不错的基础面试题
- vscode常用插件
- koroFileHeader
- 构建自己的Js工具库
- H5 game
- Phaser从入坑到放弃再入坑
- 1.游戏的创建
- 2.资源的加载
- 3.phaser中的舞台,世界和摄像机
- 4.游戏缩放控制,移动端的适配
- 5.phaser中的显示对象
- 1.概述
- 2.phaser中的图片,图形,和按钮
- 3.phaser中的精灵
- 4.文字
- 5.组
- 6.phaser中的动画
- 7.粒子和瓦片地图
- 8.瓦片地图
- lodash
- ES5 to ESNext — here’s every feature added to JavaScript since 2015
- 防抖(debounce) 和 节流(throttling)