9 min read

Call the Monk and start praying—the Monkey IDE

We are just kidding here; there are no religious activities planned in this article. Even though sometimes you will find yourself praying that a new piece of code you have created works like it should.If you haven’t installed Monkey already, then it is time to do that now.The software can be downloaded from the site http://www.monkeycoder.co.nz/. Some prebuilt scripts are available as the support code files for the book Monkey Game Development Beginner’s Guide.

Why learn about Monk?

Monk is the code editor/IDE that ships with Monkey. It is the first place that you will fire up when you start using Monkey. So, it is important to know your first main tool, if you want to develop games with Monkey.

Starting up Monk

It’s time now to start Monk. You will do this by double-clicking on the Monk.app icon on OSX or start Monk.exe in Windows.

Monk’s user interface

Monk’s user interface is divided into three sections:

  • The toolbar
  • The code editor area
  • The info box

The toolbar

All functions of Monk can be called through keyboard shortcuts and through the main menu. Some functions are also reachable through the toolbar.

The code editor area

The code editor in Monk supports syntax highlighting and automatic casing of the basic commands in the Monkey programming language. Sadly, it doesn’t highlight and auto-case the commands from the modules, which is something that could help tremendously. But, the usual suspects are all there—copy, cut, paste, search and replace, Block in and out denting, goto line, and Find in Files will get you a long way before you ask for more

The info box

The info box is your navigation system, when it comes to Monkey coding. You can open your code files, and also the files included with Monkey, from the Nav tree view:

In the bananas section of the Nav tree view, you will find all the sample scripts that ship with Monkey. Shortly, we will go there and start a sample script from there. The next tab header is the Code tree view. It contains all function and method headers of the included classes in the currently visible code file

The last Debug tab is a relic from Monk’s origins, being the native editor for BlitzMax. There, it has a built-in debugger, something that Monkey lacks at the moment. So, please just ignore that tab. Ok, now let’s do something. How about opening one of the sample scripts?

Time for action – opening a sample script

Opening an existing script can be done through several methods. One is through the toolbar. Follow the given steps:

  1. Click on the Open icon in the toolbar:

    2. Next, you will see a file dialog where you can select a .Monkey file to be opened.

  2. Navigate, within the dialog, into the bananas folder of Monkey’s main directory. There, you have subfolders from some authors of sample scripts.
  3. Head to the mak folder, and from within that, to the firepaint folder. Inside, you will find the firepaint.Monkey file.
  4. Select it and click on the Open button in the File dialog. Voila! Monk just opened the selected script:

  5. Of course, there are other ways to open a script. For example, you can double-click on a filename inside the Nav tree view

What just happened?

You have opened your first Monkey script. Good job! Please note how the GUI has changed. In the top of Monk, you see the file path of your currently visible script. Also, for each script you open or create, Monk creates a new tab inside the code area. In our example, this tab is named firepaint.Monkey. If you have several scripts open at once, you can switch between them by clicking on the tab header or press Ctrl + the left/right key on Windows or cmd + the left/right key on OSX.

Where is my navi?

Games are not usually coded with just 10-20 lines. We talk here about at least a few hundred lines of code. And to help you navigate through your code more easily, Monk supports the Code tab in the info box on the right. To practice navigation in a script file a little, here is the next task.

Time for action – navigating to the main() function

Every Monkey game needs a Main() function. To find it, select the Code tab in the info box. There you find two parent nodes. Try to find Main() in one of them. Found it? Good. Click on it. You will see that the code area changed and the cursor jumped to the top line of the definition of the Main() function:

What just happened?

Navigating through a script is very easy. Search for the item you want to jump to inside the Code tab of the info box and click on it. The content of the code tab always reflects the changes inside the code area!

Save… save… save!

One of the first and most important rules of software development is save your code, save it a lot. Remember this and live by it. There is nothing worse than a hard drive failure or a power outage after an hour of coding.

Time for action – saving a script

To save a script, here are some things you have to do

  1. Open an empty script by pressing Ctrl + N in Windows or cmd + N on OSX. Monkey will open a fresh and empty code area for you.
  2. Next, type anything inside it, just anything.
  3. Now, save your script. For this, you should use your mouse and the menu. Click on File | Save as. A dialog opens where you can set the filename and location to save your script to.
  4. Do this and click on Save.

What just happened?

You have saved your first script. Most likely, it isn’t even close to a run-worthy script, but you have learned how to save your creation. Did you notice how the caption of the tab for the code area changed? And also the title bar of Monk’s window? They now reflect the name you gave your script when you saved it.

Projects—bringing in some organization

When you look at the Nav tab of the info box, it’s nice that you can browse through the folders of Monkey and open scripts from there. Good news is near; you can do this with your own code too. That is why Monk supports projects. They become new entries under the initial tree view inside the Nav tab.

Time for action – creating a project

Let’s assume that we want to turn the FirePaint example into a project. For this, you have to create a new project first. Follow the ensuing steps:

  1. Click on File | Project Manager, in the menu. A new dialog will open:
  2. There, you will first see the Monkey project. To create a new one, click on Add Project.
  3. In the following dialog, you need to give your project a name. For now, My firepaint project should be fine. Also select the folder where the previous sample script was loaded from. After you do this, the top of the dialog should look a little like this:

    The bottom of the dialog with fields including sub-version controls is not functional and is probably a relic from Monk’s origins of being the BlitzMAX IDE.

  4. Now, click on OK to create your project.

What just happened?

In the first dialog, there is now a new line with the project title. If you select this line, you could either change the properties of your project or remove it completely. You can close this dialog for now. Another thing you will notice is that, in the info box on the Nav tab, there is now a new project entry with the name you have given before. Browse through this entry and open the scripts from there by double-clicking on the script name. Convenient, isn’t it? Yes, it is. And the cool thing is that this now stays there, even if you close Monk. At the next start of Monk, your new project entry is still there.

The Monkey programming language

To create games with Monkey, you should know a little bit about its programming language and its features. We won’t cover the whole manual here, but will go through some of the most important parts of it. But first, you should write your first script. Without any practice, you say? Right, just like that!

Time for action – Monkey’s Hello World

Here is a version of the famous Hello World script, done in Monkey. You have to start somewhere. You will learn what the starting point of every Monkey app looks like, the Main() function, and how to print some text to the browser. Ok, let’s go!

  1. Start with a single line comment that describes the app: 
    2. 'Monkeys Hello World
  2. Next is the function header for the Main() function, the piece of code that will be called at the start of the app. Every function starts with the keyword Function, then its name, followed by opening and closing parentheses: 
    3. Function Main()
  3. Now, it’s time to print the famous text Hello World. For this, Monkey provides the Print command. And don’t forget to indent the code through the menu or just by pressing the Tab key once: 
    4. Print ("Hello World")
  4. Every function needs to be closed. In Monkey, we do this with the End command: 
    5. End
  5. Now, save your script. The name and folder are not important.
  6. Build and run the script by clicking on the tilted rocket in the toolbar.

What just happened?

Drum roll please…. tadaaaa! You have coded your first Monkey script and just ran it inside the browser. If everything is correct, you will have seen a plain (white) background and then the text Hello World printed on it.

Running your first script in a browser

To start this script, press Ctrl + R for Windows or cmd + R for OSX, to build and run the script. For this, select HTML5 as the target platform. You should see something like this:

Cool, isn’t it? And you did this all yourself.

Packt

LEAVE A REPLY

Please enter your comment!
Please enter your name here