Skip to content

Commit 5b97148

Browse files
blankRiot96blankRiot96
committed
wrote chapter 2
1 parent 9051d93 commit 5b97148

File tree

3 files changed

+199
-7
lines changed

3 files changed

+199
-7
lines changed

‎assets/article/ch_1_blue_window.png

1.81 KB
Loading

‎guide/intro/chapter-1/index.html

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,13 @@
88
<p>In this article, we'll go over what pygame is and how to install it.</p>
99

1010
<h2>Table of contents</h2>
11-
<p></p>
12-
<ol id="toc">
13-
<!--
14-
To be filled by javascript
15-
-->
16-
</ol>
11+
<p>
12+
<ol id="toc">
13+
<!--
14+
To be filled by javascript
15+
-->
16+
</ol>
17+
</p>
1718

1819
<h2><a id="introduction" class="js">Introduction</a></h2>
1920
<p>
@@ -43,7 +44,7 @@ <h2><a id="introduction" class="js">Introduction</a></h2>
4344

4445
<h2><a id="pygame-ce" class="js">Pygame-CE</a></h2>
4546
<p>
46-
So pygame currently has two major distributors, the original one and a fork
47+
So pygame currently has two major distributions, the original one and a fork
4748
of the project. What is a fork? Well it means it's a copy of the project, and
4849
in this case they branched off to be two completely separate packages now.
4950
</p>
@@ -74,6 +75,7 @@ <h2><a id="installation" class="js">Installation</a></h2>
7475
pip uninstall pygame
7576
pip install pygame-ce
7677
</pre>
78+
7779
In order for pygame-ce to work, pygame needs to be uninstalled first.
7880
This is because both upstream pygame and pygame-ce share the import name,
7981
and so upstream pygame must be removed <u>first</u>.

‎guide/intro/chapter-2/index.html

