IGM Tutorial: Camera with a Course

in Tutorials

Want to check out a PDF of this tutorial? Right click save as HERE.

Using what we’ve learned so far I’ve started up a very simple, easy to re-create Shooting Game. We’ll use this shooting game to create a Camera gadget on a Canvas and give the camera a course to follow. You can either start from this GPD or you can try to recreate this on your own using the following four resources (be sure to grab the small invisible one, it’s the very first one below).

If you want to start from the GPD you can skip this next bit. Still, I highly recommend giving this a shot as practicing and working on your projects in every aspect is the best way to learn.

All I’ve done so far is create a ship that explodes when it hits a wall or its health drops to zero. I’ve set up a menu that displays an item set to read the “Player Health” memory which I’ve set to 3. I’ve created tiles for the ship to fly over. The grass tiles are walls so you have something to crash into.

Set your first canvas to have around 4 horizontal screens for now and don’t forget to assign your HUD to the canvas. There isn’t really a need to set up collision detection for the explosion, but here is how I’ve set up the collision detection for the ship:

Collision Detection with Other Gadgets
Horizontal Positioning % (top left box) = 3
Horizontal Size % (top right box) = 94
Vertical Positioning % (bottom left box) = 31
Vertical Size % (bottom right box) = 38

Collision Detection with Walls (Tiles)
Horizontal Position % = 0
Horizontal Size % = 100
Vertical POsitioning % = 28
Vertical Size % = 44

For the ship I used three frames of animation, 20 frames per second, with infinite looping. For the explosion I went with 30 frames per second, no looping. It isn’t really necessary in this game to use the “Set The Origin At The Character’s Feet” checkbox.

After my ship explodes I have it go to an invisible state for one second and then come back right where it left off. This is a temporary measure until we cover adding extra lives and how that whole thing works. Instead of using Layer 3 as the layer for gadget interactions I went with Layer 2.

This will allow me to put more things behind the ship as it flies (and because you can adjust each layer’s individual speed in the “Per Canvas Settings” sub-sub-tab you can have some really nifty depth effects going on).

My Layer 2′s speed is set at 150. Going with Layer 2 also leaves you an extra layer in front of the ship incase you want it to fly behind something. My “Basic Tile Size” under the “Per Plug-in Settings” sub-tab is set at 64×64.

So when you try out the game you’re going to notice that your ship moves really awkwardly as it passes through the screens on our canvas. We’re going to fix that by setting up a camera on a course that goes from one end of the map to the other.

It is important to note that when you use a camera and a course like this your Player Gadget WILL shake (this does not happen when exporting to SWF but other glitches can occur like tiles and gadgets disappearing). This is especially noticeable if your course travels in anything other than a straight line. I am not sure how to resolve this issue, but this technique still has valid uses with other gadgets and other features in IG Maker.

Courses are especially important for most enemy gadgets and a number of other things like moving platforms or various flying gadgets. The Camera gadget is a powerful tool for directing how you want your game to be presented.

With that out of the way head to your Canvas and the “Gadgets” sub-sub-tab. We’re going to set up a course first so select the Course gadget and put it in the middle of the first screen on the canvas. The positioning on mine was 320×192. Turn off the option for “Infinite Looping” to keep this from starting over when you get to the end. With 4 horizontal screens I set the Offset for Points002 to 1918×0.

This keeps it traveling in a straight line all the way over to the middle of the last screen. I also changed the “Time To Next Point” for Points001 to 15 seconds. This will give you a nice smooth transition across the map.

Now select the Camera gadget and throw it anywhere on the map. It’ll get moved automatically in a second. Pull up the “Cameras” tab in the “Parts Placed On The Layout” section. Set the “Display Layer” to the same layer your player gadget is on. Set the Course to the one we just created, and the Starting Point to the first point on that course. At the bottom of this window is the “Effective Range (Full-Screen Rectangle Section)”. This needs to be set to cover all of the squares that the camera is going to pass through.

So set the first to options to 0 and 4, and the second two to 0 and 1. This is equivalent to setting up a four-screen-long, one-screen-tall camera range. After this is done take a look at where your camera is on the canvas. It will probably be a bit too high up, so you’ll need to make an adjustment to your course to get it right where you want it.

The positioning on your course is the easiest thing to change to get this in the right spot. I changed mine from 320×192 to 320×240. This places the Camera perfectly on the screen which is not necessarily important for a canvas with only 1 verticle line of screens, but if you get into more advanced camera courses it is definitely an important thing to keep in mind.

There is only one more thing we need to change. Head to the “Gadgets” sub-tab, select the Player gadget, and then go to the “Emergence Settings” sub-sub-tab. Over on the right side you’ll see “Movement Range (Shooting Game)”. This allows you to designate the maximum range of movement based on the camera for your gadgets. I suggest going with the following:

Designate Movement Range In The Screen
Horizontal Positioning % (top left box) = 5
Vertical Positioning % (top right box) = 0
Horizontal Size % (bottom left box) = 80
Vertical Size % (bottom right box) = 80

Now give it a shot. Within around fifteen seconds your ship will fly from one end of your canvas to the other while the camera directs you along properly. You can try out the finished executable in this zip file or download the finished GPD.

Ready to start your own game in IGM? Purchase IGM at a 10% discount using the coupon code igmakerohyeah. Any questions, comments? Ask them in the comment section below.

1 comment… add one

  • Vokram May 16, 2012, 8:30 pm

    THANKS !!!!!

Leave a Comment