GUI and Game Programming

GUI & Game Programming

Today we will cover the following topics:

Problem Scenario

• So far we have just been making CLI (terminal applications).
• What if we want to make an app that the user interacts with using a mouse and keyboard (or gamepad).
• How would we go about making a game? It could run in the terminal but today we have better options

Warmup – Activity

• Work in small groups -
• Think about software that you use on a daily basis?
• How do you interact with this software?
• How do you feel about the experience?
• Share with the class

• Now think about game software that you like?
• How do you interact with it?
• Does it differ from genre and platform?

Review – Quiz

• https://dashboard.blooket.com/set/69ac3076572efa156e0e0690
• https://play.blooket.com/host?id=69ac3076572efa156e0e0690

GUI Programming – Theory

• We will look at:
• Different types of GUI
• GUI event handler loops
• TKinter

Different types of GUI

Source: https://www.flextech-industrial.com/automtion/what-is-the- graphical-user-interface/

• Graphical User Interfaces (GUI)
• Command Line Interfaces (CLI)
• Form-Based Interfaces
• Menu-Based Interfaces
• Natural Language Interfaces

Graphical User Interfaces (GUI)

Source: https://discord.com/blog/player-release-q12025 Features:

• Windows
• Icons
• Buttons
• Menus
• Mouse interaction Examples:
• Microsoft Windows
• macOS
• Mobile phone apps Advantages:
• Easy to learn
• Visual and intuitive Disadvantages:
• Uses more system resources than text interfaces

Command Line Interface (CLI)

Source: https://media.fs.com/images/community/erp/pTns8_NbDEYCX2 ER43HDnZsSac.jpg A CLI allows users to interact with the computer by typing commands. Examples:

• Linux T erminal
• Windows Command Prompt
• PowerShell Advantages:
• Very powerful for advanced users
• Fast for repetitive tasks Disadvantages:
• Harder for beginners to learn
• Requires memorizing commands

Form-Based Interfaces

Source: https://miro.medium.com/v2/resize:fit:1400/1*vj0EEG1zWzKxHu PpYq_ihQ.gif Users enter information into structured fields. Common elements:

• Text boxes
• Checkboxes
• Drop-down menus
• Submit buttons Examples:
• Online registration forms
• Login pages
• Online shopping checkout forms Advantages:
• Easy to guide users
• Reduces input errors

Menu-Based Interfaces

Source: https://www.reddit.com/media?url=https%3A%2F%2Fpreview.re

dd.it%2Fdone-designing-the-user-interface-of-the-atm-boss-v0-

fter92gvnbpd1.jpeg%3Fauto%3Dwebp%26s%3D6904518143db7999686 0ff39f7b5138edd634b17 Users select options from a list of choices. Examples:

• ATM machines
• Restaurant self-order kiosks
• DVD menus
• Settings menus in apps Advantages:
• Very easy to use
• Prevents invalid choices Disadvantages:
• Can become slow if menus are very large

Natural Language Interfaces

Source: https://encrypted-

tbn0.gstatic.com/images?q=tbn:ANd9GcQZLCmZI7ixXoNig77EBe0JVJplZ

XURgIYxMA&s Users interact with the system using normal human language. Examples:

• Voice assistants (Siri, Alexa, Google Assistant)
• Chatbots
• AI assistants Advantages:
• Very natural interaction
• No commands to memorize Disadvantages:
• Can misunderstand users
• Requires advanced AI

Elements of a GUI

Source: https://intellipaat.com/blog/graphical-user- interface-gui/

GUI Event Handler

Source: https://www.flextech-industrial.com/automtion/what-is-the- graphical-user-interface/

Source: https://www.flextech-industrial.com/automtion/what-is-the- graphical-user-interface/

• Start the program and create the window.
• Enter the event loop.
• Wait for an event.
• When an event happens, determine what it is.
• Run the appropriate code.
• Return to waiting for the next event.

GUI Programming – TKinter

Source: https://profjahier.github.io/html/NSI/tkinter/doc_tk_allegee/tutorial/eventloop.ht ml

• GUI programs run inside an event loop
• User actions are placed in an event queue
• Examples of events:
• Mouse click
• Key press
• Button press
• The event loop:
• Takes the next event
• Runs a callback function
• When finished, the program returns to the loop

GUI Programming

TKinter Button

GUI Programming

TKinter Counter

GUI Programming

TKinter Entry

GUI Programming

TKinter Dice

GUI Programming

Challenge Please create your own TKinter simple app. Time limit 10 minutes Then demonstrate It should use all the features we have covered here.

Game Programming

Pygame Source: Super Mario

• What do we need to make a game?
• Think about the game Super Mario.
• What does the player do?
• What is happening on the screen?
• What inputs are available to us?
• What happens when we make an input?

Game Loop- Theory

