SVG Assets for Mobile


#1

In order to have high quality graphics on mobile, I want to avoid scaling my graphics, or use multiple sizes for different resolutions. My thought is to use svg and convert them all to bitmaps and save them somehow for subsequent plays, so this would only have to be done once, the first time played.

Does anyone have any pointers or know of any examples?

Thanks in advance.


#2

Hey Dean I currently use my own framework designed specifically to deal with almost all svgs called app here’s the code snippet for my creation of svgs into a shape object cachedAsBitmap

public static function createSprite(?x:Float = 0, ?y:Float = 0, path:String,w:Int=-1,h:Int=-1,oval:Bool=false):Shape
	{
		var shape = new Shape();
		var sub = path.substring(path.length - 4, path.length);
		if (sub == ".png" || sub == ".jpg")
		{
	var bmd = Assets.getBitmapData(path);
	var mat = new Matrix();
	var sx:Float = 1;
	var sy:Float = 1;
	if(w > 0) sx = 1 / bmd.width * w;
	if(h > 0) sy = 1 / bmd.height * h;
	mat.scale(sx, sy);
	shape.graphics.beginBitmapFill(bmd, mat, false, true);
	if (oval)
	{
	shape.graphics.drawEllipse(0, 0, sx * bmd.width, sy * bmd.height);	
	}else{
	shape.graphics.drawRect(0, 0, sx * bmd.width, sy * bmd.height);
	}
		}else{
		if (oval) trace("vector graphic does not support Oval");
		new SVG(Assets.getText(path)).render(shape.graphics, 0, 0, w, h);
		}
		shape.x = x;
		shape.y = y;
		shape.cacheAsBitmap = true;
		return shape;
	}

Love to chat more :slight_smile:


#3

Hi Dean.

By ‘mobile’ you mean iOs/Android native targets?
Well, here’s an example I threw together real quick and just tested using Neko but it’ll surely get you started.
Be sure to put openfl.svg into assets/svg

package;

import openfl.display.Sprite;
import openfl.display.Shape;
import openfl.display.BitmapData;
import openfl.display.Bitmap;
import openfl.display.PNGEncoderOptions;
import openfl.utils.ByteArray;
import openfl.Lib;
import format.SVG;
import openfl.Assets;

class Main extends Sprite 
{
    
    public function new() 
    {
        super();
        
        if (sys.FileSystem.exists("initialized.dat") == false)
        {
            var svgShape:Shape  = new Shape();
            var svg:SVG = new SVG (Assets.getText("svg/openfl.svg"));
            svg.render (svgShape.graphics);           
            var bmpData:BitmapData = new BitmapData(Std.int(svgShape.width), Std.int(svgShape.height), true);
            bmpData.draw(svgShape);
            var data:ByteArray = bmpData.encode(bmpData.rect, new PNGEncoderOptions());
            var output:sys.io.FileOutput = sys.io.File.write("vec.png", true);
            output.writeBytes(data, 0, data.length);
            output.close();
            bmpData.dispose();
            bmpData = null;
            
            sys.io.File.saveContent("initialized.dat", "true");
            load();
        }
        else
        {
            load();
        }
        
    }
    
    private function load():Void
    {
        var data:ByteArray = sys.io.File.getBytes("vec.png");
        var bmpData:BitmapData = BitmapData.fromBytes(data); 
        var bmp:Bitmap = new Bitmap(bmpData);
        addChild(bmp);
    }
}

#4

@PXshadow & @obscure

I’m targeting Android, but plan to target iOS at some point. Currently targeting C++ also, which shouldn’t be a problem saving to a folder, but Android is less straight forward since the app is zipped. I’ll have a look at this tomorrow.

Thank you both!