Static starfield with some blinking stars

[Dower]

I'm trying to figure out a way to make a simple starfield for a background 2d side scrolling game.

I could make a png file for the main background, but I would like some of the stars to blink...

Would the best way to handle it be make a group and randomly scatter blinking sprites throughout the background?

Or is there maybe a more elegant way of handling it? Particles maybe, or is that overkill?

 

[chg]

What about a second layer that's all black but with a varied alpha channel? It would not be wholly unrealistic - stars appear twinkle because of differing attenuation from the Earth's atmosphere. Then you just transform the atmosphere layer by a small amount every frame.

[Dower]

That's an interesting idea. I'll give that a shot!

[JakeCake]

In the past I handled it with a shader (called filter in Phaser). See if you can find something on glslsandbox.com or maybe in the Phaser examples under filters.

 

Shaders are a tough topic, especially if you don't know anything about graphic engines beforehand, but if you can find something close enough, you might be able to get along by copy/pasting and twerking a few variables.

 

By using a shader you will see good performance, you'll be able to tweak the number of stars, speed of flickering stars etc. dynamically with ease through uniforms and the code will only take up a few kilobytes compared to using a large png.

[Dower]

Thanks for the suggestion JakeCake... That's some pretty impressive stuff over at glslsandbox!

I'll look into that.

[Dower]

JakeCake's suggestion was excellent. I found a nice starfield to use here: http://glslsandbox.com/e#27815.0

I had never used Filters before, but they seem very powerful, and luckily not too hard to implement into Phaser. I did, however, need to use the latest 2.4.4 version of Phaser to run the filters.

[jmp909]

I've got a feeling you might want to switch them off on mobile though. They can work but it's not super-fast from what I've tried. For what you're doing it might be ok

[Dower]

Thanks Jmp909, I was wondering if there would be trade-offs... One thing I'm finding right now is the shader's background is blank... At least in this instance. I was hoping to see if I can get that to run on top of a colored background that would change randomly.

[JakeCake]

I've got a feeling you might want to switch them off on mobile though. They can work but it's not super-fast from what I've tried. For what you're doing it might be ok

 

 

Rendering a texture happens through a shader in Phaser just as rendering a filter does, as long as you are running in WebGl mode of cause; which you might not want to do at all on mobile devices, but that's another talk. If you write your shader somewhat efficient - and there's a very large margin here - it should render just as fast as rendering a texture directly, plus you even save room on your graphics-ram, which mobile devices have only little of. That being said there is a small overhead on switching shaders, marginally longer than switching textures.

 

To compensate you could render to a texture at lower frame rates or at lower resolution, many games does this. Shaders are powerful and can make your game feel much more dynamic, so I would definitely use them for this purpose, even on mobile devices.

[awea]

Hi there,

 

I recently done something like this in a project of mine (with a starfield of letters ), here is the gist

 

I just initiate it in my state by giving to this function my group of stars and the context :

CanvasTweens.starsBlink(this, this.stars)

And to made my stars persist accross states, I have define a group attach to the stage, not the world. See the ChildrenFilter class in the gist ^^

 

It does the trick pretty well. For dispertion I use some random too but my 'stars' take place during an explosion of letters state... Let me know if you are interested, I will enjoy to explain it