A case study - Controlling Joints

From Color Infection Wiki

This is wonderful tutorial originally posted by MCC at Color Infection forum: http://forum.colorinfection.com/comments.php?DiscussionID=5163&page=1. But unfortunately, the free image hosting service PhotoBucket now removed the screenshots.

(url)

(url)

(url) Controlling joints with the keyboard There are plenty of flash games around the web based on physics where you can control a car or machine bike using the keyboard... Some examples are the famous Incredibots game, bike trial games and many others. Luckily for us, controlling joints with the keyboard is also possible in Color Infection, and with a little of creativity you can turn this idea into some fabulous games...

(url) Starting up! Here's a basic scene I created so you have something to start with. Load it in the editor and we're ready to start! (Tank 1)

We're going to make the tank move as we press the arrow keys. Up and down for the cannon, left and right for the wheels.

The first joint we're going to allow the player to control is the hinge joint on the cannon. Now this is important: I want you to select this joint and point out some information that will appear in the bar below:

(url)

This number is the hinge joint's ID number. Every entity (shapes, joints, event handlers, etc) have their own ID number. You don't need to understand the difference between the "Hinge Anchor" and the "Hinge Joint" for the moment...

Alright. Now we have to think what event handler are you going to need for this... And, as we want to make the tank move when pressing keys, we're going to use the Keyboard event handler ( (url) ), which can be found, of course, in the trigger components bar. Place it anywhere on your screen, near the tank. Proceed to enter into the event handler's setting dialog. Once you're there, and before you add any code, first you need to tell the event handler which keys needs to be pressed to trigger it. Find the "Basic" tab above, next to the "Code Snippet" one. Every event handler has it's own particular settings, besides the code snippet. For every Keyboard event handler, you'll see something like this in the Basic tab:

(url)

Here's what each of these things means:

1: Key event type There are three different options here: (url) Key Down: Triggers the code snippet when one of the selected keys is pressed. (url) Key Up: Triggers the code snippet when one of the selected keys is released (url) Key Hold: Triggers the code snippet at every frame while at least one of the selected keys is held.

2: Keys selection Here you can select the key or keys you want to trigger the event handler. You can click on a key to select it, and click a selected key to deselect it.

3: "Any Above Keys" checkmark Having this checkbox enabled has the same effect than selecting every available key in the keyboard drawing. While checked, every key will trigger the event handler, so it doesn't matter which keys are selected.

4: "Left Mouse Button" checkmark If you check this, the left mouse button works as if it was a key, and will trigger the event handler as well. There are, however, other event handlers you can use for the mouse pointer.

Ok. Select the up arrow key in the keyboard event handler. It will turn blue. Leave the other options as they are: "Key Down" selected, and the two checkboxes not checked. Go back to the code snippet tab. Add the following command to the command box:

Entity > Joint > Set Hinge Motor Speed by Degrees

Set the command's parameters as it follows:

(url)

Here's where we have used the "17" we saw earlier... Every time you need to refer to a known entity in an event handler, you must find it's ID number first. As we've seen, you can find the ID number of an entity by selecting it and checking it's number in the bar below.

That should be enough. The up arrow key now sets the joint's motor to -60 degrees per second (as it is negative, the joint will spin counter clockwise).

And, by the way... You should check the joint's settings dialog (the settings of the joint that connect the cannon to the tank). As you will see, the motor is enabled, only that it's speed is set to 0. This is very important, because setting the hinge's motor speed will have no effect if the motor is not enabled.

(url)

Also, I have enabled the limits of the joint so the cannon's move is limited.

Ok, back at the building area, I want you to clone the keyboard event handler once, either by using the clone button or pressing the C key. You should have two keyboard event handlers in your screen now. Go to the settings dialog of the cloned event handler. In the "Basic" tab, unselect the up key and select the down key instead. Let the other options as they are. Then, in the "Code Snippet" tab, change the "-60" number for "60" in the Set Hinge Motor Speed by Degrees parameters. That's it! Now the up key moves the cannon counter clockwise, and the down key makes it move clockwise. If you did everything right, you should be able to move the cannon with the keyboard already... But there's a problem. The cannon doesn't stop when you release the keys!

So what we're going to do is to clone one any of the two event handlers we have created, and enter it's setting dialog. You should have three event handlers in your screen. Go to the new event handler's settings. We need the motor of the hinge to stop when either the up or down arrow keys are released, so, in the "Basic" tab, we'll select both keys: (url) Also, this time we'll choose "Key Up" from the options we have... In the "Code Snippet" tab you should have the Set Hinge Motor Speed By Degrees, set either to -60 or 60 degrees/s. Change the "Motor Speed (degrees/s)" parameter to 0. This will make the hinge motor stop when either the up or down keys are released. And we already have a full - function tank cannon that can be moved using the keyboard. Load this level into another editor window and compare it with yours: (Tank 2)

