Cutscenes and bug hunting

The lasts weeks i have been bussy fixing some bugs ( thanks to David from the Princed forums for his extensive testing) and implementing new features. This is the changelog for the new version:

[BUG] Pillar and arch tiles do not act as space
[BUG] Tapestries tiles do not act as barriers
[BUG] Prince sprite is cropped when falling after a jump up
[BUG] Prince sprite cropped incorrectly on exit level animation
[BUG] Upper level loose board do not fall when prince jumps up
[BUG] Potion bubbles has no colors
[BUG] Large potion bubbles shows at incorrect position
[REFACTOR] Redesigned game manager to separate level logic and level design
[REFACTOR] Implemented a class for every tile object
[FEATURE] Chopper implemented
[FEATURE] Title screens, credits, intro cutscene and in-game cutscenes implemented.

Image from intro cutscene

From the list, the most noticiable feature is the implementation of the cutscenes. In preparation for the development of the guards AI i decided to investigate how to implement the behaviour of the actors in the cutscenes between levels (princess and vizier scenes). At the end i finally developed a very simple virtual machine, with a reduced instruction set, that let me program the behaviour of the actors for every scene. So, the next script represent the intro cutscene of the game:

{ "i": "ADD_ACTOR", "p1": 0, "p2": 5, "p3": 62, "p4": 167, "p5": -1 },
{ "i": "ADD_ACTOR", "p1": 1, "p2": 6, "p3": 140, "p4": 167, "p5": -1 },
{ "i": "START" },
{ "i": "ACTION", "p1": 0, "p2": "stand" },
{ "i": "ACTION", "p1": 1, "p2": "stand" },
{ "i": "WAIT", "p1": 20 },
{ "i": "ACTION", "p1": 0, "p2": "alert" },
{ "i": "WAIT", "p1": 6 },
{ "i": "ACTION", "p1": 1, "p2": "walk" },
{ "i": "WAIT", "p1": 6 },
{ "i": "ACTION", "p1": 1, "p2": "stop" },
{ "i": "WAIT", "p1": 20 },
{ "i": "ACTION", "p1": 1, "p2": "walk" },
{ "i": "WAIT", "p1": 30 },
{ "i": "ACTION", "p1": 1, "p2": "stop" },
{ "i": "WAIT", "p1": 35 },
{ "i": "ACTION", "p1": 1, "p2": "raise" },
{ "i": "WAIT", "p1": 1 },
{ "i": "ACTION", "p1": 0, "p2": "stepback" },
{ "i": "WAIT", "p1": 10 },
{ "i": "EFFECT" },
{ "i": "ADD_OBJECT", "p1": 0, "p2": 0, "p3": 152, "p4": 141 },
{ "i": "WAIT", "p1": 25 },
{ "i": "ACTION", "p1": 1, "p2": "exit" },
{ "i": "START_OBJECT", "p1": 0 },
{ "i": "WAIT", "p1": 43 },
{ "i": "ACTION", "p1": 0, "p2": "slump" },
{ "i": "WAIT", "p1": 20 },
{ "i": "END" } ]

The script is JSON formatted, and every line is an instruction. For example, the first instruccion adds on screen an actor (the princess has code 5 in-game) on position (62,167) and facing left (-1). So, every cutscene has an script like this, and is very easy to write them. The cutscene manager implements a very simple virtual machine that reads an instruction every tick and execute it.

This system is also suitable for script the special events of the game ( gate closed on first level, mouse help, shadow on mirror level, falling floors on lasts levels, etc…) and for the guards AI i’m still undecided: perhaps i will use the same method (an script for every guard type) or perhaps i will try some sort of state machine like machina.js

Well, enough for now. You can try the last version here. Have fun!!

PrinceJS: all levels implemented

Too much time without post here. These past weeks i have been quietly progressing in the development of the game. Currently it is possible to ‘play’ all levels, both dungeons land palace levels. Most of the special blocks are implemented (spikes, loose floors, gates, exit door, potions, etc …) and the kid can move across rooms like in the original game … or at least as close as possible … I’m quite happy with the current feeling, although there are details to polish.

The hardest and time consuming part has been the collision detection system. Basically the game checks barriers (gates, walls, tapestries, …) and floors for collision detection. At first it seems easy but it is not. In fact it is a hell because of the huge number of different situations that you need to take into account: if you collide while running you need to bump, if you start to run in front of a barrier you have to take a step ( this step is relative to the distance of the barrier), if you collide while jumping you have to ‘fall’ down, when you collide with the floor, depending on the height of the fall, you need to make a soft-land, a med-land or hard-land (a.k.a. splash & die), you can also grab the edge of the floor if you’re falling and close enough … and so on, I think you can get an idea how complex it is.

There are still many things missing: no guards, no deaths (yes, you can not die, sorry), missing chomper, potions have no effects, there are  thousands of bugs here and there, and hundreds of other features to implement… but time to time.

For now, enough talk. If you want to test the current state of the game click here. You can play with the arrow keys, use the shift key to step, take the sword or potions, and grab ledges. You can also forward or backward levels with the Q and W keys, or press the R key to restart the level. Indeed, the level 0 is the original game demo level and level 15 is the potions level used in the original game as copy protection. Both are playable, good luck!

TEST 2 – Level builder

In this post I will try to explain how the levels are constructed in Prince of Persia. This information is very well explained in the technical documentation linked in the previous post and in the Prince of Persia Specifications of File Formats document by the Princed development team.

Basically each level is composed of a maximum of 24 rooms. Each room is constructed with 30 tiles (10 tiles for each of the three stages). Each tile is identified with a code representing its type: floor, wall, door, torch… In addition, each tile has a modifier that lets you define certain aspects as the object (eg, walls decoration or activation of doors when you step over plates). Each level also contains other information that allows linking the room, defines guard’s position and strengh, prince’s initial position, and so on…

The level builder must take into account two important things:

1. Due to the unique perspective of the rooms, these should be drawn from left to right and bottom to top. In addition, the tiles must be overlaped so that new tiles hide parts of previous tiles.

2. For the dungeon levels, Jordan implemented an algorithm that allowed, from a reduced tileset, generating different types of walls giving a sense of variety to the rooms. Basically the algorithm constructs the walls from a basic block and then applies a design modifier according to the position of the tile on the screen. Very clever! In my case, for simplicity, I have not implemented this algorithm, but I’ve just created a spritesheet with all possible designs walls (not many).

First room of level 1

Finally, with all this information, I built a json file for each level that allows me to build automatically every room. This json is generated from the xml file exported by apoplexy, a level editor for Prince of Persia 1 and 2.

The result can be seen here, you can navigate through the first level moving between rooms with the cursors keys. As an added bonus I implemented the animations for torches and potions.

For the next post I will try to delve into the shadowy world of collision detection… arghhh!

Test 1 – Prince animation

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.

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.

Prince of Persia recreation in HTML5 and javascript

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 MS-DOS loading screen