Lines changed: 190 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,190 @@
1+
---
2+
layout: default
3+
title: Opening A Window
4+
next_page: [/guide/intro/chapter-3, Surfaces And Positional Datatypes]
5+
---
6+
7+
<body>
8+
<p>In this article, we'll go over how to get a basic window running.</p>
9+
10+
<h2>Table of contents</h2>
11+
<p>
12+
<ol id="toc">
13+
<!--
14+
To be filled by javascript
15+
-->
16+
</ol>
17+
</p>
18+
19+
20+
<h2><a id="setup" class="js">Setup</a></h2>
21+
<p>
22+
Create a file, for the purposes of this article I'll be calling it <code>main.py</code>.
23+
Avoid calling it <code>pygame.py</code> as that would result in a circular import error.
24+
</p>
25+
<p>
26+
Now obviously, the first thing to do is to import the library
27+
{% highlight python %}
28+
import pygame
29+
{% endhighlight %}
30+
</p>
31+
<p>
32+
As a general practice, we generally initialize pygame before using it. This enables the use of
33+
audio, fonts, and other cool stuff that we don't have to remember to initialize individually
34+
{% highlight python %}
35+
import pygame
36+
37+
pygame.init()
38+
{% endhighlight %}
39+
</p>
40+
41+
<p>
42+
Now here comes the interesting stuff,
43+
we're gonna spawn a window!
44+
{% highlight python %}
45+
import pygame
46+
47+
pygame.init()
48+
pygame.display.set_mode(size=(500, 500))
49+
{% endhighlight %}
50+
51+
You probably didn't see it, but that opened a 500x500 (width x height) window
52+
and closed since the program terminated.
53+
</p>
54+
<p>
55+
In order to keep the window open, the Python process needs to be running.
56+
Let's make a while loop to keep it running
57+
<br><u><b>CAUTION</b></u>: Make sure you know how to end your Python program forcefully, as the Window will be unresponsive</b>.
58+
If you're running this from a terminal, using CTRL+C or CTRL+SHIFT+C will do
59+
{% highlight python %}
60+
import pygame
61+
62+
pygame.init()
63+
pygame.display.set_mode(size=(500, 500))
64+
65+
while True:
66+
pass
67+
{% endhighlight %}
68+
</p>
69+
70+
<p>
71+
Great! Now we've got a black window running, but it's unresponsive. Let's fix that, shall we?
72+
{% highlight python %}
73+
import pygame
74+
75+
pygame.init()
76+
pygame.display.set_mode(size=(500, 500))
77+
78+
while True:
79+
events = pygame.event.get()
80+
for event in events:
81+
pass
82+
{% endhighlight %}
83+
<br><code>events = pygame.event.get()</code>: Here, we're requesting
84+
the events that happened since the previous time <code>pygame.event.get</code> was called.
85+
So any keypress, mouse input or touch input was recorded here.
86+
<br>
87+
<br>In this case, we want to loop over these events and check if the user pressed the X button.
88+
More precisely, this checks for the <a href="https://www.gnu.org/software/libc/manual/html_node/Termination-Signals.html#index-SIGTERM">SIGTERM</a>
89+
signal from your operating system which is what the X button sends
90+
{% highlight python %}
91+
import pygame
92+
93+
pygame.init()
94+
pygame.display.set_mode(size=(500, 500))
95+
96+
while True:
97+
events = pygame.event.get()
98+
for event in events:
99+
if event.type == pygame.QUIT:
100+
pass
101+
{% endhighlight %}
102+
<br><code>if event.type == pygame.QUIT</code>:
103+
So the <code>.type</code> attribute of each event is how we determine
104+
what the type of each event is. This maps to an integer constant and is usually compared with a named constant
105+
within pygame like <code>.QUIT</code>
106+
107+
{% highlight python %}
108+
import pygame
109+
110+
pygame.init()
111+
pygame.display.set_mode(size=(500, 500))
112+
113+
while True:
114+
events = pygame.event.get()
115+
for event in events:
116+
if event.type == pygame.QUIT:
117+
raise SystemExit
118+
{% endhighlight %}
119+
<br><code>raise SystemExit</code>: Well, this is pretty self explanatory.
120+
This simply raises a system exit, which terminates the Python program, and as we know -
121+
that causes the window to close
122+
</p>
123+
<br>
124+
<p>
125+
Now what if we want to draw something onto the window?
126+
<br>In order to do that, let's first get the display <a href="https://pyga.me/docs/ref/surface.html">Surface</a>.
127+
<br>A surface is basically a canvas we can draw pixels on, and the display
128+
surface is the main canvas which represents the area on our window.
129+
</p>
130+
<p>
131+
The display surface is returned by the <code>display.set_mode</code> function,
132+
let's assign that to a variable.
133+
{% highlight python %}
134+
import pygame
135+
136+
pygame.init()
137+
screen = pygame.display.set_mode(size=(500, 500))
138+
139+
while True:
140+
events = pygame.event.get()
141+
for event in events:
142+
if event.type == pygame.QUIT:
143+
raise SystemExit
144+
{% endhighlight %}
145+
146+
In pygame, it is common to name this variable 'screen'. Let's go ahead and fill the
147+
display surface, i.e, 'screen' with a color.
148+
{% highlight python %}
149+
import pygame
150+
151+
pygame.init()
152+
screen = pygame.display.set_mode(size=(500, 500))
153+
154+
while True:
155+
events = pygame.event.get()
156+
for event in events:
157+
if event.type == pygame.QUIT:
158+
raise SystemExit
159+
160+
screen.fill("blue")
161+
{% endhighlight %}
162+
163+
<code>Surface.fill</code> lets you fill the entire surface/canvas with a color of your choice.
164+
</p>
165+
166+
<p>
167+
But hey, this didn't do anything? The window is still black!
168+
<br>The reason for this is that we need to tell the window to update itself each time we draw
169+
something onto it. We can do that with <code>pygame.display.flip()</code>
170+
{% highlight python %}
171+
import pygame
172+
173+
pygame.init()
174+
screen = pygame.display.set_mode(size=(500, 500))
175+
176+
while True:
177+
events = pygame.event.get()
178+
for event in events:
179+
if event.type == pygame.QUIT:
180+
raise SystemExit
181+
182+
screen.fill("blue")
183+
pygame.display.flip()
184+
{% endhighlight %}
185+
186+
And voila! We have a perfectly good pygame window running
187+
</p>
188+
<img src="assets/article/ch_1_blue_window.png">
189+
190+
</body>

0 commit comments

Comments
 (0)