Source: https://www.researchgate.net/publication/307168361_A_Comprehensive_End- to-End_Lag_Model_for_Online_and_Cloud_Video_Gaming

Game Loop- Pygame

Source: https://openbookproject.net/thinkcs/python/english3e/pygame.html Inside the loop the program repeatedly:

• Poll and handle events
• Check for input (keyboard, mouse, quit)
• Update game elements
• Change positions, scores, or game state
• Draw the surface
• Render game objects on the screen
• Show the surface
• Display the updated frame to the player

Pygame Loop – Example

Handle Events

Key events Pygame handles include:

• Keyboard Events:KEYDOWN (key pressed), KEYUP (key released).
• Mouse Events: MOUSEBUTTONDOWN(click), MOUSEBUTTONUP (rele ase), MOUSEMOTION (movement), MOUSEWHEEL (scroll).
• Window Events:QUIT (closing the app), WINDOWRESIZED,WINDOWMOVED,WINDOWFOCUSGAI NED.
• Joystick/Gamepad Events: JOYAXISMOTION,JOYBUTTONDOWN,JOYBUTTONUP,J

OYHATMOTION.

Update Game State

This is where we update the logic of the game, all the numbers and gameplay behind the scenes. We also update the variables that store the locations of things? What other game state variables do you think we should track?

Draw Game

Remember we must clear the screen before redrawing everything in it's new location. Every loop we update the position little by little to give the illusion of motion.

Don't forget to flip the screen This draws the screen and is the final part of the game loop

Sprites

• A sprite is a 2D image used to represent an object in a game.
• Sprites can represent players, enemies, items, or effects.
• The game draws the sprite at a position on the screen every frame.
• Changing the sprite image quickly creates animation (e.g., idle, run, jump).

Sprite – Animating

First we must load the sprites from the directory. In our example each image is the next frame of the animation. We return a list of sprites that make up the animation. Sometimes we will have a sprite sheet, then we need to load the frames off one larger image.

Then we load each animation we need and pass the dictionary of animations into the animation controller.

It keeps track of:

• The current animation state
• The current frame
• The current image being displayed This class allows us to:
• Switch animations easily
• Track the current frame
• Control animation speed

We use conditions to check which of the animations we should be using. Is the player in the air? Are they running?

We update the sprite, we don't do this every single game loop because it will be too fast, instead we use a different animation speed to limit the number of sprite updates. Be careful not to go out of bounds of the frames!

Finally we draw the player to the screen. We can flip the sprite to change the direction of the player too. We set a boolean variable for the player state when they push the keys.

Mouse Input

• The above example uses the keyboard for input, but we also have mouse input as well.
• The user moves the mouse
• Each loop we keep track of the mouse location
• If we click we handle an event if it's located over the co-ordinated.

• Pygame detects mouse input through events.
• pygame.event.get() checks for user input.
• MOUSEBUTTONDOWN occurs when the mouse is clicked.
• event.button == 1 means left mouse button.
• We then get the mouse position.
• Please be aware 2 is middle mouse and 3 is right click

• We only know that the user has clicked the mouse, we don't know where.
• mouse_x, mouse_y = pygame.mouse.get_pos()
• The mouse position tells us where the cursor is.
• Returns the current position of the cursor.
• mouse_x = horizontal position.
• mouse_y = vertical position.

• We only know that the user has clicked the mouse, we don't know where.
• mouse_x, mouse_y = pygame.mouse.get_pos()
• The mouse position tells us where the cursor is.
• Returns the current position of the cursor.
• mouse_x = horizontal position.
• mouse_y = vertical position.

• We can use a function to see if the mouse was over a button when clicked. Keep in mind these values are hard coded in this scenario.
• How can we improve this?

You will need to track mouse input and fix the buggy code for clicking on this button for this weeks Distinction task.

Mouse Input – Extension

It's possible to avoid using hard coded values. A rectangle object has some built in functions. This one returns true if the mouse position was inside any point of the rectangle when we clicked.

Hitboxes

Hitboxes – Example

We have a simple example of hitboxes that uses shape drawing. We have a player on the left an opponent on the right. Right now there is no attack or collision.

When the space bar is pushed we create a hitbox. Normally this would be invisible and we would begin the attack animation.

Finally we can check if the hit landed by using the built in colliderect function. Rectangles are good for detection. This is why they often exist behind the sprites in a game

Challenge

• Download the simple platformer code.
• Read through the code and try to understand it. Why not play around with it? Try to extend the game?
• Add music? https://www.pygame.org/docs/ref/music.html
• Collect coins?

https://www.pygame.org/docs/ref/rect.html?highlight=collide

• Get a feel for Pygame

Music Player and Custom Project

• Two major tasks for the second half.
• For the Week 9 GUI music player (Distinction) and Custom Project you should create an app with a GUI.
• What kind of app would you like to make?

Test 1

Upcoming on Sunday

• Sunday 15th – 9:00am