4. January 2013


As you can see by the volume of posts here on GameFromScratch.com, I took a bit of a holiday during the, um, holidays.  During that time I did do a fair bit of reading.  One book that came up on Safari is Pro HTML5 Games  ( Safari link if you also subscribe ) that got my attention.  Now, there are a ton of HTML5 game books on the market, of which I’ve read quite a few, but this one is kinda special.  It actually shows how to create a Real Time Strategy ( RTS ) game in HTML5.  I don’t believe there has been a book on creating an RTS since the title Real-Time Strategy Game Programming way back in 1999.  A book I owned by the way and it was awesome… or at least according to my memory of 1999 it was.


Anyways, I haven’t completely finished the book, mostly jumped in and read a chapter here and there, but it is certainly an interesting title.  When I finish it, I might do a proper review.  Unlike most HTML books, this one is entirely about creating a single game… obviously an RTS title.  As a result, it covers pretty much every step along the way, as you can see from the detailed Table of Contents below:




Chapter 1: HTML5 and JavaScript Essentials

The canvas Element
The audio Element
The image Element
Animation: Timer and Game Loops

Chapter 2: Creating a Basic Game World

Basic HTML Layout
Creating the Splash Screen and Main Menu
Level Selection
Loading Images
Loading Levels
Animating the Game
Handling Mouse Input
Defining Our Game States

Chapter 3: Physics Engine Basics

Box2D Fundamentals
More Box2D Elements
Tracking Collisions and Damage
Drawing Our Own Characters

Chapter 4: Integrating The Physics Engine

Defining Entities
Adding Box2D
Creating Entities
Adding Entities to Levels
Setting Up Box2D Debug Drawing
Drawing the Entities
Animating the Box2D World
Loading the Hero
Firing the Hero
Ending the Level
Collision Damage
Drawing the Slingshot Band
Changing Levels
Adding Sound

Chapter 5: Creating the RTS Game World

Basic HTML Layout
Creating the Splash Screen and Main Menu
Creating Our First Level
Loading the Mission Briefing Screen
Implementing the Game Interface
Implementing Map Panning

Chapter 6: Adding Entities to Our World

Defining Entities
Defining Our First Entity: The Main Base
Adding Entities to the Level
Drawing the Entities
Adding the Starport
Adding the Harvester
Adding the Ground Turret
Adding the Vehicles
Adding the Aircraft
Adding the Terrain
Selecting Game Entities
Highlighting Selected Entities

Chapter 7: Intelligent Unit Movement

Commanding Units
Sending and Receiving Commands
Processing Orders
Implementing Aircraft Movement
Defining Our Pathfinding Grid
Implementing Vehicle Movement
Collision Detection and Steering
Deploying the Harvester
Smoother Unit Movement

Chapter 8: Adding More Game Elements

Implementing the Basic Economy
Purchasing Buildings and Units
Ending a Level

Chapter 9: Adding Weapons and Combat

Implementing the Combat System
Building Intelligent Enemy
Adding a Fog of War

Chapter 10: Wrapping Up the Single-Player Campaign

Adding Sound
Building the Single-Player Campaign

Chapter 11: Multiplayer with WebSockets

Using the WebSocket API with Node.js
Building the Multiplayer Game Lobby
Starting the Multiplayer Game

Chapter 12: Multiplayer Gameplay

The Lock-Step Networking Model
Ending the Multiplayer Game
Implementing Player Chat



If this book sounds interesting, be sure to check it out.  Keep an eye here for a possible upcoming review.

General, Programming

21. December 2012

I am not sure if a recent release has made it worse or it's always been this annoying, but Chrome does a lousy job of refreshing changes to JavaScript files.  It used to be you simply hit CTRL+F5, or CMD+F5 on MacOS to for the browser to reload with changes, but this simply doesn't work with Chrome, which is really really irritating when developing in HTML.


One option is to use a cache breaker, but this is an irritating process.  Basically you just add a random number to the end of your script inclusion script.


So instead of:

<script src="MyScript.js">

You do

<script src="MyScript.js?Num=21421423asdfsdf2">


Then you basically change the magic number every time you update the script, which WILL result in the new script being reloaded regardless to the browser settings.  In development, this is still a gigantic pain in the arse.


