~ubuntu-branches/ubuntu/warty/pygame/warty

« back to all changes in this revision

Viewing changes to docs/tut/tom/games2.html

  • Committer: Bazaar Package Importer
  • Author(s): LaMont Jones
  • Date: 2004-09-17 17:09:53 UTC
  • mfrom: (1.1.1 upstream)
  • Revision ID: james.westby@ubuntu.com-20040917170953-caomeukd8awvvpwv
Tags: 1.6-0.2ubuntu1
Add missing build-depends: python

Show diffs side-by-side

added added

removed removed

Lines of Context:
 
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 
2
<HTML
 
3
><HEAD
 
4
><TITLE
 
5
>Revision: Pygame fundamentals</TITLE
 
6
><META
 
7
NAME="GENERATOR"
 
8
CONTENT="Modular DocBook HTML Stylesheet Version 1.7"><LINK
 
9
REL="HOME"
 
10
HREF="MakeGames.html"><LINK
 
11
REL="PREVIOUS"
 
12
HREF="MakeGames.html"><LINK
 
13
REL="NEXT"
 
14
TITLE="Kicking things off"
 
15
HREF="games3.html"> <style type="text/stylesheet">
 
16
        <!--
 
17
        PRE.PROGRAMLISTING      { background-color: #EEEEEE; border-color: #333333; border-style: solid; border-width: thin }   -->
 
18
 </style></HEAD
 
19
><BODY
 
20
CLASS="SECT1"
 
21
BGCOLOR="#FFFFFF"
 
22
TEXT="#000000"
 
23
LINK="#0000FF"
 
24
VLINK="#840084"
 
25
ALINK="#0000FF"
 
26
>
 
27
 
 
28
<DIV
 
29
CLASS="NAVHEADER"
 
30
><TABLE
 
31
SUMMARY="Header navigation table"
 
32
WIDTH="100%"
 
33
BORDER="0"
 
34
CELLPADDING="0"
 
35
CELLSPACING="0"
 
36
><TR
 
37
><TH
 
38
COLSPAN="3"
 
39
ALIGN="center"
 
40
></TH
 
41
></TR
 
42
><TR
 
43
><TD
 
44
WIDTH="10%"
 
45
ALIGN="left"
 
46
VALIGN="bottom"
 
47
><A
 
48
HREF="MakeGames.html"
 
49
ACCESSKEY="P"
 
50
>Prev</A
 
51
></TD
 
52
><TD
 
53
WIDTH="80%"
 
54
ALIGN="center"
 
55
VALIGN="bottom"
 
56
></TD
 
57
><TD
 
58
WIDTH="10%"
 
59
ALIGN="right"
 
60
VALIGN="bottom"
 
61
><A
 
62
HREF="games3.html"
 
63
ACCESSKEY="N"
 
64
>Next</A
 
65
></TD
 
66
></TR
 
67
></TABLE
 
68
><HR
 
69
ALIGN="LEFT"
 
70
WIDTH="100%"></DIV
 
71
><DIV
 
72
CLASS="SECT1"
 
73
><H1
 
74
CLASS="SECT1"
 
75
><A
 
76
NAME="AEN49"
 
77
></A
 
78
>2. Revision: Pygame fundamentals</H1
 
79
><DIV
 
80
CLASS="SECT2"
 
81
><H2
 
82
CLASS="SECT2"
 
83
><A
 
84
NAME="AEN51"
 
85
></A
 
86
>2.1. The basic Pygame game</H2
 
87
><P
 
88
>For the sake of revision, and to ensure that you are familiar with the basic structure of a Pygame program, I'll briefly run through
 
89
a basic Pygame program, which will display no more than a window with some text in it, that should, by the end, look something like
 
90
this (though of course the window decoration will probably be different on your system):</P
 
91
><DIV
 
92
CLASS="MEDIAOBJECT"
 
93
><P
 
94
><IMG
 
95
SRC="basic.png"></P
 
96
></DIV
 
97
><P
 
98
>The full code for this example looks like this:</P
 
99
><PRE
 
100
CLASS="PROGRAMLISTING"
 
101
>#!/usr/bin/python
 
102
 
 
103
import pygame
 
104
from pygame.locals import *
 
105
 
 
106
def main():
 
107
        # Initialise screen
 
108
        pygame.init()
 
109
        screen = pygame.display.set_mode((150, 50))
 
110
        pygame.display.set_caption('Basic Pygame program')
 
111
 
 
112
        # Fill background
 
113
        background = pygame.Surface(screen.get_size())
 
114
        background = background.convert()
 
115
        background.fill((250, 250, 250))
 
116
 
 
117
        # Display some text
 
118
        font = pygame.font.Font(None, 36)
 
119
        text = font.render("Hello There", 1, (10, 10, 10))
 
120
        textpos = text.get_rect()
 
121
        textpos.centerx = background.get_rect().centerx
 
122
        background.blit(text, textpos)
 
123
 
 
124
        # Blit everything to the screen
 
125
        screen.blit(background, (0, 0))
 
126
        pygame.display.flip()
 
127
 
 
128
        # Event loop
 
129
        while 1:
 
130
                for event in pygame.event.get():
 
131
                        if event.type == QUIT:
 
132
                                return
 
133
 
 
134
                screen.blit(background, (0, 0))
 
135
                pygame.display.flip()
 
136
 
 
137
 
 
138
if __name__ == '__main__': main()</PRE
 
139
></DIV
 
140
><DIV
 
141
CLASS="SECT2"
 
142
><H2
 
143
CLASS="SECT2"
 
144
><A
 
145
NAME="AEN59"
 
146
></A
 
147
>2.2. Basic Pygame objects</H2
 
148
><P
 
149
>As you can see, the code consists of three main objects: the screen, the background, and the text. Each of these objects is created
 
150
by first calling an instance of an in-built Pygame object, and then modifying it to fit our needs. The screen is a slightly special
 
151
case, because we still modify the display through Pygame calls, rather than calling methods belonging to the screen object. But for
 
152
all other Pygame objects, we first create the object as a copy of a Pygame object, giving it some attributes, and build our game
 
153
objects from them.</P
 
154
><P
 
155
>With the background, we first create a Pygame Surface object, and make it the size of the screen. We then perform the convert()
 
156
operation to convert the Surface to a single pixel format. This is more obviously necessary when we have several images and surfaces,
 
157
all of different pixel formats, which makes rendering them quite slow. By converting all the surfaces, we can drastically speed up
 
158
rendering times. Finally, we fill the background surface with white (255, 255, 255). These values are <I
 
159
CLASS="FIRSTTERM"
 
160
>RGB</I
 
161
> (Red Green
 
162
Blue), and can be worked out from any good paint program.</P
 
163
><P
 
164
>With the text, we require more than one object. First, we create a font object, which defines which font to use, and the size of the
 
165
font. Then we create a text object, by using the <TT
 
166
CLASS="FUNCTION"
 
167
>render</TT
 
168
> method that belongs to our font object, supplying three arguments:
 
169
the text to be rendered, whether or not it should be anti-aliased (1=yes, 0=no), and the color of the text (again in RGB format). Next
 
170
we create a third text object, which gets the rectangle for the text. The easiest way to understand this is to imagine drawing a
 
171
rectangle that will surround all of the text; you can then use this rectangle to get/set the position of the text on the screen. So
 
172
in this example we get the rectangle, set its <TT
 
173
CLASS="FUNCTION"
 
174
>centerx</TT
 
175
> attribute to be the <TT
 
176
CLASS="FUNCTION"
 
177
>centerx</TT
 
178
> attribute of the
 
179
background (so the text's center will be the same as the background's center, i.e. the text will be centered on the screen on the x
 
180
axis). We could also set the y coordinate, but it's not any different so I left the text at the top of the screen. As the screen is
 
181
small anyway, it didn't seem necessary.</P
 
182
></DIV
 
183
><DIV
 
184
CLASS="SECT2"
 
185
><H2
 
186
CLASS="SECT2"
 
187
><A
 
188
NAME="AEN68"
 
189
></A
 
190
>2.3. Blitting</H2
 
191
><P
 
192
>Now we have created our game objects, we need to actually render them. If we didn't and we ran the program, we'd just see a
 
193
blank window, and the objects would remain invisible. The term used for rendering objects is <I
 
194
CLASS="FIRSTTERM"
 
195
>blitting</I
 
196
>, which is where
 
197
you copy the pixels belonging to said object onto the destination object. So to render the background object, you blit it onto the
 
198
screen. In this example, to make things simple, we blit the text onto the background (so the background will now have a copy of the
 
199
text on it), and then blit the background onto the screen.</P
 
200
><P
 
201
>Blitting is one of the slowest operations in any game, so you need to be careful not to blit too much onto the screen in every frame.
 
202
If you have a background image, and a ball flying around the screen, then you could blit the background and then the ball in every
 
203
frame, which would cover up the ball's previous position and render the new ball, but this would be pretty slow. A better solution is
 
204
to blit the background onto the area that the ball previously occupied, which can be found by the ball's previous rectangle, and then
 
205
blitting the ball, so that you are only blitting two small areas.</P
 
206
></DIV
 
207
><DIV
 
208
CLASS="SECT2"
 
209
><H2
 
210
CLASS="SECT2"
 
211
><A
 
212
NAME="AEN73"
 
213
></A
 
214
>2.4. The event loop</H2
 
215
><P
 
216
>Once you've set the game up, you need to put it into a loop so that it will continuously run until the user signals that he/she wants
 
217
to exit. So you start an open <TT
 
218
CLASS="FUNCTION"
 
219
>while</TT
 
220
> loop, and then for each iteration of the loop, which will be each frame of the game,
 
221
update the game. The first thing is to check for any Pygame events, which will be the user hitting the keyboard, clicking a mouse
 
222
button, moving a joystick, resizing the window, or trying to close it. In this case, we simply want to watch out for for user trying
 
223
to quit the game by closing the window, in which case the game should <TT
 
224
CLASS="FUNCTION"
 
225
>return</TT
 
226
>, which will end the <TT
 
227
CLASS="FUNCTION"
 
228
>while</TT
 
229
> loop.
 
230
Then we simply need to re-blit the background, and flip (update) the display to have everything drawn. OK, as nothing moves or happens
 
231
in this example, we don't strictly speaking need to re-blit the background in every iteration, but I put it in because when things are
 
232
moving around on the screen, you will need to do all your blitting here.</P
 
233
></DIV
 
234
><DIV
 
235
CLASS="SECT2"
 
236
><H2
 
237
CLASS="SECT2"
 
238
><A
 
239
NAME="AEN79"
 
240
></A
 
241
>2.5. Ta-da!</H2
 
242
><P
 
243
>And that's it - your most basic Pygame game! All games will take a form similar to this, but with lots more code for the actual game
 
244
functions themselves, which are more to do your with programming, and less guided in structure by the workings of Pygame. This is what
 
245
this tutorial is really about, and will now go onto.</P
 
246
></DIV
 
247
></DIV
 
248
><DIV
 
249
CLASS="NAVFOOTER"
 
250
><HR
 
251
ALIGN="LEFT"
 
252
WIDTH="100%"><TABLE
 
253
SUMMARY="Footer navigation table"
 
254
WIDTH="100%"
 
255
BORDER="0"
 
256
CELLPADDING="0"
 
257
CELLSPACING="0"
 
258
><TR
 
259
><TD
 
260
WIDTH="33%"
 
261
ALIGN="left"
 
262
VALIGN="top"
 
263
><A
 
264
HREF="MakeGames.html"
 
265
ACCESSKEY="P"
 
266
>Prev</A
 
267
></TD
 
268
><TD
 
269
WIDTH="34%"
 
270
ALIGN="center"
 
271
VALIGN="top"
 
272
><A
 
273
HREF="MakeGames.html"
 
274
ACCESSKEY="H"
 
275
>Home</A
 
276
></TD
 
277
><TD
 
278
WIDTH="33%"
 
279
ALIGN="right"
 
280
VALIGN="top"
 
281
><A
 
282
HREF="games3.html"
 
283
ACCESSKEY="N"
 
284
>Next</A
 
285
></TD
 
286
></TR
 
287
><TR
 
288
><TD
 
289
WIDTH="33%"
 
290
ALIGN="left"
 
291
VALIGN="top"
 
292
></TD
 
293
><TD
 
294
WIDTH="34%"
 
295
ALIGN="center"
 
296
VALIGN="top"
 
297
>&nbsp;</TD
 
298
><TD
 
299
WIDTH="33%"
 
300
ALIGN="right"
 
301
VALIGN="top"
 
302
>Kicking things off</TD
 
303
></TR
 
304
></TABLE
 
305
>
 
306
 
 
307
</body>
 
308
</html>
 
309
 
 
310
 
 
311
 
 
312
</DIV
 
313
></BODY
 
314
></HTML
 
315
>