Mother 3's Rolling Meters.

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
JustFedor
Prole
Posts: 7
Joined: Mon Sep 11, 2017 5:45 pm

Mother 3's Rolling Meters.

Post by JustFedor » Mon Sep 11, 2017 5:55 pm

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.
Attachments
ывфыфы.gif
Example from the game
ывфыфы.gif (15.44 MiB) Viewed 1236 times

Code: Select all

function love.load()
	love.event.quit()
end

grump
Party member
Posts: 326
Joined: Sat Jul 22, 2017 7:43 pm

Re: Mother 3's Rolling Meters.

Post by grump » Mon Sep 11, 2017 6:58 pm

-- removed, user doesn't appreciate being helped --
Last edited by grump on Tue Sep 12, 2017 5:16 pm, edited 2 times in total.

User avatar
Sir_Silver
Party member
Posts: 273
Joined: Mon Aug 22, 2016 2:25 pm

Re: Mother 3's Rolling Meters.

Post by Sir_Silver » Mon Sep 11, 2017 7:10 pm

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

grump
Party member
Posts: 326
Joined: Sat Jul 22, 2017 7:43 pm

Re: Mother 3's Rolling Meters.

Post by grump » Mon Sep 11, 2017 7:15 pm

Thanks

User avatar
zorg
Party member
Posts: 2249
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Mother 3's Rolling Meters.

Post by zorg » Tue Sep 12, 2017 3:38 am

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.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

grump
Party member
Posts: 326
Joined: Sat Jul 22, 2017 7:43 pm

Re: Mother 3's Rolling Meters.

Post by grump » Tue Sep 12, 2017 4:28 am

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
Prole
Posts: 7
Joined: Mon Sep 11, 2017 5:45 pm

Re: Mother 3's Rolling Meters.

Post by JustFedor » Tue Sep 12, 2017 5:45 am

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
	

Code: Select all

function love.load()
	love.event.quit()
end

User avatar
zorg
Party member
Posts: 2249
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Mother 3's Rolling Meters.

Post by zorg » Tue Sep 12, 2017 5:48 am

grump wrote:
Tue Sep 12, 2017 4:28 am
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.
grump wrote:
Tue Sep 12, 2017 4:28 am
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.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

JustFedor
Prole
Posts: 7
Joined: Mon Sep 11, 2017 5:45 pm

Re: Mother 3's Rolling Meters.

Post by JustFedor » Tue Sep 12, 2017 3:24 pm

So... Anyone have an idea?

Code: Select all

function love.load()
	love.event.quit()
end

User avatar
zorg
Party member
Posts: 2249
Joined: Thu Dec 13, 2012 2:55 pm
Location: Absurdistan, Hungary
Contact:

Re: Mother 3's Rolling Meters.

Post by zorg » Tue Sep 12, 2017 3:55 pm

JustFedor wrote:
Tue Sep 12, 2017 3:24 pm
So... Anyone have an idea?
Yeah, plenty; look above your post to find at least a dozen details on how to implement it yourself.
Me and my stuff :3True Neutral Aspirant. Why, yes, i do indeed enjoy sarcastically correcting others when they make the most blatant of spelling mistakes. No bullying or trolling the innocent tho.

Post Reply

Who is online

Users browsing this forum: No registered users and 13 guests