Architecture Overview:

The above flowchart shows how the game engine works. The green lines represent the order that the program executes (a.k.a. the "control flow), and the red lines represent the plugins reading and writing data from the Entity objects in the EntityList that represents the main scene. The plugins typically don't just do static reads from the Entity objects, usually they leverage the abilities of the underlying Jabr objects to provide change listeners so that they can run code only exactly when needed (as opposed to doing static reads every frame which is very slow because they require constant read operations).

We can see a basic example of this in practice by looking at the source code for the level loader demo:

import { onMount, onCleanup, createSignal} from "solid-js"
	import { isServer } from 'solid-js/web'
	import {createGameCore, Entity, EntityList, RenderSettings, createGameLoop} from 'lilis-engine'
	import createPixiRenderer from 'lilis-engine/pixi'
	import { LevelLoader } from "lilis-engine"
	import createSolidRenderer from 'lilis-engine/solid'
	// ...
	// ... inside our SolidJS component mount
	const renderSettings = RenderSettings({canvas})
	const entities = EntityList([])
	window.entities = entities
	const levelLoader = LevelLoader(entities, {
		levelA: {
			mount: (_, {entityList})=>{
				entityList.addChild(Entity({imageURL: 'chicken by Diarandor.png', x: 0, y: 0, width: 50, height: 50}))
			}
		},
		levelB: {
			mount: (_, {entityList})=>{
				entityList.addChild(Entity({imageURL: 'warrior.png', x: 0, y: 0, width: 50, height: 50}))
			}
		}
	}, {
		defaultLevel: 'levelA'
	})
	const levelSwitcher = Entity({solid: function LevelSwitcher(){
		return <button onClick={()=>{
			levelLoader.loadLevel(levelLoader.activeLevel.get().name === "levelA" ? 'levelB' : 'levelA')
		}}>Switch Levels</button>
	}})
	entities.addChild(levelSwitcher)
	const pixiRenderer = createPixiRenderer(entities, renderSettings)
	renderSettings.solidSetter = setSolidGameContents
	const solidRenderer = createSolidRenderer(entities, renderSettings)
	const gameCore = createGameCore({plugins:[createGameLoop(), pixiRenderer, levelLoader, solidRenderer]})
	await gameCore.mount()
	// SolidJS component boilerplate continues below

So what's happening here? Basically we are assembling our game and our game engine by creating each of our objects and providing them with the context that they need. Entity objects are the basic units of our game scene, and EntityList is our container to hold them. "entities" is our main game scene, so we pass it our plugins so that they can do their jobs. The gameCore just needs to know the list of plugins including at least one plugin to run our game loop. For more about plugins see the "Plugin System" tab below.

Finally we call gameCore.mount() which automatically tells the gameLoop to start running (and the game loop calls the rest of our plugins each frame). Plugins usually need other context on a case-by-case basis, like renderers will usually need a canvas or some other way to render to the screen. To learn more about the basic building blocks of the game engine see the "Core Exports" section below.