How can i draw an image and make it selectable (example a play button)
-
It is difficult to say without seeing the error(s).
I made a simple touch screen button here: https://fuzearena.com/forum/topic/1097/touch-state
-
ok thanks ill wait for more answers for the joy cons / selecting
-
@TwentyVyrus From looking at the way you've written the drawImage function, you'll run into some problems.
The simplest way of doing drawImage is this:
drawImage( handle, x, y, scale )
(scale is the multiplier to increase/decrease the size of the image). For example:image = loadImage("play button") loop drawImage(image, 0, 0, 1) // this will draw the image at the actual size of the image update() repeat
image = loadImage("play button") loop drawImage(image, 0, 0, 4) // this will draw the image 4 times larger update() repeat
The way you've done it with vectors is a bit more complicated. The first vector is the source region (the area of the image you want to draw from), and the second vector is the destination (the place on screen you want to draw it).
They are both 4-dimensional vectors of
{x, y, width, height}
To make your image display at the regular size, you would need to know the width and height of your image. You can get them with
imageSize()
like this:image = loadImage("play button") size = imageSize(image) // this now gives us the width in 'size.x' and the y in 'size.y' scale = 4 loop drawImage(image, {0, 0, size.x, size.y}, {0, 0, size.x * scale, size.y * scale) update() repeat
Hope this helps!
-
thanks i think it works now but i was also trying to make it so if you press down a new image called select which is a white box to thicken the outline of the box you have selected but it either flashes when i clear() or it just plain doesnt work so i want a way to make it move or delete then copy in a different postition without making it flash
-
Sorry I don't understand the last part but to get a different image you need to keep track of the button's state. So something like
selected = false loop clear() if selected then drawImage( selected, ...) else drawImage( notselected, ...) endif // some code to change the selected state update() repeat
-
A simple button control that works with touch screen or joy-con
Share Code : NX35Y9NDNN// A simple button control that works with touch screen or joy-con // author: pianofire struct buttonControl string label vector size vector pos vector extent int focused vector colour vector labelColour int labelHeight vector labelOffset endstruct buttonControl buttons = getButtons() function main() int count = 0 int start = 0 var oldc = controls( 0 ) loop clear() c = controls( 0 ) printat( 0, 0, "Use cursors to select button and A to press") int focused = getFocused( buttons ) if (c.left and !oldc.left) or (c.up and !oldc.up) then changeFocused( focused, -1 ) endif if (c.right and !oldc.right) or (c.down and !oldc.down)then changeFocused( focused, 1 ) endif drawButtons( buttons ) if buttonPressed( buttons[0] ) or (buttons[0].focused and c.a) then start = true endif if buttonPressed( buttons[1] ) or (buttons[1].focused and c.a) then start = false endif if buttonPressed( buttons[2] ) or (buttons[2].focused and c.a) then count = 0 endif if start then count += 1 endif drawText( 600, 300, 100, white, count ) update() oldc = c repeat return void // get the set of buttons function getButtons() buttonControl result = [] result[0] = getButton( "Start", { 200, 100 }, { 100, 100 }, white, black, 50 ) result[1] = getButton( "Stop", { 200, 100 }, { 100, 300 }, white, black, 50 ) result[2] = getButton( "Reset", { 200, 100 }, { 100, 500 }, white, black, 50 ) result[0].focused = true return result // draw tge set of buttons function drawButtons( buttons ) for i = 0 to len( buttons ) loop drawButton( buttons[ i ] ) repeat return void // get a string consisting of number chars function getString( char, number ) string result = "" int i = 0 for i = 0 to number loop result += char repeat return result // find the current text size function getTextHeight( ) int result = 0 string text = getString( "M", 50 ) result = textWidth( text ) result = int( round( result / 25.625 ) ) return result // find the width of text at the specified size function getTextWidth( text, size ) int result = 0 saveTextSize = getTextHeight( ) textSize( size ) result = textWidth( text ) textSize( saveTextSize ) return result // initialize the button properties function getButton( label, size, pos, colour, labelColour, labelHeight ) buttonControl result result.label = label result.size = size result.pos = pos result.extent = { pos.x, pos.y, pos.x + size.x, pos.y + size.y } result.colour = colour result.labelColour = labelColour result.labelHeight = labelHeight result.focused = 0 int labelWidth = getTextWidth( label, labelHeight ) result.labelOffset = { ( size.x - labelWidth ) / 2, ( size.y - labelHeight ) / 2 } return result // draw an individual button function drawButton( button ) vector pos = button.pos vector size = button.size vector offset = button.labelOffset int borderSize = 3 if button.focused then box( pos.x - borderSize, pos.y - borderSize, size.x + borderSize * 2, size.y + borderSize * 2, red, false ) endif box( pos.x, pos.y, size.x, size.y, button.colour, false ) drawText( pos.x + offset.x, pos.y + offset.y, button.labelHeight, button.labelColour, button.label ) return void // check if a button has been pressed function buttonPressed( button ) var result = false var list = touch() for i = 0 to len (list) loop var pos = list[i] if pos.x > button.extent[0] and pos.x < button.extent[2] and pos.y > button.extent[1] and pos.y < button.extent[3] then result = true endif repeat return result // change the focused button function changeFocused( focused, offset ) buttons[ focused ].focused = false var count = len( buttons ) focused += offset if focused < 0 then focused = count - 1 endif if focused == count then focused = 0 endif buttons[ focused ].focused = true return void // find the button that has focus function getFocused( buttons ) var result = -1 int i = 0 for i = 0 to len( buttons ) loop if buttons[ i ].focused then result = i break endif repeat return result main()
-
@pianofire sorry i don't quite under stand that. I've sorted it out except i cant make it selectable
-
@TwentyVyrus Well this is an example of a selectable button control
-
Just a question, the getButtons() function, does it return the sprite created in the function or does it return a copy of the sprite?
In your example it would not really matter, of course, but what if I stored sprites in a global array as well from inside the function; would those be the same sprites as the ones returned by getButton()?(I thought I had grasped this, but now I think I have managed to confuse myself again.)
-
@vinicity It just returns an array of structs. You can make it global or local depending on what you assign the results to. I think that the change focus is currently expecting it to be global but this could be changed.