About

BASIC

Go Native!

Platforms

Videos

Documentation

Gallery

FAQ

Tutorials

FREE Trial

ORDER

AGK Bitesize
Lesson One - The AGK World
by Steven Holding
Introduction

Table of Contents

AGK Basic is not a complicated language to learn for anyone with a 'basic' knowledge of programming but there are a number of new concepts we need to get our heads around to fully take advantage of this new tool. "AGK Bitesize" is a set of tutorials which are designed to help you get used to these concepts a few at a time. We want you take a bite, chew it for a while and then take another bite. Rather than trying to take too much in one go and end up spitting it out without even properly tasting it!

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

This first tutorial is an introduction to the "World" of AGK. It is essentially a 2D world but one that is not limited to the dimensions of your screen. There are commands such as "WorldToScreenX()" which may have grabbed your interest but do you fully understand the concept yet? If not then read on as this is one of the powerful parts of AGK that can be easily missed or misunderstood. AGK gives us a "World" in which to position sprites. We can set the position of our sprites in terms of "World co-ordinates" or "Screen co-ordinates". If we don't want these sprites to move then we can fix them to their screen position, I will show an example of this in a little while but first let's jump in and create a world to explore! Start a new project; by default you will see this code.

r e m r e mA G KA p p l i c a t i o n r e m r e mL a n d s c a p eA p p S e t D i s p l a y A s p e c t (4 . 0 / 3 . 0) r e mAW i z a r dD i dI t ! d o P r i n t ( " h e l l ow o r l d " ) S y n c ( ) l o o p

Let's quickly look at positioning a sprite. When the command "setDisplayAspect()" is used we begin using a percentage based positioning system. This is another powerful part of AGK, it is also a slightly counter-intuitive one to get used to for those of us used to positioning things in DarkBASIC Professional which uses a "pixel" based system but positioning a sprite in a percentage based world is not so hard or different. Add this code into your new project just after "setDisplayAspect( 4.0/3.0 )".

r e mc r e a t eas p r i t e 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 , 1 ) s e t S p r i t e O f f s e t ( s p r , 2 , g e t S p r i t e H e i g h t ( s p r ) / 2 ) 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 , 5 0 )

This line creates a new sprite with no image (0) and assigns its spriteID to a variable called "spr".

s p r=c r e a t e S p r i t e ( 0 )

This next line sets the size of the sprite to 4% of the width of the screen.

s e t S p r i t e S i z e ( s p r , 4 , 1 )

The "-1" tells AGK to set the height of the sprite for you. If you are using an image then the aspect ratio of the image will be transferred to the sprite. If we had written this as "setSpriteSize(spr,4,4)" our sprite would not be square as you might expect but it would be 4% of the screen width by 4% of the screen height (on a screen 640x480 this would be about 25x19 pixels).

s e t S p r i t e O f f s e t ( s p r , 2 , g e t S p r i t e H e i g h t ( s p r ) / 2 )

Here I want to set the "offset" of the sprite to the centre, so I set the "X" offset at "2" and ask AGK to tell set the vertical offset of the sprite to the height of the sprite divided by 2. Setting a sprite offset changes the "centre of rotation" for the sprite and allows us to position sprites by a defined position on the sprite.

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 , 5 0 )

Finally I set the sprite position based on its offset (in this case the centre of the sprite) to 50% across the screen and 50% down the screen. If we did not use the sprite's offset it would be positioned with the top left corner of the sprite in the centre of the screen rather than being completely central. Run the project and you should see something like the image opposite. We now have a sprite in a world co-ordinate of 50, 50. Let's move the world around using the mouse. Add this code into the loop just after "Print("hello world")".

r e mm o v et h ev i e ww i t ht h ep o i n t e r i fg e t P o i n t e r P r e s s e d ( ) = 1 v i e w X #=g e t V i e w O f f s e t X ( ) v i e w Y #=g e t V i e w O f f s e t Y ( ) s t a r t X #=g e t P o i n t e r X ( ) s t a r t Y #=g e t P o i n t e r Y ( ) e l s e i fg e t P o i n t e r S t a t e ( ) = 1 d x #=s t a r t X #-g e t P o i n t e r X ( ) d y #=s t a r t Y #-g e t P o i n t e r Y ( ) s e t V i e w O f f s e t ( v i e w X #+d x # ,v i e w Y #+d y # ) e n d i f e n d i f

Here we check for the mouse button (or finger on a touch screen device) to be pressed, then save the screen (view) offset and the position of the mouse. While the mouse / finger are still pressed we add the movement to the screen offset. Compile the project and try it!

Now let's fix a sprite to the screen. Copy this code into your project after the code for adding the first sprite.

r e mc r e a t eaf i x e ds p r i t e f i x=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 ( f i x , 1 6 , 1 ) s e t S p r i t e O f f s e t ( f i x , 8 , g e t S p r i t e H e i g h t ( f i x ) / 2 ) 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 ( f i x , 1 0 , 5 0 ) s e t S p r i t e C o l o r ( f i x , 2 5 5 , 0 , 0 , 1 2 8 ) f i x S p r i t e T o S c r e e n ( f i x , 1 )

