Transparency through foreground semi transparent dark layer.
by Peterjohn Griffiths · in Torque Game Builder · 04/21/2011 (12:28 pm) · 15 replies
I would like to have an area in my game where the player goes into a cave. The cave is dark but I would like to aluminate around the player.
I have seen this in lots of platform games. Wii Super Mario Bros for one.
Example:From 0:30 - 4:20
New Super Mario Bros. Wii Walkthrough - World 2-3
Looks like they have a nice light scene, then overlay everything with a semi transparent dark layered image in the foreground and use some sort of code the create an area through the semi transparend dark layer to create a hole through it. Like blending but only over a limited area. Like a torch is being shined on the player. The torch follows the player and any platforms or background that touches the torch area is eluminated by the area not being affected by the semi transparent dark layer.
Any idea how to go about creating this?.
I have seen this in lots of platform games. Wii Super Mario Bros for one.
Example:From 0:30 - 4:20
New Super Mario Bros. Wii Walkthrough - World 2-3
Looks like they have a nice light scene, then overlay everything with a semi transparent dark layered image in the foreground and use some sort of code the create an area through the semi transparend dark layer to create a hole through it. Like blending but only over a limited area. Like a torch is being shined on the player. The torch follows the player and any platforms or background that touches the torch area is eluminated by the area not being affected by the semi transparent dark layer.
Any idea how to go about creating this?.
#2
If you want this to work like that video, I'm pretty certain that you'll have to write a custom scene object to do that. In short, you'll want to create a black graphic and modify it each frame to find the light sources and punch out a circle around the light.
04/27/2011 (12:51 pm)
If you just want it centered around the player create a single dark graphic with a transparent gradient in the center. Attach that to the player.If you want this to work like that video, I'm pretty certain that you'll have to write a custom scene object to do that. In short, you'll want to create a black graphic and modify it each frame to find the light sources and punch out a circle around the light.
#3
I like the first idea as a quick fix but will only work if the whole level is dark. Great thinking. :D
I may venture into the other idea, so any idea how to amend the black graphic through script?. What functions can punch the hole through the black graphic?.
04/28/2011 (8:34 am)
Thanks William,I like the first idea as a quick fix but will only work if the whole level is dark. Great thinking. :D
I may venture into the other idea, so any idea how to amend the black graphic through script?. What functions can punch the hole through the black graphic?.
#4
04/28/2011 (1:30 pm)
There's nothing in script that will allow you do this this. Ultimately, you'll have to research OpenGL and find the calls that will allow you to modify a graphic (there are several web pages that cover this topic). Then you'll have to create a custom scene object that has that behavior.
#5
04/29/2011 (7:24 am)
Is there a way to use a mask (Black background white circle) to cut out a section of another image? or are you saying this is something I would have to create in the engine myself as masking doesn't exist in TGB.
#6
Just creating a trigger behavior to mount and dismount the lightmap to the player and AI's aswell.
It works with different colours (Cool for fire, glowing green sludge, or normal lighting over a whole level).
Only using programmer art at the moment, but my artist friend is going to knock up some better lightmaps and animated lightmaps aswell.
04/30/2011 (12:47 pm)
I have figured out a way to do this without using any code modification to the engine.Just creating a trigger behavior to mount and dismount the lightmap to the player and AI's aswell.
It works with different colours (Cool for fire, glowing green sludge, or normal lighting over a whole level).
Only using programmer art at the moment, but my artist friend is going to knock up some better lightmaps and animated lightmaps aswell.
#7
lightmap-Example.PNG
lightmap_BlackBackground.PNG
Import the images and add the lightmap_BlackBackground to the level in TGB.
Size to fit the level.
Set the blend alpha to the desired transparency. I used 200 as I wanted it dark. Set its layer to 2
Add the lightmap-Example to the scene and make sure its layer is infront of the lightmap_BlackBackground by setting its layer to 1.
In blend options set the follow;
Source Factor: DST_COLOR
Destination Factor: SRC_ALPHA
Now run your level and it should cut through the lightmap_BlackBackground layer.
I had to mount a second lightmap-Example to the first to get the desired amount of light as the lightmap_BlackBackground was dark.
You can adjust the colours in blending on the lightmap-Example aswell to give tints of red blue or green etc.
05/19/2011 (11:24 am)
Here are two images I used as test. You can create a gradient version for faded edges etc if you like. But this was just for test so are basic but give you the idea.lightmap-Example.PNG
lightmap_BlackBackground.PNG
Import the images and add the lightmap_BlackBackground to the level in TGB.
Size to fit the level.
Set the blend alpha to the desired transparency. I used 200 as I wanted it dark. Set its layer to 2
Add the lightmap-Example to the scene and make sure its layer is infront of the lightmap_BlackBackground by setting its layer to 1.
In blend options set the follow;
Source Factor: DST_COLOR
Destination Factor: SRC_ALPHA
Now run your level and it should cut through the lightmap_BlackBackground layer.
I had to mount a second lightmap-Example to the first to get the desired amount of light as the lightmap_BlackBackground was dark.
You can adjust the colours in blending on the lightmap-Example aswell to give tints of red blue or green etc.
#8
PFKPlayerLightmapTriggerBehavior.cs
for the Platformer kit.
Put in your behaviors folder, reload TGB.
Create a trigger and add the behavior to it.
Make sure the lightmap you want to use is named in its scripting area and put its name in the behavior's lightmapname field.
Tick MountOnEnter
Tick OnlyThisLightmap
Put the trigger over the spawn area of the player.
When the player hits the trigger (On spawn if the trigger is over the spawn area) the lightmap is mounted to the player puppet.
05/19/2011 (11:30 am)
I created this behavior aswell.PFKPlayerLightmapTriggerBehavior.cs
for the Platformer kit.
Put in your behaviors folder, reload TGB.
Create a trigger and add the behavior to it.
Make sure the lightmap you want to use is named in its scripting area and put its name in the behavior's lightmapname field.
Tick MountOnEnter
Tick OnlyThisLightmap
Put the trigger over the spawn area of the player.
When the player hits the trigger (On spawn if the trigger is over the spawn area) the lightmap is mounted to the player puppet.
#9
If I get time, I may put something more detailed together.
05/19/2011 (11:36 am)
Here is a screenshot.If I get time, I may put something more detailed together.
#10
05/20/2011 (2:28 am)
This was very useful. I hadn't even considered using blending to create effects like these. Thank you, this was a bit of an eye opener for me. 
#11
05/20/2011 (6:24 am)
I love a good script solution; and this is one for the books. Nice! Have you seen any performance issues with it?
#12
But I havn't used it all over the level with full level Lightmap scene lighting aswell yet.
I use two lightmaps for the player, two for each enemy and the odd large mood lighting here and there.
I would say around 5-10 lightmaps at any one time on the screen.
As its using blending and all images seems to use it in some way in TGB, I would not think its a big performance issue.
Every image by default uses blending.
This does the same, just with different source and destination factors so should be just the same as having the extra images I would assume.
To error on the side of caution, test your game in stages to make sure.
05/20/2011 (10:44 am)
No, works just fine.But I havn't used it all over the level with full level Lightmap scene lighting aswell yet.
I use two lightmaps for the player, two for each enemy and the odd large mood lighting here and there.
I would say around 5-10 lightmaps at any one time on the screen.
As its using blending and all images seems to use it in some way in TGB, I would not think its a big performance issue.
Every image by default uses blending.
This does the same, just with different source and destination factors so should be just the same as having the extra images I would assume.
To error on the side of caution, test your game in stages to make sure.
#13
12/17/2012 (8:24 pm)
I know this thread is old as hell but thanks for this. My designer is going to have a field day with these blending techniques. 
#14
12/18/2012 (9:16 am)
You can attach this "filter" image as a sprite in front of the player (and mounted to the player) or you can add it as a guiBitmapCtrl that covers the whole mainScreenGui and add it there instead. Either solution has advantages depending on what you're looking to accomplish.
#15
I also found this from a Q&A session but have been a bit unsuccessful with the answer provided.
12/18/2012 (11:28 am)
I might as well ask this here then as my designer brought it up but is using masks the only way to give a sprite a "brighter" effect? He specifically brought up the Screen Blend mode in photoshop and as far as I can tell setting options in the Blending section of an object in TGB can only make it darker. However I've achieved something kind of like it by overlaying span object with a sprite set to DST_COLOR and SRC_ALPHA.I also found this from a Q&A session but have been a bit unsuccessful with the answer provided.
Torque Owner Peterjohn Griffiths
Default Studio Name