Category Archives: Game Programming

Guide to Building a Monkey-X Game to Android

Step 1: Import the project to Android Studio

You will need to import the project to Android Studio as a Eclipse project. File – New – Import Project and select the folder with your Monkey-X android build. This is usually ../appname/main.buildv86e/android_new although your main.build folder may be named differently depending on which version of Monkey you are compiling against.

Step 2: Rename the package

The default package name is “com.monkeycoder.monkeygame”. This must be renamed as that is already taken on the Play store.

You will need to rename this in the Android Manifest, the main Java file, the res – layout – main.xml file, and the gradle build script. In the Java file you will need to rename the package at the top as well as the ANDROID_APP_PACKAGE variable (constant?).

I also recommend renaming the application and activity labels in your AndroidManifest.xml file from “Monkey Game” to your games title.

Step 3: Create an Icon

You will need to bring in your own icon for the app. This needs to be brought into the “res” folder and then referenced from the AndroidManifest.xml file.

Simply do a File – New – Image Asset and select the file you want to import. Android studio will generate various resolution versions of it for you.

I believe you will want at least a 512×512 pixel image. It kills 2 birds with one stone because Android will use it for the icon and 512×512 is the resolution needed to upload your icon to the Play store page.

Step 4: Test it on an actual device

After doing these steps, sometimes you miss something and the app will crash. Make sure to test your Android Studio build on an actual device now.

Step 5: Create a Signed APK

You will need to create a Signed APK file to upload. Android Studio makes this pretty easy. If you don’t have a key or a keystore already, it will walk you through setting one up. Then use the key to create a Signed build of your game that will be used to publish.

Step 6: Fill out information on Google Play and Upload the Signed APK

You now need to go through all of the questions and info for the Google Play store. This includes uploading your icon as well as a feature image that at time of this writing is 1024×500 pixels. You can put whatever you want here but probably should make it related to your game. Additionally it asks for screenshots. Most phones can do this although it could be difficult with an action game, or you could do it with an emulator.

There is also an area to put a link to a youtube video if you want to cut a short promotional video for your game.

Other steps include filling out a content rating questionnaire, linking to a privacy policy, and setting up purchases and adds (to name a few).

Quick and Dirty

This is a brief overview of the whole process. Mostly just notes to myself with reminders about changing things in Android Studio for the next time I release a game like this.

Hope you find this helpful.

First Monkey-X Game: Final Boss and Game State for Winning

The game is getting pretty playable, but like all good things it needs to come to an end.

If you remember from our little design exercise, we have a goal that will end the game. When we defeat the Big Bad Boss.

In this step, we will add the Boss into the game and create a Game Won state for when the player defeats the Boss.

Getting to the Big Bad Boss

The boss is going to be another character that we add to the game. We want him to be tougher than any of our enemies so far and we want him to shoot at the player to make it challenging.

Let’s start by creating the Boss character.

So now we have a field where we can put our Boss and we have a method that we can call to create him, but we don’t want to call it right away because we only want to have our Boss show up when we get far enough into the game.

So we will need 2 more things. First we need something to track whether or not it is time for the Boss to show up, and once this tracker is satisfied we don’t want to create another Boss.

Ok, at this point when you run your game, if you survive for 15 seconds or so you should get to a point where the small enemies stop getting created and you see a large purple shaded box representing the boss.

Boss Behavior

Now that we can get to the Boss, we want an EPIC BOSS FIGHT! Ok, maybe it won’t exactly be epic at first, but we can start by giving him some basic behavior. We also need to add the ability to shoot the Boss.

To start with we want to add some simple AI to the Boss’ movement. Nothing fancy, just moving the Boss up and down.

Now your Boss should go up and down the screen. Really, really simple pattern for now. We can get fancy and create more complicated logic for the movement later.

Damaging the Boss

Now that the Boss is moving, we need to be able to destroy it so we can win the game. This means we need to wire up the collision detection for our player’s projectiles and the Boss hit box. We also need to make sure the Boss takes damage when it gets hit.

Now projectiles will collide with the Boss but our current Character code won’t handle this correctly after the Boss gets hit. So we need to make a few tweaks to the Character class.

Now you will need to go into your main Game class and update the constructors for your Player and the Final Boss. The regular enemy constructor is fine since it just uses the default. There is also a check when firing projectiles that needs updating.

