Player Controls
Time 1.6 hrs

Difficulty Beginner
Prerequisites Interactivity
Departments Science
Authors Sandra Kuipers
Groupings Individual
Pairs
Minimum Year Group None

Blurb

Player Controls

License

This work is shared under the following license: Creative Commons BY-SA-NC

Outline

Learner Outcomes
Students will:
  • ...
Competency Focus
  • ...
Interdisciplinary Connections
  • ...
Reflection
What was successful? What needs changing? Alternative Assessments and Lesson Ideas? What other Differentiation Ideas/Plans could be used?
  • ...
Credits
Any CC attribution, thanks, credit, etc.

This page requires you to be logged in to access it. Please login and try again.
5 mins
Game Basics
The Pitch
  • The core component of any game is input.
  • Without input, a video game it just a movie.
  • With input, it comes to life. The player has control over the game.
  • Want to add some life to your rectangles and ellipses?
  • In this unit, you'll look at how to create player-controlled characters.

    10 mins
    Keyboard Input
    Getting Started
    • Keyboard controls are one of the most basic game inputs.
    • A player presses left, and the character on screen goes left.
    • In p5js, keyboard control can be detected in a few different ways:

    The keyIsDown() function. This can go in your draw loop.

    if (keyIsDown(LEFT_ARROW)) {
      x -= 5;
    }
    

    The keyPressed() event. This is a standalone function.

    function keyPressed() {
      if (key == "g") {
        // Do something!
      }
    }
    

    WASD or Arrow Keys?

    • Have you ever wondered why some games use arrow keys, and some games use WASD?
    • It all comes down to ergonomics.
    • Many people are right handed, and use the mouse with their right hand.
    • The arrow keys are also on the right side of the keyboard. This makes using them awkward :(
    • The WASD keys are on the left side, and are in almost the same position as the arrow keys.
    • You can use either option, or both (some old-school two player games are controlled by both).
    • As you design your game, it's up to you to decide which you prefer.
    5 mins
    Top-Down Controls
    Digging In

    • Top-down controls place the game's camera directly above the player's head.
    • This type of control is common in strategy games, where precision is important.

    • Another common perspective isn't to look directly top-down, because we'd only see the tops of people's heads.
    • Third-person view in many games is close to top-down, but at a slight angle.
    • Many games that aren't fully 3D use this view to simulate a three-dimensional world, called 2.5D

    Example Top-Down Controls:

    Check out the code in the p5js editor.

    5 mins
    Side-Scroller Controls
    Digging In

    • Side scrolling is common in arcade and action games.
    • The camera looks at the player from the side, and follows them forward, backwards, up, and down.
    • Side scrolling games often layer the background to create a sense of depth.

    • Other perspectives include first-person and over-the-shoulder views.
    • These are common in 3D games, particularly action and adventure games.
    • First-person view is an immersive perspective, looking through the eyes of your character.
    5 mins
    Detecting Distance
    Code Examples
    • We can check the distance between two points with the dist() function.
    • This function takes a pair of x, y coordinates, and returns the distance between these objects.
    • Checking distance is a way to detect when two objects interact with each other.

    5 mins
    Detecting Position
    Code Examples
    • If we know the x, y and width, height of a rectangle, we can detect when a point is inside those coordinates.
    • To do this, we use the && statement, which means AND, to check for more than one logic condition.
    if (mouseX > myShape.x && mouseX < (myShape.x + myShape.width) 
     && mouseY > myShape.y && mouseY < (myShape.y + myShape.height)) {
      // Do something!
    }
    

    60 mins
    Your Mini-Game
    Evidence

    • Create your own mini-game using the p5js editor
    • Think mini! This isn't a full-fledged game: just an example of player control and movement.
    • Create a player object that can move and interact with a few different objects.
      • Does the player stop when they reach the edge of the screen?
      • Or can they loop to the other side, like pac-man?
      • Are there other objects in your scene? Do they move too?
      • Can you detect when the player gets close to an object?
      • Can you change the scene based on where the player position is?
    • Challenge yourself to explore player movement and position detection.
    • When you're happy with your game, submit a link to your p5js sketch as evidence of your learning.

    There are no records to display.
    Powered by Gibbon v28.0.00dev

    Founded by Ross Parker at ICHK Secondary | Built by Ross Parker, Sandra Kuipers and the Gibbon community
    Copyright © Gibbon Foundation 2010-2024 | Gibbon™ of Gibbon Education Ltd. (Hong Kong)
    Created under the GNU GPL | Credits | Translators | Support