[AS2] Infinite Parallax Scrolling

[pradvan]

It's been a while since I've posted anything here from my site, so it's about time :P

Endless Parallax Scrolling Effect (http://www.freeactionscript.com/2009/07/endless-parallax-scrolling/)
The latest script is an endless parallax scrolling effect. This optimized script creates the illusion of flying through space. You can easily tweak the effect to change the look and feel.

:hr:

[flyingmonkey456]

looks good, reminds me of the starfield screensaver. i'm gonna take a guess at how you did it, you changed the speed multiplier based on the depth?

[bluemagica]

hey pradvan, can you just enable comments without having to register?

[pradvan]

looks good, reminds me of the starfield screensaver. i'm gonna take a guess at how you did it, you changed the speed multiplier based on the depth?
I only have 3 layers so I hardcoded the speed modifiers. Making the speed dynamic based on number of layers shouldn't be too hard.


hey pradvan, can you just enable comments without having to register?
Hi blue, I'm sorry but if i enable comments without registering the site gets spammed with bots. :(

[TOdorus]

Well that is somewhat... Completely different to my method :)

I've got three big png's with starfields (they could also be created randomly, like you did). Then I just use a adjusted version of my tilerender method. What I added is that I move the origin of the parallax layer according to the amount of scrolling done. Then it just rendering tiles with a correction for the translation. This way it's just a few copypixels with each iteration of the game loop.

It's less dynamic as your method, but I like how cheap it is. With your method the pattern you'd see would be different for every speedX and speedY combination.



public function renderParallaxTile(SHEET:AnimSheet, ParallaxSpeed:Number, CellWidth:Number, CellHeight:Number) {
//Screen Dimensions
var Width:int = ScreenWidth//700
var Height:int = ScreenHeigh//510
var X1:Number = ScreenX
var X2:Number = X1 + Width
var Y1:Number = ScreenY
var Y2:Number = Y1+Height
//Tile Dimensions
var TWidth:Number = CellWidth
var THeight:Number = CellHeight
//
var VisX:int = Math.ceil(Width /TWidth )
var VisY:int = Math.ceil(Height / THeight)
//
//var Zero = 0
var ParXZero = -(ScreenX * ParallaxSpeed)
var ParYZero = -(ScreenY * ParallaxSpeed)
//
var CellX1:int = Math.floor((X1+ParXZero) / TWidth)
var CellY1:int = Math.floor((Y1+ParYZero) / THeight)
var TopLeft:Point = new Point(CellX1, CellY1)//position of topleftTile
//
var nX:int
var nY:int
var NewX:Number
var NewY:Number
//var NewPos:Point
for (nX = 0; nX <= VisX; nX++) {
for (nY = 0; nY <= VisY; nY++) {
NewX = ((TopLeft.x + nX) * TWidth)-ParXZero
NewY = ((TopLeft.y + nY) * THeight)-ParYZero
renderAnimSheet(SHEET,NewX, NewY,1)
}
}
}

[pradvan]

I contemplated adding tiled parallax stars but never really got around to implementing it as it seems like a lot of work (I haven't made my own tile engine yet).

So I went with the next best thing :P


With your method the pattern you'd see would be different for every speedX and speedY combination.


Being how my ship was not fixed to the center of the screen, this did not present a problem at all :) You can't tell its a random field as you're moving

[TOdorus]

I contemplated adding tiled parallax stars but never really got around to implementing it as it seems like a lot of work (I haven't made my own tile engine yet).

So I went with the next best thing :P

We really need to have a chat about using tiles in broadphase somtime :)

[justkevin]

For Starcom I initially started with just a flat starfield, then I moved to several layers, before going to a system where all the stars are at the same depth, but their delta x/y is multiplied by their alpha component-- thus far stars move more slowly. As soon as a star moves off screen, it's moved back over to the other side.

http://www.kongregate.com/games/wx3lab/starcom?gamereferral=starcom