Now your projectiles should hit the Boss and damage it. However you should notice that once the Boss’ health drops to 0, the Boss is still there and the projectiles just fly past.

We still need to make the OnUpdate method a little smarter about what happens when the Final Boss is destroyed.

Destroying the Boss and Next Level

Destroying the Final Boss is simple enough. In the OnUpdate code, simply add a check to remove the Boss from the game when his health reaches 0. But what we really want to do is change scenes to a show that we beat the boss.

In order to give us some room to give the game more depth, we are not actually going to have the player win the game after beating the first boss. Instead we are going to have the game transition to a Next Level scene.

Now we have a scene we can transition to, lets transition to it when our Boss dies.

And we don’t want to get stuck there so lets add a method to allow the player to continue.

Now when you play the game, after you destroy the Final Boss, you should get to the Next Level scene. Then if you hit enter it should start play again but your score will remain the same.

Actually Winning

What we really want to do in this chapter is give the player the ability to beat the game. In order to do that we need to add 1 more scene, the Game Won scene.

If you have been following along, you have already gotten pretty familiar with adding scenes to the game by now, and could probably do this yourself. Just in case here is the code for the Game Won scene.

Now we need to be able to actually get to this scene. Defeating the Boss doesn’t get us there, it only gets us to the next level, and right now we have infinite levels.

First let’s put a way to track what level we are on and set a maximum number of level. Then we can use those 2 values to tell us when to end the game.

Now whenever we get to the Next Level, lets update our current level and see if it is the final level.

Now when the player beats the boss on the last level, they have beat the game.

In the next section we will make the Boss a little tougher and let him shoot back.

First Monkey-X Game: Restarting the Game

Now that the player can get to a game over state, we need to let them restart the game without having to refresh the web page.

Hit ENTER

We will add a new check for after the player has been destroyed for the ENTER key to be pressed to try again. Also we will add a message in the game over screen to tell players what they need to do.

Let’s start by adding the instructions to the Game Over screen on how to restart.

Now we want a way to reset the game whenever ENTER is pressed from the Game Over scene. We will do this by creating a small method in our game that goes through and deletes all of our enemies and bullets and recreates the Player.

You will notice that we have a new method here called CreatePlayer. Our next step is to refactor the code from our OnCreate method into this method so we can recreate our player when we reset the game.

The final step is to add the code to call the GameReset method when the ENTER key is pressed from the Game Over state. This will make its home in the Game’s OnUpdate method.

And now our player can easily start over when their little character gets destroyed.

Our next step will be creating a boss character and an end state to our game.

First Monkey-X Game: Player Destruction and Game State for Losing

Our player can fire projectiles and destroy enemies. He can run into enemies and take damage. But right now the player does not get destroyed.

In this part of the tutorial, we will move to a Game Over state whenever the player gets destroyed. This will cover some of the basics of FantomEngine’s layers and scenes.

Game Over State

Right now, we only have the default layer and scene which we are playing our game in.

In order to be able to move to a Game Over state, we need to create a new scene that the game can transition too.

Now we have a play scene that we will run the game in, and a game over scene that we will show when the player gets destroyed.

Right now the game over scene doesn’t have anything in it. In the game’s OnCreate method, we will build our game over scene by adding some text that says “GAME OVER”.

It is important to remember with FantomEngine that whatever layer is the current default layer will be the one that things get added to. This is why we need to change the default layer to the game over layer when adding the Text object and switch back when we are done.

NOTE: The font system is not particularly well documented for FantomEngine. It supports FontMachine and EZGui style fonts. You will need a PNG file and a TXT file describing the layout in your project_name.data folder for it to work. I was able to use a tool called Hiero to convert Google font VT323 to this format. There will be an appendix section covering this. There is a sample font in the examples that come with FantomEngine which you can use in the meantime. I will also try to make the converted font I did available.

Switching Scenes

Our final step will be to add a check to the OnUpdate method to switch the scenes if the player is destroyed.

And now we have a playable and basic version of our game where the player can move, shoot enemies, and be destroyed which ends the game.

First Monkey-X Game: Enemies and Collision

Now that the player can move around the screen, let’s give him some enemies to avoid.

Start by adding a collection to hold our enemy characters.

