How can i draw an image and make it selectable (example a play button)

TwentyVyrus

I've made a play button called play button on the image editor on the correct game

So the program i have looks something like:

image = loadImage("play button")
loop
drawImage(image, {0, 0}, {1, 1})
update()
repeat

but i keep getting errors every time i try to fix something and it just isnt working

pianofire

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

TwentyVyrus

ok thanks ill wait for more answers for the joy cons / selecting

Dave

@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!

TwentyVyrus

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

pianofire

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

pianofire

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()

TwentyVyrus

@pianofire sorry i don't quite under stand that. I've sorted it out except i cant make it selectable

pianofire

@TwentyVyrus Well this is an example of a selectable button control

vinicity

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.)

pianofire

@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.