How to do dynamic lighting by partially undoing a colorTransform

[sano98]

Hi, fellow developers!

 

For my current project, where I am deploying to flash target, I’m looking for a way to undo the colorTransformation of an FlxSprite or FlxTilemap for those pixels where it overlaps with another object.

 

Let me explain:

On screen, I have a building with windows and a day and night cycle. I adjust the color of the sky repeatedly during one day.

 

Obviously, I also needed lighting effects for the interior. The usual way dynamic lighting is done in flixel is to layer a black, semitransparent graphic over the screen and then cut out the areas where there is a light source. At least that's waht the flashgamedojjo tutorail suggested and what everyone seems to be doing as far as I can see. I didn’t like this solution, as it also darkens areas which wouldn’t need darkening – like the moon shining in from the outside.

 

Instead, I decided to repeatedly adjust the .color-attribute of each relevant FlxSprite and FlxTilemap.

currentColor.adjustToDayTime(); //some function is updating the variable currentColor
Registry.buildingStructureTileMap.color = currentColor;
for (i in 0...Registry.objectGroup.length)

{

Registry.objectGroup.members[i].color = currentColor;

}

 
 

This led to some nice light moods with reasonable performance.

 

 

 

Now, in order to create a light source in the building, I am trying to achieve something like this:

 

Basically, I want the colorTransformation to be undone in those regions that are hit by light (=overlapping with a light-cone FlxSprite)

I haven’t been successful so far, but I have several approaches how to do this:

 

Write my own blendmode

A blendmode defines how overlapping pixels are represented on the screen. Normally, only the top pixel is shown, but the rules can be modified at will.

So, I was thinking when object A has an intersection with lightsource B, my rule should state that the original, unmodified pixels of A should be shown on screen. As in before the colorTransformation took place. The original bitmap must still linger somewhere in the memory anyways, as repeated changes of the .color-attribute are always applied to the original graphic (coloring an object yellow and then red will leave it red, not orange).

The problem is that I was unable to find the code for the blendmodes in the first place. It seems not to be a part of the haxeFlixel library, and I couldn’t find them in the openfl libs either. It is probably hidden somewhere deep down in lime or even flash itself – I have no clue.

 

Use Alpha masks

The alphaMask-function from the FlxSpriteUtil-package sound like a very good idea – alpha masks do exactly what I am looking for – they take a source graphic (for me, my uncolored original) , a mask (my light cone) and an output, where the source graphic is being placed into (the colorized version of my object on the screen).

But I couldn’t get this to work, either. The limitation that the mask must be of the same size as the source are a primary obstacle. Furthermore, it doesn’t seem to be working with Tilemaps, and with animated FlxSprites, it loaded the whole spritesheet instead of only the current frame.

 

Write something from scratch

Check for pixelperfect intersection, restore the original pixels of the FlxSprite.. something like that.

 

So, that’s about it. Any suggestions or advice?

Many thanks,

-sano

 

 

[Ashiq A.]

I think your approach is really great.

Is it possible you could create a code sample repository on GitHub, a blog post, or some other (more complete) example showing how you did your lighting (minus the part you're trying to solve about masks)?

I'm really interested in this effect, but don't (yet) need to know how to do it.

I have a Haxe blog I can append it to (albeit not a popular one) if you can write it up as a post.

--
HaxeFlixel Development Community
See our github https://github.com/haxeflixel/ and our documentation http://haxeflixel.com/documentation/
---
You received this message because you are subscribed to the Google Groups "HaxeFlixel" group.
To unsubscribe from this group and stop receiving emails from it, send an email to haxeflixel+...@googlegroups.com.
Visit this group at https://groups.google.com/group/haxeflixel.
To view this discussion on the web visit https://groups.google.com/d/msgid/haxeflixel/fb932bc6-292e-45e0-835e-5882282b3e06%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Claudio Ficara]

@Ashiq: I think he added the sprites into a group, then, for each sprite, he changed the color property. Is a nice aproach with good results.

Now on topic, why don't you try to use the dynamic lights demo on https://groups.google.com/d/msg/haxeflixel/8IX0tTHifsQ/k8A3QD6wWiYJ ?

You can change the color of the darkness to achieve other moods, but the lights in that code, will make the effect you desire. Give it a try and let us know!

[sano98]

@Ashiq:

Thanks! I am currently still working on a test project to get the lighting effect that I want to achieve working; as soon as that is finished, I can share the github.
But basically, Claudio is right: I just iterate over all members of a FlxGroup every now and then and adjust their color value.

Now, to achieve what I want, I already managed to build a modified version of the alpha-mask function that resets the color value in the intersection area - but until now only for unanimated FlxSprites. I think I might get it working for animated sprites, too...
But with FlxTilemaps, I run into the problem that I cannot access their BitmapData.

For a sprite, it simply is the .pixels-attribute. But where is the bitmapdata of a Tilemap stored?
My research turned up that each FlxTilemap has a private array _buffers, containing FlxTilemapBuffers, which then again posess the .pixels-attribute with Bitmapdata.

Does anyone know if this is the right place to look?

[sano98]

I've put the progress I've made so far in an example project on github:

https://github.com/sano98/Flixel-Lighting-ColorTransform.git

I am using version 4.1.0 of the dev branch.
If anyone has a good idea of how to access the bitmapdata of a FlxTilemap or why the manipulation of the framepixels with an animated sprite is not working - input is greatly appreciated.
Thanks!