Learning TypeScript by Writing a Game

Want to learn a new programming language?  Tired of the usual Line-of-Business tutorials? Then write a game! I’ve always said that the best way to learn a new language is to write a game with it.  You’ll come across many problems when writing a game that you just won’t experience by writing an app that selects product items from a customer’s order.

That’s what I did recently when I wanted to learn TypeScript.  I decided to write a web-based version of PacMan.  This post describes a bit about my goals.  There’s nothing technical here; I may, at some point, describe the internals of the game and share the code.

My goals were to learn TypeScript and end up with a game that looked and played similar the original.

Here’s some comparison screenshots:

Arcade (Mame)

TypeScript

Arcade
TypeScript

Whilst learning the language, I didn’t want the overhead of also learning a game framework, so I chose to use the HTML canvas directly.  This worked out well as the canvas is very simple to use.

The feedback cycle with the canvas is really quick:  do the code changes and refresh the browser to see the results.

I used a combination of Visual Studio Code & node, and Visual Studio (2017) with IIS.  I found debugging with Visual Studio 2017 easier than with Visual Studio Code (and of course, I also had ReSharper which works quite nicely with TypeScript although it’s not quite as fast and robust as it is with C#).

I found it quite easy to pick up TypeScript, probably because of its similarities with other C based languages.  Like most languages, it’ll probably take years of use to master all of its nuances (my familiarity with the nuances of C# came from using it for years, and also from reading the fantastic More Effective C#).

In fact, I found that it was very quick and easy to get up and running in TypeScript.   This was both good and bad:  good because I could concentrate on the game more and worry less about the language, and bad because I could concentrate on the game more and worry less about the language!

There’s a fair bit to PacMan and I wanted mine to be as close to the original as possible.  This included things such as:

  • Everything has a different speed and those speeds vary depending on level (and where you are in the level). PacMan travels at a different speed to the ghosts (initially, a very small difference), but later levels the difference increases.  PacMan’s speed changes when he’s eating pills, which is barely noticeable unless a ghost is 5 pixels from your rear!
  • Cornering – Related to the different speeds of things is the technique of ‘cornering’: PacMan can gain a very slight speed increase over the ghosts by selecting the direction a couple of pixels before the turn:

This is very subtle but is critical in later levels; to evade faster ghosts, head to as many corners as possible until the ghost pattern changes (see below) – each corner gives PacMan a couple of pixels advantage of the ghost

  • Ghost patterns: ghosts are either chasing PacMan or returning to their ‘home corner’.  Every level has a different duration to the patterns.  I used this page for all the timings in the game and this page to understand where the ghosts should go.
  • BUGS! There are a few bugs in the original PacMan.  As far as I know, I replicated all but one bug (the kill screen bug) (but I’m sure I introduced a few of my own to make up for it!).  Bugs deliberately programmed in include the ghost house bug (where it’s possible to keep 3 ghosts from entering the maze for the whole level), and the bug where ghosts can (very rarely) change direction just before they eat PacMan.
  • Ghost eyes: ghost’s eyes look at where they’re going next. If they’re heading for a T-junction, they’ll either look left or right just before they get there.  If you’re very quick, you can use this to your advantage.  This is very subtle.  I’ve played PacMan for years and only recently discovered this.
  • Cutscenes: These are intermission screens that appear after certain levels.  They tell a ‘story’ that reveals the true identity of the ghosts!

I found that the game itself was only half the work.  I wanted it to run on as many platforms and devices as possible (PCs, phones, tablets).  A fair amount of work, after the game was finished, went into things like:

  • The loading screen to show the progress of script and asset loading
  • Audio issues – sound played on the PC but didn’t play on mobile devices. I ended up using the super Howler library
  • Control Panel – needed a control panel where users could ‘insert coins’ and select the number of players by clicking/touching (during development it was all keyboard based)
  • Touch/swipe – needing to handle touch/swipe correctly for tablets and phones
  • Sound – not playing on mobile devices until touched

Overall, I think it was a good idea to write a game to learn TypeScript.  Aside from the extra tasks involved after finishing writing the game, it was a quick way to learn the language with the added bonus of being able to visualise progress.  Click here to play.

Announcing a new version of the Gleed 2D XNA tool

I’ve spent some time over the Summer and Autumn of 2011 rewriting the Gleed 2D tool.  This is a tool for editing levels for 2D games and is a very popular tool in the XNA community for games running on XBox and Windows Phone.

Most of the changes in the new version are under-the-hood.  The biggest change has been to make it have a plug-in architecture.  There has also been a few UI changes though; here’s some screen-shots.

The original tool before being re-written:

gleed-original

and here’s the new version:
new-annotated

 

The main reason for rewriting the tool was that I wanted to add more features to it but found that it wasn’t easy.  It wasn’t easy because it was originally written to just handle the basics needed for creating and editing levels.

The features that I wanted to add were for the next version of my game (video here). I wanted to include lighting and shadows and  I wanted to design these on the canvas.

Instead of shoe-horning my changes into the original Gleed 2D source, I decided it’d be best to rewrite it and change it to a plug-in based tool.

So, now everything is a plug-in.  The basic shapes (rectangle, circle, path) and textures are now plug-ins.  Lighting (lights and shadows) is now a plug-in.  There’s also a plug-in for simple ‘behaviour’.

Here’s a quick video showing how to use the basic shapes and textures:

Basic shapes and textures

Here’s a short video showing lighting:

Lights and shadows

and lastly, here’s a short video showing simple behaviours:

Simple behaviours

The tool is still currently a bit rough.  There’s various bugs that need to be fixed, but none of them stop the tool from doing what it was designed to do.  The project is now quick big, so I’m hoping that the community will jump in and add/fix stuff.  I’d like to see plug-ins for physics and particle systems.

Feel free to download the source and play around.

A fast way of converting C# enums to strings–and back again.

I recently needed a fast way of converting lots of enums to strings (and back again).  I needed to do it very quickly.  ‘Enum.Parse’ just wasn’t fast enough.

I discovered there was no ‘enum mapper’ in C#, so I knocked up this little class.  It uses reflection just once when it comes across a new enum.

It’s compatible with .NET 3.5 too.

Handy use of extension method on a bool

I don’t like to overuse if/else statements.  I really dislike seeing code like this:

I just had an idea about using extension methods so I can write this instead:

and here’s the extension method:

Nice or not? I think it reads a bit better (for single line expressions anyway).

A tool to switch project files between using Visual Studio 2008 and 2010

Update: the source is now on GitHub

Visual Studio 2010 is almost here. Visual Studio 2010 (the release candidate) is here.

 

I’ll describe the problem before I describe the tool: You want to use the latest version of Visual Studio but you don’t want it to modify all of your projects and solutions because you’ve got other team members who don’t want to (or can’t) switch to 2010.

 

A serious problem indeed. If only you could you run a tool to update all of you project files to 2010, do your changes in Visual Studio 2010, then switch all projects back to 2008 format before checking in.

Well, here’s a command line tool to do just that!

It’s very easy to use: run it from the command line, give it a folder name, and tell it whether you want all your projects and solutions under that folder to be either 2008 or 2010 format. For example:

SwitchVsVersion c:\temp\MySolution 2010
SwitchVsVersion c:\temp\MySolution 2008

As a bonus, you can also tell it to change all your target frameworks to either .NET 4 or .NET 3.5. For example:

SwitchVsVersion c:temp\MySolution 3.5Framework
SwitchVsVersion c:temp\MySolution 4.0Framework

Binary here. Source code here. Here’s a test solution with lots of different empty projects to try it out on too.

 

Disclaimer: this is a noddy little tool that may not work properly on your projects and solutions. I’ve tested it on quite a large WinForms solution and it worked fine. I’ve also tested it on quite a variety of projects including C# and VB WinForms, Web Apps, Libraries, WPF Projects, and WPF Libraries. The only one it doesn’t do is C++ projects (which is a coincidence, because I no longer do C++ projects either). Be sure to back up your stuff before you use this tool! Terms and conditions apply.

Update: Thanks for the feedback. As requested, the source is covered under the WTFPL. Do what you want with it:

DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE

This program is free software. It comes without any warranty, to the extent permitted by applicable law. You can redistribute it and/or modify it under the terms of the Do What The Fuck You Want To Public License, Version 2, as published by Sam Hocevar. See http://sam.zoy.org/wtfpl/COPYING for more details.

Updated: Code Formatter Plugin for Windows Live Writer

This plug-in formats and highlights code. Version 2.0.0.3 can be downloaded here. Keep reading for more info.

As well as a few bug fixes, this release includes the following features:

· Use different formatting engines such as ActiPro (Insert formatted code), and SyntaxHighlighter (Insert highlighted code)
· Dozens of languages, including PowerShell, MSIL, Pascal and XAML
· Live formatting of code using the superb ActiPro code editor.  ActiPro very kindly donated the license.
· The ability to output either highlighted text (html) or an image
· WordPress support for the SyntaxHighlighter Evolved plugin

This plugin adds four tools in WLW’s tool window:

image

Tool 1) Code as bitmap

This uses the ActiPro formatting engine to take a snapshot of the code.

You’ll see this screen when clicked – if there’s text in the clipboard, it’ll be shown here, or you can copy and paste when the window appears:

image

This srceen allows you to set the size of the editor window.  You can either select common widths from the drop-down or put in your own width – for instance, 465 is the ideal width for my template on Blogger.  The buttons on the bottom right allow you to then:

a) insert the image straight into the blog post or
b) have the plugin copy the image or
c) discard it.