This will add a larger fixed sprite to the screen on the left side at 10% across and 90% down. I've made this one red in colour and semi-transparent so you can see your world sprite behind it. Sprites fixed to the screen will not always be in front of world sprites, this just happened because we made the screen sprite last and didn't set a depth for either sprite. This brings us rather neatly to the subject of depth which is crucial to any 2D game and dealt with nicely by AGK. If we plan ahead we can make use of the Depth property of sprites to great effect. By adding the correct depth to a set of sprites we can quickly make a simple scene really come to life!

Adding Depth to your scene

Setting sprite depth is useful for making sure your sprites are drawn in the correct order. Setting your character's depth to 100 and the background to 200 (for example) makes sure that your character is always drawn in front of your background. What about making that depth even more apparent by using a parallax scrolling system? This gives the illusion of depth by making objects in the foreground and background move at different rates and can be easily and quickly done using the sprite depth you've already set. Here's a very quick example using a 'star field' as an example. Copy the following code into a new project before the loop.

r e mf i r s tc r e a t ea na r r a yt os t o r et h es p r i t e I D ' si n d i ms p r i t e A r r a y [ 1 0 0 ] r e mn o wc r e a t e1 0 0s p r i t e s f o rs = 1t o1 0 0 r e mc r e a t eas p r i t e s p r=c r e a t e S p r i t e ( 0 ) r e mg e tar a n d o md e p t hb e t w e e n1a n d1 0 0 d=r a n d o m ( 1 , 1 0 0 ) r e ms e tt h es p r i t es i z ea n dd e p t h s e t S p r i t e D e p t h ( s p r , d ) s e t S p r i t e S i z e ( s p r , 1 . 0 ( d / 1 0 0 . 0 ) , 1 ) r e ms e ti ta tar a n d o mp o s i t i o ni no u rw o r l d 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 , r a n d o m ( 0 , 1 0 0 ) , r a n d o m ( 0 , 1 0 0 ) ) r e ma d dt ot h ea r r a y s p r i t e A r r a y [ s ]=s p r n e x t

You should now have 100 random sprites on the screen which have a size based on their depth. Next in the game loop we want to look at every sprite and give it an offset based on its depth.

d o r e mg e tt h ev i e wo f f s e t v x #=g e t V i e w O f f s e t X ( ) v y #=g e t V i e w O f f s e t Y ( ) r e ml o o pt h r o u g h1 0 0s p r i t e s f o rs = 1t o1 0 0 s p r=s p r i t e A r r a y [ s ] d #=g e t S p r i t e D e p t h ( s p r ) ` s e tt h es p r i t eo f f s e t sb a s e do nt h ev i e wo f f s e t X o f f #=( d # 1 0 0 . 0 ) * 0 . 0 1 * v x # Y o f f #=( d # 1 0 0 . 0 ) * 0 . 0 1 * v y # s e t S p r i t e O f f s e t ( s p r , X o f f # , Y o f f # )

` c h e c ki t ' ss t i l lo ns c r e e n w x #=g e t S p r i t e X ( s p r ) w y #=g e t S p r i t e Y ( s p r ) s x #=w o r l d T o S c r e e n X ( w x # ) s y #=w o r l d T o S c r e e n Y ( w y # ) ` i fn o tt h e ng i v ei tan e wp o s i t i o n i fs x # < 0t h e ns e t S p r i t e P o s i t i o n ( s p r , w x # + 1 0 0 , w y # ) i fs x # > 1 0 0t h e ns e t S p r i t e P o s i t i o n ( s p r , w x # 1 0 0 , w y # ) i fs y # < 0t h e ns e t S p r i t e P o s i t i o n ( s p r , w x # , w y # + 1 0 0 ) i fs y # > 1 0 0t h e ns e t S p r i t e P o s i t i o n ( s p r , w x # , w y # 1 0 0 ) n e x t r e mm o v et h ev i e ww i t ht h ep o i n t e r( a si nt h ep r e v i o u se x a m p l e ) i fg e t P o i n t e r P r e s s e d ( ) = 1 v i e w X #=g e t V i e w O f f s e t X ( ) v i e w Y #=g e t V i e w O f f s e t Y ( ) s t a r t X #=g e t P o i n t e r X ( ) s t a r t Y #=g e t P o i n t e r Y ( ) e l s e i fg e t P o i n t e r S t a t e ( ) = 1 d x #=s t a r t X #-g e t P o i n t e r X ( ) d y #=s t a r t Y #-g e t P o i n t e r Y ( ) s e t V i e w O f f s e t ( v i e w X #+d x # ,v i e w Y #+d y # ) e n d i f e n d i f s y n c ( ) l o o p

If you drag the scene with your mouse you'll see the smaller sprites in the background moving slower than the large sprites in the foreground. This is a simple parallax effect. When you build your world either using code or a level editor it is worth considering the depth aspect of your scene early on so that you can use a simple effect like this to really add depth to your game world. Here is a downloadable version with a simple spaceship to fly around, I've added a little more code for adding some images and ship movement but the parallax effect code is exactly the same as before (with graphics by Josh Mooney).

Hopefully now you have a basic understanding of the AGK World. The next AGK Bitesize tutorial will introduce you to the AGK Physics system which is based on Box2D.

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