About

BASIC

Go Native!

Platforms

Videos

Documentation

Gallery

FAQ

Tutorials

FREE Trial

ORDER

AGK Bitesize
Lesson Three - Let's get Physical
by Steven Holding
Introduction

Table of Contents

Introduction to input One of the problems with trying to make a game adaptable for multiple platforms is the method of control. AGK helps out with a set of commands for creating "Virtual Joysticks" and "Virtual Buttons" that can be used to bridge the gap and make games work equally well on touch-screen devices and desktops.

Lesson One The AGK World Lesson Tw o An introduction to AGK Physics Lesson Three Let's get Physical

This month we will create a virtual joystick and a button to control a character. We will create our character in a physics based world in order to expand our knowledge of using physics sprites and create a simple platform game engine. Let's start with a brand new project and add a virtual joystick using the following command before our loop.

A d d V i r t u a l J o y s t i c k ( 1 , 1 0 , 8 8 , 1 2 )

This will add a virtual joystick with an ID of 1 at 10% across the screen and 88% down (the bottom left corner of the screen) with a diameter of 12% of the width of the screen as shown below.

To get an idea of the kind of output we get from the joystick add these lines within the loop and run the project.

P r i n t ( " J o y s t i c kX : "+s t r ( G e t V i r t u a l J o y s t i c k X ( 1 ) ) ) P r i n t ( " J o y s t i c kY : "+s t r ( G e t V i r t u a l J o y s t i c k Y ( 1 ) ) )

When you run the project try dragging the joystick with the mouse. As you will see we get a value between -1.0 and 1.0 for X and Y which directly relates to the position of the joystick from its centre. We can change the images used and visibility of the joystick to suit our game and even set up a "dead zone" for the joystick to give us a minimum returned value. This means small movements are not picked up by the joystick allowing us to concentrate on only the more deliberate moves made by the player (if we wish). For now let's add a character for us to move with the joystick. We will use a simple box shaped character for

the time being and turn it into a dynamic physics object, this will simplify movement and dealing with collisions as you will see.

s p r=c r e a t e S p r i t e ( 0 ) s e t S p r i t e S i z e ( s p r , 4 , 8 ) s e t S p r i t e O f f s e t ( s p r , 2 , 4 ) s e t S p r i t e P o s i t i o n B y O f f s e t ( s p r , 5 0 , 9 6 ) s e t S p r i t e P h y s i c s O n ( s p r , 2 ) s e t S p r i t e P h y s i c s C a n R o t a t e ( s p r , 0 ) b o x m a n=s p r

Most of the code above should be familiar from last month's tutorial but the last physics command is very useful "setSpritePhysicsCanRotate(spr,0)". This means our dynamic sprite will not rotate or fall over and will for the most part react something like a character controller. The sprite will still react to forces such as gravity but can stay standing at the same angle unless we change the angle of the sprite using "setSpriteAngle(spriteID, angle#)". Our character sprite doesn't move around yet though so let's add some code into the loop to get it moving!

s e t S p r i t e P h y s i c s V e l o c i t y ( b o x m a n , G e t V i r t u a l J o y s t i c k X ( 1 ) * 3 0 ,_ g e t S p r i t e P h y s i c s V e l o c i t y Y ( b o x m a n ) )

Now compile the project again and you'll see "boxman" can run left and right. You may notice that we are setting the left / right velocity to 30 times the value from the joystick meaning it will be set between -30 and 30. The vertical velocity is being set to its existing value, why? Well we will be setting boxman's vertical velocity (jumping) separately. This just makes it easier to set the two velocities separately and shows how we can build up a combination of different velocities independently. What we don't have at the moment is any way to jump. What's a platform game without jumping right? First we need a jump button so add the following line before the loop.

A d d V i r t u a l B u t t o n ( 1 , 9 0 , 8 8 , 1 2 )

As you can see the settings are very similar to the joystick commands, we are creating button number 1 at 90% across the screen and 88% down. This time we are making it 8% of the screen width in diameter. It should look something like this when you compile and run the project.

Below is some simple code to add vertical velocity to our character when the button is first pressed. Add it into the loop.

j u m p=G e t V i r t u a l B u t t o n P r e s s e d ( 1 ) i fj u m p > 0 s e t S p r i t e P h y s i c s V e l o c i t y ( b o x m a n , g e t S p r i t e P h y s i c s V e l o c i t y X ( b o x m a n ) , j u m p * 6 0 ) e n d i f

This time we are setting the horizontal velocity to its existing value since we are editing it elsewhere (as before). The vertical velocity is being set only when the button is pressed. This time when you compile and run you will be able to make boxman jump when the button is pressed. Of course when we are not running on a touch-screen device this control method would be rather difficult and unintuitive so let's add keyboard control too and some code to decide which version to run. Take the virtual

joystick and button creation commands and put them into a conditional statement like this.

k e y b o a r d=g e t K e y b o a r d E x i s t s ( ) i fk e y b o a r d = 0 r e mc r e a t eav i r t u a lj o y s t i c k A d d V i r t u a l J o y s t i c k ( 1 , 1 0 , 8 8 , 1 2 ) r e mc r e a t eaj u m pb u t t o n A d d V i r t u a l B u t t o n ( 1 , 9 0 , 8 8 , 8 ) e n d i f

Now edit the loop so that we have a similar condition like this.

