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.
This change implements a collision system into the game world. The system works in such a way that allows for fences and walls as well as singular objects.
If the scene contains a <g id="obstacles"> element, it will find paths inside it (ellipse, circle, rect and path elements). And place one or several circular (but not rendered) collision objects in its location in the game world.
For now, ellipse, circle and rect will be turned into one single obstacle (at the element's x,y origin point) whereas a path will be evaluated and have an obstacle placed along it's stroke @ every 100px length.
In the image the arced path would generate about 10 collision objects along itself
Here's the :cut_of_meat: of the sauce
In this setup, the code explicitly looks for elements with a red stroke color, probably should not be enforced?
i suppose the other elements could also simply be evaluated like that, but I'm not sure if path.getTotalLength() and path.getPointAtLentgh() are available methods on those "predefined shape" elements.
(Doesn't suuuper matter either)
Eddy's note: This iteration only contains static collisions, ie, you can only interact with immovable objects. Expanding this into a system where items can also be kicked around should be fairly simple and require a different type of collidible and a dedicated collision handling function for this type of item.
You can playtest this in Interlagos, the other tracks haven't been updated just yet.
ikbensiep
commented
9 months ago
This change implements a collision system into the game world. The system works in such a way that allows for fences and walls as well as singular objects.
If the scene contains a
<g id="obstacles">element, it will find paths inside it (ellipse,circle,rectandpathelements). And place one or several circular (but not rendered) collision objects in its location in the game world.For now,
ellipse,circleandrectwill be turned into one single obstacle (at the element's x,y origin point) whereas a path will be evaluated and have an obstacle placed along it's stroke @ every 100px length.In the image the arced path would generate about 10 collision objects along itself
Here's the :cut_of_meat: of the sauce
In this setup, the code explicitly looks for elements with a red stroke color, probably should not be enforced?
i suppose the other elements could also simply be evaluated like that, but I'm not sure if
path.getTotalLength()andpath.getPointAtLentgh()are available methods on those "predefined shape" elements. (Doesn't suuuper matter either)You can playtest this in Interlagos, the other tracks haven't been updated just yet.