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.
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
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.
Feel free to read my code. 😀
The engine runs in an HTML canvas element and is tile-based. Each tile has properties like
- solid: 0 / 1
- explored: 0 / 1
- items: [,,]
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.
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. 😂
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.
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.
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.
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.
In addition to items, two other interactions are integrated in the engine:
- Opening and closing doors.
- Teleporting to other maps by staircases
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. 😅
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. 😊
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
Source: Level Up CodingOctober 30, 2021