phaser设置横屏，然后相机跟随精灵时游戏世界出现晃动
phaser版本：2.6.2
window.PIXI = require('phaser2/build/custom/pixi.min')
window.p2 = require('phaser2/build/custom/p2.min')
window.Phaser = require('phaser2/build/custom/phaser-split.min')
let url = ./game/ball/'
function resize() {
let canvas = document.querySelector('canvas')
canvas.style.height = window.innerWidth + 'px'
canvas.style.width = window.innerHeight + 'px'
}
function launch(containerId, vm) {
console.log(vm)
let width = window.innerWidth
let height = window.innerHeight
// let width = 300
// let height = 600
var game = new window.Phaser.Game( width,height,window.Phaser.CANVAS,containerId)
console.log(window.Phaser)
// 第一场景，预先加载加载页所需要的背景图
let bootState = function (game){
// let direction = '1'
this.preload = function() {
game.load.image('backg',`${url}bg1.png`)
// 横屏
// window.Phaser.World.prototype.displayObjectUpdateTransform = function () {
// if (direction == '1') {
// game.scale.setGameSize(height, width)
// this.x = game.camera.y + game.width
// this.y = -game.camera.x
// this.rotation = window.Phaser.Math.degToRad(window.Phaser.Math.wrapAngle(90))
// }
// window.PIXI.DisplayObject.prototype.updateTransform.call(this)
// }
}
this.create = function () {
game.state.start('loader')
}
}
// 第二场景，加载资源
let loaderState = function (game){
var progressText//百分比文字
this.init = function() {
game.add.image(0, 0, 'backg')
progressText = game.add.text(game.world.centerX - 50, game.world.centerY + 70, '0%', { fill: '#fff', fontSize: '16px' })
progressText.font = '微软雅黑'
}
this.preload = function() {
game.load.atlasXML('btn', `${url}btn/btn.png`, `${url}btn/sprite.xml`)
game.load.image('background',`${url}ceshi.jpg`)
game.load.image('player',`${url}player/player.png`)
game.load.onFileComplete.add(function (progress) {
progressText.text = '游戏加中' + progress + '%...'
if (progress == 100) {
setTimeout(() => {
game.state.start('test')
}, 3000)
}
})
}
}
let testBtn = function(game){
var btnss
this.create = function () {
game.add.image(0,0, 'backg')
btnss = game.add.button(game.world.centerX, game.world.centerY,'btn', function () {
// game.state.start('runState')
console.log(123)
game.state.start('start')
}, game, 0, 0, 3, 0)
btnss.animations.add('bleft',[1])
btnss.play(10, true)
btnss.scale.set(0.4)
}
}
let startGame = function (game){
var player
var cursors
// 按钮组
let btnLeft
let btnLeftTop
let btnLeftButtom
let btnRight
let btnRightTop
let btnRightButtom
let jump = false
this.create = function() {
// 背景图片
game.add.tileSprite(0, 0, 1920, 1920, 'background')
// 设置游戏世界大小
game.world.setBounds(0, 0, 1920, 1920)
// 开启物理系统
game.physics.startSystem(window.Phaser.Physics.P2JS)
// 左边，右边，上边，下边，碰撞检测
game.physics.p2.setBoundsToWorld(true, true, false, true, false)
// player
player = game.add.sprite(game.world.centerX, game.world.centerY, 'player')
player.scale.set(0.3)
game.physics.p2.enable(player)
// 不旋转
player.body.fixedRotation = true
// 按钮组
btnLeft = game.add.button(0,0,'btn',null, this,0,1,0,1)
btnLeft.fixedToCamera = true
btnLeft.events.onInputOver.add(function(){jump=true})
btnLeft.events.onInputOut.add(function(){jump=false})
btnLeft.events.onInputDown.add(function(){jump=true})
btnLeft.events.onInputUp.add(function(){jump=false})
btnLeft.animations.add('bleft',[1])
btnLeft.play(10, true)
btnLeft.scale.set(0.4)
btnLeftTop = game.add.image(0,0,'btn')
btnLeftTop.animations.add('blefttop',[2])
btnLeftTop.play(10, true)
btnLeftTop.scale.set(0.4)
btnLeftTop.fixedToCamera = true
btnLeftTop.cameraOffset.setTo(0, 100)
btnLeftButtom = game.add.image(0,0,'btn')
btnLeftButtom.animations.add('bleftbottom',[3])
btnLeftButtom.play(10, true)
btnLeftButtom.scale.set(0.4)
btnLeftButtom.fixedToCamera = true
btnLeftButtom.cameraOffset.setTo(0, 200)
btnRight = game.add.image(0,0,'btn')
btnRight.animations.add('bright',[4])
btnRight.play(10, true)
btnRight.scale.set(0.4)
btnRight.fixedToCamera = true
btnRight.cameraOffset.setTo(height-60,0)
btnRightTop = game.add.image(0,0,'btn')
btnRightTop.animations.add('brighttop',[5])
btnRightTop.play(10, true)
btnRightTop.scale.set(0.4)
btnRightTop.fixedToCamera = true
btnRightTop.cameraOffset.setTo(height-60,100)
btnRightButtom = game.add.image(0,0,'btn')
btnRightButtom.animations.add('brightbuttom',[0])
btnRightButtom.play(10, true)
btnRightButtom.scale.set(0.4)
btnRightButtom.fixedToCamera = true
btnRightButtom.cameraOffset.setTo(height-60,200)
// 按钮组结束
cursors = game.input.keyboard.createCursorKeys()
// 后面两值越小越丝滑
game.camera.follow(player, window.Phaser.Camera.FOLLOW_LOCKON, 0.1, 0.1)
// Listen for this signal to reset once the fade is over
game.camera.onFadeComplete.add(this.resetFade, this)
}
this.resetFade = function() {
game.state.start('loader')
// game.camera.resetFX()
}
this.update = function() {
player.body.setZeroVelocity()
if(jump){
player.body.moveUp(300)
}
if (cursors.up.isDown)
{
player.body.moveUp(300)
}
else if (cursors.down.isDown)
{
player.body.moveDown(300)
}
if (cursors.left.isDown)
{
player.body.velocity.x = -300
}
else if (cursors.right.isDown)
{
player.body.moveRight(300)
}
}
// this.render = function() {
// game.debug.text('Arrows to move. Click to fade', 32, 32)
// }
}
game.state.add('boot', bootState)
game.state.add('loader', loaderState)
game.state.add('test', testBtn)
game.state.add('start', startGame)
game.state.start('boot')//启动第一个场景
window.focus()
return game
}
export default launch
export { launch, resize }
// 样式横屏，但是横屏之后按钮等功能实现不了，原因应该是游戏世界内的位置不对
// setTimeout(()=>{
// let canvas = document.querySelector(`#${containerId}`)
// canvas.style.transform = 'rotate(90deg)'
// },100)
手机横屏点击方向按钮，精灵按照方向按钮的方向移动且相机跟随