GUI Applications Announcements for This Lecture Prelim 2 Next Week - PowerPoint PPT Presentation

Lecture 24 GUI Applications

Announcements for This Lecture Prelim 2 Next Week • There is no lab next week • TONIGHT at 7:30 pm § But Tuesday hours are open § A–F in Uris G01 § Open to EVERYONE § G-H in Malott 228 § Go for help on lab or A7 § I–L in Ives 305 • But lecture is important § M-Z in Statler Aud. § Return to topic of invariants • All review material online § Setting us up for sorting § Similar to previous years • Try to finish lab 11 first § Just changed “hard parts” § Frees remaining time for A7 11/21/19 GUI Applications 2

Assignment 7 • Instructions are posted– start work tomorrow • Goal: Move the player ship by Tuesday § This is where many people get stuck § Use the “lab” next week for help • Due Dec 10 , but extensions are possible § Contact your lab instructor (not me) § No questions-asked for Thursday, Dec 12 § Need a solid excuse for Sunday, Dec 15 11/21/19 GUI Applications 3

A Standard GUI Application Animates the application, like a movie 11/21/19 GUI Applications 4

A Standard GUI Application Check for user input Process user input Animates the Update the objects application, like a movie 11/21/19 GUI Applications 5

A Standard GUI Application Check for user input Process user input Animates the Update the objects application, like a movie Update display/view No change to objects Restriction set by graphics cards 11/21/19 GUI Applications 6

Must We Write this Loop Each Time? while program_is_running: # Get information from mouse/keyboard # Handled by OS/GUI libraries # Your code goes here # Draw stuff on the screen # Handled by OS/GUI libraries 11/21/19 GUI Applications 7

Must We Write this Loop Each Time? while program_is_running: # Get information from mouse/keyboard Would like to # Handled by OS/GUI libraries “plug in” code # Your code goes here Why do we need to write this each time? # Draw stuff on the screen # Handled by OS/GUI libraries 11/21/19 GUI Applications 8

Must We Write this Loop Each Time? while program_is_running: # Get information from mouse/keyboard # Handled by OS/GUI libraries Method call (for loop body) • Write loop body # Your code goes here in an app class. application.update() • OS/GUI handles everything else. # Draw stuff on the screen Custom Application class # Handled by OS/GUI libraries with its own attributes 11/21/19 GUI Applications 9

Programming Animation Intra-Frame • Computation within frame § Only need current frame • Example: Collisions § Need current position § Use to check for overlap • Can use local variables § All lost at update() end § But no longer need them 11/21/19 GUI Applications 10

Programming Animation Inter-Frame Current frame • Computation across frames § Use values from last frame • Example: Movement § Need old position/velocity § Compute next position • Requires attributes Previous § Attributes never deleted frame § Remain after update() ends 11/21/19 GUI Applications 11

Variables and the Loop while program_is_running: # Get information from mouse/keyboard # Handled by OS/GUI libraries # Your code goes here application.update() Local variables erased. But attributes persist. # Draw stuff on the screen # Handled by OS/GUI libraries 11/21/19 GUI Applications 12

Programming Animation Intra-Frame Inter-Frame • Computation within frame • Computation across frames § Only need current frame § Use values from last frame • Example: Collisions • Example: Movement § Need current position § Need old position/velocity § Use to check for overlap § Compute next position • Can use local variables • Requires attributes § All lost at update() end § Attributes never deleted § But no longer need them § Remain after update() ends 11/21/19 GUI Applications 13

Attributes = Loop Variables Normal Loops Application Variables “external” Attributes are the x = 0 to the loop body “external” variables i = 2 while program_running: # x = sum of squares of 2..i-1 # Get input while i <= 5: # Your code called here x = x + i*i application.update() i = i +1 # Draw # x = sum of squares of 2..5 11/21/19 GUI Applications 14

