CHIP-8 Emulator

I mentioned before in my HTML5 Pokémon Save File Reader post that I got into emulation and wanted to create a Game Boy emulator but decided to start smaller. So after creating the save file viewer and doing a lot of university work in between I decided to take another crack at creating an emulator. This time I did some more research on what would be a good platform to start emulating and found that a lot of people recommend that a CHIP-8 emulator is a good starting project for someone wanting to get into the world of emulation.

What’s an emulator?

First off before I begin I should probably give a quick explanation on what an emulator actually is, at least how I understand it:

An emulator is a computer program designed to duplicate the implementation and inner workings of another system, be it a games console, mobile phone, calculator or the guidance system to a certain famous space craft. Now this also may sound a bit like a simulator, in that both an emulator and simulator should come out with the same result as the original system would, and it seems that there isn’t really a clear-cut agreement on the differences between the two, for my purposes I will be using the term emulator here, and for the sake of simplicity will be agreeing with this definition from stackoverflow.

So in the example of a games console, say the Game Boy, an emulator would model the inner workings of the consoles processor, display, sound and input as best it can.

Because of the low-level nature of emulation, it’s very important to make sure you understand how a computer actually works at a low-level, luckily this is covered in most college/university courses early on, and at the core you only really need to understand the fetch-decode-execute cycle to get started in emulation.

What’s CHIP-8?

CHIP-8 was never really an actual physical system, it’s more of a sort of virtual machine than anything else. Basically it was developed as a way of letting people easily create games for the computers at the time (1970s/1980s) and first appeared on the COSMAC VIP. It is however very well suited to emulation as it has a very small amount of opcodes (36) and doesn’t have any added complexity like interrupts, V-Blanks and sound that the NES and Game Boy have and still works like a physical system to the point were it even piggybacked off of some of the opcodes from the COSMAC.

A great article I used when building my emulator can be found here by Laurence Miller (seriously it’s great!), that explains what CHIP-8 is a bit better than me and will help a lot if you want to create your own CHIP-8 emulator.

CHIP-8 Specification

As far as simple specifications go CHIP-8 really is quite a simple system, in brief:

CHIP-8 is capable of addressing 4KB of memory, making it very lightweight on modern systems, has 16 8 bit general purpose registers, one 16 bit register (for storing addresses) and 2 timer registers (one for sound and one as a general timer). It also has a stack pointer register and stack that has a maximum size of 16, and a program counter register, unlike the other mentioned registers these are hidden from CHIP-8 programs.

It’s input is a little esoteric; it uses a 16-key hexadecimal keypad, that is, a keyboard with the numbers 0 to 9 and letters A to F on it. The layout is pretty simple:

1 2 3 C
4 5 6 D
7 8 9 E
A 0 B F

It’s display is monochrome 64 x 32 pixels in size with the origin (0,0) in the top left hand corner.

CHIP-8 uses sprites to draw to the screen. A CHIP-8 sprite is a group of bytes which are a binary representation of the desired image. Each sprite is 8 pixels wide (as each bit in a byte is used) and can be up to 15 pixels in height. CHIP-8 has its own simple font sprites representing the hexadecimal digits 0 to F stored in its memory. These sprites are XORed onto the existing graphics data.

The timer registers I mentioned before hand decrement at 60hz when they are non-zero, with the CHIP-8s buzzer sounding when the sound register is greater than 0. Many emulators use this as the general clock speed the CHIP-8 system should run at.

For a really good reference/specification on CHIP-8 and it’s opcodes I recommend having a read of Cowgod’s CHIP-8 Technical reference. When creating my emulator I printed out a copy to refer to.

My CHIP-8 Emulator

With all that introduction out-of-the-way I can now talk about my emulator.

The emulator displaying a CHIP-8 logo

The emulator displaying a CHIP-8 logo

I opted to program it in C++ as I am very familiar with it and other languages I use such as Java and JavaScript don’t have the best support for unsigned bytes which would make working at such a low-level a little bit more tedious. I chose to use the SFML library for graphical output and key based input, purely because I am more familiar with its API than SDL, I may in future port my emulator to use SDL however, as SFML doesn’t seem to be used as much as SDL in professional programming.

Writing the emulator wasn’t too difficult a task, just very iterative at times. Because of the simplicity of the CHIP-8 architecture and small amount of opcodes I used a large switch statement as the heart of the fetch-decode-execute cycle, if I were to create another emulator I’d likely use jump tables/function pointers to neaten up the code and make it easier to understand as some other systems generally emulated often have much larger amounts of opcodes, for example the Z80 uses 252 opcodes.

Loading ROM data into memory was done using C++ file steams, and was relatively easy to accomplish. I made sure to put in check for the ROM size so that it didn’t overflow the memory of the emulator.

Key presses were easy to implement as a simple boolean array that have their state set by whatever input library is being used allowing me to divorce the core emulator code from the input library.

void Chip8::setKeyState(unsigned int key, bool state) {
	this->key[key] = state;
}

Because modern keyboards don’t have a hexadecimal pad built in I remapped the keys to:

1 2 3 4
Q W E R
A S D F
Z X C V

