Jump to content

Static starfield with some blinking stars


Recommended Posts

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?


Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

  • 4 weeks later...

Hi there,


I recently done something like this in a project of mine (with a starfield of letters :P), 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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...