The Nest (v2.0.0)

20160609 – 20160906

Refactored the whole Nest into a module-like JS-application.

Some of the changes include:

Essential functions like handling images, are now defined in separate source-files as dedicated objects, attached to TheNest.
They are then bundled and minified at production.

Instead of just logging debug-info to the browser-console, it now contains a terminal-like feature.
While working on the game project, I created a console to send commands or to call functions in the game.
Now that console is integrated with the core-script and the game only assigns commands.
The core-console can´t do much at the moment, besides showing feedback while navigating through The Nest, changing the level of debug and enter rooms directly (instead of going to the code-entering room).

The loader now features a queue and got some improvements.

Rendering Loop
The core-script has a dedicated loop for all rendering. (Instead of declaring new intervals in each room)
It will only render when the browser-tab is visible, to prevent unnecessarily use of resources.
Frame rate can also be adjusted.

Every room is now an object containing a title, needed media, rendering-loop-logic and such. (Instead of a bunch of nested functions)

The sound-toggle is improved. New full screen mode and quality-settings for better rendering-performance. Most images in the old parts is below 720p so rendering the canvas-animations at maximum resolution by default is now changed to 720p.

Settings are cached in the browsers sessionStorage to remember choices for rendering & sounds. This will be removed automatically when browser-tab is closed.

I did a lot of work on the loops to make them as gapless as possible. Ended up using 2 parallel players, a time interval that switch players when one is near the end, latency correction by inspecting the browsers generated timeupdate events and constant bitrate in optional .ogg file without any meta-data-silence.

This update was mostly about code & layout. However, two new images were added to the entry-points. I did some 3D-modeling to create a better looking keyboard and also modeled the ‘briefing room’ that consists of pillars and a display.

This will probably be the last major update to the core.
Next up is more rooms.


I´ve started using Sqlite instead of mySql to hold information about objects in the game.

This is mostly because Sqlite uses 1 file as the database and don´t require a (dedicated) host to serve the database like mySql does.

So in my case, I can put a .sqlite file in the game-project and skip extra configuration-steps for the development-server and production-server since most PHP-servers include the sqlite-pdo as default.
Less CPU-overhead is also nice.

GitLab & Gulp

20160321 – 20160429

As mentioned, I needed to break apart the big game project file into a few files and then use a tool to assemble them for production. Got it working with gulp (-concat) and spent some time on making my gulpfile

The refactoring process included a lot of renaming, optimizing and changes in structure.

I´ve added The Nest as a private repository on GitLab to keep track of further changes.

Using Gulp

Game Project – Refactoring started

When returning to coding after a lot of 3D-modeling, I felt that the project needed improvements.
Earlier, I´ve designed every project/part as a ‘room’ in The Nest and gave it one dedicated file containing all room-specific JS (not including libraries for 3D etc.).
This project is now up in about 5000 lines, so I had to break it apart in multiple files to make developing easier and then assemble them back before running.

I came across gulp while working on another project and must say that it really make things smooth through gulp-concat & gulp-watch. (Available through npm)
I can now work on different parts and when something gets updated, my gulp-watch script will run gulp-concat to merge these parts into one file.

I will probably not update this development blog as much as before, because most changes will be about optimizing and refactoring code. When new features are added, they will get posted here at some point.

Game Project – Nest-oil facility

New building in progress

This building will be used as a facility to gather “oil” from The Nest, the important component used in all creations of buildings and life.

The first two weeks was mostly about modeling different objects to use in the construction (girders, steel-beams, gears & chains).

This last week, I´ve assembled everything and created pipes, silos, streetlights and rendered with different settings on the lightning.

Later, I will probably create more textures and think about how to implement the resulting images since it won´t be just a single one. While creatures work, they will be at different positions around the working-wheels, making all gears rotate so that the pump will go up. I´ve already connected all 3D-objects with bones/armatures and constrains, so it´s only the logic left to write. (Switch images of the building at it´s different stages while creatures work and also move creatures by the same conditions)
There will be a buffer-storage in this building for collected material. Next building will be a storage-facility for more continuous ‘harvesting’, first I need to do some coding on this one.


Game Project – 3D Modeling (Factory)

Spent this week modeling a factory.


Started off with an 8x8x8 area with a backbone-pipe.


Made 6 backbones more in a circle around the center (like a hexagon) and added a bridge around an elevator.


Added walls at each backbone to surround each floor.


Decided to make each floor x2 in height and did some tests with lightning.


Rendering with lightning and then mixed with some ambient occlusion.


Rendering with a transparent background.

Game Project – Orthographic Material #2


After some testing and reading, I saw that people were changing the rotation angle to 30° (60° in blender) instead of “true isometric” 35.264° so that the surface would have a 2:1 pixel ratio.

I decided to leave the rotation in “true isometric” and instead correcting with an edited aspect ratio (1:1.157) in the rendering settings so I could have the desired 2:1 relation on the surface and at the same time match the width and height into a square without redesigning my models height. This will make the width/depth/height and angle of view look like a “true isometric” projected view too, although it´s a slightly skewed one. So now the camera is ready to render images to fit my 2D-mode.

If the skewed images won´t do, I will probably crop them after giving them one extra tile above. I don´t want to use lower heights in the 3D-models because I want to be able to use them in 3D too.

Found this guide while researching:



Create your website with
Get started