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

Image of AssemblyAI tool

Challenge Submission: SpeechCraft - AI-Powered Speech Analysis for Better Communication

SpeechCraft is an advanced real-time speech analytics platform that transforms spoken words into actionable insights. Using cutting-edge AI technology from AssemblyAI, it provides instant transcription while analyzing multiple dimensions of speech performance.

Read full post

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Discover a treasure trove of wisdom within this insightful piece, highly respected in the nurturing DEV Community enviroment. Developers, whether novice or expert, are encouraged to participate and add to our shared knowledge basin.

A simple "thank you" can illuminate someone's day. Express your appreciation in the comments section!

On DEV, sharing ideas smoothens our journey and strengthens our community ties. Learn something useful? Offering a quick thanks to the author is deeply appreciated.

Okay