Hotspots,_Handles,_and_Navigation

• Hotspots, Handles, and Navigation
  • Hotspots For Slideshow or Point and Click Game Environment.
  • Hotspots For Cubic Environment
  • Using Handles for Hotspots

Hotspots, Handles, and Navigation

Okay I'm going to go ahead and jump right in here and make this tutorial on Hotspots, Handles and Navigation in general.

First let me explain what "Hotspots" are. You've more than likely played a game where if you move your mouse cursor over a certain area, you'll see it change, meaning that you can interact with something. In Myst and Riven we had the famous Floating Hand cursor. If you moved it over a place where you could move to, we'd see the cursor change to a hand with a pointing finger. The reason it did, was because there is a "Hotspot" there.

Before we continue however, we need to determine what type of game environment you have going. Is it a "Slide Show" type of game, like Myst and Riven were? Slide Show is where your game view stays stationary all the time, except when you navigate to move, or you triggered something like a cut-scene movie to happen. Or, is your game environment going to be a Panoramic Cube? Panoramic Cube environment is like Myst III: Exile was: moving the mouse around while holding the left click button down will pan the screen 360 degrees, spherical movement. You can look straight up, straight down, all over!

Pipmak can do both types, but depending on which your using will determine how you make your Hotspots.

---

Hotspots For Slideshow or Point and Click Game Environment.

It's important to keep in mind the size of your images in your node. If they are 768 x 768, or 1024 x 1024, or whatever, you need to remember that.

First open up your paint program that can handle layers. I like to use GIMP 2.6.

Next, you need to open up a 256 color palette. You can use this one here:

Make sure if you use it, you keep it as a .gif.

Now you can use this image and set your Color Palette to it. This is important.

Now open up your image that you've rendered that you need hotspots on. Here's mine:

Now add a new transparent layer to your image (don't worry, we're just using your image as a map so we know where to put the hotspot at). Then make sure you've selected that new layer. It is what we are going to paint on.

But first, we need to figure out what color to use. Remember that 256 color palette? It's actually a list to tell you which color to use. If you look at it, and start in the upper left hand corner, you see that it's the color white. White = 0. Then going from left to right, you have a red color. Red = 1. If you were to take it apart and put numbers on each color, the order would be like this:

The reason this is important is: Pipmak will look at the color you're going to paint and it knows what order that is on the color palette. So if I use purple, it's going to say: "That is Hotspot #3". This is not good if you don't have any other hotspots! Your cursor will never change. So you use the color palette's order of colors to indicate which hotspot you need. Since this is our first hotspot, we're going to use Red, which is the Top Row, 2nd from the left (or the red square right next to the White one. White is 0 by the way).

So now you can either use your eyedropper to get that color, or you can use your color palette (see why we made it our color palette now?).

Now make SURE you've selected the transparent layer on your image:

Then use your paint brush and paint where you want the hotspot to be. In my case, I want it over the broken part of the birdbath here:

Okay, now that I've got my nice red spot where I want it, I can now delete the layer that is our image (in other words, get rid of your rendered image as a layer, but keep the new layer with the red spot on it):

Okay, now you need to save that image. Use a unique name (hotspot.png) will work, heh. Use .png format, and make sure it's 256 color when you save it. Also, save it to your node folder that you're make the hotspots for (in this case, it's node 1).

Now we're ready to do some Lua editing. Open up your editor that you can edit Lua files with, and load up the node.lua file from your node:

As you can see in my node.lua, I've got 2 lines here. One that says "hotspotmap" and another that says "hotspot".

The first one, "hotspotmap" tells Pipmak which image is your hotspot image you made. Put the name of the file here.

The 2nd line, "hotspot", is telling Pipmak what to do. "target = 2" is saying when the player clicks on this hotspot, go to node 2. The "cursor = pipmak.hand_forward" is telling pipmak to change the cursor to the finger pointing forward when the player moves their mouse cursor over the hot spot.

Make sure you save the file.

That's pretty much it! If you load up your project, you should see your cursor change when you move your mouse over the area you made, and if you click, you should move the that node. You can also make your hotspots visible by hitting the "C" key.

---

Hotspots For Cubic Environment

Okay, for the Cubic Environment, things are going to be a bit different. You will still make your hotspot image as above, but with one slight difference: You can't use the cubic images you rendered in your 3D program. Instead, we need a panoramic image of the node.

Okay, we're going to use Pipmak to help us make our panoramic image.

So instead of opening up GIMP or your paint program right away, first open up your Lua editor, and open up the node.lua file in your node.

When you do, I want you to add this script to it:

Then save the file.

Now open up Pipmak and your project. Once you are in the node, Pipmak will make a .bmp image file and save it to it's root directory. So now exit Pipmake and go to it's folder. You should have a image file called "equirect.bmp"

That image file is a panoramic image of your node!

Now you can perform the steps in the above section for creating a hotspot image file. Just make sure you use your panoramic image file as your map of where the hot spot needs to be.

Once you have done that and saved the hotspot image file, you can open up your Lua editor and remove the lines of script I had you put in. Now put in the same scripting in the instructions above:

Save the file. Now you can load Pipmak, open your project and your hotspot should work, and you should go from your first node to your next!

---

Using Handles for Hotspots

Using Handles, you can make a hotspot for you node without having to create a hotspot image file. Instead, you open up your node.lua file in your Lua editor. Then you add this to the scripting:

    handle {
      az = 90,
      el = 45,
      w  = 90,
      h  = 90,
      onmouseup = function(self)
        pipmak.dissolve(2)
        pipmak.gotonode(2)
      end,
      cursor = pipmak.hand_forward
      }

Where "pipmak.gotonode(2)" is the node I want to go to which is 2 this this example. "az" is Azimuth (think Left and Right) in degrees. "el" is elevation (up and down) in degrees. "w" and "h" are Width and Height.

What we are doing here is making a rectangle that's invisible to the player and will be a hotspot.

Keep in mind that when you do it this way, you need to REALLY test your node, and see where the mouse cursor changes. You don't want the cursor to change far from where you want the player to go (IE You have a room with 2 doors. If the player move's his cursor over the door to the right, and see's the cursor change, they will think that's the door they are going through. If you have your "az" set to wide, and your "w" set to wide, the cursor will change over that door, even if you're taking the player to the left door instead.).

---

Return To: [Main_Page]