Sprite Graphics glitch?

So I was looking at the graphics of my sprite & for some reason, three.js makes his left eye is a pixel wider than his left eye & his right fist’s width is a pixel smaller than it should be on the right side of the right fist. What is going on here with the graphics? how to fix? I have circled the areas in the screenshot I am talking of.

Here’s the line(s) in the Source :

Line 51 & line 84 in : view-source:http://babylontesting.epizy.com/Three.js/three-SpriteMixer-master/js/mainframes/brain-mainframe.js

Here’s the demo :

http://babylontesting.epizy.com/Three.js/three-SpriteMixer-master/

Here’s the screenshot :

weird-sprite-glitch

Hi, maybe it’ because of the antialiasing ?
Can you try setting antialias = false in your renderer ?
Or maybe the browser resize it because it’s not power of two. Try modifying it to make it 16*32

1 Like

This worked, @felixmariotto! Thank you! =) It was because it wasn’t power of 2.

I’m having one more graphics issue.

For some reason even though antialias is off, I get this graphic.

It seems to be happening sometimes when moving up then down then left then right.

Here is the glitch graphic :

weird-sprite-glitch-iii

Here is what it should look like :

Here are sprite{s} :

link-walk-up link-walk-down
link-walk-left link-walk-right

As you can see, each of the sprite strips are 32x16

Here is the demo :

http://babylontesting.epizy.com/Three.js/three-SpriteMixer-master/

Here is the Source code :

view-source:http://babylontesting.epizy.com/Three.js/three-SpriteMixer-master/js/mainframes/brain-mainframe.js