Day 13

Today

• Model-View-Controller
• MP4 proposal work

Solutions to Geometry and Inheritance Example

We’ll go over the solutions to the inheritance activity on 2D shapes from last class.

MP4: Interactive Programming

• Finish teaming and ideation (helper spreadsheet shared on Canvas)
• Written proposal due end of day (best to finish and discuss in class today)
• Mid-project checkin by Thursday

Model-View-Controller (MVC)

Model-View-Controller is what is known as a software design pattern.

In software engineering, a design pattern is a general reusable solution to a commonly occurring problem within a given context in software design. A design pattern is not a finished design that can be transformed directly into source or machine code. It is a description or template for how to solve a problem that can be used in many different situations. Patterns are formalized best practices that the programmer can use to solve common problems when designing an application or system.

          -- Wikipedia article on Software Design Pattern

The Model-View-Controller design pattern (or MVC for short) is an extremely useful design pattern for a number of applications. The most common places that it shows up are graphical user interfaces and web applications. Most importantly it is ideally suited to the projects that you all will be doing for this mini-project. Here is a figure that shows the basic principles of the MVC design pattern.

• A controller can send commands to the model to update the model’s state (e.g. editing a document). It can also send commands to its associated view to change the view’s presentation of the model (e.g. by scrolling through a document).
• A model stores data that is retrieved according to commands from the controller and displayed in the view.

• A view generates an output presentation to the user based on changes in the model.

          -- Wikipedia article on Model View Controller
  

This decomposition has a number of extremely nice properties. At the highest level, the pattern allows for the writing of loosely coupled and highly modular code. This allows various components to be swapped out with minimal changes to the overall program. However, in order to see the full power of MVC, it helps to go through one cycle of using it to solve a problem.

Brick Breaker

In order to better understand the MVC design pattern, we’re going to collaboratively build a game based on this pattern. Specifically, we’re going to be building out the basic structure of the popular Brick Breaker game.

While we’re going through this exercise it will be helpful to have a look at the pygame cheat sheet. It will also be useful to keep in mind the coordinate system used to draw to the Pygame screen.

If you don’t have pygame installed yet, you can install it with the following command.

$ pip install pygame

You can follow along with the code live, or use the BrickBreakerMVC, which already has each of the iterations of the code that we’re going to go through together.

A Basic Run Loop

We’ll start with some skeleton code that defines a minimal program which uses pygame to initialize a 640 by 480 pixel screen, and then waits until the user hits the “x” button in the window before quitting. We won’t be coding this part live, but we will be going over the basic components of the implementation.

This version of the code can be found at the iteration 1 commit.

Starting Our Model Class

Next, we’ll create a model class that maintains a single brick.

This version of the code can be found at the iteration 2 commit.

Starting Our View Class

Next, we’ll create a view class that draws our model to the pygame window.

This version of the code can be found at the iteration 3 commit.

Making More Bricks and Adding a Paddle

Next, we’ll add a grid of bricks along with a paddle. The paddle will wind up moving which will mean we need to create an update function to handle our game physics.

This version of the code can be found at the iteration 4 commit.

Adding a Keyboard Controller

Let’s add a controller to our system. We’ll start by coding a controller that uses the left and right arrow keys to decrease and increase, respectively, the velocity of the paddle.

This version of the code can be found at the iteration 5 commit.

Swapping in a Mouse Controller

We now create a mouse controller, which has the paddle trail the position of the mouse in the PyGame window. Once we have the controller implemented, we can easily swap in the mouse controller for our keyboard controller.

This version of the code can be found at the iteration 6 commit.