Twin stick shooters work great for phones and tablets, your thumbs stay out the way of the action, and it feels very familiar if you’re used to using a Playstation or Xbox pad. Luckily, it’s pretty easy to write a twin stick shooter game using Basic4Android, I’ve written the following series of posts and Youtube videos to go from nothing to a twin stick space shooter. I start with getting the sticks on screen, then move on in easy steps, add the sticks, add a background, add a player, add some enemies, shoot the enemies, make the enemies shoot you, add a score, add a highscore table, add a title screen, add some sound effects, add some music, game done! Upload to Play Store and get rich!
Part 1 – Defining and drawing the sticks
After this first part, the above screenshot is what you’ll get. Each stick can be controlled, and both sticks can be controlled at the same time.
So let’s get coding!
Download the project file here:
First off, check you’ve got the right software, for this series you’ll require the full paid version of Basic4Android, I’m using version 5.01, but I have tested this on version 3.8, so anything above that version should be fine.
You’ll also need the LibGDX library, available here: http://www.b4x.com/android/forum/threads/libgdx-game-engine.32594/
The current version as I write this is version 1.07.
Once you have Basic4Android installed, copy the contents of the libgdx zip file into your additional libraries folder (set this up using the tools/configure paths option), then you’re ready to go.
In this first part, we will get the sticks to appear on screen, and be able to move them by touching the screen, we will also make sure they work with two fingers at once, a twin stick shooter’s not much good if you can only use one stick at a time!
I’ll work through the code, one section at a time to keep it simple, you can also watch me explain this on Youtube here: http://youtu.be/Z7PFeEbqWiA
#Region Project Attributes #ApplicationLabel: Twin Stick Shooter #VersionCode: 1 #VersionName: 0.01 #SupportedOrientations: landscape #CanInstallToExternalStorage: False #End Region
Starting with the Project attributes region, we call the application “Twin Stick Shooter”, this is what the game is called on your Android launcher.
We”ll start at versioncode 1 (this must be a whole number), then a versionName 0.01, we’ll increase this as we work through.
Set the supportedOrientations to landscape, we won’t support portrait for this game (however it would be very simple to support it)
CanInstalltoExternalStorage leave this as false for now.
Next comes the Activity attirbutes:
#Region Activity Attributes #FullScreen: True #IncludeTitle: False #End Region
Set fullscreen to true and get rid of the title bar.
We have nothing in the Process_Globals region, however the Globals section will take some explaining:
Dim surface As View ' main view to hold libGDX surface Dim vpW As Float = 1134 'set view port width in pixels Dim vpH As Float = 720 'set view port height in pixels Dim lGdx As LibGDX ' declare libgdx to load library Dim GL As lgGL ' declare opengl Dim Camera As lgOrthographicCamera ' declare camera type Dim Batch As lgSpriteBatch ' set up sprite batch for main loop Dim GdxIP As lgInputProcessor 'declare libgdx input procssor Dim movevector As lgMathVector2 ' declare movevector to store move stick data Dim firevector As lgMathVector2 ' declare firevector to store firestick data 'define type to store thumbstick, x and y are coords of stick on screen, dx and dy show how far the stick is being pushed, width and height are just for screen scale Type typthumbstick(x As Float, y As Float, dx As Float, dy As Float, diameter As Float, radius As Float) 'declare right thumbstick - used for firing Dim rStick As typthumbstick 'declare left thumbstick for movement Dim lStick As typthumbstick Dim tOrXR As Float 'right stick original touch x value Dim tOrYR As Float 'right stick original touch y value Dim tOrXL As Float 'left stick original touch x value Dim tOrYL As Float 'left stick original touch y value Dim movePointer As Int = -1 'used to store which finger is on move stick Dim firePointer As Int = -1 'used to store which finger is on fire stick 'declare images Dim img_thumbstick As lgTexture 'thumbstick centre
Okay, let’s get through it, the comments pretty much say it all, but I’ll explain what I think might be a bit confusing.
A viewport is basically the screensize in pixels you are defining for your game to use, libgdx will scale the graphics for all phone screens though, so things will still look smooth on all screen sizes, but at least we know what coordinates system we have, so here we set the viewport width and height. This means that we know top top coord for the screen is 720 and the width is 1134 pixels wide for every phone the game is played on.
Vectors, which we declare for movement and firing are objects which store several things, for us, we use them to store a direction and power value, so from one vector on the sticks, we can tell what angle the player is pushing the stick, and how much they are pushing it. This lets you do cool things like in Mario where you can walk or run the character based on how hard the player is pushing the stick. Mario 64 in the N64 was the first game to do that.
We then define the type for our sticks, each stick created from this type has an X and Y position on the screen, a DX and DY value to show how off centre it is when in use, a diameter and a radius.
We then define our right and left sticks on the next lines.
The next four lines are to store the starting coords of the sticks when the player moves either one, it makes it easier to calculate the vector size to apply to moving the player or shooting later on.
Then we define the move and fire pointers. Everytime you put your finger on the screen, that finger gets given a value, so based on where you place your finger, we will assign this to either the move or the firepointer, that way we know which joystick to reset when you lift a finger off the screen.
We then finally define an lgTexture object to store our stick image. This is a file in the files folder in the project folder.
Now all that’s done, lets start making things happen.
Sub Activity_Create(FirstTime As Boolean)
'Initializes libGDX
surface = lGdx.Initializeview("LG")
Activity.AddView(surface, 0, 0, 100%x, 100%y) ' fill screen
GdxIP.Initialize("IP")
End Sub
We setup libgdx and fill the screen with it. We then initialise the object for getting input for the player touching the screen.
Sub Activity_Resume 'Informs libGDX of Resume events If lGdx.IsInitialized Then lGdx.Resume End Sub Sub Activity_Pause (UserClosed As Boolean) 'Informs libGDX of Pause events If lGdx.IsInitialized Then lGdx.Pause End Sub
Resume and pause simply call the resume and pause libgdx methods.
Sub LG_Create
'Initializes the renderer
Batch.Initialize ' initialise batch for drawing graphics in main loop
'load Graphics
img_thumbstick.Initialize("thumbstick_white.png")
We now initialise the batch object used for drawing the images in the main game loop, then we load the png image against the img_thumbstick texture.
Now we setup the sticks:
'initialize thumnbsticks 'right stick rStick.x = vpW*0.8 rStick.y = vpH*0.2 rStick.dx = 0 rStick.dy = 0 rStick.diameter = 150 rStick.radius = rStick.diameter/2 'left stick lStick.x = vpW*0.2 lStick.y = vpH*0.2 lStick.dx = 0 lStick.dy = 0 lStick.diameter = 150 lStick.radius = lStick.diameter/2
we set the positions of each stick using the screen percentage amounts, this should put them roughly in the same positions on all screen sizes, but you could write an options screen to allow players to move the stick positions. We then set the movement to zero to start, then set the diameter of each stick.
It’s worth noting at this point, that we can set the sticks to any point on the screen and any size, and this code will all still work without having to change anything else.
Sub LG_Resize(Width As Int, Height As Int) 'Sets the camera viewport Camera.Initialize Camera.SetToOrtho2(False, vpW, vpH) 'set camera viewport to viewport size vpW by vpH End Sub
The resize method gets ran every time the orientation changes or every time the app runs. It initialises the camera, then sets the viewport to use the vpw and vph variables we set earlier so we know what coordinates we’re using on all phones.
Let’s look at the render region:
Sub LG_Render 'Clears the screen GL.glClearcolor(0,0,0,1) 'RGB,alpha - Clear screen with color based on values 0 to 1 for red, green, blue and alpha GL.glClear(GL.GL10_COLOR_BUFFER_BIT) 'Updates the matrices of the camera Camera.Update 'Uses the coordinate system specified by the camera Batch.ProjectionMatrix = Camera.Combined 'draw game Batch.Begin #Region draw controls 'draw controls 'draw left thumbstick Batch.DrawTex2(img_thumbstick,lStick.x-lStick.radius+movevector.x,lStick.y-lStick.radius+movevector.y,lStick.diameter,lStick.diameter) 'draw right thumbstick Batch.DrawTex2(img_thumbstick,rStick.x-rStick.radius+firevector.x,rStick.y-rStick.radius+firevector.y,rStick.diameter,rStick.diameter) #End Region Batch.End #End Region End Sub
Keeping it simple, it clears the screen, then starts the drawing batch section, this render region is called every time the screen refreshes, which on most phones is 60 times per second.
So we draw the thumbsticks. the reason we don’t just draw them at their x and y coords is due to libgdx drawing the texture to the right and above of the coordinate, making the x and y coords the bottom left corner of the image, so we shift everything by half the image size when we draw it.
Sub IP_touchdown(screenX As Int, screenY As Int, pointer As Int)
screenX = vpW * (screenX / lGdx.Graphics.Width) 'translate x coord
screenY = vpH - (vpH * (screenY / lGdx.Graphics.Height)) 'flip and translate Y coords
'check lstick
If (screenY < lStick.y+lStick.radius) And (screenY > lStick.y-lStick.radius) Then
If (screenX > lStick.x-lStick.radius) And (screenX < lStick.x+lStick.radius) Then
movePointer = pointer
Log("set movepointer to " & pointer)
tOrXL = screenX
tOrYL = screenY
End If
End If
'check rstick
If (screenY < rStick.y+rStick.radius) And (screenY > rStick.y-rStick.radius) Then
If (screenX > rStick.x-rStick.radius) And (screenX < rStick.x+rStick.radius) Then
firePointer = pointer
Log("set firepointer to " & pointer)
tOrXR = screenX
tOrYR = screenY
End If
End If
'sector map icon
Log(screenY)
#End Region
End Sub
The next few regions can be ignored as there’s no code for us to worry about, let’s look at the touchdown region. This runs everytime a finger is placed on the screen. We first translate the coords to match the screen cordinates we’re using from our vpw and vph values (remember Android phones have lots of resolutions).
We then set the move pointer and fire pointer based on where the finger presses on the screen, whether it’s within the bounds of either of the sticks.
Let’s move on. I know I’m skimming it a bit, but we’ll never get to the good stuff if I don’t.
Sub IP_touchup(screenX As Int, screenY As Int, pointer As Int)
'stop moving if move pointer lifted
If pointer = movePointer Then
'reset move cursor position
Log("released movepointer")
movePointer = -1
lStick.dx = 0
lStick.dy = 0
movevector.x = 0
movevector.y = 0
End If
'stop firing if firepointer lifted
If pointer = firePointer Then
'reset firepointer position
Log("released firepointer")
firePointer = -1
rStick.dx = 0
rStick.dy = 0
firevector.x = 0
firevector.y = 0
End If
End Sub
If a finger is lifted, this region gets called, if it’s the movepointer finger, then we reset the movepointer value to show it’s not in use, we set the sticks back to the centre, and set the vector to zero to stop moving the player. We do the same things for the firepointer.
Last bit, moving the sticks:
Sub IP_TouchDragged(ScreenX As Int, ScreenY As Int, Pointer As Int) ScreenX = vpW * (ScreenX / lGdx.Graphics.Width) 'translate x coord ScreenY = vpH - (vpH * (ScreenY / lGdx.Graphics.Height)) 'flip and translate y coord If Pointer = movePointer Then lStick.dx = ScreenX - tOrXL lStick.dy = ScreenY - tOrYL movevector.x = lStick.dx movevector.y = lStick.dy 'limit how far the stick can be moved movevector.limit(50) End If If Pointer = firePointer Then rStick.dx = ScreenX - tOrXR rStick.dy = ScreenY - tOrYR firevector.x = rStick.dx firevector.y = rStick.dy 'limit how far stick can be moved firevector.limit(50) End If End Sub
Again, we translate the screen coords, then we set the stick dx and dy values by the difference in where your finger is and where it was when you first pressed the screen, we set these values to the movement and fire vectors. We then lastly, use the vector limit function to set the maximum size of the vector, this is useful to stop the player moving too fast, or firing too fast.
Try downloading the project from this link:
and try running it, then try playing with it to change the size of the sticks and where they are on screen, then try changing the size of them.
More tutorials coming later this week!
Easy Android Coding 