Screen data was treated similarly to the key press data and was accessed as a byte array and passed to whatever library would do the displaying (SFML in this case).

const unsigned char * Chip8::getGraphics() {
	return gfx;
}

I implemented a few testing features into my emulator, including a step mode, fast forward mode (which uncapped the execution rate) and a debug output mode which would log to console what the output should look like (to make sure there were no differences between the screen output and actual output).

A Small Bug

At one point I ran into a problem where an opcode was not working correctly, I spent an hour or two on it until realising my order of operations was wrong for the set of specific bitwise operations it performed (having not done much bitwise stuff since my first year at university this eluded me for a while).

The problem was difficult to pin down as the display appeared to work correctly up to a point and then garbled some sprites as seen below for a Space Invaders clone:

The opcode that was causing the problem in question was quite an important one, 8xy0, a load opcode that loads one register with the value of another.

The offending code looked like this:

V[(opcode & 0x0F00) >> 8] = V[(opcode & 0x00F0 >> 4)];

Which is quite a hard to spot error when scrolling through the opcodes. What is wrong here is that the brackets in the right hand value should be in the same positions as the left otherwise I am performing the left shift operation before the bitwise AND operation (see here for details on order of operations in C++). Altering the code so that it looks like this:

V[(opcode & 0x0F00) >> 8] = V[(opcode & 0x00F0) >> 4];

Solved the issue I was having and made my CHIP-8 Emulator fully operational!

The Finished Product

You can see the finished source code to my emulator on Github.

As mentioned previously future enhancements may include switching to SDL from SFML, but I’d also like to add support for SCHIP, CHIP-48 and SCHIP-8 opcodes which extend CHIP-8 to support a larger resolution among other things.

Overall I had a lot of fun creating the CHIP-8 emulator and learnt a lot about emulation in the process, it also helped me brush up on my bitwise operations.

Useful Links

I’ve scattered some useful links throughout this post but I thought I’d add this section to keep them all together and to add more if needed.

/r/dailyprogrammer

For a while now I have been subscribed to the subreddit /r/dailyprogammer on reddit.com.

This subreddit publishes several different programming challenges every week of varying difficulties and encourages programmers to share their solutions to these problems and I highly encourage anyone reading this to give them a go.

To date I have had a go at the following challenges and posted solutions online:

I have had a fiddle with a few other challenges but never supplied any online code. Some of them are very interesting and relevant to games programming as well as regular programming, such as [6/15/2014] Challenge #166b [Hard] A Day in the Life of a Network Router boils down to a pathfinding problem.

Domain Name Scam

This isn’t my normal kind of technical blog post but I feel it’s important to expose scams when I see them, so apologise technical blogging will recommence soon enough.

I got an email earlier this week that looked quite suspect so I did a quick search (as I do whenever I get these sorts of emails) and found my suspicions to be confirmed.

The body of the email can be seen below:

Dear Manager,

(If you are not the person who is in charge of this, please forward this to your CEO,Thanks)

This email is from China domain name registration center, which mainly deal with the domain name registration in China. We received an application from Cesauto ltd on June 23rd, 2014. They want to register “lyndonarmitage” as their internet keyword and China/Asia (CN/ASIA) domain names. But after checking it, we find this name conflicts with your company. In order to deal with this matter better, so we send you email and confirm whether this company is your distributor or business partner in China or not?.

Best Regards,

Abby Wang

 

General Manager
Anhui Office (Head Office)
Registration Department Manager
Room 1008 Shenhui Building
Haitian Road, Huli Anhui, China
Office:  +86 0553 4994789
Fax:     +86 0553 4994789
web:  www.ygcompany.org

And here is a link to the blog post I found explaining why you shouldn’t fall for these sorts of emails. Basically it boils down to people trying to extort money out of you with some vague threat that another company may be trying to purchase a domain name similar to yours in China. As the linked to blog post explains; a domain registrar would likely not bother hunting you down to tell you such things as it’s not really their problem, unless of course all they want to do is charge you an inordinate amount to register a domain you will never use.

Posting about this will hopefully add to the search results when people search for similar text, and also push up the blog post I linked to in the results as it did a good job at explaining why this is likely a scam.

HTML5 Pokemon Save File Viewer

Note: I initially slated this blog post to be posted months ago but from the looks of it never got round to finishing it, as such some of the details might be slightly out of date or incomplete. I have gone through quickly and tried to make sure things make sense.

For quite a while I have been working on a personal project involving JavaScript, the new HTML5 File API and an interest in emulation using JavaScript and HTML5.

The project I have been working in is a Save File Reader written for the first generation of Pokémon games.

Initially I wanted to try my hand at writing a Game Boy emulator in JavaScript, but after a bit of research I decided I should probably start smaller. Having been familiar with the first generation of Pokémon games (I grew up with them) and having access to some references on the save file format used along with ROM copies of the cartridges I own I decided to put some of the research I had done into the HTML5 File API to use in the hopes that it would help me learn a bit more about how to use, how older games stored their save data and give me some practice at creating tools.

This blog post details my foray into the creation and development of my first generation Pokémon save file reader.

Preparation

