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\$ 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

Reset to default

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.