Greg Pugh, author of several storybooks and tutorials, shows us how to create a rag doll game using Kwik 2. Greg’s passion for Kwik and his ability to teach from his tutorials have helped several Kwik users. So, if like me, you are happy with this addition, show some love in the comments below!

We have gotten numerous requests from users asking if Kwik 2 can be used to create rag doll-style games and applications. Today I’ll show you how to create a basic rag doll without writing any code!

Artwork

I’ve already created a .psd file of artwork for you, which contains a rag doll that is set up on different layers. You can download the file here. Unzip the folder and drag the .psd file to your desktop or other desired location.

Setting Up the App

Some people just configure the Settings once and set a default project folder for ALL projects (I know Alex does it), this way, when they create a new project or open a previously one, Kwik will show all projects inside the default project folder. It is a matter of preference. I prefer to work with a project at time so, follow the instructions below if you plan to do the same.

In Photoshop, be sure you have the Kwik 2 window open and click the Settings button.

Next, choose your project folder, which in this case you’ll create a new folder on your desktop called Ragdoll.

Be sure that your Export Settings allow image exporting.

Now double-click to open the page1.psd file on your desktop, which will open it in Photoshop.

In the Kwik 2 window, start a New Project and name it Rag Doll for iPad with Landscape Orientation and check Use page1.psd.

In Photoshop, be sure that the Info window is displayed. If it’s not, navigate to Window > Info.

Adding Physics

Now that you have everything set up and ready to go, it’s time to get into the fun part of actually making the rag doll. First, we’ll set up the physics environment. In the Kwik 2 window, click the Physics button then the Environment Properties button. Set up the environment with the following settings:

You’ll notice we set the mode to Hybrid. We’ll change it to Normal at the end, I just want you to see how the physics bodies are being added to the rag doll.

In order for the physics to have any affect on your doll, you’re going to need to apply physics to each body part. Just for fun we’ll make the head, body and limbs weigh different amounts, much like a real person. First, let’s apply the physics to our doll’s head.

In the Layers window, select the head layer. In the Kwik 2 window, go to Physics > Set body properties and set the following properties:

Now select the body layer and apply the following in the Set body properties:

To save some time, since each arm will weigh the same as the other, you can select the arm1 layer, hold down shift and select the arm2 layer as well.

Then apply the following properties in Physics > Set body properties:

This applies the same properties to both arm layers. You can also do the same for the legs by selecting both layers with the shift key.

And then by applying the following body properties:

Dragging Your Doll

Now that you’ve got gravity acting upon your rag doll, you’ll need to add some user interaction. In this example, the interaction will be dragging the doll around the screen by any of its limbs.

In your Layers window, select the head layer and then in the Kwik 2 window, click Interactions > Drag Object. Name your drag action dragHead and click Create.

Now do the same for the rest of the doll’s body parts (i.e. arm1, arm2, leg1, leg2, body) while naming the drag actions as seen below.

Click the Publish button and then open the main.lua file in the Corona SDK Simulator when it starts.

Wait a second…the doll just falls apart! Somebody needs to stitch it together before we can play with it. However, you’ll notice that you can drag the doll parts around the screen and see the physics shapes applied to them. If you wanted to have the physics shapes be more precise to the doll limbs, you could use a software package such as Physics Editor, but for this simple example we’ll use the circle and rectangle options built into Kwik 2.

Putting the Pieces Together

Now here is the trickier part of the tutorial, adding joints to the rag doll. This is why you have your Info window open. Using your Move Tool, move your mouse cursor to where the rag doll’s head touches the body. In your Info window you should see X and Y coordinates similar to the ones below:

It’s those coordinates that we’ll be using for our head joint. Select the head layer, then in the Kwik window, go to Physics > Set joint properties. Choose connect to body, pivot point and use the same X and Y coordinates that you saw in your Info window. In this case we’ll use 468 and 214.

Now select the arm1 layer and apply the following joint properties:

For the arm2 layer use the following coordinates:

For the leg1 layer:

And finally the leg2 layer:

Publish your file and your Corona SDK Simulator should show something like this:

The blue lines you see in your rag doll are the joints we just added.

Now if you’d like, you can go back into Physics > Environment properties and change it from Hybrid to Normal.

Now your completed file should look like this:

Where to Go from Here

This was just a simple drag and drop rag doll tutorial. As I said earlier, you can use Physics Editor to use more precise shapes if your project calls for something more complex than circles and rectangles. You can also try to make an app similar to the hurting your boss games where you can “punch” the rag doll. Experiment with all of the features Kwik 2 has to offer and you’ll be able to make this example much more elaborate.