1
\$\begingroup\$

I am trying to make an animation on HTML5 Canvas with this texture atlas, which was packed by TexturePacker:

enter image description here

and it works good when the Character is facing right. I try to flip it horizontally, but it gets wrong position:

enter image description here

Here is my current code, each frame has a offset value to fix position:

<canvas id="c" width="200" height="100" style="background: #000"></canvas>

var metaData = [
    {x:0,y:0,w:35,h:38,offsetX:3,offsetY:9},
    {x:37,y:0,w:31,h:37,offsetX:6,offsetY:10},
    {x:70,y:0,w:65,h:47,offsetX:0,offsetY:1},
    {x:137,y:0,w:65,h:47,offsetX:0,offsetY:1},
    {x:204,y:0,w:61,h:46,offsetX:1,offsetY:1},
    {x:267,y:0,w:42,h:46,offsetX:1,offsetY:1},
    {x:311,y:0,w:43,h:44,offsetX:1,offsetY:3},
    {x:356,y:0,w:38,h:37,offsetX:6,offsetY:10},
    {x:396,y:0,w:35,h:34,offsetX:6,offsetY:13},
    {x:433,y:0,w:33,h:37,offsetX:7,offsetY:10},
    {x:468,y:0,w:36,h:40,offsetX:5,offsetY:7},
    {x:506,y:0,w:34,h:39,offsetX:6,offsetY:8}
],
dx = 0, //position x
dy = 0, //position y
index = 0; //frame index

(function draw() {
    context2D.clearRect(0,0,c.width,c.height);

    var cur = metaData[index];

    if(facingRight) {
        context2D.drawImage(
            img,
            cur.x, cur.y,
            cur.w, cur.h,
            dx + cur.offsetX, dy + cur.offsetY,
            cur.w, cur.h
        );
    } else {
        context2D.save();
        context2D.scale(-1,1);
        context2D.drawImage(
            img,
            cur.x, cur.y,
            cur.w, cur.h,
            -dx - cur.offsetX - cur.w, dy + cur.offsetY,
            cur.w, cur.h
        );
        context2D.restore();
    }

    index = ++index % metaData.length;

    setTimeout(draw,100);
})();

I use scale(-1,1) to flip sprite, but I have no idea how to keep it at the same postion like facing right. Should I have to fix the offset value?

Please, any help will be appreciated :)

\$\endgroup\$
2
  • 1
    \$\begingroup\$ Just make them the same size by extending the dimensions of the smaller sprites? That seems to be the most simple solution to your problem. \$\endgroup\$
    – Charanor
    Commented Jul 30, 2017 at 12:42
  • \$\begingroup\$ @Charanor Yes, I make them same size, this texture atlas was packed by TP, and all of information are stored in JSON file. The face right motion was created by that, so it works good, but after flip, it doesn't work. \$\endgroup\$ Commented Jul 30, 2017 at 12:49

0

You must log in to answer this question.