5 Replies - 1665 Views - Last Post: 10 July 2015 - 03:44 PM Rate Topic: -----

#1 sigint-ninja   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 148
  • Joined: 05-June 15

making a working button in pygame

Posted 06 July 2015 - 07:05 AM

ok so i have a 640x480 window that opens
and draws my title screen background
it also plays the music i selected...so its a cute little title screen

now i want to add a new game button:

i dont have any code yet...first trying to establish the best way to do this.
i have created a jpg in photoshop of the button with new game on it.

am i better off making a button within pygame
or can i add my jpg to the title screen and then have some code (like collidepoint) determine when the mouse is over a certain area and is clicked
to move on with the program...

you could prob do either,but which is the best way to go about it?
any help appreciated

thanks

This post has been edited by sigint-ninja: 06 July 2015 - 07:19 AM


Is This A Good Question/Topic? 0
  • +

Replies To: making a working button in pygame

#2 witeboy724   User is offline

  • D.I.C Head
  • member icon

Reputation: 84
  • View blog
  • Posts: 208
  • Joined: 21-June 12

Re: making a working button in pygame

Posted 06 July 2015 - 09:03 AM

What I always like to do for buttons is have a list storing all the Rects of the buttons. Rect is what Pygame uses to define location and size of things as you probably already know. Anytime the mouse is clicked you can see if a button was clicked by checking the click x,y against each of the button Rects in that list. Unless you have overlapping buttons, you can exit that loop once a match is found without checking them all.

Even better, you could watch each time the mouse is moved, not just when it is clicked. On each movement you can check the list of Rects. Then you can add in your own mouse over effects like changing the background color for each button or add some mouse button down/mouse button up effects.

EDIT: Forgot the second part of your question. You could add the buttons in yourself using paint then use that as your background and define where each button is in your program. But the better way to do it is have each button as a separate image then load and blit each one on the page in the Rect you want. Then you know the Rect, and can easily move things around in the code later on

EDITT: If you use a format like png instead of jpg you can save transparency and blit that onto the background just as easily. Then you can have rounded off corners, partially see-thru buttons, etc

This post has been edited by witeboy724: 06 July 2015 - 09:09 AM

Was This Post Helpful? 0
  • +
  • -

#3 sigint-ninja   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 148
  • Joined: 05-June 15

Re: making a working button in pygame

Posted 08 July 2015 - 05:38 PM

thanks for the answer...
i have made a separate png that says "start game" and have blit it to the screen so its sitting nicely under the title name "Invader"

so its not really a button...just text...which is the way i want it...
is the next mission to draw a rectangle in the area where the text is? it should be invisible and not
cover the text...then i can set up something that will change the text color when the mouse goes over it.

This post has been edited by sigint-ninja: 08 July 2015 - 05:39 PM

Was This Post Helpful? 0
  • +
  • -

#4 witeboy724   User is offline

  • D.I.C Head
  • member icon

Reputation: 84
  • View blog
  • Posts: 208
  • Joined: 21-June 12

Re: making a working button in pygame

Posted 10 July 2015 - 02:34 PM

You can draw a rectangle around it which would make it easier to change the color of the rectangle for mouseover events and such. That's probably what I would do unless you needed a more complex border for it, in which case you can put the rectangle into the actual start_game.png.

You don't have to worry about the rectangle being invisible. Just draw and blit everything in the order that you want them to appear, then update the screen at the end to show the result. So, blit background, then the button rectangle, then the text. Then update. If/when you need to change the rectangle, just also reblit the text on top of it.

That being said, rendering text in pygame is really easy, and will save you a step of creating a png for it if it's just simple text. Then you still have the option of changing the text size, color, font, etc. in pygame without popping out to edit your png.
Was This Post Helpful? 0
  • +
  • -

#5 sigint-ninja   User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 148
  • Joined: 05-June 15

Re: making a working button in pygame

Posted 10 July 2015 - 03:30 PM

Hi witeboy i dont want a rectangle around it...i just want text and when you click on it...the writing goes red then takes you to the game screen.

I have the text in the middle thats grey and i have the same png in red that overwrites the original when the mouse button is clicked...but only when i click the top left corner of the screen...no idea how to change this.

Thanks for your reply

This post has been edited by andrewsw: 10 July 2015 - 03:50 PM
Reason for edit:: witeboy, not witboy

Was This Post Helpful? 0
  • +
  • -

#6 witeboy724   User is offline

  • D.I.C Head
  • member icon

Reputation: 84
  • View blog
  • Posts: 208
  • Joined: 21-June 12

Re: making a working button in pygame

Posted 10 July 2015 - 03:44 PM

When there is a click event, pygame will pass you the x,y cords of click. You want to check if the click is on top of your text. So, say your text is at (100,150) and the size is 200x400. When you click, if the click x is between the left of the text and the right (100 to 100 + 200) and the y is between the top and bottom of the text (150 to 150 + 400), then the text was clicked.
# on click - (not the right variables, just the idea)
# if text_left < click_x < text_left + text_width and text_top < click_y < text_top + text_height


Note that changing the color of the text right before changing the screen will happen so quickly that you won't even notice without some sort of delay between changes, which may feel like a short lag in your intro depending on how long it is
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1