SVG Support for CNE and HScript (Co-authored by Til)

[THEkatinamicrowave]

SVG Support for Codename Engine and HScript

This adds support for Scalable Vector Graphics. Essentially allows for smoother graphics by exporting the SVG data as FlxSprite.

[ DON'T USE svg.width OR svg.height AS THEY ARE FLXSPRITE PROPERTIES; USE svg.svgWidth AND svg.svgHeight INSTEAD. ]

Authored by: Microkat (added flxsvg haxelib, created cne-flxsvg from flxsvg)
Co-authored by: Til [email protected] (modified cne-flxsvg, made flxsvg accessable from hscript, is generally cool)

Planned updates:

• SVG background support (for yourstage.xml)
• SVG animation support
• SVG character support

[THEkatinamicrowave]

mac os moment 💀

[TechnikTil]

i meant in the commits themselves, but who cares

[THEkatinamicrowave]

here's an example usage

svgtest.xml

<!DOCTYPE codename-engine-stage>
<stage zoom="0.9" name="svgtest" folder="stages/default/" startCamPosY="600" startCamPosX="1000">
	<sprite name="bg"               x="-600" y="-200"   sprite="stageback"       scroll="0.9" />
	<sprite name="stageFront"       x="-600" y="600"    sprite="stagefront"      scroll="0.9" />
	<girlfriend />
	<dad />
	<boyfriend />
</stage>

svgtest.hx

import flxsvg.FlxSvgSprite;

var svg:FlxSvgSprite;

function create() {
	svg = new FlxSvgSprite(0, 0);
	svg.loadSvg(Paths.svg("boyfriend"));
	svg.svgWidth = 4000;
	svg.svgHeight = 4000;
	svg.y = -3300;
	svg.cameras = [camHUD];
	add(svg);

	trace(svg.svgWidth + ', ' + svg.svgHeight);
}

boyfriend.svg

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 28.5.0, SVG Export Plug-In . SVG Version: 9.03 Build 54727)  -->
<svg version="1.2" baseProfile="tiny" id="Layer_1" xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	x="0px" y="0px" viewBox="0 0 86 86" overflow="visible" xml:space="preserve">
  	<g>
		<g>
			<path d="M 19 39 L 5 42 L 0 36 L 20 38 L 19 39 Z" fill="#0000C0" />
			<path d="M 19 38 L 0 36 L 1 35 L 20 37 L 19 38 Z" fill="#0080FF" />
		</g>
		<g>
			<path d="M 19 39 L 25 34 L 39 28 L 54 31 L 53 36 L 51 42 C 61 42 58 47 51 48 L 42 49 C 26 49 20 48 19 44 L 19 39 Z" fill="#FFE0FF" />
			<path d="M 18 51 L 19 39 L 25 37 L 28 44 L 26 44 L 27 50 L 21 48 L 18 51 Z" fill="#00FF80" />
			<path d="M 19 39 L 17 31 L 18 30 L 15 29 L 17 28 L 14 18 L 26 11 L 51 15 L 52 35 L 31 34 L 25 37 L 19 39 Z" fill="#FF0060" />
			<path d="M 31 34 L 30 23 L 26 11 L 39 14 L 51 15 L 50 25 L 52 35 L 42 33 L 31 34 Z M 15 29 L 17 28 L 19 29 L 15 29 Z M 17 31 L 18 30 L 24 30 L 20 31 L 17 31 Z M 14 18 L 26 11 L 20 16 L 14 18 Z" fill="#FF00C0" />
			<path d="M 20 40 L 24 38 L 26 43 L 23 43 L 26 49 L 21 44 L 20 45 L 20 40 Z" fill="#40FFC0" />
		</g>
		<g>
			<path d="M 25 37 C 25 21 34 10 41 3 L 38 17 L 55 8 C 55 16 64 31 69 31 L 55 32 C 60 35 61 36 63 39 L 52 39 L 53 36 L 31 35 L 31 42 L 25 37 Z" fill="#00FF80" />
			<path d="M 30 32 C 31 22 31 22 36 13 L 34 25 L 51 14 C 43 23 51 30 60 30 C 47 33 34 33 30 32 Z" fill="#40FFC0" />
		</g>
	</g>
</svg>

[TechnikTil]

is generally cool

awwww thanks :D

[Drago-Cuven]

@TheZoroForce240 I'd personally need this.

[Raltyro]

I think we could do better

[MRK2009]

IT GOT CONFLICTED!!! WHAT THE F#CK!!!