☰
Navigation :

Rag Doll

Rag doll

Greg Pugh, author of several storybooks and tutorials, shows us how to create a rag doll game using Kwik. Greg’s passion for Kwik and his ability to teach from his tutorials have helped several Kwik users.

We have gotten numerous requests from users asking if Kwik 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!

https://youtu.be/WxjSnfY0CTU

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.

https://www.kwiksher.com/tutorials/Kwik4/Ragdoll.zip

.psd is 768 x 1024. You can create a new project with iPad Mini

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 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 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 together, then click Set body properties.

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 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.

Publish

Click the Publish button and then open the main.lua file in the 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.

Putting the Pieces Together - Joints

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 again

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. 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 has to offer and you’ll be able to make this example much more elaborate.

Enjoy!