Search the Community

Hi! So I'm working on a 2D space shooter type of game and am trying to get a parallax background thing going. But I'm having trouble getting the math right. You can see my work in progress here: https://www.youtube.com/watch?v=Pea9yVbTD64 As stated in the video everything works if the players x and y are positive, but breaks when they are negative, and I can't figure out what I am doing wrong. Any help would be greatly appreciated. Or perhaps there is a better way to accomplish this? What I'm doing is randomly generating out a bunch of the Sprites, and then updating their position with this code. _Nebulas: is Array<NebulaParticle> which is listed below as well. p.distance: is a number between 1 and 5 to signify how far away the sprite is and is used to make them move slower when they are furher away. _Width and _Height are both arbitrary numbers to signify how big the area is that the parallax should cover, in the video they are both set to 80. OriginalOffsetX/Y is the original random position the Sprite was given. public update(delta: number, playerx: number, playery: number) { console.log(playerx + ", " + playery ); for (let i = 0; i < this._Nebulas.length; i++) { let p = this._Nebulas[i]; p._Sprite.x = (playerx + (this._Width / 2)) - (((playerx / p.distance) + p.OriginalOffsetX) % this._Width); p._Sprite.y = (playery + (this._Width / 2)) - (((playery / p.distance) + p.OriginalOffsetY) % this._Height); } } class NebulaParticle { public _Sprite: Phaser.GameObjects.Sprite; public OriginalOffsetX: number; public OriginalOffsetY: number; public distance: number; } Thank you very much.

Hi, Why parallax scroller very much brakes on the phone (samsung a3 2016), in 2 - 3 minutes after the application launch?

when using pbrmaterial with parallax enabled , the albedoTexture gone, and here is a PG showing the problem :http://babylonjs-playground.com/#10I31V#27 according to tutorials said : A diffuse texture is required for using parallax mapping. so how do i use parallax in pbr?

I am trying to achieve a similar design as this site using pixi- http://www.spaceneedle.com/home/ However I am having trouble even finding out how to make a full page texture. Any image I use won't stretch to match the viewport. I have tried setting- this.sprite.texture.width = viewPort.width; or this.sprite.width = viewPort.width; However there is always blank space on the right hand side? Any guidance would be greatly appreciated.

Hi Everybody ! I'm working on a game with camera follow, and many plans on background. Is there a solution to make them moved at differents speeds ? To create parallax effect :). Thank you !! And sorry for my english ^^..

Hi, everyone, I am new in the framework of the phaser, and I came to ask your help to know how to create a parallax effect equal to the GitHub site when it is not found the page, example here: https://github.com/errorr4frsf wanted this effect between two background images, where the last image moves contrary to the mouse movement.

In (re)acquainting myself with Pixi for some hobby projects, I put together a simple example and walkthrough of scaling to fit device dimensions, using hi-res resources, animating a sprite, doing some basic parallax scrolling with tiling sprites, and assembling spritesheets with TexturePacker: http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ I hope it's of use to somebody, and would love to hear any comments about any errors or sub-optimal code. Thanks!

Hello all, i have a small code on phaser wich needs to parallax two textures at different speeds. i've set the game canvas to transparent mode and my tiles are 1024x512. However, i have the need of resize it according to screen resolution, i.e. apply scale to have a good aspect ratio. how do i do that? here's what i'm seeing. i need to scale it in order to parallax it nicely http://imgur.com/a/swwOI

In (re)acquainting myself with Pixi for some hobby projects, I put together a simple example and walkthrough of scaling to fit device dimensions, using hi-res resources, animating a sprite, doing some basic parallax scrolling with tiling sprites, and assembling spritesheets with TexturePacker: http://www.rocketshipgames.com/blogs/tjkopena/2015/09/basic-scaling-animation-and-parallax-in-pixi-js-v3/ The code is very much based around Pixi, but it's easy to understand without being familiar with that API, and I thought the article makes enough broad points to be worth crossposting to this general 2D forum in hopes that others may find it useful. Thanks!

Hi, I already created a topic for this but my idea has evolved and I think it is better to create a new topic. For the record , I have an animated plane with several "hole" (only one in the example) . http://www.babylonjs-playground.com/#272WDW#14 Currently when we click the image that we see through the hole , it zooms to the picture.But that's not what I want . What I want is that we have the impression " to go inside " the hole, and that the image is in full page at the end of the animation , so no zoom the image, just in full screen display. I don't know if this is understandable. Maybe when you zoom, it could detect when the image is full screen, and in this case continue the zoom on the plane to be certain " to enter the hole" and put the image backward ( reduce ) in the same time to keep the image in full screen and does not zoom to it. Or maybe assign a different zoom speed between the plane and the image ? Then when the image is in full screen, I will need an html page to reduce the image and put a description (I know how to do that). I thinking of 2 solutions but I don't know how to do for the both : Solution 1 : Remove the images from the scene to put it behind the canvas with HTML. The problem is that to put the images I have to calculate the hole center, but I don't know how to transfer this coordinate on the html page to place the image. Solution 2 : Keep the images in the canvas, and at the zoom end, "switched" on the html when the image is in full screen. In both cases, I think that a kind of parallax effect will be necessary to zoom in the hole, while extending the image to put it in full screen. Thanks, Do not hesitate to ask questions , I know that what I want to do is perhaps a bit complicated to understand.

Is there an easy way of creating a parallax kind of background? I've read that tilemaps are the way to go, but I was wondering if this was possible with just sprites? Is there an easy way to change a sprites x coordinate in relation to another sprites current x? Here's an example of what I'm trying to recreate http://www.firewatchgame.com/ Hope this makes sense!!

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!

Is this at all possible? I originally managed to achieve the effect when I loaded in the background as one single image. But now I'm using tilemaps and adding to a layer with addTilesetImage I can't seem to get any movement there. It's just a simple x -= 0.5; //When moving right x += 0.5; //When moving left Here's how I'm currently loading the background layer: game.load.image('sky', 'assets/parallax-bg.png'); game.load.tilemap('map', 'assets/tilemaps/level1.json', null, Phaser.Tilemap.TILED_JSON); this.map = this.add.tilemap('map'); this.map.addTilesetImage('background_spritesheet', 'sky'); bgtile = this.map.createLayer('backgroundLayer'); Then I've tried the following in the update() within my if(cursors.left.isDown) to try and get some movement bgtile.tilePosition.x += 0.5; Oh, and here's a link of the WIP if anyone's interested! http://projectmayhem.co.uk/sandbox/santa/santa.html

Hello everyone, In my game I have big scrolling back(960x640) with parallax which consists of 8 parts. I was thinking to replace it with one bitmapData. I'm going to draw all parts into this bmd and then use it as texture for only one image. It will definetely reduce canvas draw calls but there any shortcomings for this method which i'm missing in theory? I have been done this many times in Flash and it was good for performance.