Button on an Overlay


#1

I’m working on a HUD module, but I cannot get my buttons on top of the background of the overlay to show up. In this case, to show the “use” cursor over the designated spot. I have added btnMenu to the list of Dagon objects.

self.ovrInvOpened:addButton(self.btnMenu) self.btnMenu = Button(20, 113, 173, 176) --loc on bkgd and size self.btnMenu:setCursor(USE) self.btnMenu:enable()

Any suggestions as to what I might be doing wrong? Thanks.


#2

Just to make sure, if you remove the background image the button works fine?

Buttons should be added after the images. But maybe it would be best if you post the entire code…


#3

I’m trying to build an inventory with integral buttons to either side of it for a menu and journal. I was going to experiment with trying to make a journal and a menu appear on separate slides, but I could not get the buttons to register. It’s probalby something simple, but I’ve experimented with order and also with removing the image from the background without success. It’s built on top of your journal module.

[code]------------------------------------------------------------------------------------------
– Inventory - Class definition

Inventory = {}
Inventory.__index = Inventory

function Inventory.create()
local self = {
– Readonly inventory states
OPENING = 101,
CLOSING = 102,
OPENED = 103,
CLOSED = 104,

	-- Readonly icon animation states
	IDLE = 201,
	EXPAND = 202,
	CONTRACT = 203,

	-- Other readonly settings
	ICON_ANIM_SIZE = 20, --?
	ICON_MAX_SIZE = 180, --set max width of icon
	ICON_MIN_SIZE = 64, --?
	OPENED_SIZE_X = 1920, --width of the inventory background
	OPENED_SIZE_Y = 310, --height of the inventory background
	OPENED_DISPLACE_X = 0,--inventory centered
	OPENING_SPEED = 10,
			
	-- Dagon objects
	ovrInvClosed,
	ovrInvOpened,
	btnInvBackground,		
	btnInvIcon,

----
--** start add **
----

	btnMenu,
	btnJournal,
	
--[[
	btnInvArrow_left
	btnInvArrow_right
--]]
----
--** stop add **
----

--State of the Inventory
             currentState,

	-- For the icon animation, current loop and phase of the animation
	iconAnimLoop = 0,
	iconAnimState,

	-- Current size and position of the icon (or the background??)
	closedX = -860, --icon at lower center
	closedY = 0,
	closedSize = 180, ---icon width when it is opened?
	closedCurrSize = 180,--icon height?
	closedOffset = 0,
	
	-- Current position of the opened Inventory Background
	openedX = 0, --offset from lower left cnr
	openedY = 0, --offset from lower edge
	openedOffset = 292, --height of inv bkgrnd image off lower edge
	--calculation = height of image plus a few pixels
	
	previousWidth = config.displayWidth,
	previousHeight = config.displayHeight,
	
	ready = false

}

setmetatable(self, Inventory)-- self means the Inventory

self.currentState = self.CLOSED
self.iconAnimState = self.IDLE

local _toggle = function()
	self:toggle()
end

self.ovrInvClosed = Overlay("Inventory Closed")
self.ovrInvOpened = Overlay("Inventory Opened")

-- Icon for when the Inventory is closed
self.btnInvIcon = Button(self.closedX, self.closedY, self.closedSize, self.closedSize)
self.btnInvIcon:setAction(FUNCTION, _toggle)
self.btnInvIcon:setCursor(USE) 
self.btnInvIcon:setImage("HUD_icon.png") -- the inventory icon image

self:resize()

self.ovrInvClosed:addButton(self.btnInvIcon)
self.ovrInvClosed:enable()

-- Graphic for the opened Inventory's background image
self.btnInvBackground = Button(self.openedX, self.openedY,
	self.OPENED_SIZE_X, self.OPENED_SIZE_Y) --pos = size 
self.btnInvBackground:setAction(FUNCTION, _toggle)
self.btnInvBackground:setCursor(BACKWARD)			   
--self.btnInvBackground:setImage("HUD.png") ---the inventory background image

self.ovrInvOpened:addButton(self.btnInvBackground)
self.ovrInvOpened:enable()
self.ovrInvOpened:move(0, self.openedOffset) -- Hide the Inventory

----
--** start add **
----
self.ovrInvOpened:addButton(self.btnMenu)
self.btnMenu = Button(20, 113, 173, 176) --loc on bkgd and size
--(20, 113, 193, 113, 193, 280, 20, 280)
self.btnMenu:setAction(SWITCH, Menu)
self.btnMenu:setCursor(USE)
self.btnMenu:enable()

self.ovrInvOpened:addButton(self.btnJournal)
self.btnJournal = Button(1728, 113, 173, 176) --loc on bkgd and size
--(1728, 113, 1901, 113, 1901, 289, 1728, 289)
self.btnJournal:setAction(SWITCH, Journal)
self.btnJournal:setCursor(USE)
self.btnJournal:enable()

--[[
self.ovrInvOpened:addButton(btnInvArrow_left)
self.btnInvArrow_left = Button(4, 235, 74, 74)
self.btnInvArrow_left:setImage("InvArrowLeft.png")
--self.btnInvArrow_left:setAction(FUNCTION, _goLeft)
self.btnInvArrow_left:setCursor(NORMAL)
self.btnInvArrow_left:disable()

self.ovrInvOpened:addButton(btnInvArrow_right)
self.btnInvArrow_right = Button(4, 235, 74, 74)
self.btnInvArrow_right:setImage("InvArrowRight.png")
--self.btnInvArrow_right:setAction(FUNCTION, _goRight)
self.btnInvArrow_right:setCursor(NORMAL)
self.btnInvArrow_right:disable()
--]]
----
--** stop add **
----

return self

end


–slides for the journal and menu

Journal = Slide(“Journal.png”, “the journal background”)
Menu = Slide(“Menu.png”, “the menu background”)[/code]


#4

OH. There’s the problem: you’re adding the button before you create it. That’s a big no, no.

addButton() is adding nothing right now. Always make sure anything you add has been created and initialised (in this case the self.btnMenu) :nod:


#5

It’s me again…and I’m still doing something wrong.

I can see the images for the arrows and inventory bar on top of the background image and they open and close with the overlay correctly. When the Icon is first clicked, the cursor over the Inventory Bar is NORMAL, which is correct, but as soon as the mouse is moved off of the Inventory Bar, the only cursor that shows afterwards is the BACKWARD cursor for the entire overlay. This is true even when the cursor is moved back over the Inventory Bar. Commenting out the image for the background does not restore the correct cursors, they just open and close without the background image, but the cursor still acts the same.

The only buttons with functions right now are Menu and Journal, which have switches to the slides and should show USE cursors. If it matters, these two button do not have images attached.

[code]Inventory = {}
Inventory.__index = Inventory

function Inventory.create()
local self = {
– Readonly inventory states
OPENING = 101,
CLOSING = 102,
OPENED = 103,
CLOSED = 104,

	-- Readonly icon animation states
	IDLE = 201,
	EXPAND = 202,
	CONTRACT = 203,

	-- Other readonly settings
	ICON_ANIM_SIZE = 20, --?
	ICON_MAX_SIZE = 180, --set max width of icon
	ICON_MIN_SIZE = 64, --?
	OPENED_SIZE_X = 1920, --width of the inventory background
	OPENED_SIZE_Y = 310, --height of the inventory background
	OPENED_DISPLACE_X = 0,--inventory centered
	--calculation = (1920 - size of background) / 2 = offset from corner, as neg numb
	OPENING_SPEED = 10,
			
	-- Dagon objects
	ovrInvClosed,
	ovrInvOpened,

	btnInvBackground,
	btnInvIcon,

	btnInvBar,
	btnMenu,
	btnJournal,
	btnInvArrow_left,
	btnInvArrow_right,
	
	--State of the Inventory
    currentState,

  -- For the icon animation, current loop and phase of the animation
  iconAnimLoop = 0,
  iconAnimState,

  -- Current size and position of the icon (or the background??)
  closedX = -860, --icon at lower center
  closedY = 0,
  closedSize = 180, ---icon width when it is opened?
  closedCurrSize = 180,--icon height?
  closedOffset = 0,
  
  -- Current position of the opened Inventory Background
  openedX = 0, --offset from lower left cnr
  openedY = 310, --offset from lower edge
  openedOffset = 292, --height of inv bkgrnd image off lower edge
  --calculation = height of image plus a few pixels
  
  previousWidth = config.displayWidth,
  previousHeight = config.displayHeight,
  
  ready = false

}

setmetatable(self, Inventory)-- self means the Inventory

self.currentState = self.CLOSED
self.iconAnimState = self.IDLE

local _toggle = function()
self:toggle()
end

self.ovrInvClosed = Overlay(“Inventory Closed”)
self.ovrInvOpened = Overlay(“Inventory Opened”)

– Icon for when the Inventory is closed
self.btnInvIcon = Button(self.closedX, self.closedY, self.closedSize, self.closedSize)
self.btnInvIcon:setAction(FUNCTION, _toggle)
self.btnInvIcon:setCursor(USE)
self.btnInvIcon:setImage(“HUD_icon.png”) – the inventory icon image

self:resize()

self.ovrInvClosed:addButton(self.btnInvIcon)
self.ovrInvClosed:enable()

-- Graphic for the opened Inventory's background image
self.btnInvBackground = Button(self.openedX, self.openedY,
  self.OPENED_SIZE_X, self.OPENED_SIZE_Y) --pos and size 
self.btnInvBackground:setAction(FUNCTION, _toggle)
self.btnInvBackground:setCursor(BACKWARD)            
self.btnInvBackground:setImage("HUD.png") ---the HUD background image

self.btnInvBar = Button(self.openedX + 313, self.openedY + 411, 1291, 171)
--w = self.openedX + w pos of image/spot; ht = self-openedY + ht loc of image/spot - offset
-- offset = ht of inv of 310 less openedOffset of 292 = 18
--(313, 119, 1603, 119, 1603, 289, 313, 289)
--size = 1291 x 171
self.btnInvBar:setCursor(NORMAL)
self.btnInvBar:enable()
self.btnInvBar:setImage("InventoryBar.png") ---the inventory background image

self.btnMenu = Button(self.openedX + 20, self.openedY + 405, 173, 176) --loc on bkgd and size
--(20, 113, 193, 113, 193, 280, 20, 280)
--size = 173 x 176
self.btnMenu:setAction(SWITCH, Menu)
self.btnMenu:setCursor(USE)
self.btnMenu:enable()

self.btnJournal = Button(self.openedX + 1728, self.openedY + 405, 173, 176) --loc on bkgd and size
--(1728, 113, 1901, 113, 1901, 289, 1728, 289)
--size = 173 x 176
self.btnJournal:setAction(SWITCH, Journal)
self.btnJournal:setCursor(USE)
self.btnJournal:enable()

self.btnInvArrow_left = Button(self.openedX + 220, self.openedY + 421, 85, 137)
--(220, 129, 304, 129, 304, 265, 220, 265)
--size = 85 x 137
--self.btnInvArrow_left:setAction(FUNCTION, _goLeft)
self.btnInvArrow_left:setCursor(USE)
self.btnInvArrow_left:enable()
self.btnInvArrow_left:setImage("InvArrowLeft.png")

self.btnInvArrow_right = Button(self.openedX + 1616, self.openedY + 418, 82, 137)
--(1616, 126, 1697, 126, 1697, 262, 1616, 262)
--size  = 82 x 137
--self.btnInvArrow_right:setAction(FUNCTION, _goRight)
self.btnInvArrow_right:setCursor(USE)
self.btnInvArrow_right:enable()
self.btnInvArrow_right:setImage("InvArrowRight.png")

self.ovrInvOpened:addButton(self.btnInvBackground)
self.ovrInvOpened:enable()
self.ovrInvOpened:move(0, self.openedOffset) -- Hide the HUD

self.ovrInvOpened:addButton(self.btnInvBar)
self.ovrInvOpened:addButton(self.btnMenu)
self.ovrInvOpened:addButton(self.btnJournal)
self.ovrInvOpened:addButton(self.btnInvArrow_left)
self.ovrInvOpened:addButton(self.btnInvArrow_right)

return self

end


–slides for the journal and menu

Journal = Slide(“Journal.png”, “the journal background”)
Menu = Slide(“Menu.png”, “the menu background”)[/code]


#6

Right, remove these lines:

self.btnInvBackground:setAction(FUNCTION, _toggle)
self.btnInvBackground:setCursor(BACKWARD)

The spot is reacting to the mouse action regardless of the background image, which is why commenting that alone won’t help. This should do the trick!

In fact, if you’re only using that object to display an image, consider changing its type to an Image like this:

self.btnInvBackground = Image(“HUD.png”)