The first thing I needed was a game to target and a save file to use, I chose Pokémon Yellow as I already had the ROM file and had played on and off with the original cartridge earlier in the year (exploring some of the bugs and exploits in the game).

The next thing I needed was a reference to the Save File format/structure used, luckily there are a lot of resources around in regards to the Pokémon franchise, the go to place from the look of it is called Bulbapedia; for a reference on the save file format specifically, this page.

The page in question maps out most of the important parts of the save file format and links to other relevant pages that describe how the Pokémon data structures work and many other mechanics and internals of the first generation of Pokémon games (a goldmine of information if you are into that sort of thing, or want to learn about some of the problems with the first generation and how they were addressed in later generations).

Armed with this reference, a hex editor (I use a free one called xvi32)  I began a new game in Pokémon Yellow on an emulator (I used Visual Boy Advance, purely due to familiarity with it; for any real fiddling with gameboy game internals you should have a look at BGB). Using my hex editor I started poking and prodding the save files it made in an attempt to make sure the data was in the same place as described by the reference I was using (it always pays to be sure), once satisfied I started coding my HTML and JavaScript Files.

The Coding

Initially I decided not to make use of any external JavaScript libraries and only use functions and objects available to me in a browser environment. I quickly decided to go back on this and make use of jQuery since I wanted to familiarize myself with it and it had several capabilities that I wanted to take advantage of, still I wanted to divorce as much of the code as I could from the library so abstracted out my front end from the guts of the save file parser I wanted to create.

Loading the Save Files and Validating

The first thing I decided to program, for obvious reasons, was the choosing/loading of the save file. I opted to use the HTML5 File API since it allows me to get access to a given file on the user’s file system without the need to upload it to a server and write a server side parser (when I started this project I had not even considered node.js). This was as simple as checking that the user’s browser supported the HTML5 File API and if so binding an event to an input element. To read the file I needed to make use of a FileReader object and it’s method readAsBinaryString; this let’s you read the value of each byte in a file as a string, utilizing this and the offsets described in the reference I linked to earlier I was able to read the data from the save file correctly.

Using the HTML5 File API also gets around any legal issues that could arise from hosting the save files, although as far as I am aware there are none, it also means that I do not need to keep a copy of the uploaded save file, cutting down on space used.

Next up was validating that the given file was in fact a save file, I did this in two ways; first I check the size of the file is 32KB and then I check that the file ends with .sav. There is still a chance that you can use a bogus file, in which case you would get garbage data out (garbage in, garbage out), but these two simple conditions prevent the user from accidentally crashing their browser by choosing a huge file (as the project currently reads the entire file into a string as described above) and from choosing a file with the incorrect extension.

With validation done it was finally time to read some real data from the save file, so what did I think should be first? The player’s name!

Reading the Player’s name (and other Text Strings)

Text data in the first generation of Pokémon games is stored using a proprietary character set. Each character is represented by 1 byte in a range from 0×0 to 0xFF (that is 0 to 255 in regular, non hexadecimal numbers). The table below has been copied from Bulbapedia and describes what each character is mapped to in the character set.

-0 -1 -2 -3 -4 -5 -6 -7 -8 -9 -A -B -C -D -E -F
0-
1-
2-
3-
4-
5-
6-
7-
Unused, except for:
0×50 (terminator) and
0x7F (space)
8- A B C D E F G H I J K L M N O P
9- Q R S T U V W X Y Z ( ) : ; [ ]
A- a b c d e f g h i j k l m n o p
B- q r s t u v w x y z
C-
D-
Unused
E- PK MN - ? ! .
F- × / , 0 1 2 3 4 5 6 7 8 9

So I had to create a map/table containing all these characters in my JavaScript code so I could translate the text in the save files to it’s UTF-8 counterpart. This was simple enough although it took longer than I liked (I was programming this at around midnight at the time). Once complete it was simple matter of reading the characters contained in the save file starting at the correct offset to get the player’s name and ending either when we encounter a terminator character or when we get past the set length of the string (this hearkened me back to learning C and how strings worked, and was just as simple to program and understand).

Now I could read the player’s name and any other string inside the save file using a simple method call, so I added reading the Rival’s name to the save file viewer.

Trainer ID and Other Number values

The next thing I decided to get working was reading the player’s Trainer ID. This was simply stored as a number occupying two bytes starting in a specific location in the save file. Because the save file had been loaded into memory as a text string with one character per byte I needed to read the value of two characters and convert them into the correct number. I did this using a simple method shown below:

	function hex2int(offset, size) {
		var val = "";
		for(var i = 0; i < size; i ++) {
			var d = data.charCodeAt(offset + i).toString(16);
			if(d.length < 2) d = "0" + d; // append leading 0
			val += d;
		}
		return parseInt(val, 16);
	}

(There may be a better way to do this but this worked well for me.)

This was then also used for all the other number values needed in the viewer, including; the time played, number of an item, and Pokémon stats.

So now I had the ability to read and interpret most of the data in file I cracked onto the more difficult parts of the save file data structure as well as the slightly obscure ways it stored data.

Show me the Money, and your Pokédex!

Money in the first generation of Pokémon games is not stored as a regular number, but instead stored as a binary-coded decimal (BCD), so I had to write a routine to read the correct value from the 3 bytes that represent each of the 6 digits.

