Search the Community

I appear to have an issue where resizing my game causes my parallax backgrounds to move around, and am looking for some help to see what I may be doing wrong. The game looks generally like this: Onto the problem: I have several layers of background that move at different speeds. The first layer of background (layer0 in the code) moves in unison with the foreground. I can line up the player's character with a background object in layer0 and then resize the screen and the player remains in the exact same relative position to the background object, which is great. Where I run into trouble, is that I can't line up the player with objects in the other parallax layers (layer1 through layer4) and then resize the screen and keep the player lined up with background objects. Perhaps I'm missing a fundamental point about parallax layers, but I figured that resizing the screen would simply shrink or enlarge the entirety of the game view -- NOT cause the background layers to move around relative to everything else. So I assume I've made an error in how I treat these layers. Here are pictures of the discrepancy: The grey cloud adjacent the orange ship is in layer0. The red cloud is layer1 (parallax). The red cloud moves more slowly than the layer0 grey cloud when the ship moves around. I thought everything was working fine until I resized the window. Upon changing the browser window's size, all of the images have resized nicely, and the orange ship remains in the exact same relative position to the cloud in layer0, however the red cloud from layer1 has moved. The top most gray cloud is in layer2 (not included in the code) and has moved even further. To shorten the code, I'm going to remove layers2-4 as all of these layers are logistically the same as layer1; they are all parallax layers. The question becomes: What am I doing wrong with either resizing my game's view, or with my parallax layer1? function Background() { this.layer0 = new PIXI.DisplayObjectContainer() this.layer1 = new PIXI.DisplayObjectContainer() //skipping layer2, layer3, layer4}Background.prototype.initialize = function(stage) { stage.addChild(this.layer0) stage.addChild(this.layer1) var cloud = new PIXI.Sprite(PIXI.Texture.fromFrame('compressed-cloud.png')) cloud.anchor.x = cloud.anchor.y = 0.5 this.layer0.addChild(cloud) var cloud1 = new PIXI.Sprite(PIXI.Texture.fromFrame('compressed-cloud.png')) cloud1.anchor.x = cloud1.anchor.y = 0.5 cloud1.tint = 0xff0000 this.layer1.addChild(cloud1)}Background.prototype.moveBy = function(x, y) { // mapped to foreground this.layer0.x += x this.layer0.y += y // parallax this.layer1.x += x * 0.8 this.layer1.y += y * 0.8}Background.prototype.setScale = function(scale) { this.layer0.scale.x = this.layer0.scale.y = scale this.layer1.scale.x = this.layer1.scale.y = scale}To summarize Background, it is a plain non display object which creates two display objects, layer0 and layer1, which it adds to the stage. Some clouds are added to each of the layers as a test. When the background is moved, layer0 is moved by the same amount as the foreground layer, meanwhile layer0 is moved only 80% as much, creating a parallax effect. When the screen is resized, both layer0 and layer1 are rescaled. Now my display and resizing logic: function Display() { // default, these values need updated if the window is ever resized this.windowWidth = window.innerWidth this.windowHeight = window.innerHeight // a size for the game, applied to a PIXI renderer // changing these values will zoom in/out the game this.gameWidth = 500 this.gameHeight = 500 // scaling ratio between the game and the browser window this.scale = 1 this.recalcuateScale()}Display.prototype.resize = function() { this.windowWidth = window.innerWidth this.windowHeight = window.innerHeight this.recalcuateScale()}Display.prototype.recalcuateScale = function() { var xRatio = this.windowWidth / this.gameWidth var yRatio = this.windowHeight / this.gameHeight this.scale = (xRatio < yRatio) ? xRatio : yRatio}Display keeps track of the actual browser window dimensions, and calculates a scale between them and the game dimensions. The scale calculation is basically to take the smaller of the width or the height ratio. I'll note that the game isn't actually ever a 500x500 pixel square, it'll instead be a 1920x1200 view (or any size) where the graphics have been scaled up to a nice pixelly aesthetic. There's never any horizontal or vertical mashing, all the pixels stay crisp and square. I can't include all the code, but here is where display resize is used: window.onresize = function() { console.log('resizing!') display.resize() renderer.resize(display.windowWidth, display.windowHeight) background.setScale(display.scale) foreground.scale.x = display.scale foreground.scale.y = display.scale hud.resize() }And here is roughly where the actual movement of the foreground/background occurs: var targetX = 0var targetY = 0var cameraX = 0var cameraY = 0function moveCamera(x, y) { targetX = x targetY = y}function updateCamera(delta) { var dx = targetX - cameraX var dy = targetY - cameraY var moveX = dx * delta * 10 var moveY = dy * delta * 10 cameraX += moveX cameraY += moveY background.moveBy(moveX, moveY) foreground.x = cameraX foreground.y = cameraY}It is a little messy, but I doubt the error is in the camera logic. Summary of camera logic: camera gets aimed at a position, and then each frame it moves towards it gently at the rate of delta * 10. The foreground and background move at the exact same rate (despite my having coded it awkwardly where one uses foreground.x = cameraX and the other uses layer0.x += moveX). The parallax effect occurs inside of moveBy(), where moveX is reduced for layers 1 through 4. Anyone know what I've done wrong? Thanks for reading!