Monthly Archives: November 2016

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

Game #2 of 2016 Alpha Release

Drone Tournament (Game #2 of 2016) is out on Itch.io. The elephant is (mostly) eaten. There is a lot of work that could be done to the game, but the core is working and playable in a multiplayer format.

Right now it is really only playable from a PC with a keyboard in the browser. There is no way for a touch device to end their turn.

However, I am figuring out how to get a build of the game working on Android and will be releasing a Beta version of that as soon as possible.

Looking forward to adding polish and new features to this game. I may make it my only project of 2017, not sure yet.

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.

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.