Fortunately there is a solution.  On a PC hit CTRL+SHIFT+i or on a Mac hit CMD+Option+i, to bring up the developer tools.  This will bring up the developer tools, now locate the gear icon in the bottom right corner:

Google Chrome Developer Settings Icon


Then under the General Tab, select Disable cache:




Voila, much more sane JavaScript development under Chrome.




24. November 2012


Looking for the perfect gift for the geek who has everything?  Well, Learn Lua for iOS Game Development is coming out just before Christmas , plus it’s on sale for 25 bucks.  ( What’s with pre-release books already being on sale??? ).



Alright, hundreds of computer texts are released every year, dozens of them about game programming… so why the interest in this particular book?  You may remember a while back I put together  Battle of the Lua Game Engines: Corona vs. Gideros vs. Love vs. Moai and I actually enjoyed working with all three technologies.  Well this book covers using all three SDKs as well as Codea which I hadn’t heard of until this point.



Obviously the book isn’t going to cover any of those technologies in detail, each one could probably merit it’s own book.  It should however teach you the required bits of Lua and expose you to a little more detail than my comparison.  Lua is a wonderful little language, one you should certainly look into if you haven’t already.  This book may just be the right introduction, it releases on December 17th.


Here is the Table of Contents of Learn Lua for iOS Game Development:

Part 1 – Lua

1. Introduction to Lua
2. System Libraries
3. File IO
4. Math
5. Strings
6. Threading
7. Tips and Tricks   

Part 2 - Frameworks

8. CoronaSDK
9. Gideros Studio
10. MoaiSDK
11. Löve
12. Codea

Part 3 - Libraries
13. Libraries
14. 3rd Party Apps   


Most APress books end up on Safari Books Online, so expect a review shortly after this book is released.  It does strike me a bit odd that they would limit the title to iOS games, when Corona, Gideros and Moai all support Android as well ( without change in most cases ) and I don’t believe Love supports iOS at all…?  So if you are interested in Android development, don’t let the title put you off.

General , ,

13. November 2012


Almost exactly one year ago today, I wrote this post discussing the impact a change in leadership at Microsoft had on all our lives.  The TL;DR version was, two senior VPs at Microsoft went head to head over the future of the company, one lost ( J Allard, father of the Xbox ) and one won, Steven Sinofsky.  Well, as of today, it is looking like Microsoft picked the wrong horse!


Simply put, after shipping Windows 8, Steven Sinofsky announced his departure.


This can have a pretty profound effect on future directions at Microsoft.  The fallout from J Allards departure were pretty massive.  From a developers perspective, lets see…  XNA has been axed.  Windows Phone 7.x has been axed.  Silverlight has been axed.  The Courier tablet was axed ( imagine the difference the world would have seen if Microsoft entered the tablet market *before* the iPad??? ). We now have Windows 8 as the target for every device, the Windows Store ( I have a feeling this one is an accountants decision, not Sinofsky’s ).  There have even been some micro-level changes as a result.  We have the increased focus on C++ and JavaScript at Microsoft, and the decreased focus on .NET.


What’s going to come next?  Who knows actually… and that part is kind of scary.  Agree with his decisions or not, Sinofsky got stuff done and had vision.  Is there a leader remaining?  It’s certainly not Ballmer, that man has been making epically stupid knee jerk decisions since taking the helm.  ( 34 billion for Yahoo?  8 billion for Skype?  )  I really don’t know what is coming next, but I will tell you one thing… up until about 8 months ago, I held Microsoft stock.  I sold it and if I held it today, I would be on the phone to my broker now.


That’s the shame too, as Microsoft has managed to recruit some of the best A-list programming talent in the world.  Too bad they can’t do the same thing for their management.  Then again, you aren’t going to fix management at Microsoft when you have an idiot at the helm… they tried that once bringing Ray Ozzie in and Ballmer pushed him out.

General, Totally Off Topic

9. November 2012

I recently hosted a guest tutorial post on using Moscrif, a new Javascript based cross platform, game focused development environment.  Thing is, I myself haven't really had a chance to check out Moscrif myself.  In the past I did try out a Moscrif Logosimilar environment Appcelerator Titanium, which for a couple of reasons, I chose not to keep using, many of which aren't actually Appcelerator's fault (the no other word for it, complete crap Android emulator, was the biggest drawback). 


