A 2D game without canvas, only html vibes. SVG is used not only for artwork but to annotate as much world/level data as possible, simply by drawing shapes accoring to a few rules. Exploring wether it's worthwile to make it into an open source 2d world game engine.
Biggest gain: updating the camera element (window inner size) instead of map element (actual map size)
:loudspeaker: Tunnel reverb!
Adds a convolver audio filter using Tuna.js.
When the player is inside a #tunnel path element in a racetrack file, the engine sound is mixed into a reverb / convolver filter and its wet level is increased. Wet level decreases to 0 when ouside of this path element.
:construction_worker: Marshal posts everywhere!
Updated race track files with marshal posts, spawning marshals
:star_struck: Specular lighting effect on the car!
Adds a SpecularLight filter to the car element, simulating a bevel on the pixels inside it.
Inside this element, the car layer containing the livery graphic has this bevel applied.
one
two
three
highlight on the left side of the car bodywork and roof
highlight on the right frond and right side of the car
highlight on the rear wing and the top of the bonnet / hood / engine cover
Note how the highlights on the bodywork always seem to be lit from the south (bottom of the screen). To emphasize this idea, the drop shadows are always pointing north (towards the top of the screen).
:art: New car, livery and wings!
Just to show off that Specular light filter ;)
:racehorse: FPS galore
Updating the camera element rather than the map element (containing all the layers), saves some style recalc time. The map (and layers) are all 30720 pixels squared, the containing camera element is only as large as the window. Even though we're passing css variables that don't necessarily cause a reflow, it still calculates on the large layers. When we set these variables to the much smaller container element, the updates are much faster.
Hint: use the Layers panel to see what's being composited & painted
Turn out to be
:muscle: :triumph: :muscle: massive
Biggest gain: updating the camera element (window inner size) instead of map element (actual map size)
:loudspeaker: Tunnel reverb!
Adds a convolver audio filter using Tuna.js. When the player is inside a #tunnel path element in a racetrack file, the engine sound is mixed into a reverb / convolver filter and its wet level is increased. Wet level decreases to 0 when ouside of this path element.
:construction_worker: Marshal posts everywhere!
Updated race track files with marshal posts, spawning marshals
:star_struck: Specular lighting effect on the car!
Adds a SpecularLight filter to the car element, simulating a bevel on the pixels inside it. Inside this element, the car layer containing the livery graphic has this bevel applied.
Note how the highlights on the bodywork always seem to be lit from the south (bottom of the screen). To emphasize this idea, the drop shadows are always pointing north (towards the top of the screen).
:art: New car, livery and wings!
Just to show off that Specular light filter ;)
:racehorse: FPS galore
Updating the camera element rather than the map element (containing all the layers), saves some style recalc time. The map (and layers) are all 30720 pixels squared, the containing camera element is only as large as the window. Even though we're passing css variables that don't necessarily cause a reflow, it still calculates on the large layers. When we set these variables to the much smaller container element, the updates are much faster.
Hint: use the Layers panel to see what's being composited & painted