d o i fk e y b o a r d = 0 r e mg e tj u m p j u m p=G e t V i r t u a l B u t t o n P r e s s e d ( 1 ) i fj u m p > 0 s e t S p r i t e P h y s i c s V e l o c i t y ( b o x m a n , g e t S p r i t e P h y s i c s V e l o c i t y X ( b o x m a n ) ,_ j u m p * 6 0 ) e n d i f r e mm o v eb o x m a n s e t S p r i t e P h y s i c s V e l o c i t y ( b o x m a n , G e t V i r t u a l J o y s t i c k X ( 1 ) * 3 0 ,_ g e t S p r i t e P h y s i c s V e l o c i t y Y ( b o x m a n ) ) e l s e r e ma d dk e y b o a r dc o n t r o lh e r e ! e n d i f

S y n c ( )

l o o p

We will now add some code where I have added the remark "add keyboard contro l here!" as the rest of the code will now only run on devices that have no keyboard. First it is useful to know the ID of the keys you would like to use. Here is how we can find that out. Add the following line of code after the remark "add keyboard control here!"

P r i n t ( s t r ( g e t R a w L a s t K e y ( ) ) )

This will tell us which key we have just pressed. Compile and run, then press the keys you would like to use for "left", "right" and "jump" and write down the ID's that are printed to the screen. I will just be using the left / right / up keys which are 37, 39 and 38 respectively. Here is a keyboard version of our "virtual" control system using those keys. Have a look and check the differences.

j u m p=G e t R a w K e y P r e s s e d ( 3 8 ) i fj u m p > 0 s e t S p ri t e P h y s i c s V e l o c i t y ( b o x m a n , g e t S p r i t e P h y s i c s V e l o c i t y X ( b o x m a n ) , j u m p * 6 0 ) e n d i f r e mm o v eb o x m a n s e t S p r i t e P h y s i c s V e l o c i t y ( b o x m a n , ( G e t R a w K e y S t a t e ( 3 9 ) G e t R a w K e y S t a t e ( 3 7 ) ) * 3 0 ,_ g e t S p r i t e P h y s i c s V e l o c i t y Y ( b o x m a n ) )

We are using two new commands here "GetRawKeyPressed(keyID)" and "GetRawKeyState(keyID)". The first returns a value of 1 when the key is first pressed and 0 otherwise. The second returns 1 for as long as the key remains pressed and 0 otherwise. So using a similar version of the previous code we can create a similar kind of control system using completely different input methods. Now we will add some simple platforms to jump around on. Add the following code before the loop to give us some static platforms.

s p r=c r e a t e S p r i t e ( 0 ) s e t S p r i t e S i z e ( s p r , 3 0 , 2 ) s e t S p r i t e O f f s e t ( s p r , 1 5 , 1 ) s e t S p r i t e P o s i t i o n B y O f f s e t ( s p r , 1 5 , 7 5 )

s e t S p r i t e P h y s i c s O n ( s p r , 1 ) s p r=c r e a t e S p r i t e ( 0 ) s e t S p r i t e S i z e ( s p r , 3 0 , 2 ) s e t S p r i t e O f f s e t ( s p r , 1 5 , 1 ) s e t S p r i t e P o s i t i o n B y O f f s e t ( s p r , 8 5 , 5 0 ) s e t S p r i t e P h y s i c s O n ( s p r , 1 ) s p r=c r e a t e S p r i t e ( 0 ) s e t S p r i t e S i z e ( s p r , 3 0 , 2 ) s e t S p r i t e O f f s e t ( s p r , 1 5 , 1 ) s e t S p r i t e P o s i t i o n B y O f f s e t ( s p r , 1 5 , 2 5 ) s e t S p r i t e P h y s i c s O n ( s p r , 1 )

Also add this code before the loop to add a single "kinematic" platform which we will animate in the loop later.

s p r=c r e a t e S p r i t e ( 0 ) s e t S p r i t e S i z e ( s p r , 3 0 , 2 ) s e t S p r i t e O f f s e t ( s p r , 1 5 , 1 ) s e t S p r i t e P o s i t i o n B y O f f s e t ( s p r , 5 0 , 1 5 ) s e t S p r i t e P h y s i c s O n ( s p r , 3 ) k i n e m a t i c=s p r d i r e c t i o n=1 0

Remember that kinematic physics sprites can have velocity (speed) applied to them, to make our platform move simply add the following during the loop.

s e t S p r i t e P h y s i c s V e l o c i t y ( k i n e m a t i c , 0 , d i r e c t i o n ) i fg e t S p r i t e Y b y O f f s e t ( k i n e m a t i c ) > 8 5 d i r e c t i o n = 1 0 e l s e i fg e t S p r i t e Y b y O f f s e t ( k i n e m a t i c ) < 1 5 d i r e c t i o n = 1 0 e n d i f e n d i f

This just moves the platform up / down to within 15% of the top / bottom of the screen then changes its direction. Have a jump around on the platforms and try playing with some of the values to make boxman move faster or jump higher. As a further challenge why not try adding some images and animation too! Maybe you could try editing the jump button to make boxman fly like he's wearing a jetpack?

This example of setting up different control methods for different platforms uses less than sixty lines of code to create a simple platform game. A full version of the code for this tutorial can be downloaded <here> The full code and a compiled version of this month's example can be downloaded here. As an extra challenge, why not try to build a more complex structure to demolish, using the simple techniques learned in this tutorial.

App Game Kit Copyright 2011-2013 The Game Creators Ltd. All Rights Reserved.

Join us on Facebook

Follow us on Twitter
Terms & Conditions Website T&Cs Privacy Policy Refunds Policy AUP Find us on Google+ App Game Kit and the AGK logo are trade marks of The Game Creators Ltd. All other logos and brand names are trademarks or registered trademarks of their respective ow ners.

Join our mailing list