Skip to content
2D strategy game engine for browsers
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.

GPLv3 Affero License Gitter

Development halted

Unfortunately for several (personal) reasons, I've decided to cancel the development of the engine. There was a game in an ok status being developed with it, so with small performance and bug tweaks then engine was in quite a good shape already. But there is a time for everything.


The development is still in alpha stage. Basic features are mostly done for the engine, but the API and structure can still go under changes, please take that into account! Also please contact me if you plan to use the engine or have questions! Gitter is an easy option too.


2D turn-based strategy game engine for browsers. The engine originally got into development to get an engine for more hard-core turn-based games and not casual games. I was frustrated at waiting for those games and decided to start making it on my own. Browser environment is a perfect match for turn-based multiplayer. You can continue your turn easily anywhere, any time!

If you are interested contact me ( I am eager and grateful to get any feedback or help with the project.

Table of contents

Hot links



npm i flatworld


Best example is found in plunkr. This is the base map created with the engine. The latest example will be found from the engines manual tests (in src/tests/-folder). A working example should also be found in:, but not quaranteed that it is always on (as server can be down or dns changed).

Setup a simple map

The main module for the whole map is core.Flatworld, so you should always primarily look through it's API and then dig deeper. The best examples for setting up a map at the moment is still going through the code. Check the test-files: tests/manualTest.html and tests/manualStressTest.html (which are more comprehensive). They use horizontalHexaFactory to go through the map data and setup objects based on that data. You can use horizontalHexaFactory if you want or setup your own factory and own data structure. Factories always have to follow a certain data structure so they might not be something everyone wants or can cope with.

Simple unfinished example:

import { Preload } from '/components/preloading/preloading';
import { ObjectTerrain, ObjectUnit } from "/components/map/extensions/hexagons/Objects";

preload = new Preload( "", { crossOrigin: false } );
preload.addResource( "terrainBase.json" );

preload.resolveOnComplete().then(() => {
	var map, thisLayer, newObject;
	var layerOptions = {
    	name: "terrainLayer",
      	drawOutsideViewport: {
        	x: 100,
        	y: 100
      	selectable: === "unitLayer" ? true : false
    var objData = {
      typeData: "typeData,
      activeData: "someData"
    var currentFrame = 1;
    var hexagonRadius = 50;
    var objectOptions = {
    	radius: hexagonRadius

	map = new Map(canvasElement, mapOptions );
	dialog_selection = document.getElementById("selectionDialog");
    defaultUI = new UI_default(dialog_selection, map);

    /* Initialize UI as singleton */
    UI(defaultUI, map);

	map.init( pluginsToActivate, startPoint );

	thisLayer = map.addLayer(layerOptions);
	newObject = new ObjectTerrain({ x: 1, y: 1 }, objData, objectOptions);


Factories are the ones that get the server-side data, iterate through it and create the necessary objects to the FlaTWorld map.

You most likely need to implement your own factory function for your game, if the game is not very close to the factory that the engine provides. At the moment I suggest you read through the code in horizontalHexaFactory.js and create your own based on that.


The map supports adding extensions and even some of the core libraries parts have been implemented as extensions. You must comply to few rules:

  • Be careful when constructing an extension. They have a lot of freedom to mess around with the map data (which might change in the future).
  • When extension is initialized, it will create this.mapInstance and this.protectedProperties. First has the current instantiated map and second the private methods and properties for plugins to use
  • Extensions init-method must return promise, to verify, when the plugin is ready
  • All parameters extensions can receive are functions, that are bound in plugin context
  • Must return an object containing:
    • init-method
    • 'PluginName' variable, which has same value as the exported library name

You can see the required format from e.g. hexagon extension.

The format for these rules as an example:

	export const sameNameThatIsExported = setupModuleFunction();

	function setupModuleFunction() {
    return {
  	  pluginName: "sameNameThatIsExported",
  	  init: function(map) {}


All UIThemes should extend the UIParent module and they have to implement methods listed in UIs private function validateUITheme.

You have to initialize the UI by calling UIInit method in flatworld.


For events involved with the FlaTWorld map, you should check the current list from the mapEvents.js file. We try to keep it as up-to-date as possible.

Requirements and efficiency goals

Supported environments

  • Desktop: Edge, Chrome, Firefox, Safari
  • Mobile: Devices not listed, but basically anything that has browser, with these restrictions:

Aimed mapsize and efficiency

These are still subject to change (both raised and lowered). The map is planned to be big! In the way that I checked pretty much the biggest civilization community made maps and got over it. Since those maps do not seem to be sufficient for the plans I have for the engine! But these are still very realistic goals with the present setup.

  • Maximum map size: 225 000 000 pixels (15k * 15k)
  • Total object count on map: ~50k
  • FPS in mobile min. 30. No FPS goal set for desktop as mobile defines the limits.


Thank you to browserstack for providing magnificient testing tools browserstack logo


Copyright (c) 2017 Janne Hyytiä



Thank yous (Pathfinding module)

You can’t perform that action at this time.