Now we want to modify the Character class just a little so we can have enemy characters and all of them don’t move when the player touches the controls.

Since we are only going to create 1 player character and we are going to be creating multiple enemies, we are going to give the is_player variable a default of ‘False’ so we can make all our enemies by only passing the first parameter.

Now we need to go and change our player creation code to tell the game that it is a player

Make Some Enemies

Now it is time to make some enemies. We are going to start by making a little generator that creates enemies every 3 seconds or so in our OnUpdate method. We also need to initialize our enemies list.

Now when you run this, you should have some little yellow boxes floating across the middle of the screen every 3 seconds.

Randomize the Enemies

Enemies that always come straight down the middle of the screen every 3 seconds are not that exiting. Let’s spice it up and improve our enemy creator code.

We are going to do 4 things. First we want to randomize where the enemies start. Next we want to randomize how fast they are going. We also want to randomize how often they appear. Finally we want to randomize how big they are and what color they are.

Running into enemies

Now that we have some enemies flying around the screen, lets add some code that checks if we ran into one of them or not.

This adds the checks, but right now we don’t have a way to tell the engine to do anything about them.

What we want to do is extend the engine so we can override its OnObjectCollision method. To do this we are going to create a CustomEngine class that extends Fantom Engine. Create a new custom_engine.monkey file and put in the following code.

One of the ways of passing information back and forth with the engine is by setting Tags and Text on the object. In this case we are going to tell the engine that whenever a PLAYER object and an ENEMY object collided, mark the ENEMY object as DESTROYED and make sure it cannot collide with the PLAYER again.

Now we need to go back and add the text to the player and enemy boxes. Also, in our OnUpdate method, we will remove all the enemies that get destroyed.

Now when you run the game, every time your little character runs into one of the little enemy squares, the enemy should disappear.

Now the Game Truly Begins

With collision working, we can start adding projectiles for our hero to stop the enemies before they even touch his little box.

Tutorial Part 6
Tutorial Part 8

First Monkey-X Game: Creating the Player

One of the first things I like to do when making a game is to build the fundamental mechanics in first. In this case it will be the player’s character and the ability to move around the screen.

In order to keep the code clean, we will separate the character out into its own class.

Draw

We will start by adding the character to the game and drawing it in the form of a rectangle. To do this we need to give the Character class a ftObject representing a box. Then we will create a character in the game’s OnCreate method.

We also need to update the OnRender method to tell the engine to draw all of the objects

Now when you run the Main file you should get a black rectangle on a red background.

Pretty basic but that is what we are going for.

Movement

Now that we can see the player, let’s add some controls so they can move around the screen. We will put the handling of the controls in the Character class by giving it an Update method. This way we can keep the code clean. For now let’s use the arrow keys to move our player around.

Now all we need to do is call the character update method from our game’s OnUpdate method and we will have movement.

Run this and you should be able to move your little rectangle around with the arrow keys.

Boundaries

We don’t want the player to lose their character by it flying off the screen, so let’s prevent the player from being able to leave the viewable area.

We will do this by adding some additional checks in the Character class Update method.

Now when you run your code, you should be able to move the box around with the arrow keys but it should never leave the viewable area.

Our next steps will be to add enemies and the ability to shoot them.

Tutorial Part 5
Tutorial Part 7

Setup for Making Your First Game

Like most creative things, it takes a little setup before we can start actually making our game. A lot of this stuff you only half to do once, and future games are even easier to get started on.

If you have been following along, you already have Monkey-X installed and can open up the TED IDE to write some code. If not, go back to the first part of this tutorial and get it installed.

The Fantom X Module

For this first game we are going to use a Monkey module called Fantom X (previously Fantom Engine) to do some of the heavy lifting for things such as collision and user interface.

It includes access to Monkey’s Mojo framework and gives us a lot of nice tools.

Install the Module

Head over to fantomgl.com and under Fantom X, select download.

Once the zip file is downloaded, unzip the file and copy it to Monkey’s modules folder.

Monkey Modules Folder

Import Fantom X and Start Your Engine

Now that Monkey is installed and Fantom is installed, we need to bring the Fantom X module into our game file and create an instance of the engine. To do that we will import Fantom X, create our Game class, give it an engine object and start our OnCreate method.

This creates an instance of the Fantom engine that will be managing a lot of our game for us.

