Test 1 – Prince animation

Prince of Persia

As a first step I’ve tried to reproduce, as faithfully as possible, the movements of the prince. Analyzing the source code and the technical documentation available it can be seen that the movement of all characters in the game is defined in two files: FRAMEDEF.S and SEQTABLE.S

The FRAMEDEF file defines, for each animation frame, the following parameters:

Fimage: the id of the graphic image of the character
Fsword: the id of the graphic image of the sword
Fdx: the horizontal offset in pixels
Fdy: the vertical offset in pixels
Fcheck: mainly used to detect ground collision

The SEQTABLE file defines the command sequence for each animation. There are two types of commands:

$00-$EF: identifiers of frames that matches the listed frames in FRAMEDEF file
$FF-$F1: are special instructions that executes specific actions

For example, $FB moves the character N pixels in horizontal direction.

characters

Clipped spritesheet of prince

With this information we have enough data to handle the characters animation. What is missing now are the graphics. For this, I used a tool called PR (Princed Resources) to extract the game’s graphics, then I used ImageMagick to convert the background color for each sprite to transparent and finally I used TexturePacker to generate the spritesheet compatible with Phaser.

The results can be seen here.

For the next post I will try to look into build the game levels.

Advertisements

Prince of Persia recreation in HTML5 and javascript

Prince of Persia

Prince of Persia is a platform game originally created by Jordan Mechner and published by Broderbund in 1989 for the Apple II. Its success was due, in part, to the remarkable fluidity of animation achieved in the characters, through a technique called rotoscoping. Because of its success, the game was later published in a wide range of platforms.

In 2012, over 20 years after the first version of the game was published, Jordan Mechner released the source code. The story is curious: Jordan backed up onto floppy disks the original source code of the game and left forgotten them. 22 years later, Jordan’s father sent him a box containing the floppies with the original source code. Curious story, for a fantastic game…

I discovered this history reading the development blog of MrSid, which explains the process of conversion Prince of Persia to the Commodore 64. This conversion was performed by reverse engineering the original Apple II code (go figure!!!).

And why I tell you all of this? Because I’m somewhat interested in the world of game programming, especially using HTML5 technology and i found very interesting to test it by reprogramming a game for which I have good memories. So I analyzed the HTML5 game frameworks and certainly the most i liked by their maturity, quality and community was Phaser. And this is my challenge: converting the original Prince of Persia to HTML5 by using the Phaser framework. Obviously I can not promise anything, I’m not specialist in finishing what I start.

Prince-of-Persia

Prince of persia MS-DOS loading screen