Subscribe to GameFromScratch on YouTube Support GameFromScratch on Patreon
22. August 2012

 

SDK is downloaded and installed.  For some bizarre reason, you need to sign up before downloading the SDK ( which… is freely available in source code form on Github… ).  Once you’ve signed up and signed in, head over to https://dashboard.moaicloud.com/download.php and download it.  Personally I am using the August developer snapshot, because apparently, I am crazy like that.  Once downloaded, unzip somewhere, I went with C:\ because I am a lazy lazy man.

 

So, this is genesis…

 

image

 

Pretty sparse over all.  The docs contain a handful of PDFs, but they appear to be seriously out dated.  MoaiProjectSetup.pdf is certainly worth the read though, it’s got the most technical details that still seem relevant.

 

For now, I simply care about getting a Windows host working, iOS, Mac and Android can come at a later date.  No sense adding an unnecessary layer of complexity right now.  Moai provides a sample Windows host based around GLUT, you can load the source code for Visual Studio 2010 at C:\moai-sdk\hosts\vs2010.  It has already been compiled at C:\moai-sdk\bin\win32 as Moai.exe.  To make life a bit easier, I am going to add this to my PATH environment variable.  This is completely optional, but I tend to find it makes life easier.  To append MOAI to your PATH environment, from a command run:

setx PATH “%PATH%;c:\moai-sdk\bin\win32”

Oddly enough, permanent environment variable changes do not apply to the current session, so you need to exit and start a new command prompt.  Now you can change into the directory of and run one of the samples.  Let’s try that now, open a command prompt and type:

cd \moai-sdk\samples\hello-moai

moai main.lua

 

If everything is configured correctly, you should see:

image

 

Well, that was easy enough, up and running a sample in about 10 minutes including download times.  Until we actually need to extend the functionality of the client, the default host should be good enough.  You may also noticed, there are .bat and .sh scripts in each example directory if you don’t want to bother setting the path to moai.exe.

 

Now to give creating a new MOAI project a shot.  Obviously Hello world seems a sensible enough place to start, in fact I believe it is the law.  Therefore we are going to create a simple application that creates a window and displays “Hello World” centered.  Create a new folder somewhere and create a file main.lua in your favorite text editor.  You need to copy a .ttf file named courier.ttf ( or rename it in the code to match ), I simply copied mine from c:\windows\fonts\. Now enter the following code:

 

MOAISim.openWindow("Hello World", 800,600)

viewport = MOAIViewport.new()
viewport:setSize( 800,600)
viewport:setScale( 800,600)

layer = MOAILayer2D.new()
layer:setViewport(viewport)

MOAISim.pushRenderPass(layer)

chars = 'DEHLORW'

font = MOAIFont.new()
font:loadFromTTF('courier.ttf',chars,120,72)


text = MOAITextBox.new()
text:setString('Hello world')
text:setFont(font)
text:setTextSize(120,72)
text:setYFlip(true)
text:setRect(-400,-300,400,300)
text:setAlignment(MOAITextBox.CENTER_JUSTIFY,MOAITextBox.CENTER_JUSTIFY)

layer:insertProp(text)

Basically we:

  • create a window
  • create a viewport for that window, sized at scaled to 800x600
  • create a new layer and set its viewport to the viewport we just created
  • tell Moai we want to render our layer
  • create a series of chars represent the characters in HELLO WORLD
  • create a font loading from the file courier.tff ( which I stole and renamed from c:\windows\fonts )
  • created a MOAITextbox, set it’s text to ‘Hello world’ and font to our newly created font, at 120 font size and 72 DPI
  • we then flip it, as for some bizarre reason, the default text is inverted, and position it in the center of the screen, relative with (0,0) repesenting the middle of the screen, so our dimensions our – 1/2 x,y to + 1/2 x,y
  • finally we tell the text to draw centered vertically and horizontally within the TextBox
  • Finally we add our textbox to our layer with a call to insertProp()

 

Run it and:

image

 

All told, a little complex for a typical Hello World application, but nothing too outrageous.  There are some oddities, like the inverted text, but as you can see, there was also a great deal of control.  Considering this is an application that will run on many platforms, all told, that wasn’t too painful of an experience, was it?

 

 

As to the SetYFlip() question, there is an answer of sorts here:

One thing to note about “setYFlip.” While all other props in Moai will automatically assume a world style coordinate, a textbox will assume a window style. To get the textbox to render with world style, you set YFlip to true.

Clear as mud? Winking smile

General


21. August 2012

 

Moai is one of those projects that has been drawing my interest for a very long time.  If you have never heard of it, Moai is an open source,moailogo cross-platform game engine written in C++ but scripted using LUA.  The most obvious comparison that comes to mind is to think of Moai as a free open-sourced Corona but that wouldn’t be completely accurate, for a couple of reasons.

 

