starField Tutorial

sign up sign in

The star field, which you can see here, is my basic 'Hello World' test for a new game tool kit. I made this one with luxe / snõwkit, and you check out the source code for the full project here. I like space games, and this basic project teaches me how the basic things in a new toolkit work: 1) how do I get sprites on the screen? 2) How do I move those sprites? 3) How do I update / use the 'game loop' to do other things?

If you know that, you can make a game. Basically.

To get this up and running, it only takes a few steps. I'll assume you have gone through the luxe guides to get your dev environment up and running. First thing to do is define a few variables in Main.hx to use for our sprites and the number of stars we want on screen:

Next, in our ready() function we need to create a for loop that will create a sprite entity for each of the number of stars we defined above.

You'll see that we have added a StarComponent() to each of these sprites we have created. The entity/component system is new to me with snõwkit, but I already love it. It allows for a lot of flexibility and control of your game.

Each starSprite gets this component added to it, which controls how it looks and how it behaves. First we create a variable called _diff, which we set to a random number between 0.0 and 0.5. This variable will set the size of the sprite (set with sprite.scale) and and the alpha (set with sprite.color) in the init() function. In the update function, we update each star's position each frame with sprite.pos.x -= _starVelocity * dt * _diff;, again using this _diff variable. These three things together create an effect where larger stars are brighter and move faster, while smaller stars are more dim and move slower. It creates a subtle depth effect that I really like. And it's all randomized, so it doesn't feel stale. You can easily change things like the number of stars, the range of sizes, and the direction of star movement in order to tweak this demo to suit your own game.

The last part of the update function on our StarComponent simple checks if each star is offscreen and moves it back to the other side.

Pretty simple stuff when it's all laid out, but I always benefit from these types of tutorials that explain one thing in detail, and I hope someone else learns a thing or two from it.

OH, and if you want to see something cool, run the demo then tab away for a minute or so. When you return all the stars will be lined up on the right side, then move in formation. Still working out that bug I think. =]

Tags
luxetutorial