I also had to write a routine to decode the Pokédex lists inside the save file as well. These were coded in a very neat way, each Pokémon was represented by a bit inside of 19 bytes (for a total of 152 values). So all I did was output these as a long binary string.

Items and Item Lists

There are two places items are stored in the first generation of Pokémon games; the PC and the players bag. Each share the same basic structure called an Item List, the only difference between them is their total capacity/length.

Offset Size Contents
0×00 1 Count
0×01 2 * Capacity Entries
… +0×00 1 Terminator

As you can see from this table (courtesy of bulbapedia again), the start of each Item List contains 1 byte that tells you how many unique items the list currently contains and another byte at the end of it used as a terminator.

Each item takes up 2 bytes in the table, the first tells you how many of that item are present in the list, and the second is the item ID which is used to determine what the item is called and what it does. As this is a save file viewer the ability to discern what items you have in the save file are probably quite relevant so I opted to create another table/map object similar to the before mentioned character set that contained all the named objects in the game and their corresponding IDs, as can be seen below.

	function getItemNameFromHexIndex(hex) {
		var itemMap = {
			0x00 : "Nothing", 0x01 : "Master Ball", 0x02 : "Ultra Ball", 0x03 : "Great Ball", 0x04 : "Poké Ball",
			0x05 : "Town Map", 0x06 : "Bicycle", 0x07 : "?????", 0x08 : "Safari Ball", 0x09 : "Pokédex",
			0x0A : "Moon Stone", 0x0B : "Antidote", 0x0C : "Burn Heal", 0x0D : "Ice Heal", 0x0E : "Awakening",
			0x0F : "Parlyz Heal", 0x10 : "Full Restore", 0x11 : "Max Potion", 0x12 : "Hyper Potion", 0x13 : "Super Potion",
			0x14 : "Potion", 0x15 : "BoulderBadge", 0x16 : "CascadeBadge", 0x17 : "ThunderBadge", 0x18 : "RainbowBadge",
			0x19 : "SoulBadge", 0x1A : "MarshBadge", 0x1B : "VolcanoBadge", 0x1C : "EarthBadge", 0x1D : "Escape Rope",
			0x1E : "Repel", 0x1F : "Old Amber", 0x20 : "Fire Stone", 0x21 : "Thunderstone", 0x22 : "Water Stone",
			0x23 : "HP Up", 0x24 : "Protein", 0x25 : "Iron", 0x26 : "Carbos", 0x27 : "Calcium",
			0x28 : "Rare Candy", 0x29 : "Dome Fossil", 0x2A : "Helix Fossil", 0x2B : "Secret Key", 0x2C : "?????",
			0x2D : "Bike Voucher", 0x2E : "X Accuracy", 0x2F : "Leaf Stone", 0x30 : "Card Key", 0x31 : "Nugget",
			0x32 : "PP Up", 0x33 : "Poké Doll", 0x34 : "Full Heal", 0x35 : "Revive", 0x36 : "Max Revive",
			0x37 : "Guard Spec.", 0x38 : "Super Repel", 0x39 : "Max Repel", 0x3A : "Dire Hit", 0x3B : "Coin",
			0x3C : "Fresh Water", 0x3D : "Soda Pop", 0x3E : "Lemonade", 0x3F : "S.S. Ticket", 0x40 : "Gold Teeth",
			0x41 : "X Attack", 0x42 : "X Defend", 0x43 : "X Speed", 0x44 : "X Special", 0x45 : "Coin Case",
			0x46 : "Oak's Parcel", 0x47 : "Itemfinder", 0x48 : "Silph Scope", 0x49 : "Poké Flute", 0x4A : "Lift Key",
			0x4B : "Exp. All", 0x4C : "Old Rod", 0x4D : "Good Rod", 0x4E : "Super Rod", 0x4F : "PP Up",
			0x50 : "Ether", 0x51 : "Max Ether", 0x52 : "Elixir", 0x53 : "Max Elixir"
		};
		// Add all 5 of the HMs
		for(var i = 0; i < 5; i ++) {
			itemMap[0xC4+i] = "HM0" + (1+i);
		}
		// Add all 55 og the TMs
		for(i = 0; i < 55; i ++) {
			var num = (1+i);
			if(num < 10) num = "0" + num;
			itemMap[0xC9+i] = "TM" + num;
		}
		return itemMap[hex];
	}

That’s a lot of items, especially TMs, luckily all the TM items were stored in order so I could generate their entries automatically.

Armed with this function and the hex2int function previously shown I was able to write a function that could parse an item list of any given length.

Now I had the ability to see a Trainer’s name, Rival’s name, Money, Pokédex entries, and items in the trainers bag and PC, but something was missing…

The Pokémon!

Each Pokémon the player owns is saved within the save file (obviously) and each one in turn has many statistics associated with it that are also saved, making them take up the majority of the file. They are also organized in special separate lists. All of these factors consequently make them bit harder to parse.

There are in fact 14 Pokémon lists in the save file, 12 of which represent the PC Boxes in game, with 1 also being used to store data on the current open PC box and 1 being used for the Pokémon in the players party.

