feat(scenes): style first half of the screen to white

remarkablegames · Jan 30, 2022 · 5ec4464 · 5ec4464
1 parent 9d5f71f
commit 5ec4464
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 13 deletions.
diff --git a/src/constants/index.ts b/src/constants/index.ts
@@ -1,3 +1,9 @@
+export const color = {
+  white: '#fcfcfc',
+  whiteHex: 0xfcfcfc,
+  black: '#1d212d',
+} as const;
+
 export const key = {
   image: {
     spike: 'spike',

diff --git a/src/index.ts b/src/index.ts
@@ -2,6 +2,7 @@ import './style.css';
 
 import Phaser from 'phaser';
 
+import { color } from './constants';
 import scenes from './scenes';
 
 const isProduction = process.env.NODE_ENV === 'production';
@@ -10,8 +11,8 @@ const isProduction = process.env.NODE_ENV === 'production';
  * https://photonstorm.github.io/phaser3-docs/Phaser.Types.Core.html#.GameConfig
  */
 new Phaser.Game({
-  width: 1280, // 32 * 40
-  height: 640, // 32 * 20
+  width: 1280, // 32px * 40 tiles
+  height: 640, // 32px * 20 tiles
   title: 'Mirror',
   url: 'https://remarkablegames.org/mirror/',
   version: process.env.VERSION,
@@ -26,7 +27,7 @@ new Phaser.Game({
     },
   },
   disableContextMenu: isProduction,
-  backgroundColor: '#1d212d',
+  backgroundColor: color.black,
   scale: {
     mode: Phaser.Scale.FIT,
     autoCenter: Phaser.Scale.CENTER_BOTH,

diff --git a/src/scenes/Main.ts b/src/scenes/Main.ts
@@ -1,13 +1,13 @@
 import Phaser from 'phaser';
 
-import { key } from '../constants';
+import { color, key } from '../constants';
 import { Player } from '../sprites';
 
 export default class Main extends Phaser.Scene {
+  private groundLayer!: Phaser.Tilemaps.TilemapLayer;
+  private isPlayerDead!: boolean;
   private playerA!: Player;
   private playerB!: Player;
-  private isPlayerDead = false;
-  private groundLayer!: Phaser.Tilemaps.TilemapLayer;
   private spikeGroup!: Phaser.Physics.Arcade.StaticGroup;
 
   constructor() {
@@ -18,15 +18,24 @@ export default class Main extends Phaser.Scene {
     this.isPlayerDead = false;
 
     const map = this.make.tilemap({ key: key.tilemap.map });
+
+    // First half of screen has white background
+    this.add.rectangle(
+      0,
+      0,
+      map.widthInPixels,
+      map.heightInPixels * 2,
+      color.whiteHex
+    );
+
     const tiles = map.addTilesetImage(
       '0x72-industrial-tileset-32px-extruded',
       key.image.tiles
     );
 
-    map.createLayer('Objects', tiles);
     this.groundLayer = map.createLayer('Ground', tiles);
 
-    // Instantiate a player instance at the location of the "Spawn Point" object in the Tiled map
+    // Instantiate a player instance at the location of the spawn point object in the Tiled map
     const spawnPointA = map.findObject(
       'Objects',
       (obj) => obj.name === 'SpawnA'
@@ -70,10 +79,13 @@ export default class Main extends Phaser.Scene {
         // The map has spikes rotated in Tiled (z key), so parse out that angle to the correct body
         // placement
         spike.rotation = tile.rotation;
-        if (spike.angle === 0) spike.body.setSize(32, 6).setOffset(0, 26);
-        else if (spike.angle === -90)
+        if (spike.angle === 0) {
+          spike.body.setSize(32, 6).setOffset(0, 26);
+        } else if (spike.angle === -90) {
           spike.body.setSize(6, 32).setOffset(26, 0);
-        else if (spike.angle === 90) spike.body.setSize(6, 32).setOffset(0, 0);
+        } else if (spike.angle === 90) {
+          spike.body.setSize(6, 32).setOffset(0, 0);
+        }
 
         this.groundLayer.removeTileAt(tile.x, tile.y);
       }
@@ -85,9 +97,8 @@ export default class Main extends Phaser.Scene {
     this.add
       .text(16, 16, 'Arrow/WASD to move & jump', {
         font: '18px monospace',
-        color: '#000',
+        color: color.black,
         padding: { x: 20, y: 10 },
-        backgroundColor: '#fff',
       })
       .setScrollFactor(0);
   }