[Tutor] Pygame - was How I use images in a GUI?

[Liam Clarke-Hutchinson]

Hi Nathan, 
 
Pygame is a little confusing at first, but it makes sense one you can get
the hang of the basics. 
 
http://www.pygame.org/docs/tut/intro/intro.html
<http://www.pygame.org/docs/tut/intro/intro.html>  is a good example.
 
import sys, pygame
pygame.init()

size = width, height = (320, 240)
speed = [2, 2]
black = (0, 0, 0)
 
screen = pygame.display.set_mode(size)

ball = pygame.image.load("ball.bmp")
ballrect = ball.get_rect()
 
That's the basic ingredients of a Pygame app right there. 
 
screen is the base window that all your drawing will occur on.
!A caveat here is that (0,0) on computer screens tends to be the top left
corner, with y increasing downwards.!
 
ball is a Surface which is painted with the image at
http://www.pygame.org/docs/tut/intro/ball.gif
<http://www.pygame.org/docs/tut/intro/ball.gif> .
ballrect is a Rect object which is rectangular and matches the size of the
ball (as much as a rectangle can.)
 
Rects and Surfaces are the key to Pygame. If you had a pygame app where two
cars crashed into each other, all movement and collision detection is being
done with two rects, which have a car drawn on top of them via a Surface.
You can of course, use many smaller rects, to give more accurate collision
detection.
 
i.e. for a stick figure, you could have one rectangle which was matched the
height and width of the whole stick figure. 
Or, you could have one for each arm, one for each leg, one for the body and
one for the head, which would allow for more accurate collision checking. If
you've ever played a fps and shot someone in the head and blood came out of
their body, then you've met rects in action, and not quite working properly
too. 
 
I tried having 786,432 rects at one point, each one was one pixel in size.
Didn't work overly well.
 
Surfaces are images/colours/textures etc. I consider it like this, the rect
is an invisible wireframe, the surface is the nice shiny textures and
colours all over it. 
 
OK, to continue with the Pygame tutorial - 
----
while 1:
     for event in pygame.event.get():
        if event.type == pygame.QUIT: sys.exit()

        ballrect = ballrect.move(speed)
        if ballrect.left < 0 or ballrect.right > width:
            speed[0] = -speed[0]
        if ballrect.top < 0 or ballrect.bottom > height:
            speed[1] = -speed[1]

        screen.fill(black)
        screen.blit(ball, ballrect)
        pygame.display.flip()

---------------------------------
for event in pygame.event.get():
     if event.type == pygame.QUIT: sys.exit()
 
So once the set up is done, Pygame goes into an infinite loop. Once per
loop, it checks for a Pygame event of type QUIT. Pygame handles events a bit
like a GUI, in that it has a queue, but programmes need to specifically
check for events as opposed to using event handlers - it's a game, so you
can focus on events that are important to you. ;)
 
ballrect = ballrect.move(speed)
Ok, so now it's moving ballrect. If you have a look at
http://www.pygame.org/docs/ref/rect.html
<http://www.pygame.org/docs/ref/rect.html>  there's a lot of methods which
basically equate to moving/resizing/colliding the Rect. 
 
The command Rect.move() has the following syntax - 
 
Rect.move(x, y): return Rect
 
Game programming involves a fair bit of physics. At the most basic, you'll
get to deal with vectors. 
So, ballrect = ballrect.move((2,2)) returns a new Rect two pixels to the
right, and two pixels downward.
 
OK, so, ballrect has moved 2 down and 2 across.
 
if ballrect.left < 0 or ballrect.right > width:
            speed[0] = -speed[0]
 if ballrect.top < 0 or ballrect.bottom > height:
            speed[1] = -speed[1]

ballrect.left, ballrect.right, top, bottom etc. are the edges of ballrect.
So, this is checking to see if it has exceeded the limits of the screen.
Now, this is very simple collision checking. A fun exercise is to add a
second ball, and check once per loop using Rect.colliderect(otherRect) to
see if they just hit. 
 
OK, so if ballrect.left is less than 0, or ballrect.right is greater than
the 320, then the horizontal vector is inverted. So a movement of 5 becomes
-5, which would start moving left. Likewise, if it was -5 then it would
become -(-5) which is 5. 
 
Ditto also with top and bottom, except that -y is moving upwards towards 0,
and y is moving downwards 240. Remember, 0,0 is top left. I had to stick a
note to my screen with that on it.
 
OK now to the last bit of code - 
 
        screen.fill(black)
        screen.blit(ball, ballrect)
        pygame.display.flip()
 
