Make separate sprites for individual svg#layers

[ikbensiep]

To eliminate the need for two world files per level (for layering effect track.svg and track-bridges.svg are placed below and above the player car), the app should make separate sprites out of the various layers inside the track.svg file, so a single level/track contains all the necessary information.

Stacked from the bottom, each track file would have layers something like this:

1. world scenery
2. racetrack path (including start/finish line / sector blocks)
3. racetrack gfx (ie, racetrack artwork including track markings, kerbs, tire tracks, buildings)
4. bridges / tunnels / ad boards (stuff a player can drive underneath)
5. clouds / birds ?

Suggested approach

lmao no, see comment below

• iterate top-level <svg:g inkscape:label=""> elements
• set all to style="display:none" except selected layer
• create Image object per selected layer, assign image to new Sprite object
• re-assemble sprites into working game world

srsly: load each track.svg#layer into a Sprite object (on/off track detection, timing sectors could be added later)

Good side effect

The game would then only use the racetrack path sprite to do logic / calculations on (perhaps this sprite can even be scaled down for performance reasons) before merging all sprites including the car together onto the <canvas>

[ikbensiep]

Ok I absolutely just learned about svg-stacks just by adding the tag svg and this came up under #svg-sprites. Potentially makes things a lot easier. Support is :fire: chefs kiss :fire: