How do I generate sprite with javascript

Just started using Construct 2? Post your questions here

Post » Thu Jul 10, 2014 6:29 pm

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
Code: Select all
//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
B
3
Posts: 5
Reputation: 181

Post » Fri Jul 11, 2014 10:34 pm

Maybe this tutorial will help you, https://www.scirra.com/tutorials/615/cr ... rite-sheet
B
7
S
1
Posts: 57
Reputation: 484

Post » Sat Jul 12, 2014 5:48 am

caplocks1111 wrote: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...
B
3
Posts: 5
Reputation: 181

Post » Sat Jul 12, 2014 4:42 pm

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
"Construct 4 lets YOU make advanced games! (they wont run anywhere)" Construct Classic - Examples Kit Dropbox is a pile of trash and if you need my old files PM me! :)
B
124
S
42
G
17
Posts: 2,228
Reputation: 19,893

Post » Sun Jul 13, 2014 10:05 am

Message: Player is not yet permitted to post plain text URLS (300 rep required). 1 URLS removed. Why?
Jayjay wrote: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.
B
3
Posts: 5
Reputation: 181


Return to Beginner's Questions

Who is online

Users browsing this forum: No registered users and 2 guests