Controller

An area of the screen used to control player movement

  • One axis controls speed
  • The other controls lateral movement
    • In portrait orientation, lateral is side-to-side
    • In landscape it's top-to-bottom

This class keeps track of the position of the pointer (or touches on a touchscreen) and converts it to variables which other classes inspect, eg:

  • Controller.speedOffset - Used to calculate speed of forward movement
  • Controller.lateralOffset - Used to calculate amount of lateral movement (steering)
Author
  • Mark Mayes / mm-dev
License
  • GPL-3.0-only

Methods

(static) draw()

Source
Draw the controller to the canvas
  • Set the opacity of the background based on how far away the pointer is
  • Hide the background when the pointer is over the control area (if this is true, the [human] player must be controlling the [in-game] player)
  • Call another method to draw the arrow

(static) drawArrow()

Source
Draw the arrow
  • It gets more pointed to represent faster speeds
  • The colour also changes to indicate speed

(static) init()

Source
Initialise the controller

(static) setOrigin()

Source
The origin of the stick is used to work out how far it is being pushed and calculate steering/speed
  • The origin is not necessarily the centre of the control area
  • When viewpoort layout changes, the origin must be recalculated
  • Although there is no visible stick, it exists conceptually (the arrow represents the top of the stick)

(static) setupForLevel()

Source
Level data can alter parameters such as speed ranges and slipperiness
  • Adjust according to the parameters
  • Reset some other variables ready for the new level

(static) updateDirectionInfo()

Source

Other classes refer to them to understand what the player is doing.

  • Controller.scalarVectorOfTravel - A vector representing the direction the player is moving in
  • Controller.normalisedVectorOfTravel - The same vector as above, only normalised to give x and y values between -1 and 1 (removing the speed and just maintaining the angle)
  • Controller.vectorOfTravelMagnitude - The speed alone
  • Controller.angleOfTravel - The angle in degrees

(static) updateLateralMultiplier()

Source
Adjust steering based on size and aspect ratio of the viewport

(static) updateLayout()

Source
Whenever the viewport size/aspecct ratio changes, we must recalibrate the controller

(static) updatePointerDistanceFromCenter()

Source
The pointer distance from the centre of the control area is used to decide on opacity for the controller background
  • The further away the pointer gets from the controller the more opaque the background becomes
  • When the pointer is over the control area the background disappears
  • This is intended to draw attention to the control area and educate the player on how it works

(static) updatePointerPos(_x, _y)

Source
This is where speed and direction get set
  • Controller.stickPos is the important object
  • Like a real-world joystick, it's the cardinal to refer to to find what is happening in terms of speed and steering
Parameters
Name Type Description
_x number

X coordinate of the pointer or most recent touch event
_y number

Y coordinate of the pointer or most recent touch event

(static) updateSizes()

Source
Called on first run and when viewport changes size