How do I generate sprite with javascript

  • I ripped a sprite from a flash game with jpexs. when exported as pngs it takes 2.4mb, while exporting as html5 canvas takes 180kb.

    That's some bandwidth saved, but I can't figure out how to use it in C2.

    Here's what the generated javascript look like

    //some initialization code
    var canvas=document.getElementById("myCanvas");
    var ctx=canvas.getContext("2d");
    enhanceContext(ctx);
    var ctrans = new cxform(0,0,0,0,255,255,255,255);
    
    //a shape
    function shape17(ctx,ctrans,frame,ratio,time){
    	drawPath(ctx,"M 950 780 L 138 563 262 100 1074 317 950 780 ");
    	ctx.save();
    	ctx.clip();
    	ctx.transform(19.33929443359375,5.16876220703125,-5.181884765625,19.2901611328125,262,100);
    	ctx.transform(1.0238095238095237,0,0,1.0416666666666667,-0.5,-0.5);
    	var fimg = ctrans.applyToImage(image13);
    	var pat=ctx.createPattern(fimg,"repeat");
    	ctx.fillStyle = pat;
    	ctx.fillRect(-16384,-16384,32768,32768);
    	ctx.restore();
    }
    //more shapes omitted
    
    //an image
    var image9 = document.createElement("img");
    image9.src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEsAAAB......";
    
    //the sprite I wanted
    function sprite19(ctx,ctrans,frame,ratio,time){
    	ctx.save();
    	ctx.transform(1,0,0,1,120.0,120.0);
    	var clips = [];
    	var frame_cnt = 41;
    	frame = frame % frame_cnt;
    	switch(frame){
    		case 0:
    			place("shape8",canvas,ctx,[0.05,0.0,0.0,0.05,0.0,0.0],ctrans,1,0,0,time);
    			place("shape10",canvas,ctx,[0.05,0.0,0.0,0.05,0.5,-2.0],ctrans,1,0,0,time);
    			place("shape12",canvas,ctx,[0.05,0.0,0.0,0.05,0.0,0.0],ctrans,1,0,0,time);
    			place("shape14",canvas,ctx,[0.05,0.0,0.0,0.05,0.0,0.0],ctrans,1,0,0,time);
    			break;
    		case 1:
    			place("shape8",canvas,ctx,[0.04949951171875,0.0,0.0,0.04949951171875,0.15,0.4],ctrans,1,0,0,time);
    			place("shape10",canvas,ctx,[0.05,0.0,0.0,0.05,0.6,-1.6],ctrans,1,0,0,time);
    			place("shape12",canvas,ctx,[0.049990081787109376,-6.5460205078125E-4,4.90570068359375E-4,0.049997711181640626,0.05,0.6],ctrans,1,0,0,time);
    			place("shape14",canvas,ctx,[0.049997711181640626,4.90570068359375E-4,-6.5460205078125E-4,0.049990081787109376,0.1,0.45],ctrans,1,0,0,time);
    			break;
    		//more frames omitted
    	}
    	ctx.restore();
    }
    
    //stuffs for animation
    var frame = -1;
    var time = 0;
    var frames = [];
    frames.push(0);
    frames.push(1);
    //more push omitted
    var backgroundColor = "#000000";
    var originalWidth = 250;
    var originalHeight= 250;
    function nextFrame(ctx,ctrans){
    	var oldframe = frame;
    	frame = (frame+1)%frames.length;
    	if(frame==oldframe){time++;}else{time=0;};
    	drawFrame();
    }
    
    //draw on canvas
    function drawFrame(){
    	ctx.fillStyle = backgroundColor;
    	ctx.fillRect(0,0,canvas.width,canvas.height);
    	ctx.save();
    	ctx.transform(canvas.width/originalWidth,0,0,canvas.height/originalHeight,0,0);
    	sprite19(ctx,ctrans,frames[frame],0,time);
    	ctx.restore();
    }
    
    //some canvas functions
    function drawPath(ctx, p) {
        ctx.beginPath();
        var parts = p.split(" ");
        var len = parts.length;
        var drawCommand = "";
        for (var i = 0; i < len; i++) {
            switch (parts[i]) {
                case 'L':
                case 'M':
                case 'Q':
                    drawCommand = parts[i];
                    break;
                default:
                    switch (drawCommand) {
                        case 'L':
                            ctx.lineTo(parts[i], parts[i + 1]);
                            i++;
                            break;
                        case 'M':
                            ctx.moveTo(parts[i], parts[i + 1]);
                            i++;
                            break;
                        case 'Q':
                            ctx.quadraticCurveTo(parts[i], parts[i + 1], parts[i + 2], parts[i + 3]);
                            i += 3;
                            break;
                    }
                    break;
            }
        }
    }
    //more canvas function omitted
    [/code:3iy7noyn]
  • Maybe this tutorial will help you, https://www.scirra.com/tutorials/615/cr ... rite-sheet

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Maybe this tutorial will help you, https://www.scirra.com/tutorials/615/cr ... rite-sheet

    nope.

    judging from your other posts you are not reading questions at all...

  • Not sure Construct's renderer would play nice with the code there, but you could see if you can forward the commands to R0J0hounds' Canvas plugin somehow, or re-draw them from events in the plugin: https://www.scirra.com/forum/plugin-canvas_t64239

  • Not sure Construct's renderer would play nice with the code there, but you could see if you can forward the commands to R0J0hounds' Canvas plugin somehow, or re-draw them from events in the plugin:

    do you mean hardcoding the generated javascript in canvas plugin's source code, or modifying canvas plugin to accept javascript?

    manually converting the javascript to events is too tedious. there are 41 frames, 4 shapes each frame in that one sprite

    not-worthy-of-bump edit:

    In the end I exported each shape and used events to stick them together.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)