Reducing flicker in pixel art game

Solar2D General Questions/Discussion
#1

I’m having issues with a flickering effect during camera easing in my pixel art game. Originally my easing included floats but when I zoomed in i noticed that the pixels in my sprites were occasionally moving at different rates creating an odd effect to the eye.

 

Since then I restricted camera movement to ints and that has solved most of the problem. But on some textures where there are single pixel borders I still get an odd flickering effect especially on the y axis. I notice it’s resolved when I zoom my game in ~15-20% but I was trying to avoid that if possible because it kinda messes with the mechanics of the game.

Heres a video example. any advice would help.

 

https://youtu.be/VhTMqP7REQU

 

camera code:

local function moveCamera(self, player) local x, y = player.x, player.y local finalX, finalY if player.dead then finalX, finalY = x,y else if not self.camY then self.camY = y else local diff = (y-self.camY) \* 0.03 self.camY = math.round(self.camY + diff) end finalX, finalY = x, self.camY end finalX = h.clamp(finalX, display.contentWidth/2, self.data.width - display.contentWidth/2) finalY = h.clamp(finalY, display.contentHeight/2, self.data.height - display.contentHeight/2-16) self.positionCamera(math.round(finalX), math.round(finalY))
#2

it seems like it relates to my config.lua but im not understanding exactly why.

I’m doing

local aspectRatio = display.pixelWidth / display.pixelHeight application = { content = { width = 320, height = 568, scale = "letterbox", fps = 60 }, 

this looks perfect on an iphone 6.  i dont get that shimmering effect.  but on an iphone 6 plus i get the shimmering effect.

if i change the res to 414 x 736 which is the 6 plus logical res then i lose the shimmering effect there, but i gain it back on the 6.  i feel like this has something to do with the ppi and the way the iphone 6 plus is scaling the graphics?

#3

okay basically if i set it to the phones native res then all the shimmering goes away… but of course it creates shimmer on the other devices.  How should i scale pixel art games?  

for example if im making my game 320 x 568 which is an iphone 5’s resolution and i am playing on a 6 plus then the res becomes 414 x 736

there are points where one pixel gets stretched into two.  it becomes more obvious when i have 1px borders on things like brick textures etc.    i wouldnt mind black borders or something on the sides of the phone but instead it stretches it creating a rippling effect

#4

Here’s a relatively recent discussion surrounding scaling of pixelart games. 

TL;DR: It’s tough to solve.

#5

i’m finding that out… right now i turned the minTextureFilter and magTextureFilter off.  now im saving all my images at 4x and scaling down lol.  wasteful it produces sharp pixel art.  thats my workaround for now =/ 

maybe someone can think of a better way but thats the best i can do for now … ugh

#6

it seems like it relates to my config.lua but im not understanding exactly why.

I’m doing

local aspectRatio = display.pixelWidth / display.pixelHeight application = { content = { width = 320, height = 568, scale = "letterbox", fps = 60 }, 

this looks perfect on an iphone 6.  i dont get that shimmering effect.  but on an iphone 6 plus i get the shimmering effect.

if i change the res to 414 x 736 which is the 6 plus logical res then i lose the shimmering effect there, but i gain it back on the 6.  i feel like this has something to do with the ppi and the way the iphone 6 plus is scaling the graphics?

#7

okay basically if i set it to the phones native res then all the shimmering goes away… but of course it creates shimmer on the other devices.  How should i scale pixel art games?  

for example if im making my game 320 x 568 which is an iphone 5’s resolution and i am playing on a 6 plus then the res becomes 414 x 736

there are points where one pixel gets stretched into two.  it becomes more obvious when i have 1px borders on things like brick textures etc.    i wouldnt mind black borders or something on the sides of the phone but instead it stretches it creating a rippling effect

#8

Here’s a relatively recent discussion surrounding scaling of pixelart games. 

TL;DR: It’s tough to solve.

#9

i’m finding that out… right now i turned the minTextureFilter and magTextureFilter off.  now im saving all my images at 4x and scaling down lol.  wasteful it produces sharp pixel art.  thats my workaround for now =/ 

maybe someone can think of a better way but thats the best i can do for now … ugh