Adds The Spire & The Great Wall maps.

saricden · May 6, 2022 · 1999a03 · 1999a03
1 parent 97c5621
commit 1999a03
Show file tree

Hide file tree

Showing 11 changed files with 2,867 additions and 15 deletions.
diff --git a/nobuild/level1/the-great-wall.tmx b/nobuild/level1/the-great-wall.tmx
diff --git a/nobuild/level1/the-spire.tmx b/nobuild/level1/the-spire.tmx
diff --git a/src/assets/maps/2.0/the-great-wall.json b/src/assets/maps/2.0/the-great-wall.json
diff --git a/src/assets/maps/2.0/the-spire.json b/src/assets/maps/2.0/the-spire.json
diff --git a/src/assets/ui-dom/maps/2.0/the-great-wall.png b/src/assets/ui-dom/maps/2.0/the-great-wall.png
diff --git a/src/assets/ui-dom/maps/2.0/the-spire.png b/src/assets/ui-dom/maps/2.0/the-spire.png
diff --git a/src/assets/ui-dom/title.html b/src/assets/ui-dom/title.html
@@ -91,7 +91,15 @@ <h1>
   <div>
     <button data-map="map1">
       <img src="/assets/ui-dom/maps/2.0/1.png" alt="" />
-      <label>Map 1</label>
+      <label>High Country</label>
+    </button>
+    <button data-map="map2-the-spire" data-map-bg-color="0xAA5555">
+      <img src="/assets/ui-dom/maps/2.0/the-spire.png" alt="" />
+      <label>The Spire</label>
+    </button>
+    <button data-map="map2-the-great-wall" data-map-bg-color="0x55EE55">
+      <img src="/assets/ui-dom/maps/2.0/the-great-wall.png" alt="" />
+      <label>The Great Wall</label>
     </button>
   </div>
 </div>

diff --git a/src/main.css b/src/main.css
@@ -364,9 +364,9 @@ canvas {
 
 #map-select button {
   position: relative;
-  width: calc(33% - 10px);
+  width: calc(33% - 20px);
   height: 300px;
-  margin-bottom: 20px;
+  margin: 0 10px 20px 10px;
   background-color: transparent;
   border: solid 2px rgba(255, 255, 255, 0.35);
   border-radius: 20px;
@@ -425,7 +425,7 @@ canvas {
   flex-direction: row;
   flex-wrap: wrap;
   align-items: stretch;
-  justify-content: space-between;
+  justify-content: flex-start;
 }
 
 #btn-title {

diff --git a/src/scenes/BootScene.js b/src/scenes/BootScene.js
@@ -29,17 +29,11 @@ class BootScene extends Scene {
     this.load.image('oswald-arm-r', 'assets/sprites/oswald-arm-r.png');
     this.load.image('oswald-grenade', 'assets/sprites/grenade.png');
 
-    // Maps
-    this.load.image('tileset-grassland-ex', 'assets/maps/tileset-grassland-ex.png');
-    this.load.tilemapTiledJSON('map-level1', 'assets/maps/level1.json');
-    this.load.tilemapTiledJSON('map-level2', 'assets/maps/level2.json');
-    this.load.tilemapTiledJSON('map-level3', 'assets/maps/level3.json');
-    this.load.tilemapTiledJSON('map-level4', 'assets/maps/level4.json');
-
     // Maps 2.0
     this.load.image('tileset-ex', 'assets/maps/2.0/tileset-ex.png');
     this.load.tilemapTiledJSON('map1', 'assets/maps/2.0/map1.json');
-    this.load.tilemapTiledJSON('map2', 'assets/maps/2.0/map2.json');
+    this.load.tilemapTiledJSON('map2-the-spire', 'assets/maps/2.0/the-spire.json');
+    this.load.tilemapTiledJSON('map2-the-great-wall', 'assets/maps/2.0/the-great-wall.json');
 
     // Music
     this.load.audio('ost-level1', 'assets/music/mech-ost1.mp3');

diff --git a/src/scenes/GameScene2.js b/src/scenes/GameScene2.js
@@ -9,8 +9,9 @@ class GameScene2 extends Scene {
     super("scene-game");
   }
 
-  init({ levelKey, p1Key }) {
+  init({ levelKey, bgColor = null, p1Key }) {
     this.levelKey = levelKey;
+    this.bgColor = bgColor;
     this.p1Key = p1Key;
   }
 
@@ -340,8 +341,13 @@ class GameScene2 extends Scene {
     this.camZoomMax = 0.5;
     this.camZoomLerp = 0.05;
 
-    this.cameras.main.setBackgroundColor(0x5555FF);
-    this.cameras.main.setZoom(1);
+    if (this.bgColor === null) {
+      this.cameras.main.setBackgroundColor(0x5555FF);
+    }
+    else {
+      this.cameras.main.setBackgroundColor(this.bgColor);
+    }
+    this.cameras.main.setZoom(this.camZoomMin);
     // this.cameras.main.setBounds(0, 0, this.tilemap.widthInPixels, this.tilemap.heightInPixels);
 
     this.cameraMid = new pMath.Vector2();

diff --git a/src/scenes/MenuScene.js b/src/scenes/MenuScene.js
@@ -30,6 +30,7 @@ class MenuScene extends Scene {
     };
 
     this.levelKey = null;
+    this.bgColor = null;
     this.p1Key = 'roboto';
     this.p2Key = 'roboto';
 
@@ -79,6 +80,7 @@ class MenuScene extends Scene {
 
           this.scene.start('scene-game', {
             levelKey: this.levelKey,
+            bgColor: this.bgColor,
             p1Key: this.p1Key,
             p2Key: this.p2Key
           });
@@ -144,11 +146,16 @@ class MenuScene extends Scene {
 
       btn.addEventListener('click', () => {
         const levelKey = btn.getAttribute('data-map');
+        const bgColor = btn.getAttribute('data-map-bg-color');
 
         this.sound.play('sfx-electro-click2');
 
         this.levelKey = levelKey;
 
+        if (bgColor) {
+          this.bgColor = bgColor;
+        }
+
         mapSelect.classList.remove('open');
         playerSelect.classList.add('open');
         btnStartMatch.classList.add('open');