Pokémon Lists can vary in size and capacity but all follow the same structure:

Offset Size Contents
0×0000 1 Count
0×0001 Capacity + 1 Species
… + 0×0000 Capacity * Size Pokémon
… + 0×0000 Capacity * 11 OT Names
… + 0×0000 Capacity * 11 Names

Again this table comes from Bulbapedia. As you can see the first entry denotes how many Pokémon are present in the given list (between 0 and the list’s capacity; this is either 6 or 20).

The second entry tells you the type of each Pokémon in the list based on an index ID (you can see the list here), so I had to create another map with the corresponding names in it (I wont show it here since it would be very long). After doing this I was able to get out the species of each Pokémon in a list (I started first with the party list), but not the actual names/nicknames of each Pokémon in question.

The last set of entries in the table is a set of names, 1 for each Pokémon in the list. These are stored in the same way as Item names and the trainer name, as a text string using the correct character set. All Pokémon have an entry here, even those without nicknames; their entries will be equal to their species name (Note: Because of this if you nickname your Pokémon it’s own species name, in upper case, it will change upon evolving).

The OT Names list is simply a list of names referring to the original trainer who caught the Pokémon.

So that leaves the actual Pokémon entries inside the list. These store the actual Pokémon data structures and varies in length based on whether the list represents a PC Box or the player’s party.

For this I created a constructor that took in the starting offset for the Pokémon in question and a boolean value that flagged it as a party member or not. The difference between a party member Pokémon and PC Pokémon in terms of storage was simply that the party member Pokémon stored extra values compared to the PC Pokémon; this created a clever exploit in the first generation of games known as the box trick, as these extra values were recalculated upon removing a Pokémon from the PC and could be manipulated in certain ways.

Below is the code for the constructor method:

function Pokemon(startOffset, isPartyMember) {
	this.index = hex2int(startOffset, 1);
	this.species = getSpeciesFromIndex(this.index); // derived from index
	this.currentHp = hex2int(startOffset + 0x01, 2);
	this.level = hex2int(startOffset + 0x03, 1);
	this.status = hex2int(startOffset + 0x04, 1);
	this.type1Index = hex2int(startOffset + 0x05, 1);
	this.type2Index = hex2int(startOffset + 0x06, 1);
	this.type1 = getPokemonType(this.type1Index);
	this.type2 = getPokemonType(this.type2Index);
	this.catchRate = hex2int(startOffset + 0x07, 1);
	this.move1Index = hex2int(startOffset + 0x08, 1);
	this.move2Index = hex2int(startOffset + 0x09, 1);
	this.move3Index = hex2int(startOffset + 0x0A, 1);
	this.move4Index = hex2int(startOffset + 0x0B, 1);
	this.ownerID = hex2int(startOffset + 0x0C, 2);
	this.exp = hex2int(startOffset + 0x0E, 3);
	this.hpEV = hex2int(startOffset + 0x11, 2);
	this.attackEV = hex2int(startOffset + 0x13, 2);
	this.defenseEV = hex2int(startOffset + 0x15, 2);
	this.speedEV = hex2int(startOffset + 0x17, 2);
	this.specialEV = hex2int(startOffset + 0x19, 2);
	this.IV = hex2int(startOffset + 0x1B, 2);
	this.move1PP = hex2int(startOffset + 0x1D, 1);
	this.move2PP = hex2int(startOffset + 0x1E, 1);
	this.move3PP = hex2int(startOffset + 0x1F, 1);
	this.move4PP = hex2int(startOffset + 0x20, 1);
	if(isPartyMember) {
		this.partyLevel = hex2int(startOffset + 0x21, 1);
		this.partyMaxHp = hex2int(startOffset + 0x22, 2);
		this.partyAttack = hex2int(startOffset + 0x24, 2);
		this.partyDefense = hex2int(startOffset + 0x26, 2);
		this.partySpeed = hex2int(startOffset + 0x28, 2);
		this.partySpecial = hex2int(startOffset + 0x2A, 2);
		this.isParty = true;
	}
	else {
		this.isParty = false;
	}
}

And Beyond

That basically summarizes all the interesting parts of this project. You can download the save file viewer from GitHub here. I did have a few interesting comments when I originally posted about it on Reddit in 2013, one comment I really need to work on mentioned moving the maps outside of the functions as it speeds up time considerably, see http://jsperf.com/map-inside-vs-outside-of-function for details.

Upon getting some more free time I’d also like to see if I could get it working in node.js and allow for uploads of sav files to work.

Blog Update

It’s been a long time since I updated my blog (my last post was in September 2013 yikes!), this was due to me returning to university to complete my final year and wanting to focus on my studies.
Just the exams left now and then I am finished completely and will have my degree, so I will have some time to update my blog and put all sorts on it.

I did leave my blog off on a bit of a silly post about Cookie Clicker; to clarify to some people who commented (also sorry I hadn’t approved the comments in a while); I don’t think Cookie Clicker is (was?) programmed really well but as a tool to get people thinking about programming it was a nice thing to write a little bot for.
If I really wanted to teach someone about programming in this way I’d probably make my own little game similar to Cookie Clicker for people to hack about with.

