# Search the Community

Showing results for tags 'parallax'.

• ### Search By Tags

Type tags separated by commas.

### Forums

• HTML5 Game Coding
• News
• Game Showcase
• Web Gaming Standards
• Coding and Game Design
• Frameworks
• Phaser 3
• Phaser 2
• Pixi.js
• Babylon.js
• Panda 2
• melonJS
• General
• General Talk
• Collaborations (un-paid)
• Jobs (Hiring and Freelance)
• Services Offered

• 0 Replies

• 0 Views

Found 14 results

1. ## Need help figuring out Parallax background

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.
2. ## Parallax scroller very much slows down on the phone

Hi, Why parallax scroller very much brakes on the phone (samsung a3 2016), in 2 - 3 minutes after the application launch?
3. ## problem about pbrmaterial with Parallax

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?
4. ## Full screen background image

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.
5. ## HELP - Camera Follow - Parallax

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 ^^..
6. ## Create a parallax effect of two images by moving the mouser horizontally equal to the GitHub site when the error 404 page not found

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.
7. ## Basic Scaling, Animation, and Parallax Tutorial

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!
8. ## how to scale image before use it on tilesprite?

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
9. ## Basic Scaling, Animation, and Parallax Tutorial

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!
10. ## Zoom animation (with parallax ?)

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.
11. ## Parallax Background

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!!