0 Favourites

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]
  • Construct 3

    Buy Construct 3

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

    Buy 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)
Similar Topics Posts Views Last Post
Unread hot topic
0 Favourites
Sprite Font Generator - v3
368 112,254
RetroDaddy's avatar
RetroDaddy
Unread hot topic
187 45,120
Yann's avatar
Yann
Unread hot topic
86 28,702
St4rDu57's avatar
St4rDu57