The advantage of the option A is that the code is still editable in WLW; the disadvantage – you cannot [yet] apply bitmap effects, such as reflection or drop shadow.

The advantage of option B is that you can apply bitmap effects, but the disadvantage is that code will no longer be editable.

Tool 2) Formatted code

This also uses uses the ActiPro formatting engine.

When inserting code, the plugin window will allow various properties of the code to be changed:

image

When clicking edit code, you’ll see the edit source code screen:

image

Tool 3) Highlighted code

This uses the Syntax Highlighter formatting engine.  When inserting code, the edit screen will appear in the same way as when you insert formatted code (see above).  The only difference is a ‘show preview’ button, which displays this preview window:
image

To use the SyntaxHighlighter engine, ensure your blog is correctly set-up.  For the preview window to correctly display your code, ensure the Settings are correct.  Here’s the Settings window:
image

Tool 4) WordPress Formatted

This changes the HTML output to that expected by theSyntaxHighlighter Evolved plugin for WordPress.  It’s very similar to using the SyntaxHighlighter engine, but you don’t need to worry about setting up your blog with the correct scripts.  Do be aware though, that for the Preview window to work correctly, you still need to set-up this plugin so that it knows where the SyntaxHighlighter brushes and scripts are (the default settings work right now, but if Alex changes the location in the future, you’ll need to update the settings).

