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

Postmark Image

Speedy emails, satisfied customers

Are delayed transactional emails costing you user satisfaction? Postmark delivers your emails almost instantly, keeping your customers happy and connected.

Sign up

Top comments (0)

Billboard image

Create up to 10 Postgres Databases on Neon's free plan.

If you're starting a new project, Neon has got your databases covered. No credit cards. No trials. No getting in your way.

Try Neon for Free →

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay