Image Buttons Mouse Click

[OdnsRvns]

So this is my current bit of code I use to draw a button on the screen, check to see if mouse is over the button, and then check to see if mouse is clicked. It works fine, no complaints. As a rather new programmer I was wondering since I am adding the buttons "Settings" and "Exit". What might be a simpler way to do the same function that would be easier to add buttons if I need them.

I couldn't get my .love file to upload without an error. As soon as I can I will upload it.

Code: Select all

mouse_x, mouse_y = love.mouse.getPosition()
	-- Play Button
	IMG_button_play_w = IMG_button_play:getWidth() 
	IMG_button_play_h = IMG_button_play:getHeight()	
	IMG_button_play_x =  (screen.center_w - (IMG_button_play:getWidth() / 2))
	IMG_button_play_y = (screen.center_h - (IMG_button_play:getHeight() / 2 + 125))
	love.graphics.draw(IMG_button_play, IMG_button_play_x, IMG_button_play_y)
	
	if mouse_x > IMG_button_play_x  and mouse_x < IMG_button_play_x + IMG_button_play_w and mouse_y > IMG_button_play_y and mouse_y < IMG_button_play_y + IMG_button_play_h then  
			love.graphics.print("BUTTON: PLAY ", 10, 95) 
			if love.mouse.isDown("l") then 
				_state = 3 
				love.audio.stop(intro)
			end
	end

[rmcode]

It's a tough question to answer since a lot of it comes down to personal preference. In general, you should create a "button" class which allows you to create button objects. An example from one of my games:

Code: Select all

local Button = {};

-- ------------------------------------------------
-- Constructor
-- ------------------------------------------------

function Button.new(img, x, y, target)
    local self = {};

    local active;
    local alpha;

    function self:draw()
        love.graphics.setColor(255, 255, 255, alpha);
        love.graphics.draw(img, x, y);
        love.graphics.setColor(255, 255, 255, 255);
    end

    function self:update()
        alpha = active and 255 or 100;
    end

    function self:setActive(_active)
        active = _active;
    end

    function self:press()
        target();
    end

    return self;
end

-- ------------------------------------------------
-- Return Module
-- ------------------------------------------------

return Button;

This is a barebones button class. Whenever you call the new() function it will return a new button which is totall independent from the other buttons you create. To understand the concept behind this, you should read about OOP and more specifically about Lua OOP.

I use it like this:

Code: Select all

local foo = Button.new(images['lvl1'], 128, 64, start);

I use a seperate class which handles the updating and clicks for all the different buttons on screen. Of course you could change the code above so that every button can check for these things itself. Hope that helps.

[OdnsRvns]

Thanks for the post!! I'll look into lua OOP. I'm not sure if your code is simpler but I'm sure its probably the correct handle buttons. Tables and Classes are stile a little foggy to me, how to call and use everything in them and all that. I appreciate the code and quick response.

Code: Select all

local Button = {};

-- ------------------------------------------------
-- Constructor
-- ------------------------------------------------

function Button.new(img, x, y, target)
    local self = {};

    local active;
    local alpha;

    function self:draw()
        love.graphics.setColor(255, 255, 255, alpha);
        love.graphics.draw(img, x, y);
        love.graphics.setColor(255, 255, 255, 255);
    end

    function self:update()
        alpha = active and 255 or 100;
    end

    function self:setActive(_active)
        active = _active;
    end

    function self:press()
        target();
    end

    return self;
end

-- ------------------------------------------------
-- Return Module
-- ------------------------------------------------

return Button;

[rmcode]

As I said, this certainly isn't the one perfect way to handle buttons - it's just how I like to do them. If you have questions, or if something is unclear, just ask away.

EDIT: It certainly doesn't look easier at the moment, but once you will learn more about programming and how to structure code you will see the beauty of it. For example if you would like to add joystick support to your buttons you won't have to find and change every single button you ever coded, but instead you only need to change the class they all came from. But this is something you will learn along the way

[OdnsRvns]

Google Drive for the .love file. I couldn't get it to upload to the forums to big maybe?
.LOVE FILE