First, well, it is hard to ignore the open source aspect.  With Corona, if you don’t like what you see, tough.  Hopefully they will support what you want in a future release, but if they don’t you are pretty much SOL.  This is certainly a big deal to larger development houses with C++ resources in house.  It is also appealing to me, as if I can’t understand something from the documentation, I can jump into the source code…  speaking of which, that leads to the second point.

 

Compared to Corona, documentation is sparse to completely non-existent.  Worse still, the community is quite small and there is very little in the way of supporting documentation.  There are a few entry level samples, the documentation on this page and the class reference.  There are no books, few tutorial sites, etc…  Contrasted again against Corona there is this book, plus this and this.  As a technical writer though, this appeals to me.  The less resources that exist on the subject, the more likely people will find what I write! Smile

 

Another big point is the target audience.  MAOI is written for experienced game developers and targeted at the same demographic.  There is no friendly installer, just a zip to extract.  You have to create a native host for each platform your game is going to run on ( although templates are provided ), and what might take one line in Corona might take ten in Moai.  Why is this?  Moai doesn’t really make decisions for you which is a double edges sword.  On the one hand, it is much more flexible ( infinitely if you include the fact it is open source ) than Corona, on the other hand, it is much more difficult.  To put things in the simplest terms possible, if you have no prior game programming experience and want to make an iPhone game, Moai is probably not right for you.  Don’t get me wrong, I am not implying you can’t make a good game with Moai if you aren’t a pro, much as I am not suggesting you can’t make a professional game with Corona, you obviously can.  Simply put, each SDK targets a different user-base, and Moai targets the group that want to get their hands dirty.  Me, I like to get my hands dirty.

 

Another big selling point for Moai is the names that have thrown their weight behind it.  It’s rather a whose who of role models. First dblfineoff, is Tim Schafer of Double-Fine Games. Tim’s prior games is a collection of awesome; Psychonauts, Day of the Tentacle, Monkey Island, Full Throttle and even the recent Costume Quest ( which if you haven’t played it, you are missing out ).  Other than making Kickstarter famous, Double Fine’s incredibly well funded upcoming adventure game is being powered by Moai.

 

Let’s just say, his is a voice that carries a lot of weight.  As does another one, who also reaped the strikeomegabenefits of KickStarter. That would be Harebrained Schemes.  It is possible you’ve never heard of them, as they have only released one game so far, Strikefleet Omega, a very cool RTS for iOS and Android, written of course in Moai.  The fact it is one of the more technically competent games I have played yet on Android speaks well of Moai’s capabilities.  What probably has me most excited though, is the upcoming Shadowrun Returns.  Shadowrun on the Sega Genesis is easily in my top 10 favorite games, perhaps my top 5, so this is a game I am dying to see.  More to the point, it’s the founder of Harebrained Games that really got my attention.  It’s none other than Jordan Weisman.  If there is a template for a successful game designer, this is him.  His past credits include Shadowrun, Battletech, MageKnight, Crimson Skies, Earthdawn and more.

 

So, Moai has quality published games under it’s belt, the support of heavy weights working on two games I am incredibly interested in ( in a time I am not interested in too many games! ), using a technology ( LUA ), that I have been interested in learning for a very long time ( … like, a decade ).  More so, it is young and growing.

 

I think it is pretty much a forgone conclusion I *AM* going to be playing with Moai, maybe even working on publishing a game with it, if my schedule allows.  What I want to gauge is, how many you you are interested in Moai?  If I do a series of tutorials, or probably more accurately at first while I am figuring it out, a diary of my progress/experiences, would you be interested?  For now, Moai and LUA will each get their own tag on this site and I will see where it goes from there.

General


17. August 2012

 

In the past I mentioned and even recommended HTML5 developers give WebStorm a shot, this is the IDE I use personally when working in JavaScript, but I realized I never actually said why.  One of the big reasons is, its just a good solid text editor, with good project management and solid code completion, which is an area most tools fail at.  But one of the biggest reasons is, it gives a rock solid debugging experience… very similar to native code.  This is something that can make JavaScript development a WHOLE lot nicer.

EDIT: I should make it clear at this point, virtually nothing in this guide is specific to WebStorm, you can debug using the Chrome Developer Tools or using Firebug in FireFox. Webstorm however integrates the process directly within the IDE.  The process will change slightly ( different buttons/hotkeys ), but the instructions below basically apply to debugging in browser as well.

 

At the same time it dawned on me… if you don’t come from a compiled code background, you probably don’t even realize what you have been missing!  So, I have put this post together, it will hopefully make the developer experience better for at least a couple of you.  If you are currently debugging using a combination of alerts, console writes and breakpoints in the browser, listen up!

 

