The Pong Game¶
The following tutorial will show you some capabilities of the component-based approach, PySDL2 features. We will create the basics of a simple Pong game implementation here. The basics of creating a event loop, dealing with user input, moving images around and creating a rendering function are covered in this tutorial.
Getting started¶
We start with creating the window and add a small event loop, so we are able to close the window and exit the game.
import sys
import sdl2
import sdl2.ext
def run():
sdl2.ext.init()
window = sdl2.ext.Window("The Pong Game", size=(800, 600))
window.show()
running = True
while running:
events = sdl2.ext.get_events()
for event in events:
if event.type == sdl2.SDL_QUIT:
running = False
break
window.refresh()
return 0
if __name__ == "__main__":
sys.exit(run())
The import statements, video initialisation and window creation were
discussed previously in the Hello World tutorial. We import everything
from the sdl2 package here, too, to have all SDL2 functions available.
Instead of some integrated event processor, a new code fragment is introduced, though.
running = True
while running:
events = sdl2.ext.get_events()
for event in events:
if event.type == sdl2.SDL_QUIT:
running = False
break
window.refresh()
The while loop above is the main event loop of our application. It deals with
all kinds of input events that can occur when working with the window, such as
mouse movements, key strokes, resizing operations and so on. SDL handles a lot
for us when it comes to events, so all we need to do is to check, if there are
any events, retrieve each event one by one, and handle it, if necessary. For
now, we will just handle the sdl2.SDL_QUIT event, which is raised when the
window is about to be closed.
In any other case we will just refresh the window’s graphics buffer, so it is updated and visible on-screen.
Adding the game world¶
The window is available and working. Now let’s take care of creating the game world, which will manage the player paddles, ball, visible elements and everything else. We are going to use an implementation layout loosely based on a COP [1] pattern, which separates data structures and functionality from each other. This allows us to change or enhance functional parts easily without having to refactor all classes we are implementing.
We start with creating the two player paddles and the rendering engine that will display them.
[...]
WHITE = sdl2.ext.Color(255, 255, 255)
class SoftwareRenderer(sdl2.ext.SoftwareSpriteRenderSystem):
def __init__(self, window):
super(SoftwareRenderer, self).__init__(window)
def render(self, components):
sdl2.ext.fill(self.surface, sdl2.ext.Color(0, 0, 0))
super(SoftwareRenderer, self).render(components)
class Player(sdl2.ext.Entity):
def __init__(self, world, sprite, posx=0, posy=0):
self.sprite = sprite
self.sprite.position = posx, posy
def run():
...
world = sdl2.ext.World()
spriterenderer = SoftwareRenderer(window)
world.add_system(spriterenderer)
factory = sdl2.ext.SpriteFactory(sdl2.ext.SOFTWARE)
sp_paddle1 = factory.from_color(WHITE, size=(20, 100))
sp_paddle2 = factory.from_color(WHITE, size=(20, 100))
player1 = Player(world, sp_paddle1, 0, 250)
player2 = Player(world, sp_paddle2, 780, 250)
running = True
while running:
events = sdl2.ext.get_events()
for event in events:
if event.type == sdl2.SDL_QUIT:
running = False
break
world.process()
if __name__ == "__main__":
sys.exit(run())
The first thing to do is to enhance the
sdl2.ext.SoftwareSpriteRenderSystem so that it will paint
the whole window screen black on every drawing cycle, before drawing all
sprites on the window.
Afterwards, the player paddles will be implemented, based on an
sdl2.ext.Entity data container. The player paddles are
simple rectangular sprites that can be positioned anywhere on the
window.
In the main program function, we put those things together by creating a
sdl2.ext.World, in which the player paddles and the renderer
can live and operate.
Within the main event loop, we allow the world to process all attached
systems, which causes it to invoke the process() methods for all
sdl2.ext.System instances added to it.
Moving the ball¶
We have two static paddles centred vertically on the left and right of our window. The next thing to do is to add a ball that can move around within the window boundaries.
[...]
class MovementSystem(sdl2.ext.Applicator):
def __init__(self, minx, miny, maxx, maxy):
super(MovementSystem, self).__init__()
self.componenttypes = Velocity, sdl2.ext.Sprite
self.minx = minx
self.miny = miny
self.maxx = maxx
self.maxy = maxy
def process(self, world, componentsets):
for velocity, sprite in componentsets:
swidth, sheight = sprite.size
sprite.x += velocity.vx
sprite.y += velocity.vy
sprite.x = max(self.minx, sprite.x)
sprite.y = max(self.miny, sprite.y)
pmaxx = sprite.x + swidth
pmaxy = sprite.y + sheight
if pmaxx > self.maxx:
sprite.x = self.maxx - swidth
if pmaxy > self.maxy:
sprite.y = self.maxy - sheight
class Velocity(object):
def __init__(self):
super(Velocity, self).__init__()
self.vx = 0
self.vy = 0
class Player(sdl2.ext.Entity):
def __init__(self, world, posx=0, posy=0):
[...]
self.velocity = Velocity()
class Ball(sdl2.ext.Entity):
def __init__(self, world, sprite, posx=0, posy=0):
self.sprite = sprite
self.sprite.position = posx, posy
self.velocity = Velocity()
def run():
[...]
sp_ball = factory.from_color(WHITE, size=(20, 20))
[...]
movement = MovementSystem(0, 0, 800, 600)
spriterenderer = SoftwareRenderer(window)
world.add_system(movement)
world.add_system(spriterenderer)
[...]
ball = Ball(world, sp_ball, 390, 290)
ball.velocity.vx = -3
[...]
Two new classes are introduced here, Velocity and
MovementSystem. The Velocity class is a simple data bag. It
does not contain any application logic, but consists of the relevant
information to represent the movement in a certain direction. This
allows us to mark in-game items as being able to move around.
The MovementSystem in turn takes care of moving the in-game items around
by applying the velocity to their current position. Thus, we can simply enable
any Player instance to be movable or not by adding or removing a
velocity attribute to them, which is a Velocity component instance.
Note
The naming is important here. The EBS implementation as described in
Working with component-based entities requires every in-application or in-game item attribute
bound to a sdl2.ext.Entity to be the lowercase class name of its
related component.
Player.vel = Velocity(10, 10)
for example would raise an exception, since the system expects
Player.vel to be an instance of a Vel component.
The MovementSystem is a specialised sdl2.ext.System, a
sdl2.ext.Applicator, which can operate on combined sets of
data. When the sdl2.ext.Applicator.process() method is
called, the passed componentsets iterable will contain tuples of
objects that belong to an instance and feature a certain type. The
MovementSystem‘s process() implementation hence will loop over
sets of Velocity and Sprite instances that belong to the same
sdl2.ext.Entity. Since we have a ball and two players
currently available, it typically would loop over three tuples, two for
the individual players and one for the ball.
The sdl2.ext.Applicator thus enables us to process combined
data of our in-game items, without creating complex data structures.
Note
Only entities that contain all attributes (components) are taken
into account. If e.g. the Ball class would not contain a
Velocity component, it would not be processed by the
MovementSystem.
Why do we use this approach? The sdl2.ext.Sprite objects carry a
position, which defines the location at which they should be rendered, when
processed by the SoftwareRenderer. If they should move around (which is
a change in the position), we need to apply the velocity to them.
We also define some more things within the MovementSystem, such as a
simple boundary check, so that the players and ball cannot leave the
visible window area on moving around.
Bouncing¶
We have a ball that can move around as well as the general game logic
for moving things around. In contrast to a classic OO approach we do not
need to implement the movement logic within the Ball and Player
class individually, since the basic movement is the same for all (yes,
you could have solved that with inheriting Ball and Player from
a MovableObject class in OO).
The ball now moves and stays within the bounds, but once it hits the left side, it will stay there. To make it bouncy, we need to add a simple collision system, which causes the ball to change its direction on colliding with the walls or the player paddles.
[...]
class CollisionSystem(sdl2.ext.Applicator):
def __init__(self, minx, miny, maxx, maxy):
super(CollisionSystem, self).__init__()
self.componenttypes = Velocity, sdl2.ext.Sprite
self.ball = None
self.minx = minx
self.miny = miny
self.maxx = maxx
self.maxy = maxy
def _overlap(self, item):
pos, sprite = item
if sprite == self.ball.sprite:
return False
left, top, right, bottom = sprite.area
bleft, btop, bright, bbottom = self.ball.sprite.area
return (bleft < right and bright > left and
btop < bottom and bbottom > top)
def process(self, world, componentsets):
collitems = [comp for comp in componentsets if self._overlap(comp)]
if collitems:
self.ball.velocity.vx = -self.ball.velocity.vx
def run():
[...]
world = World()
movement = MovementSystem(0, 0, 800, 600)
collision = CollisionSystem(0, 0, 800, 600)
spriterenderer = SoftwareRenderer(window)
world.add_system(movement)
world.add_system(collision)
world.add_system(spriterenderer)
[...]
collision.ball = ball
running = True
while running:
events = sdl2.ext.get_events()
for event in events:
if event.type == sdl2.SDL_QUIT:
running = False
break
sdl2.SDL_Delay(10)
world.process()
if __name__ == "__main__":
sys.exit(run())
The CollisionSystem only needs to take care of the ball and objects
it collides with, since the ball is the only unpredictable object within our
game world. The player paddles will only be able to move up and down
within the visible window area and we already dealt with that within the
MovementSystem code.
Whenever the ball collides with one of the paddles, its movement direction (velocity) should be inverted, so that it bounces back.
Additionally, we won’t run at the full processor speed anymore in the
main loop, but instead add a short delay, using the
sdl2.SDL_Delay() function. This reduces the overall load on the
CPU and makes the game a bit slower.
Reacting on player input¶
We have a moving ball that bounces from side to side. The next step would be to allow moving one of the paddles around, if the player presses a key. The SDL event routines allow us to deal with a huge variety of user and system events that could occur for our application, but right now we are only interested in key strokes for the Up and Down keys to move one of the player paddles up or down.
[...]
def run():
[...]
running = True
while running:
events = sdl2.ext.get_events()
for event in events:
if event.type == sdl2.SDL_QUIT:
running = False
break
if event.type == sdl2.SDL_KEYDOWN:
if event.key.keysym.sym == sdl2.SDLK_UP:
player1.velocity.vy = -3
elif event.key.keysym.sym == sdl2.SDLK_DOWN:
player1.velocity.vy = 3
elif event.type == sdl2.SDL_KEYUP:
if event.key.keysym.sym in (sdl2.SDLK_UP, sdl2.SDLK_DOWN):
player1.velocity.vy = 0
sdl2.SDL_Delay(10)
world.process()
if __name__ == "__main__":
sys.exit(run())
Every event that can occur and that is supported by SDL2 can be identified by a
static event type code. This allows us to check for a key stroke, mouse button
press, and so on. First, we have to check for sdl2.SDL_KEYDOWN and
sdl2.SDL_KEYUP events, so we can start and stop the paddle movement on
demand. Once we identified such events, we need to check, whether the pressed
or released key is actually the Up or Down key, so that we do not start or stop
moving the paddle, if the user presses R or G or whatever.
Whenever the Up or Down key are pressed down, we allow the left player paddle to move by changing its velocity information for the vertical direction. Likewise, if either of those keys is released, we stop moving the paddle.
Improved bouncing¶
We have a moving paddle and we have a ball that bounces from one side to another, which makes the game ... quite boring. If you played Pong before, you know that most variations of it will cause the ball to bounce in a certain angle, if it collides with a paddle. Most of those implementations achieve this by implementing the paddle collision as if the ball collides with a rounded surface. If it collides with the center of the paddle, it will bounce back straight, if it hits the paddle near the center, it will bounce back with a pointed angle and on the corners of the paddle it will bounce back with some angle close to 90 degrees to its initial movement direction.
class CollisionSystem(sdl2.ext.Applicator):
[...]
def process(self, world, componentsets):
collitems = [comp for comp in componentsets if self._overlap(comp)]
if collitems:
self.ball.velocity.vx = -self.ball.velocity.vx
sprite = collitems[0][1]
ballcentery = self.ball.sprite.y + self.ball.sprite.size[1] // 2
halfheight = sprite.size[1] // 2
stepsize = halfheight // 10
degrees = 0.7
paddlecentery = sprite.y + halfheight
if ballcentery < paddlecentery:
factor = (paddlecentery - ballcentery) // stepsize
self.ball.velocity.vy = -int(round(factor * degrees))
elif ballcentery > paddlecentery:
factor = (ballcentery - paddlecentery) // stepsize
self.ball.velocity.vy = int(round(factor * degrees))
else:
self.ball.velocity.vy = - self.ball.velocity.vy
The reworked processing code above simulates a curved paddle by creating segmented areas, which cause the ball to be reflected in different angles. Instead of doing some complex trigonometry to calculate an accurate angle and transform it on a x/y plane, we simply check, where the ball collided with the paddle and adjust the vertical velocity.
If the ball now hits a paddle, it can be reflected at different angles, hitting the top and bottom window boundaries... and will stay there. If it hits the window boundaries, it should be reflected, too, but not with a varying angle, but with the exact angle, it hit the boundary with. This means that we just need to invert the vertical velocity, once the ball hits the top or bottom.
class CollisionSystem(sdl2.ext.Applicator):
[...]
def process(self, world, componentsets):
[...]
if (self.ball.sprite.y <= self.miny or
self.ball.sprite.y + self.ball.sprite.size[1] >= self.maxy):
self.ball.velocity.vy = - self.ball.velocity.vy
if (self.ball.sprite.x <= self.minx or
self.ball.sprite.x + self.ball.sprite.size[0] >= self.maxx):
self.ball.velocity.vx = - self.ball.velocity.vx
Creating an enemy¶
Now that we can shoot back the ball in different ways, it would be nice to have an opponent to play against. We could enhance the main event loop to recognise two different keys and manipulate the second paddle’s velocity for two people playing against each other. We also could create a simple computer-controlled player that tries to hit the ball back to us, which sounds more interesting.
class TrackingAIController(sdl2.ext.Applicator):
def __init__(self, miny, maxy):
super(TrackingAIController, self).__init__()
self.componenttypes = PlayerData, Velocity, sdl2.ext.Sprite
self.miny = miny
self.maxy = maxy
self.ball = None
def process(self, world, componentsets):
for pdata, vel, sprite in componentsets:
if not pdata.ai:
continue
centery = sprite.y + sprite.size[1] // 2
if self.ball.velocity.vx < 0:
# ball is moving away from the AI
if centery < self.maxy // 2:
vel.vy = 3
elif centery > self.maxy // 2:
vel.vy = -3
else:
vel.vy = 0
else:
bcentery = self.ball.sprite.y + self.ball.sprite.size[1] // 2
if bcentery < centery:
vel.vy = -3
elif bcentery > centery:
vel.vy = 3
else:
vel.vy = 0
class PlayerData(object):
def __init__(self):
super(PlayerData, self).__init__()
self.ai = False
class Player(sdl2.ext.Entity):
def __init__(self, world, sprite, posx=0, posy=0, ai=False):
self.sprite = sprite
self.sprite.position = posx, posy
self.velocity = Velocity()
self.playerdata = PlayerData()
self.playerdata.ai = ai
def run():
[...]
aicontroller = TrackingAIController(0, 600)
world.add_system(aicontroller)
world.add_system(movement)
world.add_system(collision)
world.add_system(spriterenderer)
player1 = Player(world, sp_paddle1, 0, 250)
player2 = Player(world, sp_paddle2, 780, 250, True)
[...]
aicontroller.ball = ball
[...]
We start by creating a component PlayerData that flags a player as
being AI controlled or not. Afterwards, a TrackingAIController is
implemented, which, depending on the information of the PlayerData
component, will move the specific player paddle around by manipulating
its velocity information.
The AI is pretty simple, just following the ball’s vertical movement, trying to hit it at its center, if the ball moves into the direction of the AI-controlled paddle. As soon as the ball moves away from the paddle, the paddle will move back to the vertical center.
Tip
Add True as last parameter to the first Player() constructor to
see two AIs playing against each other.
Next steps¶
We created the basics of a Pong game, which can be found in the examples folder. However, there are some more things to do, such as
- resetting the ball to the center with a random vertical velocity, if it hits either the left or right window bounds
- adding the ability to track the points made by either player, if the ball hit the left or right side
- drawing a dashed line in the middle to make the game field look nicer
- displaying the points made by each player
It is your turn now to implement these features. Go ahead, it is not as complex as it sounds.
you can reset the ball’s position in the
CollisionSystemcode, by changing the code for theminxandmaxxtestyou could enhance the
CollisionSystemto processPlayerDatacomponents and add the functionality to add points there (or write a small processor that keeps track of the ball only and processes only thePlayerDataandvideo.SoftSpriteobjects of each player for adding points). Alternatively, you could use thesdl2.ext.EventHandlerclass to raise a score count function within theCollisionSystem, if the ball collides with one of the paddles.write an own render sytem, based on
sdl2.ext.Applicator, which takes care of position and sprite setsStaticRepeatingSprite(Entity): ... self.positions = Positions((400, 0), (400, 60), (400, 120), ...) ...draw some simple images for 0-9 and render them as sprites, depending on the points a player made.
Footnotes
| [1] | Component-Oriented Programming |