Page 1 of 1

KeyGuard: Flashlight/Spotlight effect

PostPosted: Fri May 10, 2013 1:00 am
by reneuend

This tutorial will show you how to create a flashlight/spotlight effect using KeyGuard.

When it was posted that the spotlight plugin didn't work with Windows 7, I decided that it was important enough to come up with an alternate. KeyGuard to the rescue!
I built this effect a few years ago with the game, "Get out of the dark".
Hopefully, there will be another surprise bonus feature from this tutorial.

Quick Preview from my first test in 2009

I first experimented with spotlighting when ShadowHunter built the awesome image cursors in KeyGuard 4 back in 2009.
I also created a unique inventory control with the middle mouse wheel. Whatever you carried, you could quickly get the item by
scrolling through your inventory using your middle mouse wheel. I also implemented displaying 2 inventory items at one time and then
allowing the user to switch between the items while in play. Example: One hand holds a flashlight, while the other hand carries a crowbar.
The code for this was pretty tricky and I would have to go back and do a better job of making this easier to work with before handing it out.

Since this was built on Xp back in 2009, I found a few issues running it on Win7 with the latest version of AM and KeyGuard. It will take a little time
to fix everything.

I don't believe image cursors work with cubic panorama. if it did, Wow!
I'm also not sure about embedded video on hotspots with image cursors. I can't remember if this works.

What I know you can do, is make use animated image cursors, which means you can have your spotlight dance if the player is carrying a candle or lantern. When you move
the mouse around, you move the items that you carry and the spotlight moves around the scene lighting up the areas you move to.
It took a little work to figure out the best mask and its something you'll have to experiment with. The masks is how you create the effect and its basically a negative
of the image cursor overlayed on the background.

You find a cemetery. But its dark!

Finding a flashlight, you decide to investigate a sound you hear.

You look around the gravesites. Here you turn off your flashlight.

Turning on the flashlight, you can see better.

Using the crowbar, you break open the crypt.

Even with the flashlight, you can't see inside. I guess you'll have to go in.

Once inside, you see a bolted door. Why? you wonder....the story continues...

After creating 2 images (one of the images is a mask) and adding the background, this is what you looks like.




Stay tuned for more......

UPDATE (06/30/2014)
I've been trying to get a good mask that people can use for this, but so far it hasn't gotten any better than what you see here.
I've emailed ShadowHunter in hopes of a better answer.

UPDATE (08/30/2014)
Here is the best I could come up with. I think I can improve this by adding more shadow to the background image.
The trick is more about the background image and not the mask! If you can make the background have more shadow and a yellow haze, it will take on a more of a flashlight effect. Be sure to keep a separate copy of the background for daytime, which would not have the heavier shadow or yellow haze.

Tip: Be sure your flashlight spot and flashlight mask images are 3 or 4 times larger than the background image. This is so the background stays covered in black as the mouse cursor is moved to the edge of the screen.


Flashlight spot

Flashlight mask

KeyGuard Flashlight spot (final result)

Code is very simple:
Add the flashlight.jpg and flashlight_mask.jpg files to the External folder of your project and then add the following code to the Advanced tab of the Frame properties.
NOTE: I created a blank.ico file to hide the default cursor. You didn't have to do this in older versions of AdventureMaker, but now you need to if you don't want to see the default cursor.

Code: Select all
RotationAngle = 0
Component("KeyGuard").Object.ProhibitRotation = 1
RenderBitMapCursor "flashlight.jpg","flashlight_mask.jpg"
Component("KeyGuard").Object.ActionPointX = 200
Component("KeyGuard").Object.ActionPointY = 175
Action.ChangeDefaultCursor "blank.ico"

To stop displaying the flashlight spot, use the following command:
Code: Select all

NOTE: if you want to continue the same flashlight rendering on subsequent frames, just add the following line of code to the other frames:
Code: Select all

This is just the bitmapcursor. You can also create animated bitmap cursors. A flaming torch for example.
I'll add more to this thread as I have time to experiment. I hope this gets people to try out bitmap cursors! :wink:

Re: KeyGuard: Flashlight/Spotlight effect

PostPosted: Fri May 10, 2013 8:31 am
by Vengeance66
Yay! :D

Re: KeyGuard: Flashlight/Spotlight effect

PostPosted: Sat May 11, 2013 10:20 am
by Gumbro
I'm not sure I got it. Are you swithing from a transparent gif/png overlaid on top, to a non-transparent one?

I like the hands :D

Re: KeyGuard: Flashlight/Spotlight effect

PostPosted: Sun May 12, 2013 7:42 pm
by reneuend
Actually, the images are ALL jpg. The KeyGuard documentation has a good explanation on how to set this up with image cursors.
when I get the tutorial done, it will explain how "I" built the spotlight effect. For now, I would suggest looking at the KeyGuard documentation on image cursors.

Re: KeyGuard: Flashlight/Spotlight effect

PostPosted: Sun May 12, 2013 9:40 pm
by Vengeance66
This is really nice! Really great implementation of KeyGuard.

I'm not that kind of programing guy, but with step by step tutorial or something easier; it will be better. :-)

Nice Reneuend! :D

Re: KeyGuard: Flashlight/Spotlight effect

PostPosted: Sat May 18, 2013 2:49 am
by reneuend
Hey V66!

I will do my best to make it as easy as possible. and if anyone has trouble getting it to work, I'll definitely help out.
I'll try to get the tutorial done in the next couple weeks or at least start simple, as I'm sure you and maybe others are looking to use something like this. I just hope it works effectively. After people get a chance to use it, maybe they can come up with a better mask to get a better light effect.