To see examples of the output, please see this blog post.

Version 2.0.0.3 can be downloaded here.  To use it, extract the binaries to Program FilesWindows LiveWriterPlugins and run WLW.  If you’re using a version of WLW prior to Beta 3, then you need to remove it and update!  (Alternatively, change the directory to Program FilesWindows Live WriterPlugins)

Thanks again to all those that left feedback.   Please keep it coming. Hopefully, the bugs that have been reported have now been fixed.

Problems with CSS and themes when using ASP.NET Forms Authentication

A while back, I wrote a blog post about how turning on Forms Authentication caused problems with stylesheets and Themes.  A lot of people found this post useful but had trouble finding it.  One reader suggested I change the title to get more hits.  So, I did, and this is it. 

ReSharper for Visual Studio 2010

rs I don’t know how I missed this for so long, but JetBrains have released a preview of ReSharper for Visual Studio 2010! They say this version is neither 4.5.1 nor 5.0, but a preview build with some of the new 5.0 features enabled.

Looking at the nightly builds, it seems that the first release was 9th July, but there was no news on their blog, which I’ve been checking daily since June (when they said it’d be ready).

Anyway, now I can give Visual Studio 2010 another try.  I just couldn’t use it, not even for evaluation, without ReSharper!

Also, let’s not forget that version 4.5.1 for Visual Studio 2005 and 2008 is also now available.