Making a selector switch with multiple positions
Posted: Tue Feb 21, 2017 1:50 pm
I'm trying to make a difficulty selector with 4 positions (easy, medium, hard, all of the above).
Making it the long and stupid way around is easy. Just draw the required rectangles for the positions' pips, a thick line to connect them and another rectangle that's slightly larger than the pips to represent the currently selected position. When you click on a different position, the selector moves to that position and the code upgrades or downgrades the variables that control difficulty. Simple.
However, I want to make reusable code. I want to put the entire code for the selector in its own file and call it with a function when needed, while providing parameters according to what I need (how many positions it should have, its x and y, name etc). It's useful if you need more of these and don't want to rewrite the code every time.
I decided to do it as an object, using the 'classic' library. Again, the drawing of the base was easy. I used a while loop to draw the pips according to the provided parameters. However, the selector can't work with this. Or can it? Here's the code:
My question is - How do I make the selector switch work? I think I need to put the pips in a table and iterate through it somehow when the user clicks on another position, so the switch would move to the correct spot. I just can't think of an obvious way to do it. It's probably something stupid I'm missing.
Making it the long and stupid way around is easy. Just draw the required rectangles for the positions' pips, a thick line to connect them and another rectangle that's slightly larger than the pips to represent the currently selected position. When you click on a different position, the selector moves to that position and the code upgrades or downgrades the variables that control difficulty. Simple.
However, I want to make reusable code. I want to put the entire code for the selector in its own file and call it with a function when needed, while providing parameters according to what I need (how many positions it should have, its x and y, name etc). It's useful if you need more of these and don't want to rewrite the code every time.
I decided to do it as an object, using the 'classic' library. Again, the drawing of the base was easy. I used a while loop to draw the pips according to the provided parameters. However, the selector can't work with this. Or can it? Here's the code:
Code: Select all
local Toggler = Object:extend() --creating a new class called "Toggler" for the switch
function Toggler:new(x, y, positions, name) --creating the object, its parameters and properties
self.x, self.y = x, y --the x and y position of the switch
self.positions = 0 or positions --the number of positions it should have
self.name = nil or name --its name
self.pipWidth = 30 --width of the base pip
self.pipHeight = 30 --height of the base pip
self.spacing = 0 --distance from the start of a pip to the start of the next
self.selectorX = self.x - 5 --x of the selector rectangle (starts on the leftmost position)
self.selectorY = self.y - 5 --y of the selector switch
end
function Toggler:update(dt)
end
function Toggler:draw()
--using a while loop to draw the base pips according to the "positions" parameter
local i = 0
while i < self.positions
love.graphics.rectangle('fill', self.x + (self.spacing * i), self.y, self.pipWidth, self.pipHeight)
if i < self.positions - 1 then
love.graphics.rectangle('fill', self.x + self.pipWidth, self.y + self.pipHeight/2 - 5, 20, 10)
end
i = i + 1
self.spacing = 50
end
love.graphics.rectangle('fill', self.selectorX, self.selectorY, 40, 40) --drawing the selector switch
end
function Toggler:mousepressed(x, y, button)
end
return Toggler