Skip to main content

Overview

The MyMaterial class provides a centralized collection of THREE.MeshStandardMaterial definitions used throughout the game. This ensures consistent colors and visual appearance for all game elements including characters, UI elements, and maze components.

Character Materials

Pac-Man

YELLOW
THREE.MeshStandardMaterial
Material for Pac-Man character.
new THREE.MeshStandardMaterial({color: 0xFFFF00})

Ghosts

RED_GHOST
THREE.MeshStandardMaterial
Material for the red ghost (Blinky).
new THREE.MeshStandardMaterial({color: 0xFF0000})
PINK_GHOST
THREE.MeshStandardMaterial
Material for the pink ghost (Pinky).
new THREE.MeshStandardMaterial({color: 0xFFB8FF})
BLUE_GHOST
THREE.MeshStandardMaterial
Material for the blue ghost (Inky).
new THREE.MeshStandardMaterial({color: 0x00FFFF})
ORANGE_GHOST
THREE.MeshStandardMaterial
Material for the orange ghost (Clyde).
new THREE.MeshStandardMaterial({color: 0xFFB852})

Basic Color Materials

RED
THREE.MeshStandardMaterial
Pure red material.
new THREE.MeshStandardMaterial({color: 0xFF0000})
GREEN
THREE.MeshStandardMaterial
Pure green material.
new THREE.MeshStandardMaterial({color: 0x00FF00})
BLUE
THREE.MeshStandardMaterial
Pure blue material.
new THREE.MeshStandardMaterial({color: 0x0000FF})
CYAN
THREE.MeshStandardMaterial
Cyan material.
new THREE.MeshStandardMaterial({color: 0x00FFFF})
PURPLE
THREE.MeshStandardMaterial
Purple/magenta material.
new THREE.MeshStandardMaterial({color: 0xFF00FF})
WHITE
THREE.MeshStandardMaterial
White material used for text, dots, and ghost eyes.
new THREE.MeshStandardMaterial({color: 0xFFFFFF})
BLACK
THREE.MeshStandardMaterial
Black material used for ghost pupils and UI elements.
new THREE.MeshStandardMaterial({color: 0x000000})

Special Materials

TRANSPARENT
THREE.MeshStandardMaterial
Semi-transparent white material with 10% opacity.
new THREE.MeshStandardMaterial({color: 0xFFFFFF, opacity: 0.1, transparent: true})
INVISIBLE
THREE.MeshStandardMaterial
Fully invisible material used for hitboxes and hidden paths.
new THREE.MeshStandardMaterial({color: 0xFFFFFF, opacity: 0.0, transparent: true})

Usage Examples

Creating Pac-Man

// Pac-Man uses the yellow material
class MyPacman extends MyCharacter {
  constructor(position, size, direction) {
    super(position, size, direction);
    this.material = MyMaterial.YELLOW;
  }
}

Creating Ghosts

// Create array of ghost materials
var ghostMaterial = [
  MyMaterial.RED_GHOST, 
  MyMaterial.PINK_GHOST, 
  MyMaterial.BLUE_GHOST, 
  MyMaterial.ORANGE_GHOST
];

// Create each ghost with its corresponding material
for(var i = 0; i < 4; i++){
  var ghost = new MyGhost(
    this.charactersSpawnPosition[i+1], 
    MyConstant.CHARACTER_SIZE, 
    direction, 
    ghostMaterial[i]
  );
}

Ghost Eyes

// Create ghost eyeballs and pupils
var rightEyeball = new THREE.Mesh(this.eyeGeom, MyMaterial.WHITE);
var rightPupil = new THREE.Mesh(this.pupilGeom, MyMaterial.BLACK);

var leftEyeball = new THREE.Mesh(this.eyeGeom, MyMaterial.WHITE);
var leftPupil = new THREE.Mesh(this.pupilGeom, MyMaterial.BLACK);

Maze Dots

// Create collectible dots with white material
this.dot = new THREE.Mesh(this.sphereGeom, MyMaterial.WHITE);

Invisible Hitboxes

// Create invisible square for pathfinding
this.square = new THREE.Mesh(this.pathGeom, MyMaterial.INVISIBLE);

// Create invisible cube for walls
this.cube = new MyCube(position, MyMaterial.INVISIBLE, size);

UI Text

// Create score text with white material
this.scoreText = new MyText(
  scoreTextPosition,
  'SCORE',
  2,
  MyMaterial.WHITE,
  this.fontURL
);

// Create title with yellow material
this.p = new MyText(posP, 'P', size, MyMaterial.YELLOW, fontURL);

Ghost State Changes

// Make ghost invisible when eaten
this.changeColor(MyMaterial.INVISIBLE);

// Flash white when frightened
that.changeColor(MyMaterial.WHITE);

Source Location

File: ~/workspace/source/pacman/src/MyMaterial.js:1
  • MyPacman - Uses YELLOW material
  • MyGhost - Uses ghost-specific materials
  • MyMaze - Uses materials for maze tiles including WHITE for dots and INVISIBLE for paths
  • MyTile - Uses WHITE for dots and INVISIBLE for paths
  • MyText - Uses WHITE and BLACK for UI elements

Build docs developers (and LLMs) love