|
|
In this tutorial you will learn…
• How to make a semi-transparent lantern image
• How to make your lantern 'flicker'
Hello, and welcome to my second miscellaneous tutorial! In this tutorial I am going to be showing you how to make a flickering lantern effect using pictures and
parallel events. Just a note: for this tutorial to work completely, you will need to have a quick look at my Expanding
Maps Mini Tutorial to make this system look its best.
Note: This system works by making use of pictures for a darkness effect. If you're working with my Weather Effects
system, then this won't work. To make a Day and Night system, you'll need to use a Picture-Based Day and Night System, something which I will write a Mini Tutorial
on soon. Sorry if that causes for problems for anyone!
Right, let's get going! For this tutorial, you will need:
ê Two common events
ê A switch
ê An item in the database
ê Two field-of-vision images made with a feather (we'll make these in Paint Shop Pro)
Okay, firstly, you need to create an item that will be our lantern. So, go into the database and click on the items tab. If you need to, create a new entry using
the change maximum button at the bottom of the list. You'll get a blank item pane. Okay, we're going to make a lantern item, so name your new item appropriately
and give it a nice icon. You can set the cost and occasion options if you like (I've set mine's occasion to being Only from the Menu) - but make sure that you
set the consumable option to no; we don't want to be able to eat our lantern!
This will be nice and easy for you guys now. This is what my item pane looks like, in case you want something to compare with:
Okay, now we've done that, we make the images that we're going to use for this effect. I'm going to go through the process in Paint Shop Pro 8, but for all you
Photoshop whizzes out there, it's not really a difficult process and you'll probably be able to work out what I'm doing.
So, open up your graphic editing program of choice - for me, good ol' PSP 8. Make a new image, and set the dimensions to 640 pixels wide by 480 pixels high. The
observant amongst you will have noticed that these dimensions are the exact size of RMXP's game window - we want our picture to take up the whole screen. Okay,
now you've created your new image, go to the layers palette and right-click on your background layer. You'll get a menu that will look something similar to this
one:
And, as the image shows, you'll need to click on the option that says Promote Background Layer, or something to similar effect. Now you've done that, select
everything in your image using Ctrl + A, and then press delete. Your image should now be a 640 × 480 rectangle of transparency, like this:
Okay. Now we need to make a new raster layer on top of the one we've got. You can do this by selecting New Raster Layer from the Layers menu, or you can right-click
in the layers palette and select the same thing. Once you've done that, select Fill Bucket from the toolbar, and make the foreground colour pure black (#00000),
and then fill in your topmost raster layer.
Following? I know it just looks like we've got a huge black rectangle at the moment, but we're getting there! Okay, now select the Select tool from the toolbar,
and make sure that the shape is set to Ellipse, like so:
Right. Now, this is the slightly tricky bit. You want to place your cursor in the exact centre of your image. Fortunately for us, Paint Shop Pro has a neat
little coordinate box down in the bottom right-hand corner of the screen, which makes this a whole lot easier. The mathematicians amongst you will already have
worked out that we need to place our cursor at exactly (320, 240) on our image - because this is half the width and half the height, which makes that position
the exact centre of the image. So, using the coordinate box, place your cursor at the middle of your rectangle. Your coordinate box will look like this when you're
there:
Alright? Now, click down in the centre of your image, and drag out a nice ellipse that looks like the pool of light that a lantern might illuminate - but make it
smaller than you think it should be, like so (the reason for this will become clear later!)…
Okay, now we're going to do something a little complicated - go to the Selection menu, and go down to where it says Load/Save Selection. Under this sub-menu, you'll
see an option that says Save To Alpha Channel, like this…
When you click this, you'll get a window that looks like this…
Give the selection a name if you like, and then click Save. When you've done this, go back to your image. Under the Selection menu, go to modify, and then click
on Feather. This will bring up another dialogue box that looks like this…
You can enter any value you like in here, but I usually find that over 70 is about right. In this example, I'm going to use 100 as my value. Once you've entered
this, click OK, and then you will see your selection grow and probably become a bit of a weird shape. Now all you need to do is press the Del key, and you have
an instant lantern light! It should look something similar to this…
And that's your first image! Now we need to create the flicker. This is much the same process: firstly, create a new raster layer in your image, and fill it
completely with black like we did for the previous layer. Then, go to the Selections menu, and under the Load/Save selections sub-menu, click on Load Selection
From Alpha Channel. The selection we saved a moment ago should be there. Load it into the image, and then go to the Selections menu, and choose Modify. Now, this
bit is quite important. Under the Modify sub-menu, select Expand. In the pixels box, put in 1, and click OK. As it suggests, this will make your selection bigger
by 1 pixel. Okay, now we can do the feathering again - make sure that you use the same value as last time! - and then press delete to make a 'flickered' lantern.
Now, press Ctrl + A and select everything on the last layer that we made. Press Ctrl + X, which will cut the layer. Now go to the Edit menu, and then under the
Paste sub-menu, select Paste As New Image. This will put our 'flickered' layer in an image of its own. Now, back on your previous image, delete your top layer
(the one we've just cut; don't delete the other one!) and your promoted background layer, that too has nothing on it (you can do this by right-clicking on the
layer in the layers palette and clicking delete, just in case you're not sure where to look).
Okay, you should be left with two images of a lantern light, differing in size by one pixel. Now, just before we save our images, we need to delete the alpha
channel in our first one - so, go back to your first image, and under the Image menu, select Delete Alpha Channel. You'll get a dialogue box asking which one
you want to delete, but there's only one, so delete that one, and click Yes at the prompt. Okay? Right, now we're ready to save these images!
In Photoshop, I think it saves .png images with automatic 32-bit alpha transparency (just make sure that the filetype is set to .png!), but in PSP I like to
export them properly just to be on the safe side. Go to the file menu and find the Export sub-menu, and then click on PNG Optimizer, like so…
Once you've done that, you'll get a dialogue box with a preview of your image. On the second tab (Transparency), make sure that the option Alpha Transparency is
selected, like so:
And then click OK. Save your image. Do exactly the same with your other image, but save it under a different name. Okay? Right, now we can do the eventing!
Go back to RMXP and open up the Materialbase by pressing F11 or selecting it from the toolbar. Click on the pictures tab, and then navigate to where you have
saved your two lantern images. Import them both. Don't worry if no preview comes up; with alpha-transparent images, it often doesn't.
Right, now, head into the database, and go to the Common Events tab. Make two new common events, and call the first something like Lantern Trigger, and the second
something like Lantern Flicker. Okay, in the first event we're going to put in a Conditional Branch, checking if a switch called Lantern is ON (I've just made
this switch now). Make sure that the check box at the bottom is checked. Then press OK. Right, what we're doing here is checking whether the lantern is already
in use or not. If it is (I.e. if the switch is ON) then we can input some text saying 'Would you like to put the lantern away?', and then some choices saying
Yes or No. However, if the switch is OFF, then the lantern isn't in use and we can input some text saying 'Would you like to use the lantern?', and, again, some
Yes / No choices. Your event page should be looking like this…
At the moment, just input the choices for putting the lantern away; we'll do the rest in a moment. However, under the Yes branch of the switch OFF branch (I.e.
if we select Yes to being asked if we want to use the lantern or not), insert a Show Picture command, with the number set to 1 and the picture set to being the
first of your lantern pictures. Also, set the opacity to about 230 (this is a matter of personal preference, really; I just like it slightly transparent so that
it doesn't look like solid night, but it's up to you). Your picture box will look like this…
Okay, after that, add in a Control Switches command, turning your Lantern switch ON. Then go to your second common event, and set the trigger to being parallel,
and the condition to being that the Lantern switch. Okay, in this event, we're going to put in the commands for the actual flickering of the lantern. So, in this
event pane, first of all, insert a Loop. This will, naturally, make our flickering lantern repeat itself. Inside the Loop, enter a Wait command for about 5 frames
(this value is up to you; we're going to be using different ones to add some variety in a moment). Then insert an Erase Picture command, erasing picture number 1
(our first lantern picture). After that, insert another Show Picture command, with the number still set to one, but this time, set the picture to being your
other lantern picture - remember to make sure that the opacity setting is the same!
These three commands can be copied and pasted about eight times (it must be an even number) and the Wait values varied to add some realism to your system.
However, make sure that every other picture is changed to your other lantern picture! This is why you need an even number; because the system is going to be looping,
make sure that the last picture is the opposite to the first one. My event page looks like this…
Take note of how the pictures change alternately and the Wait values differ. Got it? Now all we have to do is add a couple of commands to the other common event. Go
back to your first common event, and under the Yes branch of the switch being ON (I.e. we have said that we want to put the lantern away), insert an Erase Picture
command for picture 1, and underneath that, add in a Control Switches command, turning your Lantern switch OFF. This will erase the lantern picture and make sure
that we can turn the Lantern on again if we use it. Of course, if you're using pictures for a day and night system, you'll have to do some modifications here
with other pictures, but it shouldn't be too hard to work out. Okay, your first common event should be looking something like this…
Right, one last thing to do! Go back to your Lantern item in the database, and you see where it says Common Event? Under that drop-down menu, select your Lantern
Trigger common event. Now, test out your system. You'll have to make a placeholder event to get the lantern in your inventory - but apart from that, everything
should work out just as we planned. Is it? If not, check your picture numbers - they can often screw things up.
Well, that's how to make a flickering lantern! I hope you've found this tutorial helpful. I'll see you in the next one!
:: << Previous Tutorial ::
:: Home ::
:: Next Tutorial >> ::
|
|