Moscrif on the other hand is a bit different.  Like Appcelerator, it's cross platform, mobile focused, JavaScript based and comes with it's own IDE.  Unlike Appcelerator it ships with a simulator you can use for stage 1 debugging, removing the biggest headache.  Perhaps most important of all for readers of this site, Moscrif is also game focused while Titanium is not ( yet ).


So, I've decided to take a bit closer look at Moscrif, over a couple of posts.  First off, this is *not* a review.  I certainly haven't put enough time in with Moscrif to even consider reviewing it.  Consider it instead a tour of features available as well as my initial impressions.


So, what then is Moscrif anyways?

The above description is pretty much accurate.  Moscrif is a cross platform JavaScript based IDE/language/library for creating mobile applications with a focus on games.  If you've ever used Appcelerator Titanium, you've got a pretty good idea of what you are getting here, just with a more game oriented focus.  The tools run on Windows, Mac and Linux, while you can target iOS, Android and oddly enough… Bada, with a single code base.


Installation process

Moscrif install was easy enough, but theres a catch.  You need to create an account (which you can do here), and like the Corona SDK and Appcelerator, you will need to log in to do anything, making an always on connection pretty much a much.  Unfortunately this login process is required even if you are just using the basic version.

Otherwise the install process is pretty much a no-brainer.  In my case I am using Mac OS.  You simply download the package and run a pair of installs.  Moscrif depends on a particular version of the Mono framework, which you need to install first.  It is included in the downloaded package, so simply download, run the Mono installer then the Moscrif installer, that's about it.  You can download (and register) right here.

Once you've finished installing, the first time you run Moscrif you will have to log in with your Moscif account.


A first look at the IDE

Load up and log in to Moscrif and you will be greeted by the screen:

IDE Screenshot


As you can see, it's a pretty complete and traditional IDE.  Your project management window is on the left, your console and debug windows are across the bottom and the remains of the window is for code editing.  You can use the icons at the top right to toggle sections of the IDE on and off.  I do have one immediate annoyance though, I am running on MacOS and there is no ability to maximize the window, or whatever that feature is called.  Considering that single feature is what makes Mac tolerable to me, hopefully support is added soon!


Hello World

To get a feel for the application, let's create an extremely simple Hello World project.

To get started, select File->New->New Project.

In the resulting dialog, choose 2D Game and name your project, I went with Hello World. Like so:



Now in the next dialog, keep Game2D selected and choose Finish.


It will have created a project for you like the one pictured to the left.


Main.ms is the file we are most interest in, it is the main entry point of your project.









Now replace the code in main.ms with the following:

include "lib://game2d/game.ms"


class HelloWorld : Game {

    function start()



        this.paint = new Paint();

        this.paint.textSize = 72;



    function draw(canvas)



        canvas.color = 0x000000ff;

        var (w,h) = this.paint.measureText("Hello world")


        canvas.drawText("Hello world",System.width/2 -w/2,System.height/2 -h/2, this.paint);





new HelloWorld().run();


As you can see, Moscrif is very similar to JavaScript with some obvious extensions, such as class or multiple return values.

Now let's run our new application, which brings us to...


The Simulator

Across the top of our screen are the simulator controls:



Simply click Run, and the iPhone4 simulator will run.  Voila:



You can control the Simulator with the following hotkeys, although the rotation keys don't work if you don't support landscape changes in code.  I also had a bit of a fight getting F11 and F12 working on Mac, but that is more an OS issue than a Moscrif issue.


Operation Mac OS Linux Windows Moscrif symbol
Take screenshot F12 coming soon F12  
Rotate left F11 F11  
Rotate right F11 F11  
Left functional key F1 F1 #left
Right functional key F2 F2 #right
Send / Green / Talk F3 F3 #send
End / Red F4 F4 #end
Back Backspace Backspace #back
Ok / Centre key / Confirm Return Return #ok
Volume Up F6   #volumeUp
Volume Down F7   #volumeDown
Camera F5   #camera
Power     #power
Menu F8   #menu
Home F9   #home
Zoom In Cmd + (=) Ctrl I, Ctrl +  
Zoom Out Cms - Ctrl O, Ctrl -  


As you can see from the display options, there is a decent number of profiles pre-configured.



I did run in to a few issues, when I switched from Iphone3 to iPad, then implemented screen rotation, only a 480x320 portion of the screen was rendered.  That said, having a simulator layer massively improves turn around time, especially when working on Android where the emulator is pure garbage.



The simulator is nice, but at the end of the day you are going to want to run on an actual device.  That process is actually quite simple.

Simply select the menu Project->Publish

The following dialog will appear:

Publish Dialog



Select your OS as a tab at the top, click a checkbox beside a skin and click the Publish button.  You can totally tell a programmer wrote this dialog… Reset Matrix?  Really? ;)  Coincidentally Reset Matrix is simply De-select, if you are curious.