First off, you are going to need a project to debug.  I am going to use my most recent tutorial post on creating sprite sheets with Cocos2D if you want to download and follow along.  Of course, any project will work, but that particular project has an interesting… quirk that will come in useful.  Next, to get the most out of Webstorm debugging, you should also have Firefox installed.  If you are doing web development, I assume you do already anyways.  Alright, let’s get started.

 

Open the project up in WebStorm.

Now we want to create a debug profile.  In Webstorm, select Run->Edit Configurations…

image

 

In the resulting dialog, click the + icon:

image

 

Choose JavaScript Debug –> Local

image

 

On the left hand side, a new entry should appear.  Select it and file in the form like follows.  Navigate to your index.html or root HTML file, select Firefox from the browser dropdown and name it whatever you would like:

image

Click Apply then Ok when complete.

 

You are now ready to debug. 

Select Run-> Debug ‘Your App’ or press Shift + F9

image

 

Voila, or app should load up in our browser:

image

 

Now what we want to debug is debug the activity that occurs when the user presses a key.  Go back over to Webstorm, open MyFifthApp.js , locate the line with onKeyDown: function, and select the line right below it.  Here we want to set a breakpoint, which will cause our code to stop when the breakpoint is hit.  Set a breakpoint by hitting CTRL+F8 or selecting Run->Toggle Line Breakpoint.  You will see a red dot once your breakpoint is set, like so:

image

 

With the breakpoint set, now flip back to Firefox and hit a key.  This will immediately trigger the breakpoint, pausing your programs execution.  Now if you head back to Webstorm, there will be a wealth of information available to you:

 

image

 

There is quite a bit going on here.  Our code is currently paused executing on our breakpoint.  You can’t see it in the screenshot, but I am hovering my mouse over the e parameter, and it is popping up a tooltip showing its current value.  When debugging, you can interact with your code in a lot more detail.  Now lets take a closer look at the different bits of the interface here.

 

At the bottom left you have a very important window:

image

 

The toolbar on the left hand side can be used to resume program execution, stop completely, or to run from the beginning ( currently grayed out ).  When you are done with a breakpoint, you hit the resume button to continue your program execution.  The two buttons below on the toolbar are for managing breakpoints ( you can end up with a lot of them quickly! ), as well as to mute a breakpoint, which causes it not to fire DURING THIS DEBUGGING SESSION.  The next time you run your program, your breakpoint will be re-enabled unless you remove it.

 

To the right is something traditionally called a callstack, and it’s extremely useful.  Basically, it’s a hierarchy of the last functions called.  So in this case, you can see that our current ( anonymous) method inside MyFifthApp, was called by an anonymous method in CCKeyboardDispatcher, which was called by a different method in the same file.  Clicking the value in the callstack will immediately bring you to the line of code, where you can inspect the current value of any variables there.  Often the error actually occurs further up the callstack, so being able to trace backwards through a programs execution is incredible handy.

 

Next is an incredibly valuable toolbar, that controls your program’s execution while debugging.

 

image

These three are the most commonly used.

Step Over will cause your code to jump to the next line of code in the same file.

Step Into will jump into the code that you are currently on.  If it is a function for example, it will jump into the code for that function, even if it is in a different file.

Step Out backs you out, think of it like undoing a step into, you basically jump back into the calling code.

You use these 3 buttons ( or their hotkey/menu equivalents ) to run through your code as you debug.  There is also an option of run to cursor, which will run to whatever line of code your cursor is currently active on ( clicked on, not just hovering over ).

 

The program will update as it executes, so keep in mind, variable values will often be garbage, until the line they are allocated on is executed.

 

Next up is the Variables window.  Often called “Locals” in other IDEs:

image

 

This is a list of all locally declared variables.  Notice how indexAsString and prevPrefix are both shown, but valued as void?  This is because they haven’t been executed yet.  Lets take a closer look at that.  In WebStorm, locate the line this.removeChild(this.sprite), left click it to focus your cursor, then select run to cursor from the toolbar we just discussed:

image

 

As you can see from the blue line, or program execution continued to that point.  More importantly, if you look in the Variables window, they will now have values, since they have executed in the debugger:

image

 

You may also notice the + sign next to this.  That is because it isn’t a single value variable, so it is composed of other values.  Clicking the + icon will give you more details about the contents of that object:

image

 

Of course, often you want particular information about a specific variable.  This is where watches come in.  Say we want to see more details about this.sprite. In your code window, select all of this.sprite, right click and select Add To Watches.

image

 

Now details of that variable will be available in the watches window, at least, when it is in scope it will:

image

 

