Tutorial: SpriteIlluminator

I was recently selected to be able to beta test SpriteIlluminator by CodeAndWeb. SpriteIlluminator helps you add dynamic lighting to your mobile games by helping you create a normal map to add to your sprite.

Since the majority of my mobile games are created using Corona SDK, I’m going to cover how to get started integrating SpriteIlluminator into that.

The first thing you’ll do is import a sprite into SpriteIlluminator. Here I just quickly drew a guy for this demo.

Screen Shot 2015-02-26 at 10.09.32 AM

Next you can add the various effects, such as bevel and embossing.

Screen Shot 2015-02-26 at 10.09.54 AM

You can drag the light source around and see how your sprites will look in real-time, which is very helpful. You can also use the lasso tool to select certain portions of the sprite and add effects just to that part.

Screen Shot 2015-02-26 at 10.12.28 AM

When you’re finished, you can publish out the project and it will create your normal map file.

Screen Shot 2015-02-26 at 10.14.42 AM

In this example, I beveled the sprite and then raised the shirt sleeve, nose, and eyes to make them stand out. Then in SublimeText, I created a main.lua file and did a composite of both the sprite and its normal map. Here you can see how a light source reacts to the sprite.

Screen Shot 2015-02-26 at 10.18.54 AM

If you set the attenuationFactor to 0, you can see the portions are the image that I beveled and raised in SpriteIlluminator.

Screen Shot 2015-02-26 at 10.19.06 AM

And if you reverse the order of the sprite and its normal map, you can see the beveled image.

Screen Shot 2015-02-26 at 10.19.28 AM

SpriteIlluminator is a very easy-to-use and powerful tool to help add some nice dynamic lighting effects to your games. This is obviously a very basic example of what it can do, but hopefully it’s enough to get you started in integrating it in your Corona SDK apps.

Advertisements

2 thoughts on “Tutorial: SpriteIlluminator

  1. Nice tutorial! Thanks! Hope to see more advanced tutorials that use this. Games will look amazing with this if done right.

  2. Hi everyone
    It would be great if we could get some source code for Spriteilluminator with Corona SDK.
    How can I get the light source into the code to get the same effects as in the SI editor?
    I followed the tutorial with the default image in SI and all files are existent but there is no dynamic lighting.

    Please help me and thanks for reading!
    Matt

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s