Thursday, October 8th, 2009

Play Kings Quest, Space Quest, and More… Using Canvas Tag

Category: Canvas, Games

<p>Martin Kool and Sjoerd Visscher have gotten many of the old Sierra Online games running on the Canvas tag, including many of the Kings Quest series, Space Quest series, and Leisure Suit Larry.

gr

lsl

Martin Kool describes some of the long process it took to get these into the shape they are:

In 2003, I created Good Old Adventures. It was a chat environment set in the Sierra worlds without actual gameplay. All images were manually crafted, copy/pasting from WinAGI Game Development Studio. A time consuming process.

sq
Four years later I wrote a few conversion tools in .NET to extract Sierra’s in-game images and objects from the original games, and display them properly on the web. The “only thing” left to do then was to export and understand all in-game logics.

I was able to convert the logic to javascript, but there was one big problem: Sierra’s code used GOTO statements, and those could jump anywhere in the code, even inside a nested “if”-statement. It seemed unsolvable in javascript.

I sat down together with Sjoerd Visscher, one of my collegues at Q42, and we came up with a solution. Using a decompilation approach to get rid of nested “if”-statements and putting the whole shebang inside a huge switch/case statement, we could mimic line numbers and GOTO’s while maintaining performance. World domination was within reach :-D

code

It was halfway 2008 when I started to work on it, and Sarien.net is the result.

Posted by Brad Neuberg at 6:00 am
10 Comments

+++--
3.9 rating from 44 votes

10 Comments »

Comments feed TrackBack URI

“I was able to convert the logic to javascript, but there was one big problem: Sierra’s code used GOTO statements, and those could jump anywhere in the code, even inside a nested “if”-statement. It seemed unsolvable in javascript.”

I solved that in my 2005 Web AGI Engine (http://web.ist.utl.pt/antonio.afonso/agi/) by separating the logic into different functions, whenever there was a new label I forked it into a new function and returned the number of that function.

Here’s the LSL logic compiled into JS: http://web.ist.utl.pt/antonio.afonso/agi/cache/
My compiler is written in PHP: http://web.ist.utl.pt/antonio.afonso/agi/logic.phps

Comment by aadsm — October 8, 2009

Canvas tag? Where did you get that from? It’s all just a bunch of GIFs. It works in IE6! And by the way, I only helped with the GOTO issue, the rest is all Martin!

@aadsm: yes, that is basically the same solution. But in a switch statement it looks more like real line numbers. :-)

Comment by sjoerdvisscher — October 8, 2009

No canvas tag according to the DOM Inspector, just a bunch of PNGs

Comment by Jeria — October 8, 2009

ahahahahahha

Also I tried to say HURRRRRRRRRRRRRRRRRR but it crashed :(

Comment by Darkimmortal — October 8, 2009

Silly HTML stripper

<div id=”canvas”>

Comment by Darkimmortal — October 8, 2009

Aha, that’s crazy! Didn’t realize it’s just a bunch of GIFs. I guess I just assumed that was the only way to do it.

Comment by Brad Neuberg — October 8, 2009

All that work for GOTO and you could have used “Label Statements”:
.
http://bclary.com/2004/11/07/#a-12.12
.
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Loop_Statements/label_Statement

Comment by jdalton — October 8, 2009

I understand that goto and labels aren’t exactly the same but I bet you could have used them for some of the cases, or found better ways to handle it (like breaking things up into smaller functions and calling them).

Comment by jdalton — October 9, 2009

@Brad Nueberg: So why don’t you update the headline then? It is misleading for people that don’t read the comments.

Comment by Jeria — October 9, 2009

Leave a comment

You must be logged in to post a comment.