You can watch a number of variables at the same time.  Watches are especially useful for watching long lasting variables, like Director or when working in a browser, document.  Just like in the variables list, you can drill down to get more information on child values of the watched variable.

 

Another incredibly handy ability is the expression evaluator, invoked with this button:

image

 

The expression evaluator allows you to run any arbitrary code and see the value.  You can used it for example, to see what a function value would return.  Here for example, I am examining the results of calling this.sprite.getPosition().  Nicely, the expression evaluator has full code hints.

 

image

 

 

 

Finally, sometimes you want to debug code that is running from a server.  This is especially true if you are doing a number of AJAX or socket requests.  You can do this with Webstorm as well, with a few requirements.  First, you need to have a copy of the code installed locally, next you need to use Firefox for this part.

 

Let’s try it with our sample project, which exists on my servers at https://www.gamefromscratch.com/downloads/cocos2d/run/MyFifthApp/index.html while you can download the project source code at https://www.gamefromscratch.com/downloads/Cocos2d/zips/MyFifthApp.zip.

 

First we need to create a new remote debugging session.  In WebStorm, select Run->Edit Configurations…  Hit the + icon and selection JavaScript Debug->Remote.

image

 

Fill the resulting dialog out like so:

image

 

Click Apply then OK. Now everything else works exactly like it did before, with one exception.  Select Debug MyFifthApp Remote.

When you run your code and it hits a breakpoint, it will need you to tell it what file on the remote server matches the file the breakpoint is in.  Since we have a breakpoint set in MyFifthApp.js, when we run it, we will see:

 

image

 

Simply click the Set link, and a dialog will appear:

image

Simply type the URL of the remote file.  You only need to perform this once per file you set a breakpoint into.  You of course can perform this setup step in advance if you want.

 

Now you can locally debug code that is actually running on a remote server.

 

I hope you’ve found this guide handy.  In IDE debugging can make life a thousand times easier. 

General Programming


11. August 2012

 

I just finished updating all of the cocos2D source code to the newest beta code ( as of today anyways ).  You can read about what was involved here or you can download the source code below.  I will be updating the text of each tutorial shortly, but in the meanwhile, you should be able to puzzling things out using just the source, the process stays pretty similar over all, even though there were extensive changes to the code.

 

Project Source Code

 

I will post again when the text of the tutorials are updated.

 

A quick question to all of you, is there any value in keeping the old tutorials and link to the new ones, or should I just overwrite the existing tutorials?  I can’t really think of a use for outdated tutorials, unless of course someone wanted to keep working with their old code base I suppose.

Programming General


25. July 2012

 

This post is a table of contents of sorts for the recently completed series documenting the creation of a simple game (web application) for my daughter.  Although the game is quite simple, the application itself covers quite a bit.  There are a ton of tutorials on the internet about the various individual pieces I use, but very few illustrating putting them all together to create a complete app.

 

In this tutorial, we cover:

 

Part 1 -- Node and cocos2D

Setting up a NodeJS server, that is able to serve both static and dynamic content using express.  By the end of this part we are successfully hosting a cocos2D application.

 

Part 2 -- Deploying to Heroku

This part covers deploying your Node application into the cloud, using Heroku’s completely free tier.  This part is optional, you can run your application anywhere you want so long as Node is supported.

 

Part 3 – The guts and plumbing

This part is the heart of the application itself.  It illustrates how to upload and serve data from a Node server.  The upload portion is managed using the YUI framework from Yahoo.  This is how you could make a more traditional web application using JavaScript and illustrates.

 

Part 4 – The Game

This part creates the actual “game” if you can call it that.  It illustrates creating a simple cocos2D HTML game that interacts with the NodeJS server side.

 

Part 5 – Adding a Database to the mix

Losing all your data every time Node restarts or Heroku feels like erasing them gets old quick, so I added a database to the mix.  In this case I used the CouchDB NoSQL database, hosted on IrisCouch using the Nano library.

 

Part 6 – Phonegap?

Ok, this part is actually TBD.  I am in the process of porting to PhoneGap, to bundle this application as a native phone application.  Will update here if it was successful with another tutorial post

 

 

 

The Results

 

You can see the application running here

 

It is pretty simple over all.  Choose a pair of images using the dropdowns at the top.  Then you can click to cycle through the various images.  Additionally, you can click the settings button, which will bring you to the settings app we created in Part 3.  Here you can upload new images and manage existing one.   Warning, anyone can upload images, so I take no responsibility for what they might contain!  Anyone can also delete images at any times, so if it is empty or your images disappear, this is probably why.

 

Finally, I have pushed the complete source tree up to GitHub, which is available here.

General


AppGameKit Studio

See More Tutorials on DevGa.me!

Month List