Mother 3's Rolling Meters.

[JustFedor]

I want to create 3-Digit Rolling HP and MP(PP) Meters like in Mother series (Earthbound)
I tried by myself, but for about four days I coudn't make anything that works right.

I will not attach a LOVE file because of some reasons.

[grump]

-- removed, user doesn't appreciate being helped --

[Sir_Silver]

@grump, your code has an error in it. You want to use love.graphics.getFont() instead of love.graphics.font

[grump]

Thanks

[zorg]

There's two things going on with earthbound's hp "wheels";

First, when an attack hits, it will do X amount of damage.
Then, it starts going from the starting value of S down to S-X (Clamped to zero, i guess)

Second, even if the damage killed you by the math, as long as the match ends while the wheel hasn't reached zero (or you healed yourself), you win/stay alive.


Also, fyi grump's version only prints a single digit "rolling", but you probably want to show all of them on the wheel (you could go a bit more crazy as well, and have it be hexadecimal, or whatever else); to fix that, i believe this will work:

Code: Select all

-- Drop this in instead of the last part of his code:
-- print the text and scroll it upwards according to the floating point part of the current digit
	love.graphics.print(str, x, y - (2 * math.floor(h * math.fmod(value, 1.0))))
	love.graphics.print(str, x, y - (    math.floor(h * math.fmod(value, 1.0))))
	love.graphics.print(str, x, y + (    math.floor(h * math.fmod(value, 1.0))))
	love.graphics.setScissor()

Safeguards to show at least the digit "before" and "after" on the wheel; it may be possible to only need one or the other, instead of both, but it doesn't matter that much.

[grump]

zorg, my code already shows the "after" on the wheel; the "before" is not required, since value only increases in the example. A little more work is required to make it roll in either direction. The code you added draws a superposition of 3x2 digits that roll up and down at the same time, it doesn't look correct.

For a simple decimal counter wheel I wouldn't do it this way, but animate a quad instead, by tweening the quad's y position.

[JustFedor]

The most hardest part in my opinion is actually getting these digits work by turn.
For counter wheel I use ImageFont and canvas.

Code: Select all

meter = {}
meter.__index = meter

function meter:new(font, digits, speed, startValue)
	local o = {}
	o.font = font or love.graphics.newFont(32)
	o.width = o.font:getWidth("0")
	o.height = o.font:getHeight()
	o.value = startValue or 0
	o.digits = {}
	o.cFont = love.graphics.newCanvas(o.width, o.height * 11)
	o.canvas = love.graphics.newCanvas(o.width*digits, o.height) -- I'm not using setScissor because it's not working normally with my font
	love.graphics.setCanvas(o.cFont)
	love.graphics.clear()
	local oldf = love.graphics.getFont()
	love.graphics.setFont(o.font)
	for i = 0, 10 do
		love.graphics.print(i%10, 0, i * o.height) -- creating canvas with all numbers
	end
	love.graphics.setFont(oldf)
	love.graphics.setCanvas()
	for i=1, digits do
		o.digits[i] = {...} -- Values for calculating stuff
	end
	return setmetatable(o, self)
end

function meter:set(v)
	self.value = v
	return self
end

function meter:update(dt)
	for i, v in ipairs(self.digits) do
		-- Calculating stuff
	end
	love.graphics.setCanvas(self.canvas) -- Need to redraw canvas in update function because of my engine.
	love.graphics.clear()
	-- Drawing stuff
	love.graphics.setCanvas()
end

function meter:draw(x, y)
	love.graphics.draw(self.canvas, x, y)
end
	

[zorg]

zorg, my code already shows the "after" on the wheel; the "before" is not required, since value only increases in the example. A little more work is required to make it roll in either direction. The code you added draws a superposition of 3x2 digits that roll up and down at the same time, it doesn't look correct.

Sorry, i just skimmed your code, and i only found one lg.print statement, so i assumed you are only printing one digit; i didn't notice you concatenating the two with a newline.

For a simple decimal counter wheel I wouldn't do it this way, but animate a quad instead, by tweening the quad's y position.

I agree. Either with a premade image having all the symbols/digits you want on the wheel, vertically one above the other; or creating a canvas at runtime (once), filling it up with the needed symbols. Normally, you would use only that canvas, and you wouldn't need to draw to it more than once.

[JustFedor]

So... Anyone have an idea?

[zorg]

So... Anyone have an idea?

Yeah, plenty; look above your post to find at least a dozen details on how to implement it yourself.