I’ve still been busy doing all sorts of interesting things throughout including a game and code jam or two so I will be sure to make a post about that, my final year project was also quite interesting and I’d like to share a bit about it at some point. I also have a load of posts as drafts that I could put up with a bit of work on them.

Strangely my blog’s view count doesn’t seem to of changed all that much so I assume a few of my posts are well indexed by Google and must be where a lot of my traffic comes from.

So expect more posts in the near future!

Using Cookie Clicker to learn JavaScript?

What is Cookie Clicker?

For those who don’t know Cookie Clicker is a game about clicking and collecting cookies. That’s it. I consider it to be in the same sort of vain as many other Cow Clicker style games, but not quite as bad. It’s a simple nice waste of time and a good example of a HTML 5 Game that doesn’t use the canvas tag (at least not yet).

Cookie Clicker

What do you do in it?

The main thing you do in the game is click things to gain cookies or increase the rate at which you accumulate them. There’s no real money store (thank god) and no real way of getting ahead of someone whose started before you without cheating horribly and using the JavaScript Console. And the fact you can edit and fiddle with the game in such a way is the subject I’d like to discuss.

What’s Special About it?

Because it’s made using HTML and JavaScript (and isn’t minified or obfuscated in any way) you can take it apart and learn from it, devise the best strategy or analyse how the underlying systems work. In my eyes this could be a gold mine for teaching people JavaScript, HTML and some basic web programming. You could use it as a way of introducing concepts like variables and later methods to students.

For example typing: Game.cookies into the console will cause it to output the amount of cookies you currently have in the game.

I use Firebug in Firefox

I use Firebug in Firefox

And that’s just one thing you can find out, the source code is littered with values that would be useful or interesting for players to see.

With access to the JavaScript and HTML you can introduce someone slowly to how clicking buttons effects its inner state, and later actually get them to write some scripts to assist them in playing the game or downright do everything for them.

I’ve actually written a small bot that can actually play the game just as well as I can. And I’d love to see others do the same to see how much better or different they can make things.

In fact that’s my challenge to those reading this; make a bot that can play Cookie Clicker.

Below is my bot (shared on github) for inspiration, bookmarklet is below, simply drag it to your favourites and click it when you are on the Cookie Clicker game to see it in action:

Cookie Clicker Bot

Sorry for the short and long delay between blog posts, will likely be more coming soon!

Making an analog clock using the HTML5 canvas tag

It’s been a long while since I have posted anything, this keeps happening but ah well. Anyway, in this post I am going to show you how to create an analog clock using JavaScript and the HTML5 canvas tag.

The HTML

First let’s create a basic HTML5 page that will contain the canvas tag and other markup:

The JavaScript

As you can see I have made the page link to an external JavaScript file and call a set up method, these will be explained below. I’ve done this so that it is easy to include the HTML5 clock on any page with minimum hassle. The JavaScript code itself makes use of no external libraries like jQuery so it is portable.

Below you can see the contents of the JavaScript file:

This file consists entirely of the method setupAnalogClock(). I will now run through the file and how it works:

  • setupAnalogClock() takes 2 parameters; the first is the canvas element, the second is the width (diameter) of the clock.
  • Once called we begin by get the canvas context and getting the centre coordinates of the canvas.
  • After doing that I defined a method called tick() that will be run once a second and will update and process all the drawing of the clock.
    • Within tick() I defined two other functions called drawStatic(), and drawHand().
    • drawStatic() simply draws all the static parts of the clock, this includes the face, the centre point and the lines representing numbers around the face of the clock.
      • The lines representing numbers are drawn in their own function called drawNumbers() which counts backwards from 12 and draws each line in place.
    • drawHand() is a method that takes 2 parameters; the first being the length of the hand (this should be between 0 and the radius of the clock) and the angle at which to draw the hand.
    • The colour and line width of each hand is set before calling drawHand() in the tick() function.
  • At the end of setupAnalogClock() we call tick() once (to draw onto the screen) and then use setInterval() to call tick() once a second while we stay on this page.

The results look like this (for a live version click here):

Example of Analog Clock made using HTML5 Canvas

The canvas is slightly larger than the clock face to accommodate the line width of the face.

How the Hands Work

The hands (and the hour markings) work by using transforms supported by HTML5′s canvas tag and some basic mathematics.

Firstly I worked out a few equations based upon some facts:

  • There are 360 degrees in a circle (which in radians is 2 * pi).
  • There are 12 hours on a clock face.
  • There are 60 minutes in an hour.
  • There are 60 seconds in a minute.

From these you can work out the degrees a hand should rotate based upon what it is representing:

  • 360 / 12 = 30. Which is the number of degrees the hour hand should rotate per hour. e.g. at 9 o’clock the hour hand should of rotated 9 * 30 (270) degrees.
  • 360 / 60 = 6. Which is the number of degrees the minute hand should rotate per minute AND the number of degrees the second hand should rotate per second.

Of course the rotate methods for the canvas tag use radians instead of degrees (like most programming languages and libraries) so we then need to translate these degrees into radians by simply multiplying them by pi / 180.