Class Invariant = Loop Invariants # Constructor • Look at the game loop § Loop body is update() game = GameApp(…) § Loop vars are attributes … • Class invariant is true # inv: game attribs are … § At update() /body start while program_running: § At update() /body end # Get input § Just like loop invariants # Your code goes here • Invariants are important! game.update() § To reason about game # post: game attribs are … § Help us debug problems 11/21/19 GUI Applications 15

The Actual Game Loop # Constructor To early to initialize everything game = GameApp(…) … Actual loop game.start() #Loop initialization initialization while program_running: # Get input # Your code goes here Separate update() game.update(time_elapsed) and draw() methods game.draw() 11/21/19 GUI Applications 16

Designing a Game Class: Animation class Animation(game2d.GameApp): See animation.py """App to animate an ellipse in a circle.""" def start(self): """Initializes the game loop.""" … def update(self,dt): """Changes the ellipse position.""" … def draw(self): """Draws the ellipse""" … 11/21/19 GUI Applications 17

Designing a Game Class: Animation class Animation(game2d.GameApp): See animation.py """App to animate an ellipse in a circle.""" Parent class that does hard stuff def start(self): """Initializes the game loop.""" … def update(self,dt): """Changes the ellipse position.""" … def draw(self): """Draws the ellipse""" … 11/21/19 GUI Applications 18

Designing a Game Class: Animation class Animation(game2d.GameApp): See animation.py """App to animate an ellipse in a circle.""" Parent class that does hard stuff def start(self): """Initializes the game loop.""" … Loop initialization Do NOT use __init__ def update(self,dt): """Changes the ellipse position.""" … Loop body def draw(self): """Draws the ellipse""" Use method draw() … defined in GObject 11/21/19 GUI Applications 19

Comparing Attributes: Touch • Attribute touch in GInput Line segment = 2 points § The mouse press position § Or None if not pressed § Access with self.input.touch Current • Compare touch , last position Touch § Mouse button pressed: Previous last None, touch not None Touch § Mouse button released: last not None, touch None § Mouse dragged : See touch.py last and touch not None 11/21/19 GUI Applications 20

Input and Invariants • Attribute input is… Line segment = 2 points § A GInput object • Attribute input.touch is… § Either a Point2 or None Current Touch § Location of mouse cursor (if it is pressed) Previous • Attribute last is… Touch § Either a Point2 or None § input.touch in prev. frame See touch.py Relationship between two variables. 11/21/19 GUI Applications 21

State: Changing What the Loop Does State ANIMATE_CIRCLE • State : Current loop activity § Playing game vs. pausing § Ball countdown vs. serve • Add an attribute state § Method update() checks state § Executes correct helper State ANIMATE_HORIZONTAL • How do we store state? § State is an enumeration ; one of several fixed values See state.py § Implemented as an int 11/21/19 GUI Applications 22

Designing States • Each state has its own set of invariants. § Drawing? Then touch and last are not None § Erasing? Then touch is None, but last is not • Need rules for when we switch states § Could just be “check which invariants are true” § Or could be a triggering event (e.g. key press) • Need to make clear in class specification § What are the invariants for each state ? § What are the rules to switch to a new state? 11/21/19 GUI Applications 23

Triggers: Checking Click Types • Double click = 2 fast clicks Is it fast enough? • Count number of fast clicks § Add an attribute clicks pressed released § Reset to 0 if not fast enough • Time click speed released pressed § Add an attribute time § Set to 0 when mouse released time § Increment when not pressed (e.g. in loop method update() ) See touch.py § Check time when next pressed 11/21/19 GUI Applications 24

Designing Complex Applications • Applications can become § Processes input extremely complex MainApp § Determines state § Large classes doing a lot § Many states & invariants Calls the methods of § Specification unreadable • Idea : Break application Animation § Animates (only) up into several classes § Start with a “main” class § Other classes have roles See subcontroller.py § Main class delegates work 11/21/19 GUI Applications 25