The Main function is what Monkey needs to have in the file that you build to run. In the Ted IDE you can click build and run and this should run without errors. All you will get is a black screen but that is alright for now.

Set the Scene

Fantom has Layers, Scenes and Objects. A Layer is a collection of Objects. A Scene is a collection of Layers. A game is a set of Scenes that are like the various states (menu, first level, etc) that the game goes through.

One of the things it needs to know when it starts up is which scene to start in. So we need to set the default scene in our OnCreate method.

Also the engine can operate with various Layers, allowing you to have a background and a foreground and to simulate height and depth for 2D games. While we set the default scene, we are going set the default layer as well.

Even if you are copying and pasting the code, it is a good idea to try to run it and make sure you don’t get any errors.

Add Update and Render Methods

The final part of our setup is going to be adding the OnUpdate and OnRender functions. We will go ahead and use the engine to draw some text in them just to make sure they are working.

Here we create our OnUpdate method and call the engine’s Update method. First we find out how long it has been since we last called this method with CalcDeltaTime. Then we divide that by what we expect our framerate to be in order to get a speed factor to pass to our the engine’s Update method. This will ultimately affect each object when we modify it’s speed later.

In our OnRender method we clear off the screen and make it completely red. Then we set the color of what we are about to draw. After that we draw text that shows the position of our cursor or our touch input in relation to our game.

Run it now and test it out.

Setup Complete

Now that we have a basic shell for our game we can start adding the various scenes and objects together to make our game.

Tutorial Part 4
Tutorial Part 6

Monkey-X Frameworks and Physics Modules

One of the useful ideas I picked up from reading a book on how to make games with PhaserJS, was to take a look at the various frameworks and modules that had been built already for Monkey-X.

I have been slowing myself down by trying to handle some of the specifics of the game directly instead of building on the work of others.

The thing I am looking for most is a physics frameworks. Nothing says edge case like handling collisions of various shapes.

Some GUI help would be nice too.

The Frameworks

I did some searching and there are probably others out there, but these were the easiest to find frameworks I came across and some of my notes on them.

  • Fling
    1. Free
    2. Physaxe implementation in Monkey
    3. No updates since 2011
    4. A few examples in Monkey-X forums
  • Monkey Box2D Implementation
    1. Free
    2. Last updated in 2013
    3. No real documentation
    4. A few forum posts on Monkey-X site with usage examples
  • Diddy
    1. Free
    2. Large number of examples in github
    3. Recent update by author
    4. Spotlight from Monkey-X main site
  • Ignition-X
    1. Paid with free trial
    2. Older framework which official site no longer directly links to.
    3. Still referenced from Monkey-X store page
  • Pyro
    1. Paid
    2. Successor to Ignition-X
    3. Looks professionally done.
    4. Various examples
    5. Scene Graph, Collision System (Box2D), Tile System
    6. Skinnable GUI System, and other useful features
  • Fantom X/Fantom Engine
    1. Free
    2. Creator wrote a book on how to make games with Monkey-X and Fantom Engine
    3. Fairly well documented with examples
    4. Recently updated
    5. Has Box2D physics implementation
    6. Has GUI helpers

Conclusion

Based on this research the choice is between Diddy, Pyro and Fantom X. I will be testing out the Fantom X engine for now and seeing how useful it can be, and depending on how that goes I will probably use it in the following parts of my making your first game with Monkey-X series.

There are 2 main reasons for this. First I will be using it for examples and for people just getting started into making games who may not want to invest too heavily financially to begin with or even don’t have the money for something like Pyro.

Second, for being a free framework Fantom X is well documented and the maintainer seems to keep it up to date.

Looking forward to evolving my game making skills.

Don’t Leave a Festering Pile

One of the most memorable statements from Clean Code was the author describing some of his own example code as a “festering pile.” And he doesn’t just use the term once, he uses it multiple times.

The most important statement however comes after he goes through how he cleans up his code and he is going over key points at the end of the chapter.

It is not enough for code to work. Code that works is often badly broken. Programmers who satisfy themselves with merely working code are behaving unprofessionally.
– Uncle Bob in Clean Code

Get It Working, Then Clean It Up

Don’t get me wrong, you should get your code working. If it does not work, it is completely useless.

But that is not where you stop.

When you stop here, it becomes difficult to add features to your program and makes it more likely that you will introduce errors later.

