javascript - Canvas translate values are mysteriously doubling themselves - some things drawing in the wrong place but not others -
i'm making little canvas game , adding in power ups player can collect. here's use make them appear:
thepowerups.foreach ( function(t) { c.beginpath(); c.save(); c.translate(t.x,t.y); c.fillstyle = t.fill; c.moveto(t.x - 15, t.y - 15); c.lineto(t.x + 15, t.y - 15); c.lineto(t.x + 15, t.y + 15); c.lineto(t.x - 15, t.y + 15); c.lineto(t.x - 15, t.y - 15); c.fill(); c.restore(); c.closepath(); });
so i'm cycling through power ups array drawing each one. in test case t.x , t.y both 200. code draws power @ location 400, 400. console logged power ups array, returned 200 x , y. if move player character on coordinates 200,200, power up, drawn @ 400,400 disappears , code power executes.
so functional purposes, it's in right place. doesn't appear there. yet player, bad guy , bullets in correct coordinates.
i've tried doing this;
c.beginpath(); c.save(); c.translate(150,150); c.fillstyle = 'orange'; c.moveto(150 - 15, 150 - 15); c.lineto(150 + 15, 150 - 15); c.lineto(150 + 15, 150 + 15); c.lineto(150 - 15, 150 + 15); c.lineto(150 - 15, 150 - 15); c.fill(); c.restore(); c.closepath();
a "static" box without looking values in array. draws in wrong location (300,300 in case). i've tried putting @ different locations in game loop (including before , after code parts drawn correctly). no effect.
here's code zombie bad guys, drawing in right place:
c.beginpath(); c.save(); c.translate(i.x,i.y); zomangle = getzomangle(i.x, i.y); if (player1.x - i.x < 0) { c.rotate(zomangle); } else { c.rotate(zomangle); c.scale(-1,1); } c.translate(-i.x,-i.y); c.fillstyle = i.fill; c.moveto(i.x - 18, i.y); c.lineto(i.x + 18, i.y + 15); c.lineto(i.x + 18, i.y - 15); c.lineto(i.x - 18, i.y); c.fill(); c.restore(); c.closepath();
as can see it's same thing, except bad guys have rotate keep them facing player. tried adding power up, had no effect -- still triggered walking on 200,200 no matter box being drawn.
any ideas?
if use translate(x, y) following drawing instructions drawn relative position. offsetting drawing instructions twice now. instead, should this:
thepowerups.foreach ( function(t) { c.beginpath(); c.save(); c.translate(t.x,t.y); c.fillstyle = t.fill; c.moveto(-15, -15); c.lineto(15, -15); c.lineto(15, 15); c.lineto(-15, 15); c.lineto(-15, -15); c.fill(); c.restore(); c.closepath(); });
Comments
Post a Comment