(url) Moving the tank Ok... very nice, but... The wheels of the tank still doesn't move. The procedure we have to follow to allow the player to move the tank is basically the same.

Clone any of the two onKeyDown ( (url) ) event handlers you have. Make sure to put it away from the ones we had initially to avoid confusion; this one will not work for the cannon, but for the wheels. As we need to control all the four joints of the tank wheels, you'll have to point down the ID number of each one. If you did only what I've told you, these numbers should be 1, 4, 7 and 10. If they're not, make sure to point down whatever numbers you get.

Now open the wheel's event handler's setting dialog. Deselect whatever key is selected and select the left arrow key. Leave all the other options as they are. Go back to the code snippet tab. As we need to set the motor speed of 4 joints, we've got to use 4 commands...

Here's an useful tip so you don't have to add each command separately: As the "Set Hinge Motor Speed By Degrees" command is selected (it should be selected, as it's the only command in the command box), right click the command and select "Copy Selected Calling(s)". Then, right click the command box again and select "Insert Callings After The Selected". This will create a copy of the command we had initially.

(url)

Insert the same command (we don't need to copy it again) two times more (so we have the 4 "Set Hinge Motor Speed By Degrees" commands, one for each hinge). Now set the "The Hinge" parameter of each command by using the ID numbers of the wheel's hinges we had previously pointed down. The speed should be something around -120 degrees/s, maybe more, maybe less... Just make sure that it's a negative number, so the tank goes to the left. Your command box should look like this:

(url)

That's it for this event handler. Now you'll have to make a copy out of it, only that for this one, instead of having the motor speed set to a negative number, we'll set it to a positive number (make sure to put the same number in every command. Then, in the Basic tab, deselect the left arrow key and select the right one. And, just like we did for the cannon, clone any of the two event handlers of the wheels and set it to "Key Up", select both keys (the right and the left arrow keys), and set the "Motor Speed (degrees/s)" parameter to 0. If you did everything right, you should have something like this. Load it in another editor window and compare it with yours. Oh, and don't forget to attach a camera to your tank! ;) (Tank Final)

   MCC (Moderator)
   Jul 8th 2010 edited

(url) Controlling slider joints As you may have realized, every time we want to control a joint or group of joints we need exactly 3 keyboard event handlers: one that makes the joint spin clockwise and works when a key "A" is pressed, another one that makes the joint spin counter clockwise that works when a key "B" is pressed, and a last one that that sets the joint's motor speed to 0 and works either when the "A" or "B" keys are released.

For slider joints, the method is exactly the same. Load this in the editor and check out how it works: (Mixer)

For each slider joint, there are exactly three keyboard event handlers: Two onKeyDown (one for each key) and an onKeyUp one (for both keys). The only difference is, that instead of using a "Set Hinge Motor Speed By Degrees command", I've used a "Set Slider Motor Speed By Degrees" one. The slider number has been obtained from the lower information bar, shown when the slider joints are selected. Again, do not use the "Slider Anchor" number... the one you need is the "Slider Joint" one. And, what about the direction changing event handler? Well, as you have seen, the space bar is selected in the "Basic" tab of this event handler, and the "Key Down" option is chosen. The code in the "Code Snippet" tab looks as it follows:

(url)

The explanation for this is fairly simple:

Line 1: Here we're getting the current speed of the hinge, and saving it in the Register Number [0]. Line 2: Now we're finding the negative value of the Register Number [0] and saving the result, again, in the same number register. As we do not need the old value for anything, we can overwrite it with the new one. Overwritting values can prove very useful when working on complex levels, where you need to save as much space as you can. Line 3: Here we're using the result we obtained (which is the negative value of the speed we had initially) to set the hinge's motor speed.

In other words, if we had a speed of 240 degrees/s, now we have a speed of -240, and vice versa. And, please notice that all of the joints have their motor enabled intially, and set to 0.

And well, that's pretty much it for this tutorial. The best thing you can do now is to practice on your own... If you have any questions about this tutorial, feel free to post them in this thread... Also, it would be very nice to see levels of your own that are made with this tutorial or are related to it, so people can find plenty of examples to look at in this thread. Have fun! ;)

(url)

There are no other tutorials at the moment. I deleted accidentally my very first tutorial, so...