liki.js

liki.js is a framework for building HTML5 games using a dynamic layout for predictable UI (an intended creative restraint). With liki.js projects, HTML is used to organize the three shifting regions of the screen: the stage, the log, and the control strip.

The stage is a 9x9 unit area used for graphics such as tilemaps, background elements, and animated sprites. This is a canvas element with a Kaplay instance which comes pre-packaged with a suite of useful game development modules.

The log is a 7x7 unit area used for text, maps, inventories, diagrams, character portraits, and other useful UI. The log is not itself a canvas element (utilize the HTML DOM for text manipulation, links, images, etc.), but parts of the log (or even the entire log) can potentially act as a separate canvas or Kaplay instance.

The control strip is a flexible area with three 2x2 units (and two 1x1 units) which stack horizontally or vertically depending on screen orientation and media queries. Thank you, CSS! The strip layout can be controlled with CSS Grid and with a little extra work, these blocks can be swapped around for a dynamic UI. Just a thought!

The two 1x1 unit areas of the control strip are best used as a general settings button (for things like accessibility options and save file management) and a share button (with relevant links and actionable forms to boost audience).

[x] Layout system (CSS)
[x] Left-handed accessibility
[ ] Settings menu
[ ] Share menu

Core Systems

[ ] Tilemap loader (build scene from map data)
[ ] Player controller (movement)
[ ] Entity system - interact() with facing tile
[ ] Inventory system - array of items, addItem(), removeItem()
[ ] Dialogue system - display entity chat, portrait, etc.

Prototype project-based system expansion

[ ] Farming Sim
[ ] Merge Game

Target Game MVP

[ ] Build out one level of Tiny Scribe (cooking with granny)

With the core systems in place, LIKI.js can be used to create games quickly.