As a professional programmer and creator, cleaning up your code after you get it working is a must.

What’s That Smell?

As I am working on my current game, I started noticing that some of my own code was becoming a bit of its own smelly, festering pile.

Classes were getting a little clunky, functions where getting a little too long, and it was taking longer to make small changes.

Since I am trying to write the same logic in 2 different languages (Monkey-X for the client and Ruby for the server), having clean code was even more important to be able to replicate the logic in a second language.

And with the code getting a little cluttered, there started being some hard to figure out bugs where the client would show one thing, but the server would do another.

I finally got the code behaving the same and it took longer than it should have.

Programming Febreeze

Now it is time to get rid of some of these smells. The way to do that in programming is refactoring.

This is basically what Clean Code was all about. Changing your code to be more clear and designing the classes and methods to be easier to change (think DRY and SRP) have your code smelling like fresh linen.

That is what I am working on now with Drone Tournament. My original goal this year was to finish a game every 3 months, but I don’t want a half baked game. So I am taking the time to refactor the code and clean it up because I am a professional.

Be a Pro, Clean Your Code

How To Calculate If Line Segments Intersect The Easy Way

I am currently working away at Drone Tournament, Game #2 for 2016, and started implementing combat into the game. In order to make combat happen, each little drone unit in the game will be able to fire their weapon every so often, and if they hit an opponent it loses armor and can be destroyed.

The trick is how to figure out if we get a hit.

Previous Collision Detection

At the beginning of 2015 I made my first game Prism Ship with Monkey-X and it implements a little ship that shoots blocks. The collision detection there is not pretty but fairly simple because everything is kept square and straight.

Projectiles go straight up and the things they hit are coming straight down so no real fancy math is needed. I simply checked each of the corners of the projectile to see if they were inside the squares you are trying to hit.

A New Challenge

In Drone Tournament however, things can turn when they shoot which means that bullets go off at weird angles and their potential targets are not always moving directly towards them. Additionally I did not make the projectiles in this game as large as in Prism Ship. They are basically line segments.

It Has Been Solved

This problem is common enough that it has been solved before, and in a most elegant and simple manner. Here is some Monkey-X code that I derived from an implementation of the solution in Python. I will explain what is going on below. I even borrowed a picture that shows what is going on really well.


	Function LinesIntersect:Bool(pointA:Vec2D, pointB:Vec2D, pointC:Vec2D, pointD:Vec2D)

		Local abc:Bool = CounterClockwise(pointA, pointB, pointC)
		Local abd:Bool = CounterClockwise(pointA, pointB, pointD)
		Local cda:Bool = CounterClockwise(pointC, pointD, pointA)
		Local cdb:Bool = CounterClockwise(pointC, pointD, pointB)

		Return(( abc <> abd) And (cda <> cdb))
	End

        Function CounterClockwise:Bool(pointOne:Vec2D, pointTwo:Vec2D, pointThree:Vec2D)
	        Return ((pointThree.y - pointOne.y) * (pointTwo.x - pointOne.x) > 
                        (pointTwo.y - pointOne.y) * (pointThree.x - pointOne.x)) 
        End

For those of you not familiar with Visual Basic, "<>" is its way of writing "!=" (Not Equal)

Explanation

If you remember from your geometry class back in high school, line segments have a slope which just measures the change from the beginning point to the end. If you have three points A, B, and C, and the slope of the line from A to B is larger than the slope from A to C (meaning it changes more) then the points are in Clockwise (CW) order. If the slope from A to B is less than that of A to C then they are considered Counter Clockwise (CCW).

borrowed_diagram_ccw
Image borrowed from here (article 1 in reference below).

So we test the two points of our particle to see whether they are CW or CCW to each edge of the Drone hit box. If 1 point is CW and the other is CCW to an edge, then we know that the lines intersect because you have a point on either side of the edge of the hit box.

Special Case I am Ignoring

There is a special case where the 2 lines lay across one another called Collinear. I am ignoring this special case because for the purposes of the game it would not really be a solid hit and is not that important. If you would like to know how to handle it you can read more about this solution at the following articles.

References

  1. Line Section Intersection Algorithm
  2. How To Check If Two Line Segments Intersect?
  3. Stack Overflow: How Can I Check If Two Segments Intersect?