Let there be light!steemCreated with Sketch.

in #gamedev2 years ago

lights.png

Last week I explored lights in Phaser 3 (and also pathfinding, leaving that for the next post). There is built in support for adding forward rendered lights and I started with trying those out. Examples of them in use can be found in the labs section for Phaser 3, check em out! Lots of stuff in the labs are interesting/fun to toy with.

When using the lights you use normal maps for the textures, a great tool for this is SpriteIlluminator from CodeAndWeb. They also create TexturePacker, which I already use for packing the art into atlases. With TexturePacker you can easily pack the normal maps with the rest of the art, it also creates a default normal map, giving you the option to quickly test lights without having to craft the actual normal maps.

codeandweb.png

src


There is a short and effective tutorial on how to bring it all together here.

With these resources it was little effort to try it all out quickly. Unfortunately it turned out that there is a bug with the rendering on mobile phones, it will only render one light! This is a known bug and at the moment with no time frame of fixing. The performance seemed OK, but it would require planning to properly make use of the few lights you might have visible at once. I estimate perhaps five lights might be doable if you want to support mobile phones that are not too powerful. There was a deferred rendering path in the works but, due to some issues and what not around that time, it seems the work got halted.

I began exploring alternative options for creating lights as the bug with mobiles made the regular lights of no use to me. I decided to go for using a black image that I apply an alpha masks to, "carving" out the light in the dark so to speak.

You can only apply one mask to an image, if you need more you have to render to a texture and then use that texture. I was unable to find documentation on exactly how this worked, so I ended up with a somewhat crude solution, but performance is excellent. By using particles I can emit a single particle for each light I want to make, this particle is used as the mask and that way I have one mask but it consists of as many emitters as I want to use. The down side of using a particle is that I need to emit at a rate of 1 per frame and let it live 1 frame (or in my case 2 frames with a fade to avoid flicker), this because otherwise the light would lag behind when moving around. If the position is static you emit with longer life and not so often, using the emitter itself to create effects such as the light from a fire.

let there be light.gif

This can be accomplished with a moving light as well, but you would have to create several frames of texture and the emitter would randomly pick a texture to use. Doing some tests this actually worked nicely, I decided that if I should need it, this technique would be doable. You would have to limit the usage a bit, as too many lights with this technique will hurt performance, but no where near how it was using forward rendered lights.

A final limitation of using the masks is that there is no color for the light, it is only pure "white". But again, a solution here is to actually just create one more particle and not use it as a mask, and that particle can be colored and the combination creates an acceptable colored light.

The black image I apply the masks to is actually white, but I tint it to black as this gives the option to tint the image to any color you like. Want the dark to have a tone of red? No problem! Use it to make something that appears to be fog? No problem!

Very happy with the end result, in particulate with the performance. With a nice helper function, it is a mere createFakeLight and voila you have something that appears to be a light in the game.

code.png

Thanks for reading!

Sort:  

Congratulations @smjn! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :

You made more than 6000 upvotes. Your next target is to reach 7000 upvotes.

You can view your badges on your Steem Board and compare to others on the Steem Ranking
If you no longer want to receive notifications, reply to this comment with the word STOP

You can upvote this notification to help all Steem users. Learn how here!

Thanks! After a day dating norovirus illness this was a nice surprise.

Ack, sorry to hear!

Oh hey! I just want to thank you for all the support you've been giving me lately :) Helps out a lot :D

Posted using Partiko Messaging

Good to read posts. Short but sweet and yummy GIFs.

Thanks for the support! ✌

Posted using Partiko Messaging

Hey man, I checked out your profile since I got a nice upvote + follow combo from you (thanks for that!).

I got really surprised though since I did not expect any Phaser content on Steemit. Actually, I am just developing a shoot em up game with Phaser 3 (probably will publish some footage tomorrow).

Articles like this are really interesting and useful to me, I am looking forward to see some more of them. I have never used lights before in my game but maybe at some new features I will :)

Hey! Always nice to find some one new developer with a game touch on steem. Looking forward to posts about the shoot em up and best of luck with the interviews

Yeah exactly, and thank you so much :)
Actually, I just uploaded a video about it to dtube. The game is embedded into a website which I am building right now, so it is basically a browser game hybrid.

I just wanted to say you're one of the biggest reasons I put a lot of effort on my #gaming posts. Thank you.