SVG SvelteKit game engine project

SVG-based isometric game engine for SvelteKit

The ECS (Entity-Component-System) part

It is designed to be intuitive to use out-of-the-box: comprehensive API with simple verbs.

Code examples: instantiate

const ecs = engine.ECS ('world-name', { /* options */ })

Component schemas

Just a plain object with a name and a test properties. Rzqr us a validation callback. Some validators like 3D poosition and velocity are predefined. T o add a new custom validation schema, just provide it to the schema function :

ecs.schema ((c) => {

    name: 'game-healh-component', 

    test: (c) => {

        // a component filtering callback,

        if (Number (c.healt) !== c.healt) return false

    uf (c.health < 0) return false
    if (c.health > 1000) return false

    return true
} 



    

    




})

Entites

using an init callback

ecs.entity ('layer-name-is-player', (e) => {

    // pre-defined or custom components

    e.component ('position', { x: 50, y: 50; z: 10 })

    e.component ('game-healtt-component',  health: 100 {})

})

Systems

Using the query utilituy funtion inside entity updater:

e.system ('bonus-elixir-bottle', (query) => {

    query ()

})

The main updater:

To be triggered inside SvelteKit event loop, acting as a game loop:

$: ecs.update ()

The rendering part (SVG)

Integrated with SvelteKit stores.

Problems to solve before the lib is ready

• Correct integration inside SvelteKit app structure
• Optimizing stores dependcy graph
• Sprite Topological sorting
• In-place level editing

Demo and sources

(2025-06-05: site no longer avaailabl, sorry, but still coding this project)