Text-based button

Questions
1

Hello!
I have text that I want to turn into a button, that when pressed will take you to a new screen where you will start the game.
Here is what I have so far:

background(0, 208, 255, 255)
font("Copperplate")
fill(255, 0, 6, 255)
fontSize(75)
text("Play Now!", WIDTH/2, HEIGHT/3)
2

Use “~~~” to quote code.

Look at CurrentTouch - if it’s X and Y are within the boundaries for your button, then set a flag so you know to draw the game screen.

3

So like

function touched(touch) 
  if CurrentTouch.x = 500 and 
     CurrentTouch.y = 100 then
--draw game screen

Would make it so that if I touched my text at (500, 100) it would draw the game screen?

4

While not a single button, you could look at what I did for my Text based Menu Library for ideas.
http://www.youtube.com/watch?v=YSI34Eyzs9A

5

@Bortels thanks for the tip

@Bieber208 would i put that code in after the function draw() section or in the “–do your drawing here” section?

@Deamos can you give me a link to where the code for that is found?

6

Try this…


function setup()
    w,h = 0,0
    s = ""
end

function draw()
    background(0, 208, 255, 255) 
    font("Copperplate") 
    fill(255, 0, 6, 255) 
    fontSize(75) 
    s = "Play Now!"
    text(s, WIDTH/2, HEIGHT/2)
    w,h = textSize(s)
end

function touched(touch)
    if touch.x > WIDTH / 2 - w / 2 and touch.x < WIDTH /2 + w / 2 
    and touch.y > HEIGHT / 2 - h / 2 and touch.y < HEIGHT /2 + h / 2 
    then
        sound(SOUND_JUMP, 31142)
    end
end
7

@Mark Thanks for the help. When I added the code in, it makes my screen black, and when I tap it, then it goes to my main screen and flickers. Is there a way to touch the item after the main screen has loaded? Also, I want to redirect the button to a new page, how would I go about doing that?

8

I never understand when people ask about a “new page.” There are no pages. There’s just the screen.

What’s on it is what you draw.

9

@Mark On the screen, at the top, there are “tabs” that you can make new “pages” with. I need the button to connect to one of them.

10

@haloteen, the tabs at the top are not actually ‘pages’. They are for the convenience of separating bits of your code, such as classes.

To generate different types of screens, you could encapsulate each one’s code in a separate function, and use a time-based or touch-based test in draw() to decide which function to call.

11

@haloteen: Heres the link to the code I had. https://www.dropbox.com/sh/hckd8fszcyclqnb/NNfEAtmajc

I would recommend taking a look at the HighlightMenu Button class especially. That should give you a good idea on how to do this on the fly.

12

@Fred oh that makes more sense now… Thanks for clearing that up!

@Deamos thanks I will see what I can do with it :slight_smile: