I Tried To Code the Engine of 1993 RPG Game Lands of Lore in JavaScript


The article shows my approach and ideas for programming the Lands of Lore engine in Vanilla JS.

Lands of Lore: The Throne of Chaos by Westwood Studios is one of my favorite games (here are my top 10 games). I’ve played through it countless times.

In 2016, I had decided that with my programming skills at the time, I would try to reprogram the engine for the game in Javascript.

At the end of the article you will find a link to Github, where all project files are available for download.

Here is a short video showing the running engine

https://medium.com/media/da682c31f316bd6b9fa2030b51499a7f/href

Tech-Demo

Under the following link you can test the tech demo of my game engine yourself. Attention: the engine can currently only be controlled properly on the desktop with mouse and keyboard.

👉 Lands of Lore Game Engine in Javascript (stephan-romhart.de)

Feel free to read my code. 😀

Technical background

The engine runs in an HTML canvas element and is tile-based. Each tile has properties like

Solid defines whether a tile is walkable, explored whether the tile has been revealed on the auto-map. Four places with infinitely stacked items are theoretically possible per tile. I defined the ceiling, floor and wall parts in textures.

To render a view, you need a viewing direction. Then you loop through all the tiles in front of you at a depth of four and writes the texture graphics to the canvas cache to output the assembled image.

Graphical elements to render a view.

Running animation and others

To find out how Westwood animated running in the tile grid in 1993, I had watched footage of Let’s Plays of Lands of Lore frame by frame.

It turned out that when the player moved between two tiles, the view was scaled from the center until the scale corresponded to the view in the same line of sight of the next tile. Then the player position was placed on the new tile.

When turning left or right, the view was stretched out, simulating a kind of motion blur.

I sat on the motion animations for a good week until they felt round. I know, for all younger players in the world, these animations are jerky. 😂

Screenshot of the running engine.

Furthermore I programmed an impact animation when you run into the wall or closed doors. You lose a bit of life when you crash into something.

The Auto-Map

In Lands of Lore there was an auto-map that showed what had been explored so far and where you could still go, recognizable by the non-brown outer wall. I programmed the map renderer in about one day.

Screenshot of the coded auto map.

For the map I still needed a class for a bitmap font renderer that automatically writes the map name and important elements (player position, doors, treasure chests, …) of the map into the legend.

Bitmap Font File

Inventory and items

The inventory is an infinite scrolling ribbon that you fill with the mouse. Items can be dragged and dropped into the inventory, or removed from the inventory.

I didn’t manage to integrate an interaction between for example a healing potion and a character.

Screenshot of inventory.

Interaction

In addition to items, two other interactions are integrated in the engine:

Both are important elements for the engine and I worked on both features for several weeks until they worked reasonably well.

When switching maps through a staircase, for example, I programmed a fadeout and fadein animation in the viewport to make the connection feel a little less harsh.

The game editor

With the help of jQuery (yes, that was totally ok in 2016) I then built myself a level editor that could change maps, textures, interaction and camera position.

For a save function my mental stamina was then no longer enough. 😅

Screenshot of the game editor to create the map data.

Files

In total, the engine without textures, sounds and level data did not reach 100kb project size. Encapsulated in single files there were 17 javascript files in the end.

All used javascript files

Texture creation in Photoshop

I created all textures in Photoshop. That would have been quite an effort to draw several artworks for halfway believable environments. To get ahead faster, I just took some visual elements directly from Lands of Lore.
I did all the graphics in Photoshop.

Why did I stop developing on the engine?

After about five months of working on the engine, I simply ran out of steam. I had started to integrate NPCs and enemies into the engine, but I didn’t want to succeed with collision detection, a rudimentary AI, or a combat system, so I stopped developing the project.

All in all, the project was very instructive and interesting for me. Maybe I’ll get up the mood again and continue building the engine.

Please let me know, if you find articles like this interesting. I would love to hear your thought on how I built the land of lore engine. 😊

Github Link

stephan-romhart/Lands-of-Lore-Engine-in-Javascript: I tried to code the engine of Westwood Studios Game “Lands of Lore: the Throne of Chaos” from 1993 in plain javascript. (github.com)

Thanks for reading.
I look forward to your feedback. 😍

Please comment, bookmark or follow me to support my channel.

If you have a specific topic in mind, you would want me to write about, let me know on twitter: https://www.twitter.com/@stephan_romhart


I Tried To Code the Engine of 1993 RPG Game Lands of Lore in JavaScript was originally published in Level Up Coding on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: Level Up Coding

October 30, 2021
Category : News
Tags: engine | game-development | javascript | rpg | vanilla javascript

Leave a Reply

Your email address will not be published. Required fields are marked *

Sitemap | Terms | Privacy | Cookies | Advertising

Senior Software Developer

Creator of @LzoMedia I am a backend software developer based in London who likes beautiful code and has an adherence to standards & love's open-source.