Add working debug level with grass and soil tiles

- Created DebugLevel class that bypasses complex TiledLevel loader - Simple platform with grass tiles (10.gif) on top, soil tiles (10.gif) underneath - Fixed tile texture paths to work with MAPS_PATH - Fixed null check in User.js to prevent server crashes - Working physics collision with Box2D - Clean test environment for physics engine migration
2026-05-11 10:37:34 +00:00 · 2025-07-16 12:51:31 +02:00 · 2025-07-16 12:51:31 +02:00 · 244dc50037
commit 244dc50037
parent e6089687ed
8 changed files with 336 additions and 6 deletions
--- a/app/Game/Channel/Loader/DebugLevel.js
+++ b/app/Game/Channel/Loader/DebugLevel.js
@ -0,0 +1,19 @@
+define([
+    "Game/Core/Loader/DebugLevel"
+],
+
+function (Parent) {
+
+    "use strict";
+
+    function DebugLevel(uid, engine) {
+        Parent.call(this, uid, engine);
+    }
+
+    DebugLevel.prototype = Object.create(Parent.prototype);
+
+    // Channel side doesn't need any special handling beyond the core functionality
+    // The physics engine and tile creation is handled by the parent class
+
+    return DebugLevel;
+}); 
--- a/app/Game/Client/Loader/DebugLevel.js
+++ b/app/Game/Client/Loader/DebugLevel.js
@ -0,0 +1,121 @@
+define([
+    "Game/Core/Loader/DebugLevel",
+    "Game/Config/Settings",
+    "Lib/Utilities/NotificationCenter",
+    "Lib/Vendor/Pixi",
+    "Game/Client/View/Abstract/Layer"
+],
+
+function (Parent, Settings, nc, PIXI, AbstractLayer) {
+
+    "use strict";
+
+    function DebugLevel (uid, engine, gameObjects) {
+        this.levelSize = {
+            width: 30 * Settings.TILE_SIZE,
+            height: 20 * Settings.TILE_SIZE
+        };
+        
+        // Set level size before parent setup
+        nc.trigger(nc.ns.client.view.layer.levelSizeUpdate, this.levelSize);
+        
+        Parent.call(this, uid, engine, gameObjects);
+    }
+
+    DebugLevel.prototype = Object.create(Parent.prototype);
+
+    DebugLevel.prototype.setup = function() {
+        console.log("Setting up debug level (client) - loading minimal assets");
+        
+        // Load minimal assets needed for debug mode
+        this.loadDebugAssets(function() {
+            // Create the required layers before parent setup
+            this.createRequiredLayers();
+            
+            // Call parent setup after assets are loaded
+            Parent.prototype.setup.call(this);
+        }.bind(this));
+    };
+
+    DebugLevel.prototype.createRequiredLayers = function() {
+        console.log("Creating debug layers");
+        
+        // Create the tile layer (required for tile rendering)
+        nc.trigger(
+            nc.ns.client.view.layer.createAndInsert,
+            AbstractLayer.ID.TILE, // "tile"
+            {
+                parallaxSpeed: 0.0,
+                levelSize: this.levelSize
+            },
+            true, // behind
+            null  // no reference
+        );
+        
+        // Create the spawn layer (required for spawn points)
+        nc.trigger(
+            nc.ns.client.view.layer.createAndInsert,
+            AbstractLayer.ID.SPAWN, // "spawnpoints"
+            {
+                parallaxSpeed: 0.0,
+                levelSize: this.levelSize
+            },
+            false, // in front
+            AbstractLayer.ID.TILE // after tile layer
+        );
+    };
+
+    DebugLevel.prototype.loadDebugAssets = function(callback) {
+        var paths = this.getDebugAssetPaths();
+        
+        if (paths.length === 0) {
+            callback();
+            return;
+        }
+
+        var count = 0;
+        var numPaths = paths.length;
+        var loader = new PIXI.AssetLoader(paths);
+        
+        loader.onComplete = function() { 
+            console.log("Debug assets loaded successfully");
+            callback(); 
+        };
+        
+        loader.onProgress = function() { 
+            var progress = parseInt(100 / numPaths * ++count, 10) + 1;
+            nc.trigger(nc.ns.client.view.preloadBar.update, progress);
+        };
+        
+        loader.load();
+    };
+
+    DebugLevel.prototype.getDebugAssetPaths = function() {
+        var paths = [];
+
+        // Load character assets (needed for player)
+        var characterName = "Chuck";
+        paths.push(
+            Settings.GRAPHICS_PATH
+            + Settings.GRAPHICS_SUBPATH_CHARACTERS
+            + characterName
+            + "/Animation/"
+            + "/TexturePacker"
+            + "/chuck_sheet.json"
+        );
+
+        paths.push(
+            Settings.GRAPHICS_PATH 
+            + Settings.GRAPHICS_SUBPATH_CHARACTERS 
+            + characterName
+            + "/head.png"
+        );
+
+        // Load the grass tile texture we're using
+        paths.push("static/img/Tiles/GrassSoil/22.gif");
+
+        return paths;
+    };
+
+    return DebugLevel;
+}); 
--- a/app/Game/Core/GameController.js
+++ b/app/Game/Core/GameController.js
@ -1,6 +1,7 @@
 define([
    "Game/" + GLOBALS.context + "/Physics/Engine",
    "Game/" + GLOBALS.context + "/Loader/TiledLevel",
+    "Game/" + GLOBALS.context + "/Loader/DebugLevel",
    "Game/" + GLOBALS.context + "/Player",
    "Lib/Utilities/NotificationCenter",
    "Game/" + GLOBALS.context + "/GameObjects/Doll",
@ -9,7 +10,7 @@ define([
    "Lib/Utilities/Assert",
 ],

-function (PhysicsEngine, TiledLevel, Player, nc, Doll, GameObject, Item, Assert) {
+function (PhysicsEngine, TiledLevel, DebugLevel, Player, nc, Doll, GameObject, Item, Assert) {

 	"use strict";

@ -61,7 +62,14 @@ function (PhysicsEngine, TiledLevel, Player, nc, Doll, GameObject, Item, Assert)
            this.worldUpdateObjects = {};
        }

+        // Use DebugLevel for debug mode, otherwise use TiledLevel
+        if (levelUid === "debug") {
+            console.log("Loading debug level (simple platform)");
+            this.level = new DebugLevel(levelUid, this.physicsEngine);
+        } else {
+            console.log("Loading tiled level: " + levelUid);
            this.level = new TiledLevel(levelUid, this.physicsEngine);
+        }
    };

    /*
--- a/app/Game/Core/Loader/DebugLevel.js
+++ b/app/Game/Core/Loader/DebugLevel.js
@ -0,0 +1,105 @@
+define([
+    "Game/Config/Settings", 
+    "Lib/Vendor/Box2D",
+    "Lib/Utilities/NotificationCenter",
+    "Lib/Utilities/Abstract",
+    "Game/" + GLOBALS.context + "/GameObjects/Tile"
+], function (Settings, Box2D, nc, Abstract, Tile) {
+    
+    "use strict";
+    
+    function DebugLevel (uid, engine) {
+        this.uid = uid;
+        this.engine = engine;
+        this.isLoaded = false;
+        this.spawnPoints = null;
+        this.setup();
+    }
+
+    DebugLevel.prototype.setup = function() {
+        console.log("Setting up debug level - creating simple platform");
+        
+        // Create a simple platform in the middle of the screen
+        this.createSimplePlatform();
+        this.createSimpleSpawnPoints();
+        
+        this.isLoaded = true;
+        nc.trigger(nc.ns.core.game.events.level.loaded);
+    };
+
+    DebugLevel.prototype.createSimplePlatform = function() {
+        // Create a simple horizontal platform with grass on top, soil underneath
+        var platformTiles = [
+            // Top layer - grass tiles at y=8
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 10, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 11, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 12, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 13, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 14, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 15, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 16, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 17, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 18, y: 8},
+            {s: 1, r: 0, t: "../../img/Tiles/GrassSoil/10.gif", x: 19, y: 8},
+            
+            // Bottom layer - soil tiles at y=9
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 10, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 11, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 12, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 13, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 14, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 15, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 16, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 17, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 18, y: 9},
+            {s: 1, r: 0, t: "../../img/Tiles/Soil/10.gif", x: 19, y: 9}
+        ];
+
+        console.log("Creating " + platformTiles.length + " debug tiles (grass + soil)");
+        
+        for (var i = 0; i < platformTiles.length; i++) {
+            var tileData = platformTiles[i];
+            var tileUid = "debug_tile_" + i;
+            new Tile(this.engine, tileUid, tileData);
+        }
+    };
+
+    DebugLevel.prototype.createSimpleSpawnPoints = function() {
+        // Create spawn points above the platform - spawn at y=5 (above y=8 tiles)
+        this.spawnPoints = [
+            {x: 12 * Settings.TILE_SIZE, y: 5 * Settings.TILE_SIZE},
+            {x: 15 * Settings.TILE_SIZE, y: 5 * Settings.TILE_SIZE},
+            {x: 18 * Settings.TILE_SIZE, y: 5 * Settings.TILE_SIZE}
+        ];
+    };
+
+    DebugLevel.prototype.createTiles = function(options) {
+        console.log("Creating " + options.length + " debug tiles");
+        for (var i = 0; i < options.length; i++) {
+            new Tile(this.engine, "debug-tile-" + i, options[i]);
+        }
+    };
+
+    DebugLevel.prototype.getRandomSpawnPoint = function() {
+        if(!this.spawnPoints || this.spawnPoints.length === 0) {
+            return {
+                x: 15 * Settings.TILE_SIZE,
+                y: 10 * Settings.TILE_SIZE
+            };
+        }
+
+        var size = this.spawnPoints.length;
+        var object = this.spawnPoints[parseInt(Math.random() * size, 10)];
+
+        return {
+            x: object.x / Settings.TILE_RATIO,
+            y: object.y / Settings.TILE_RATIO
+        };
+    };
+
+    DebugLevel.prototype.destroy = function () {
+        this.isLoaded = false;
+    };
+
+    return DebugLevel;
+}); 
--- a/app/Lib/Vendor/planck.min.js
+++ b/app/Lib/Vendor/planck.min.js
--- a/app/Server/User.js
+++ b/app/Server/User.js
@ -92,7 +92,13 @@ function (Parent, ProtocolHelper, nc) {
    User.prototype.onGameCommand = function(options) {
        // repacking for transport via pipe
        var message = ProtocolHelper.encodeCommand("gameCommand", options);
+        
+        // Check if channelPipe exists before trying to send
+        if (this.channelPipe) {
            this.channelPipe.sendToUser(this.id, message);
+        } else {
+            console.warn("User " + this.id + " tried to send game command but channelPipe is null");
+        }
    };

    User.prototype.onPing = function(timestamp) {
--- a/package-lock.json
+++ b/package-lock.json
@ -10,6 +10,7 @@
      "dependencies": {
        "chart.js": "^4.4.0",
        "express": "^4.18.2",
+        "planck": "^1.4.2",
        "requirejs": "^2.3.6",
        "screenfull": "^6.0.2",
        "socket.io": "^4.7.4"
@ -905,6 +906,17 @@
        "url": "https://github.com/sponsors/jonschlinkert"
      }
    },
+    "node_modules/planck": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/planck/-/planck-1.4.2.tgz",
+      "integrity": "sha512-mNbhnV3g8X2rwGxzcesjmN8BDA6qfXgQxXVMkWau9MCRlQY0RLNEkyHlVp6yFy/X6qrzAXyNONCnZ1cGDLrNew==",
+      "engines": {
+        "node": ">=14.0"
+      },
+      "peerDependencies": {
+        "stage-js": "^1.0.0-alpha.12"
+      }
+    },
    "node_modules/proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@ -1266,6 +1278,15 @@
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
      "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA=="
    },
+    "node_modules/stage-js": {
+      "version": "1.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/stage-js/-/stage-js-1.0.0-alpha.17.tgz",
+      "integrity": "sha512-AzlMO+t51v6cFvKZ+Oe9DJnL1OXEH5s9bEy6di5aOrUpcP7PCzI/wIeXF0u3zg0L89gwnceoKxrLId0ZpYnNXw==",
+      "peer": true,
+      "engines": {
+        "node": ">=18.0"
+      }
+    },
    "node_modules/statuses": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
@ -2021,6 +2042,12 @@
      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
      "dev": true
    },
+    "planck": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/planck/-/planck-1.4.2.tgz",
+      "integrity": "sha512-mNbhnV3g8X2rwGxzcesjmN8BDA6qfXgQxXVMkWau9MCRlQY0RLNEkyHlVp6yFy/X6qrzAXyNONCnZ1cGDLrNew==",
+      "requires": {}
+    },
    "proxy-addr": {
      "version": "2.0.7",
      "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.7.tgz",
@ -2273,6 +2300,12 @@
        }
      }
    },
+    "stage-js": {
+      "version": "1.0.0-alpha.17",
+      "resolved": "https://registry.npmjs.org/stage-js/-/stage-js-1.0.0-alpha.17.tgz",
+      "integrity": "sha512-AzlMO+t51v6cFvKZ+Oe9DJnL1OXEH5s9bEy6di5aOrUpcP7PCzI/wIeXF0u3zg0L89gwnceoKxrLId0ZpYnNXw==",
+      "peer": true
+    },
    "statuses": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/statuses/-/statuses-2.0.1.tgz",
--- a/package.json
+++ b/package.json
@ -17,16 +17,16 @@
  },
  "main": "server.js",
  "dependencies": {
-    "socket.io": "^4.7.4",
+    "chart.js": "^4.4.0",
    "express": "^4.18.2",
+    "planck": "^1.4.2",
    "requirejs": "^2.3.6",
    "screenfull": "^6.0.2",
-    "chart.js": "^4.4.0"
+    "socket.io": "^4.7.4"
  },
  "devDependencies": {
    "nodemon": "^3.0.2"
  },
-  "optionalDependencies": {},
  "engines": {
    "node": ">=16.0.0"
  },