Horizontal screen of the game on the mobile phone

[D-xhao]

Recently, there was a small game with horizontal screen development needs, and then I chose to develop it with pahser 2.6.2. I found that after rotating the game world 90 degrees, the whole game world would shake violently when the camera followed the sprite

demo:

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')

// window.Phaser = require('phaser')

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)

//Rotate 90 degrees 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') } } // scene two 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 = 'loading' + 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() {
    // background image
    game.add.tileSprite(0, 0, 1920, 1920, 'background')
    // Game world size
    game.world.setBounds(0, 0, 1920, 1920)
    //Turn on the physical system
    game.physics.startSystem(window.Phaser.Physics.P2JS)
    // collision detection
    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)
    // No rotation
    player.body.fixedRotation = true

    // button
    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)
    //button end

    cursors = game.input.keyboard.createCursorKeys()

    //Camera follow
    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')//Opening scenario 1 window.focus() return game
}

export default launch export { launch, resize }

[photonstorm]

This GitHub is for Phaser 3. If you need help with Phaser CE please report the issue, as long as it's an actual issue with the API and not your code, to the Phaser CE repo.