DEV Community

Cover image for SVG SvelteKit game engine project
François-Emmanuel CORTES
François-Emmanuel CORTES

Posted on

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 */ })
Enter fullscreen mode Exit fullscreen mode

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
    } 
})
Enter fullscreen mode Exit fullscreen mode

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 {})

})
Enter fullscreen mode Exit fullscreen mode

Systems

Using the query utilituy funtion inside entity updater:

e.system ('bonus-elixir-bottle', (query) => {
    query ()
})
Enter fullscreen mode Exit fullscreen mode

The main updater:

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

$: ecs.update ()
Enter fullscreen mode Exit fullscreen mode

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

Please browse project site URL:

http://codefacteur.xuz
Enter fullscreen mode Exit fullscreen mode

Top comments (0)