So using these the method for drawing the hands becomes simple;

  1. First we translate to the centre of the watch.
  2. Then we rotate by the desired angle. (taking into account that the canvas origin is at the top left).
  3. Then we draw the line from where we are up to the desired length.

Hopefully this will help others to create a little HTML5 analog clock. Feel free to use the code, just don’t try to claim it as your own! I wrote this quickly while trying to make a nice replacement for the analog clock on iGoogle (since iGoogle will be disappearing soon) using HTML5, I will next try to create one that makes use of CSS3 transforms instead of the canvas tag.

You may have noticed the commented out code for numbering, I didn’t have it active because I couldn’t get them looking satisfactory and I think it looks better without them anyway.

Happy Coding!

Planetside 2 API Experiments

PlanetSide_2_LogoRecently I have been playing Sony’s Planetside 2 game after having not played it for a while. As well as simply playing the game again I’ve also begun experimenting with their Developer API that SOE has provided. All you do is make request to the Planetside 2 API and get returned data in the form of a JSON object.

Below are a few of those experiments, note that I am still relatively new to Python so am using this as a way of teaching myself more about it so the code may not be the most efficient or follow correct code styles but works! I’ve made use of the requests Python module to make the API requests as it seemed easy to use.

Below is a simple example that will display the average amount of certs you gain per minute from when you started the script. It can be modified to work on different intervals (e.g. hourly or every 10 minutes). I was surprised at one point to find that I had an average of 2 or 3, being not a great First Person Shooter player:

And one of the first things I made was bot that periodically told me what the last event was that happened on the server I play on via a text to speech engine called pyttsx and to the console. Note: It doesn’t follow Python variable naming guidelines:

The next thing I hope to make is something that will record my progress each hour of the day and then plot it into a graph to show me when I am active and how long it will take me to gain enough certification points to buy wanted weapons and equipment.

I would love to hear what other people have done with the API and what people would like to see done with the API so leave a comment if you know of anything interesting or have done something cool yourself!

Xbox One Thoughts/Rant

Note: This is my first attempt at reviewing a games console announcement like the Xbox One or attempt at any kind of gaming article at all. For some better professionally written articles on this subject see Kotaku, or another professional gaming news site.

After watching the Xbox One reveal after work I wasn’t too impressed with the console itself and with Microsoft’s apparent business strategy. I was watching it with a friend over Skype and at almost every turn we were disappointed. Now we weren’t expecting to be enthralled by much of it but had high hopes that it would be better than the previous Playstation 4 reveal. Quite frankly it was worse.

I can sum up a few of the reasons it was worse with one of the top trending YouTube videos on the subject:

Summary and Thoughts on The Xbox One Announcement

If you can’t be bothered to watch that (and I don’t blame you if you don’t), the Xbox One seems to no longer be a games console, it looks like it’s a TV Set Top Box that can play games. In almost every other sentence the word Television or it’s abbreviation TV was used. A great song and dance was made about it’s new TV related features; watch TV on it, keep up to date with sports on it, there’s a TV guide on it. A lot of these things were touted as revolutionary but I hate to break it to Microsoft but we’ve been able to do these things on our actual TVs for years, in fact here in the UK all Televisions now come with Freeview, and every one of those has a guide, a lot of them have reminders and record functionality. We have a TiVo box in my house, it’s brilliant; it has all those functionalities and more. Why there is this obsession at Microsoft with being the all in One media centre is beyond me. There’s already an established market for these products and it seems widening your focus from games to media box will have an adverse effect on your sales not to mention drive up the price of manufacture and cause you to compete in multiple markets.Xbox One

Another gimmick they put emphasis on was the Kinect 2. From a hardware stand point it is impressive but marketing it as a replacement for a remote and controller seems to be a bold strategy. One thing I thought was slightly comical was the hand gesture used to return to the home screen; it seemed imprecise and looked like it could get very irritating, compared to controlling with a controller that has very precise controls (this is why we still use keyboards when working and playing on a PC). Voice control also may seem cool but my first thought when seeing the Xbox One turned on via voice was a wish for someone to yell “Xbox Off” in the audience. Constantly yelling at a machine seems very imprecise even if it supposedly recognises your voice (this is one reason I dislike Android and Apples voice recognisers). Perhaps these issues have been addressed in the Xbox One, we won’t know until it is actually out, if they have been then there’s a small chance the gimmick might catch on.

There is an obsession that large companies have at the moment to do with social media. Not just the Games Industry, countless other industries have taken to Twitter, YouTube and Facebook to promote themselves and their products, as well as add social features to said products. We’ve even done this where I work (I added social media buttons to one of our products). At Sony’s PS4 unveiling they showed how you could instantly share clips of yourself, stream and interact with others whilst playing (to the scary degree of giving control of them game to someone else). At this event we had some similar things shown, although not many to do with games. They showed how could see TV that was trending and popular for example. This is a slightly personal complaint, even though I use social media I don’t see the need to always be up to date and interacting with others constantly.

Speaking of a lack of game related content, where were the games? We got shown trailers for a few titles but no actual gameplay at all. I felt disappointed after watching the Call of Duty: Ghost trailer as the EA Spokesperson specifically said this was done all in engine but didn’t show anything that couldn’t of been an CGI movie. They spoke about exclusive games and Halo then announce a Live Action Halo TV Show directed by Stephen Spielberg. That’s great and all but what about games? People don’t buy a games console to watch TV on, surprisingly you already have a Television for that.