After clicking Publish, Moscrif will churn away for a little bit and a Finder/Explorer window will pop up with your APK file ready for deployment.  I have to admit, this process is quite impressive, as it doesn't require you to install the Android tools, mess with any environment variables or any of the typical fun.  If you are just starting out, this is about the easiest way to generate an APK file I've ever seen.  Coincidentally, the APK was about 4MB in size, which is pretty impressive.  When using Titanium, a Hello World measured in closer to 10MB.

There is however a downside (one Appcelerator Titanium shares), you can't currently debug on device, which sucks.  You can log/trace back to the IDE as your program runs, but that's it. There are a whole class of bugs, especially on Android, that only express themselves on an actual device, so this can get a bit annoying.  Let's hope the simulator does a very good job of, well, Simulating.  Fortunately, on device debugging is a very near term item on the roadmap of features.  Even more confusing, it doesn't appear you can debug in the simulator either, other than debug logging.  I have become so used to being able to set breakpoints and step through code, it feels like a major omission when I cant. Hopefully this functionality gets added, at least to the simulator. Or perhaps I simply overlooked the functionality somewhere.


Other stuff and closing thoughts

The IDE is fairly easy to come to terms with.  What you see is pretty much what you get, there aren't a hundred menu items or nested dialogs, and there really doesn't have to be.  The code editing tools are pretty impressive, with good legible errors displayed in realtime.  There is code completion, it's quick and appears to work exactly as you would expect it to. Otherwise it's a fairly barebones but functional code editor.  There is smart tabbing, find/replace, code suggestions/completion, hover-over code tips and code folding and thats about it. For more advanced editing, such as refactoring, you need to move to a more dedicated text editor.  Truth is, in 99% of occasions, the IDE is a perfectly capable and even enjoyable place to edit your code.

Next is the area of support and community.  Let me start with the bad, community.  I am not saying the community is bad, more… missing.  One of the downsides of being a fairly new product is the lack of information online.  When you run in to a problem on Moscrif, there isn't yet a large community to turn to and Google won't come to save you.

Now, the good.  Moscrif's documentation ROCKS.  It staggers me how good of a job they have done.  Theres a pretty good step by step documentation that walk you through many of the features with code examples.  Where Moscrif really shines though is the reference materials. It's comprehensive, complete, timely and almost always comes with a code sample.  The reference material goes a long way to minimizing the lack of community…  you don't have as many people out there to answer your questions… but you have such great documentation that you don't really have any questions in the first place!  If you are middleware publisher and want to know how to do documentation… look no further!

I haven't really gotten the chance to really dive in and code.  That said, what I saw in my initial inspection certainly have my interest piqued, so I will be looking at the code side of things shortly.  So stay tuned for a more detailed hands on with the code in the future.  I am impressed by what I've seen so far.



  • it's JavaScript based
  • no external dependencies. No need to install other tools or SDKs. Fastest way I've seen to build an Android app yet
  • small executable size for the type of tool it is
  • EXCELLENT reference materials
  • all in one, easy to get started, reasonably complete
  • simulator makes for fast dev turn around times
  • JavaScript language enhancements that fix some of JavaScript's warts
  • Fast OpenGL based performance


  • it's JavaScript based 
  • lack of online presence, forum software is terrible and finding information not in the documentation is difficult
  • internet connection required
  • debugger needs improvement and basic debugging features ( breakpoints, inspection, etc ) added
  • it's young and relatively unproven 


Stay tuned for a later post when I look at Moscrif from a coding perspective.


General, Programming , , ,

Month List