Re: Object on the screen trembles if rendered with viewport coords
Posted: Mon Dec 30, 2024 11:58 am
Well, it's clear that you are not rounding *vy* to nearest integer and that's why the "trembling" occurs.
Code: Select all
function MathHelper.round(n)
if n >= 0 then
return math.floor(n + 0.5)
else
return math.ceil(n - 0.5)
end
end
Code: Select all
if showLocationSign then
local ox, oy = love.graphics.inverseTransformPoint(0, 0)
local vx, vy = MathHelper.round(viewport.getX()), MathHelper.round(viewport.getY())
print(('ox: %s, vx: %s, delta: %s, oy: %s, vy: %s, delta: %s'):format(ox, vx, ox - vx, oy, vy, oy - vy))
locationSignPanel.render(ox + 2, oy + 2)
locationSignText.render(ox + 4, oy + 6)
end
Code: Select all
ox: 192, vx: 192, delta: 0, oy: 532, vy: 532, delta: 0
ox: 192, vx: 192, delta: 0, oy: 531, vy: 532, delta: -1
ox: 192, vx: 192, delta: 0, oy: 531, vy: 531, delta: 0
ox: 192, vx: 192, delta: 0, oy: 530, vy: 530, delta: 0
ox: 192, vx: 192, delta: 0, oy: 530, vy: 530, delta: 0
ox: 192, vx: 192, delta: 0, oy: 529, vy: 529, delta: 0
ox: 192, vx: 192, delta: 0, oy: 529, vy: 529, delta: 0
ox: 192, vx: 192, delta: 0, oy: 528, vy: 528, delta: 0
ox: 192, vx: 192, delta: 0, oy: 528, vy: 528, delta: 0
ox: 192, vx: 192, delta: 0, oy: 527, vy: 527, delta: 0
ox: 192, vx: 192, delta: 0, oy: 527, vy: 527, delta: 0
ox: 192, vx: 192, delta: 0, oy: 526, vy: 526, delta: 0
ox: 192, vx: 192, delta: 0, oy: 525, vy: 526, delta: -1
ox: 192, vx: 192, delta: 0, oy: 525, vy: 525, delta: 0
ox: 192, vx: 192, delta: 0, oy: 524, vy: 524, delta: 0
ox: 192, vx: 192, delta: 0, oy: 524, vy: 524, delta: 0
ox: 192, vx: 192, delta: 0, oy: 523, vy: 523, delta: 0
ox: 192, vx: 192, delta: 0, oy: 522, vy: 522, delta: 0
ox: 192, vx: 192, delta: 0, oy: 522, vy: 522, delta: 0
ox: 192, vx: 192, delta: 0, oy: 521, vy: 521, delta: 0
ox: 192, vx: 192, delta: 0, oy: 521, vy: 521, delta: 0
ox: 192, vx: 192, delta: 0, oy: 520, vy: 520, delta: 0
ox: 192, vx: 192, delta: 0, oy: 520, vy: 520, delta: 0
ox: 192, vx: 192, delta: 0, oy: 519, vy: 519, delta: 0
ox: 192, vx: 192, delta: 0, oy: 519, vy: 519, delta: 0
ox: 192, vx: 192, delta: 0, oy: 518, vy: 518, delta: 0
ox: 192, vx: 192, delta: 0, oy: 518, vy: 518, delta: 0
ox: 192, vx: 192, delta: 0, oy: 517, vy: 517, delta: 0
ox: 192, vx: 192, delta: 0, oy: 516, vy: 517, delta: -1
ox: 192, vx: 192, delta: 0, oy: 516, vy: 516, delta: 0
ox: 192, vx: 192, delta: 0, oy: 516, vy: 516, delta: 0
ox: 192, vx: 192, delta: 0, oy: 515, vy: 515, delta: 0
ox: 192, vx: 192, delta: 0, oy: 514, vy: 515, delta: -1
ox: 192, vx: 192, delta: 0, oy: 514, vy: 514, delta: 0
ox: 192, vx: 192, delta: 0, oy: 513, vy: 513, delta: 0
ox: 192, vx: 192, delta: 0, oy: 513, vy: 513, delta: 0
ox: 192, vx: 192, delta: 0, oy: 512, vy: 512, delta: 0
ox: 192, vx: 192, delta: 0, oy: 511, vy: 511, delta: 0
ox: 192, vx: 192, delta: 0, oy: 511, vy: 511, delta: 0
ox: 192, vx: 192, delta: 0, oy: 510, vy: 510, delta: 0
ox: 192, vx: 192, delta: 0, oy: 510, vy: 510, delta: 0
ox: 192, vx: 192, delta: 0, oy: 509, vy: 509, delta: 0
ox: 192, vx: 192, delta: 0, oy: 509, vy: 509, delta: 0
ox: 192, vx: 192, delta: 0, oy: 508, vy: 508, delta: 0
ox: 192, vx: 192, delta: 0, oy: 508, vy: 508, delta: 0
ox: 192, vx: 192, delta: 0, oy: 507, vy: 507, delta: 0
ox: 192, vx: 192, delta: 0, oy: 506, vy: 507, delta: -1
ox: 192, vx: 192, delta: 0, oy: 506, vy: 506, delta: 0
ox: 192, vx: 192, delta: 0, oy: 505, vy: 506, delta: -1
ox: 192, vx: 192, delta: 0, oy: 505, vy: 505, delta: 0
ox: 192, vx: 192, delta: 0, oy: 504, vy: 504, delta: 0
ox: 192, vx: 192, delta: 0, oy: 504, vy: 504, delta: 0
ox: 192, vx: 192, delta: 0, oy: 503, vy: 503, delta: 0
ox: 192, vx: 192, delta: 0, oy: 503, vy: 503, delta: 0
ox: 192, vx: 192, delta: 0, oy: 502, vy: 502, delta: 0
ox: 192, vx: 192, delta: 0, oy: 502, vy: 502, delta: 0
ox: 192, vx: 192, delta: 0, oy: 501, vy: 501, delta: 0
ox: 192, vx: 192, delta: 0, oy: 501, vy: 501, delta: 0
ox: 192, vx: 192, delta: 0, oy: 500, vy: 500, delta: 0
Code: Select all
local x = math.floor(params.x) or 0
local y = math.floor(params.y) or 0
local width = math.floor(params.width) or virtualWidth
local height = math.floor(params.height) or virtualHeight
Code: Select all
local function setCenter()
center = {
x = math.floor(x + (width / 2)),
y = math.floor(y + (height / 2))
}
end
Code: Select all
function self.update()
if object then
x = math.floor(object.x - virtualWidth * 0.5)
y = math.floor(object.y - virtualHeight * 0.5)
end
end
Code: Select all
function self.render()
if object then
love.graphics.translate(
math.floor(-object.x + virtualWidth * 0.5),
math.floor(-object.y + virtualHeight * 0.5)
)
end
end
Code: Select all
function self.setOrigin()
x = math.floor(center.x - (width / 2))
y = math.floor(center.y - (height / 2))
end
Code: Select all
-- file viewport.lua
function self.update()
if object then
x = object.x - halfVirtualWidth
y = object.y - halfVirtualHeight
end
end
function self.render()
if object then
-- trembling if translating to not integer positions
-- pass only integer values
love.graphics.translate(
-object.x + halfVirtualWidth,
-object.y + halfVirtualHeight
)
end
end
-- file Entity.lua
function self.setX(value) x = MathHelper.round(value) end
function self.setY(value) y = MathHelper.round(value) end
function self.setRenderX(value) renderX = MathHelper.round(value) end
function self.setRenderY(value) renderY = MathHelper.round(value) end
-- file EntityBaseState.lua (where the rendering of the entity happens)
---@param params {x: integer, y: integer}
function self.render(params)
local x, y = params.x, params.y
local anim = entity.getCurrentAnimation()
for _, texture in ipairs(anim.getTexture()) do
love.graphics.draw(
texture.getImage(),
texture.getQuads()[anim.getCurrentFrame()],
x,
y
)
end
end
-- file World.lua
local ox, oy = love.graphics.inverseTransformPoint(0, 0)
locationSignPanel.render(ox + 2, oy + 2)
locationSignText.render(ox + 4, oy + 6)