Ok, so, ballrect has been moved to the new position, so we need to remove
the old drawing of ballrect, and redraw the ball at the new position, to
simulate movement; like a cartoon. 
screen.fill(black) fills the main screen with a solid colour, which
over-writes the old drawing of the ball. 
screen.blit(ball, ballrect) then draws the image of the ball onto the frame
of the ballrect.
 
Lastly, pygame.display.flip() 'flips' the display. When you're looking at
one frame, pygame is busy drawing the screen in memory. When you call flip()
it swaps the screen your viewing into memory, and replaces it with the
freshly drawn one. This makes sures that your user doesn't see the actual
redrawing occur. 
 
This is a very basic intro, but have a play with it. Copying and pasting the
above linked tutorial and modifying it is how I learnt. 
Add another ball, and add collision detection between it and the first ball.
Make them double their speed when they hit one wall and halve it when they
hit another... 
 
Good luck, 
 
Liam Clarke-Hutchinson 

 

 

-----Original Message-----
From: Nathan Pinno [mailto:falcon3166 at hotmail.com] 
Sent: Monday, 7 November 2005 2:22 p.m.
To: Liam Clarke-Hutchinson
Cc: tutor at python.org
Subject: Re: [Tutor] How I use images in a GUI?



Liam,
I am using Pygame, but I am still don't know how to use it. I read it, and
it confused me.

----- Original Message ----- 
From: Liam  <mailto:Liam.Clarke-Hutchinson at business.govt.nz>
Clarke-Hutchinson 
To: 'Nathan Pinno' <mailto:falcon3166 at hotmail.com>  
Cc: 'tutor at python.org' <mailto:'tutor at python.org'>  
Sent: November 6, 2005 3:47 PM
Subject: RE: [Tutor] How I use images in a GUI?

Depends on your GUI toolkit and widget.


For instance, in wxPython's  wx.BitmapButton widget, there's a specific
method to set the bitmap, and then the underlying C++ code interfaces with
the GDI portion of the Win32 API and draws it for you.
 http://www.wxpython.org/docs/api/wx.BitmapButton-class.html
<http://www.wxpython.org/docs/api/wx.BitmapButton-class.html> 
 
I'm not too sure about Tkinter, but I assume it's the same way. 
With regards to games, I suggest you check out www.pygame.org
<http://www.pygame.org> , instead of trying to use a GUI framework as it
makes basic game development very simple, whereas a GUI framework doesn't.
Especially with adding images to shapes on screen.

Regards, 

Liam Clarke-Hutchinson| Contact Centre Advisor| Ministry of Economic
Development 
DDI +64 3 962 2639 | Fax +64 3 962 6220
 <http://www.med.govt.nz/> www.med.govt.nz 

-----Original Message-----
From: tutor-bounces at python.org [mailto:tutor-bounces at python.org] On Behalf
Of Nathan Pinno
Sent: Monday, 7 November 2005 11:29 a.m.
To: Tutor Mailing List
Subject: [Tutor] How I use images in a GUI?


Hey all,
 
I have a question that I can't figure out, despite reading the help and
everything else. How do I use an image or images in a Graphic User
Interface, and link them to parts of my code i.e. a picture of a game piece
to its value?
 
Thanks in advance,
Nathan Pinno

 

A new monthly electronic newsletter covering all aspects of MED's work is
now available.  Subscribers can choose to receive news from any or all of
seven categories, free of charge: Growth and Innovation, Strategic
Directions, Energy and Resources, Business News, ICT, Consumer Issues and
Tourism.  See  <http://news.business.govt.nz/> http://news.business.govt.nz
for more details.

 

 


 

  
govt.nz <http://www.govt.nz/>  - connecting you to New Zealand central &
local government services




  _____  

Any opinions expressed in this message are not necessarily those of the
Ministry of Economic Development. This message and any files transmitted
with it are confidential and solely for the use of the intended recipient.
If you are not the intended recipient or the person responsible for delivery
to the intended recipient, be advised that you have received this message in
error and that any use is strictly prohibited. Please contact the sender and
delete the message and any attachment from your computer. 
  _____  









A new monthly electronic newsletter covering all aspects of MED's work is now available.  Subscribers can choose to receive news from any or all of seven categories, free of charge: Growth and Innovation, Strategic Directions, Energy and Resources, Business News, ICT, Consumer Issues and Tourism.  See http://news.business.govt.nz for more details.




http://www.govt.nz - connecting you to New Zealand central & local government services

Any opinions expressed in this message are not necessarily those of the Ministry of Economic Development. This message and any files transmitted with it are confidential and solely for the use of the intended recipient. If you are not the intended recipient or the person responsible for delivery to the intended recipient, be advised that you have received this message in error and that any use is strictly prohibited. Please contact the sender and delete the message and any attachment from your computer.
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://mail.python.org/pipermail/tutor/attachments/20051107/80074d3c/attachment-0001.htm