Friday, October 19, 2012

Reluctant Rogue - HTML5 and leaving C#

I've wanted to get back to the Roguelike game that I spent time working on a couple of years ago. The working title for the game is "Reluctant Rogue". Since then, I have stopped coding for my day job, and have picked up much more JavaScript knowledge. I never wanted to make the game platform dependent, so I decided to start over and rewrite the game in HTML5/JavaScript.

Why HTML5/JavaScript? For one, I really like the way JavaScript and jQuery interact with elements on a page. I recently worked on digitizing a board game that some friends of mine created some time ago (You can find it at here). I wrote it entirely in HTML and JavaScript/jQuery - and it was a very cool experience. Nothing to compile, cross-browser compatible, etc. Making a game in JavaScript also has an awesome "blending of the worlds" between "drawing" and "logic". I don't have to store a separate array of the game pieces, with their locations and rotations. Instead, I use jQuery to move the pieces around on the board. This literally updates their onscreen position, rotation, etc. Want to know where a piece is? Just look it up on the board - The data is all within the pieces themselves! This way of coding flows well with functional programming and is honestly way more fun to write.

RR is a little more complicated though, involving AI, a camera, etc. I don't want to rely on CSS to space out the dungeons, so I decided to use HTML5. The canvas allows you full control of the position of the art elements.

Plus, there are some kickass JavaScript libraries out there, such as processing.js and of course, jQuery!

Finally, I don't know any HTML5. It seems like the perfect time to learn it. I also need to improve my JavaScript knowledge beyond the level of "script kiddie" - making full use of advanced JavaScript functions.

My Visual Studio license also expired recently... totally unrelated!

Saturday, February 11, 2012

Lessons from using JSIL to convert C# to JavaScript

So I big reason I am still considering using C# is that there is a tool out there to convert C#/XNA games to JavaScript. This seems like the best of both worlds - game can be maintained in readable JS and I can update code in the language I am most comfortable with. However, JSIL is open-source with zero documentation. Recording my lessons learned here:

Getting Started

Assumptions:

  • You have Visual Studio 2010 and understand how to make .exe files for your programs
  • You have a basic understanding of SCM systems
  • You have programmed before, and are somewhat technical

Getting the source code:

  • Download Git here. Don't worry - we just need the full source
    • On installing, be sure to opt-in for the Command Line client (Windows)
    • Open the command line client. create a folder for the project and navigate there (Linux commands 'cd', 'mkdir' etc. work here)
    • Clone the JSIL repo recursively, including sub-modules:
    • Congratulations! You have the source!

Generating the JSIL .exe file

  • Open the JSIL.sln solution file
  • Rght-click on the solution file in the Solution Explorer
    • Select "build all"
  • the JSILc.exe file will be placed in the bin directory of the project

Using the .exe file to convert C# to JavaScript

  • The JSILc.exe file needs to be run from the bin directory - i.e. you can't move it around (seemingly)
  • Open a command window in this directory
    • Go back one directory, hold shift and right click the folder. You should see an option to open a command window there
    • You will have to run this .exe from the command window.
  • Bring your .exe file that you want to convert into the bin directory
  • "apply" JSILc.exe to your .exe. In the command prompt, type the following (remove the <> signs):
    • JSILc.exe <yourexe.exe> --out=<destination directory>
  • Congrats! You have converted source.

This is where I'm stuck - I get errors when I try to run the .js files that I can't resolve:
'JSIL is undefined'
I also don't really know which .js file to "run" - manifest.js? There isn't much help here.

Things to avoid

  • Do not assume you can download the source from GitHub - you need to do a full recursive clone using Git to get all the right references for JSIL
  • Do not move JSILc.exe around - it seems to fail outside of the build output directory.