Another feature shown was the ability to multi-task; you can watch a movie or play a game whilst using Internet Explorer you surf the web. Granted this is a good feature, and I see little bad from it other than the fact that most people have multiple devices nowadays, something that the developers of the new Xbox realise as they showed support for using a mobile as a remote control, so why would someone not more easily use their mobile or tablet to surf the web than the Xbox? Granted the TV screen will be bigger but the side by side view will squish the game or the movie and ruin your gaming and viewing experience not to mention breaking your immersion. And that’s ignoring the problem of the lack of keyboard.

At least they showed the console I guess, even though that’s not important in the least; most people care about what it can do rather than what it looks like (one reason I was a little confused about people being upset at the PS4′s announcement). Personally I think it looks a bit ugly but as I said it’s irrelevant, all it will do is sit on a shelf or under your TV, the Kinect on the other hand looked like it could be problematic to place.Cheering at Xbox One Event

People online pointed out that the cheering wasn’t the press (that’s good) but developers. This caused some people to be angry and say it was a misrepresentation of the excitement at the event. However, if you think about it rationally; of course the developers would be excited about the unveiling of something they’ve worked hard on so why wouldn’t they clap and cheer, however the way the microphones were set up may of intentionally focused on the cheering, again that doesn’t really matter though since you shouldn’t care about the audience’s reaction when viewing a console.

In summary from this event, I think that Microsoft are placing a large bet on their brand name in the hopes that they will be able to make sales on that alone and a few gimmicky features. They’re new Xbox One will compete with two of Sony’s Markets, Smart TVs and Games Consoles.

It’s rather risky gamble really since Sony has a big advantage over them in the TV front and will always make money off of selling TVs that can be used with either console.

After the Event

After the event it was confirmed that there would be a fee to pay when wanting to install a pre-owned game onto an Xbox One. With some rumours saying this fee will be the full price of the game, which I highly doubt will be the case. This does however eliminate the ability to lend games to your friends, an advantage console gaming has had over PC games for a while now since the proliferation of DRM systems like Steam and Origin. And may require you to pay the fee to play multiplayer modes with friends on the same console under a different account, something I do frequently on my brothers Xbox 360. This is bad, From a business point of view I can see why they will do this, it stops shops from reselling pre-owned games that do not give Microsoft or the developers revenue but it also lessens the incentive for these stores to care about the consoles beyond stocking them. They also remove a very nice part of console gaming, a very social aspect beyond the like, share and subscribe mentality of YouTube. If you put up fiscal barriers between players and their enjoyment it will detriment the console and the games. Imagine a group of 12 year olds wanting to player the latest shooter game together on the same console only to realise that they can’t because it requires them or their parents to pay, which they can’t afford to after purchasing the console. It is also detrimental to rentals, why rent a game when you can buy it for a similar price? This was claimed to be only a ‘potential scenario’ later so we will have to see.

They also said that it wouldn’t be always online. However it will need to connect for every new game installed, and possibly connect daily to keep you able to play your games. That’s fine if your only problem is a dodgy internet connection, but all these features they showed; the social interaction, internet browsing and TV will require an active internet connection so it might as well be always online to get the full experience.

There also won’t be any backwards compatibility, an issue some people won’t care about. Backwards compatibility in a console expands the potential library of games you can play on the console. Reducing the need for great exclusive titles and meaning that consumers don’t need to purchase additional games on top of a new console. The new Xbox One makes use of a different architecture to the Xbox 360 which makes the previous games difficult to port however I am confident you could emulate the Xbox 360′s architecture on the Xbox One’s hardware without to many drawbacks, seeing as the Xbox 360 has been emulated PC which makes use of the same architecture as the Xbox One. It doesn’t make sense with Microsoft’s idea of DRM however, since with Xbox 360 games you will have no way of knowing if the disc has been used on another machine. So no backwards compatibility seems to be more of a way of controlling the games market on the Xbox One then being technologically infeasible.

I think Angry Joe summed up a lot of people’s feelings towards Microsoft after this event. We can only hope that at E3 there will be some more announcements, clarifications and actual games shown, as for now it seems like Microsoft werent targeting gamers in their event.

Minimum Distance between a Point and a Line

I haven’t published a blog post in quite a while! Whoops!

I have several in the works, one in particular comparing the JavaScript Engines Nashorn and Rhino that is near completion, and another one on something I’ve been doing with my Raspberry Pi.

For now here’s a short web page I put together showing how to work out the minimum distance between a point and a line based upon a solution posted on this website, which has some very useful formulas for working out problems in 2D and 3D space. I’ve only written an example for the first formula on this page, hopefully seeing it as an interactive visual representation might help anyone struggling with understanding how to find the minimum distance between a point and a line.

You can view the example here: http://lyndonarmitage.com/html/points_and_lines/

I’d suggest viewing it in a web browser that supports the range input type (Opera, Chrome, IE10) as it let’s you adjust the values more easily, although it works just as well in a browser that does not support the range input type yet.