Consolidate into a few concave collision bodies

danneu · Jul 31, 2016 · 91be742 · 91be742
1 parent 765bf98
commit 91be742
Show file tree

Hide file tree

Showing 6 changed files with 141 additions and 25 deletions.
diff --git a/client/index.js b/client/index.js
@@ -53,7 +53,7 @@ socket.on(':init', (data) => {
   state.userId = userId
   state.simulation = new Simulation(map)
   // TODO: I should just change this to renderer.init(simulation, ...)
-  state.render = renderer.init({ x: map.width, y: map.height }, state.simulation.walls, state.simulation.tiles, Array.from(state.simulation.redFlag.position), Array.from(state.simulation.blueFlag.position), onStageClick)
+  state.render = renderer.init({ x: map.width, y: map.height }, state.simulation.walls, state.simulation.polygons, Array.from(state.simulation.redFlag.position), Array.from(state.simulation.blueFlag.position), onStageClick)
   // Start update loop when user is ready
   setInterval(update, 1000 / 60)
   requestAnimationFrame(renderLoop)

diff --git a/client/renderer.js b/client/renderer.js
@@ -9,9 +9,9 @@ const sprites = require('./sprites')
 
 // Initialize the renderer by passing in the actual map dimensions,
 // which is different from the viewport dimensions.
-exports.init = function ({ x: mapX, y: mapY }, walls, tiles, redFlagPos, blueFlagPos, onStageClick) {
+exports.init = function ({ x: mapX, y: mapY }, walls, polygons, redFlagPos, blueFlagPos, onStageClick) {
   console.assert(Array.isArray(walls))
-  console.assert(Array.isArray(tiles))
+  console.assert(Array.isArray(polygons))
   console.assert(Array.isArray(redFlagPos))
   console.assert(Array.isArray(blueFlagPos))
 
@@ -132,15 +132,25 @@ exports.init = function ({ x: mapX, y: mapY }, walls, tiles, redFlagPos, blueFla
   })()
 
 
-  // TILES
+  // COLLISION MAP
 
 
-  for (const body of tiles) {
-    const sprite = sprites.makeTile(body.tilesize)
-    sprite.position.set(body.position[0], viewport.fixY(body.position[1]))
-    stage.addChild(sprite)
-  }
+  polygons.forEach((vertices) => {
+    const fixed = vertices.map(([x, y]) => [x, viewport.fixY(y)])
+    const gfx = sprites.makeCollisionPolygon(fixed)
+    stage.addChild(gfx)
+  })
+
+
+  // TILES
+
 
+  /* for (const body of tiles) {
+   *   const sprite = sprites.makeTile(body.tilesize)
+   *   sprite.position.set(body.position[0], viewport.fixY(body.position[1]))
+   *   stage.addChild(sprite)
+   * }
+   */
 
   // TEAM COLORS
 

diff --git a/client/sprites.js b/client/sprites.js
@@ -186,3 +186,12 @@ exports.makeFlagCarrierGlow = function (tint) {
   sprite.visible = false
   return sprite
 }
+
+
+exports.makeCollisionPolygon = function (vertices) {
+  const gfx = new PIXI.Graphics()
+  gfx.beginFill(0xFFFFFF)
+  gfx.drawPolygon([].concat.apply([], vertices))
+  gfx.endFill()
+  return gfx
+}
diff --git a/common/map1.json b/common/map1.json
@@ -0,0 +1,61 @@
+{
+"type": "FeatureCollection",
+"features": [
+{ "type": "Feature",
+  "properties": { },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [[0.0, 562.0], [0.0, 342.0], [16.0, 342.0], [32.0, 342.0], [32.0, 358.5], [32.0, 375.0], [158.5, 375.0], [285.0, 375.0], [285.0, 390.5], [285.0, 406.0], [253.5, 406.0], [222.0, 406.0], [222.0, 422.5], [222.0, 439.0], [206.5, 439.0], [191.0, 439.0], [191.0, 471.0], [191.0, 503.0], [175.0, 503.0], [159.0, 503.0], [159.0, 582.0], [159.0, 661.0], [175.0, 661.0], [191.0, 661.0], [191.0, 677.5], [191.0, 694.0], [207.0, 694.0], [223.0, 694.0], [223.0, 711.0], [223.0, 728.0], [287.5, 728.0], [352.0, 728.0], [352.0, 696.5], [352.0, 665.0], [367.0, 665.0], [382.0, 665.0], [382.0, 711.0], [382.0, 757.0], [526.5, 757.0], [671.0, 757.0], [671.0, 710.5], [671.0, 664.0], [686.5, 664.0], [702.0, 664.0], [702.0, 696.0], [702.0, 728.0], [765.5, 728.0], [829.0, 728.0], [829.0, 710.5], [829.0, 693.0], [846.0, 693.0], [863.0, 693.0], [863.0, 678.0], [863.0, 663.0], [879.0, 663.0], [895.0, 663.0], [895.0, 584.0], [895.0, 505.0], [878.0, 505.0], [861.0, 505.0], [861.0, 471.5], [861.0, 438.0], [846.0, 438.0], [831.0, 438.0], [831.0, 422.0], [831.0, 406.0], [799.0, 406.0], [767.0, 406.0], [767.0, 390.5], [767.0, 375.0], [895.0, 375.0], [1023.0, 375.0], [1023.0, 358.5], [1023.0, 342.0], [1038.5, 342.0], [1054.0, 342.0], [1054.0, 246.0], [1054.0, 150.0], [1038.5, 150.0], [1023.0, 150.0], [1023.0, 135.0], [1023.0, 120.0], [1006.5, 120.0], [990.0, 120.0], [990.0, 103.0], [990.0, 86.0], [975.0, 86.0], [960.0, 86.0], [960.0, 70.0], [960.0, 54.0], [847.5, 54.0], [735.0, 54.0], [735.0, 70.0], [735.0, 86.0], [719.5, 86.0], [704.0, 86.0], [704.0, 70.0], [704.0, 54.0], [687.5, 54.0], [671.0, 54.0], [671.0, 40.0], [671.0, 26.0], [622.5, 26.0], [574.0, 26.0], [574.0, 40.0], [574.0, 54.0], [557.5, 54.0], [541.0, 54.0], [541.0, 133.0], [541.0, 212.0], [559.0, 212.0], [577.0, 212.0], [577.0, 229.5], [577.0, 247.0], [621.5, 247.0], [666.0, 247.0], [666.0, 231.0], [666.0, 215.0], [748.5, 215.0], [831.0, 215.0], [831.0, 183.0], [831.0, 151.0], [846.5, 151.0], [862.0, 151.0], [862.0, 214.5], [862.0, 278.0], [846.5, 278.0], [831.0, 278.0], [831.0, 262.0], [831.0, 246.0], [767.7, 246.0], [754.6, 246.0], [741.6, 246.1], [729.2, 246.1], [717.6, 246.2], [707.2, 246.3], [698.2, 246.4], [691.1, 246.5], [686.2, 246.7], [668.0, 247.3], [668.0, 262.7], [668.0, 278.0], [637.0, 278.0], [606.0, 278.0], [606.0, 293.5], [606.0, 309.0], [591.0, 309.0], [576.0, 309.0], [576.0, 327.0], [576.0, 345.0], [560.0, 345.0], [544.0, 345.0], [544.0, 392.0], [544.0, 439.0], [559.5, 439.0], [575.0, 439.0], [575.0, 455.0], [575.0, 471.0], [606.5, 471.0], [638.0, 471.0], [638.0, 486.5], [638.0, 502.0], [606.0, 502.0], [574.0, 502.0], [574.0, 487.0], [574.0, 472.0], [558.5, 472.0], [543.0, 472.0], [543.0, 456.5], [543.0, 441.0], [526.5, 441.0], [510.0, 441.0], [510.0, 457.0], [510.0, 473.0], [494.0, 473.0], [478.0, 473.0], [478.0, 487.5], [478.0, 502.0], [447.0, 502.0], [416.0, 502.0], [416.0, 487.0], [416.0, 472.0], [447.0, 472.0], [478.0, 472.0], [478.0, 456.0], [478.0, 440.0], [493.5, 440.0], [509.0, 440.0], [509.0, 392.0], [509.0, 344.0], [493.5, 344.0], [478.0, 344.0], [478.0, 327.0], [478.0, 310.0], [464.0, 310.0], [450.0, 310.0], [450.0, 293.0], [450.0, 276.0], [416.0, 276.0], [382.0, 276.0], [382.0, 261.5], [382.0, 247.0], [302.0, 247.0], [222.0, 247.0], [222.0, 263.0], [222.0, 279.0], [206.5, 279.0], [191.0, 279.0], [191.0, 215.5], [191.0, 152.0], [206.5, 152.0], [222.0, 152.0], [222.0, 184.0], [222.0, 216.0], [302.5, 216.0], [383.0, 216.0], [383.0, 231.5], [383.0, 247.0], [431.0, 247.0], [479.0, 247.0], [479.0, 230.0], [479.0, 213.0], [495.0, 213.0], [511.0, 213.0], [511.0, 133.5], [511.0, 54.0], [495.5, 54.0], [480.0, 54.0], [480.0, 40.0], [480.0, 26.0], [430.5, 26.0], [381.0, 26.0], [381.0, 40.5], [381.0, 55.0], [365.5, 55.0], [350.0, 55.0], [350.0, 69.5], [350.0, 84.0], [335.0, 84.0], [320.0, 84.0], [320.0, 69.5], [320.0, 55.0], [207.5, 55.0], [95.0, 55.0], [95.0, 71.0], [95.0, 87.0], [78.0, 87.0], [61.0, 87.0], [61.0, 102.5], [61.0, 118.0], [44.5, 118.0], [28.0, 118.0], [28.0, 133.5], [28.0, 149.0], [14.0, 149.0], [0.0, 149.0], [0.0, 74.5], [0.0, 0.0], [540.0, 0.0], [1080.0, 0.0], [1080.0, 391.0], [1080.0, 782.0], [540.0, 782.0], [0.0, 782.0], [0.0, 562.0] ]    ]
+  }
+},
+{ "type": "Feature",
+  "properties": { },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [[479.0, 679.0], [479.0, 664.0], [495.0, 664.0], [511.0, 664.0], [511.0, 648.0], [511.0, 632.0], [526.5, 632.0], [542.0, 632.0], [542.0, 648.0], [542.0, 664.0], [558.0, 664.0], [574.0, 664.0], [574.0, 679.0], [574.0, 694.0], [526.5, 694.0], [479.0, 694.0], [479.0, 679.0] ]    ]
+  }
+},
+{ "type": "Feature",
+  "properties": { },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [[735.0, 582.5], [735.0, 566.0], [703.0, 566.0], [671.0, 566.0], [671.0, 550.5], [671.0, 535.0], [703.0, 535.0], [735.0, 535.0], [735.0, 519.0], [735.0, 503.0], [751.0, 503.0], [767.0, 503.0], [767.0, 551.0], [767.0, 599.0], [751.0, 599.0], [735.0, 599.0], [735.0, 582.5] ]    ]
+  }
+},
+{ "type": "Feature",
+  "properties": { },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [[287.0, 551.0], [287.0, 504.0], [302.0, 504.0], [317.0, 504.0], [317.0, 520.5], [317.0, 537.0], [349.5, 537.0], [382.0, 537.0], [382.0, 551.0], [382.0, 565.0], [349.5, 565.0], [317.0, 565.0], [317.0, 581.5], [317.0, 598.0], [302.0, 598.0], [287.0, 598.0], [287.0, 551.0] ]    ]
+  }
+},
+{ "type": "Feature",
+  "properties": { },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [[511.0, 567.0], [511.0, 536.0], [526.5, 536.0], [542.0, 536.0], [542.0, 567.0], [542.0, 598.0], [526.5, 598.0], [511.0, 598.0], [511.0, 567.0] ]    ]
+  }
+},
+{ "type": "Feature",
+  "properties": { },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [[319.0, 134.0], [319.0, 118.0], [334.5, 118.0], [350.0, 118.0], [350.0, 134.0], [350.0, 150.0], [334.5, 150.0], [319.0, 150.0], [319.0, 134.0] ]    ]
+  }
+},
+{ "type": "Feature",
+  "properties": { },
+  "geometry": {
+    "type": "Polygon",
+    "coordinates": [
+      [[704.0, 134.5], [704.0, 119.0], [718.5, 119.0], [733.0, 119.0], [733.0, 134.5], [733.0, 150.0], [718.5, 150.0], [704.0, 150.0], [704.0, 134.5] ]    ]
+  }
+}
+]
+}
diff --git a/common/simulation.js b/common/simulation.js
@@ -81,27 +81,25 @@ function makeFlag (team, position) {
 // SIMULATION
 
 
-// tiles is array of positions [[x, y], ...]
 function Simulation ({
-    width, height, tiles, tilesize,
+    width, height,
     // each is an [x, y] position
-    redFlag, blueFlag,
+    redFlag = [], blueFlag = [],
     // array of [x, y] spawn points
     redSpawns = [], blueSpawns = [],
     // these are optional
-    redCarrier = null, blueCarrier = null
+    redCarrier = null, blueCarrier = null,
+    // map data, polygons is an array(array [x, y])
+    polygons
   }) {
   console.assert(Number.isInteger(width))
   console.assert(Number.isInteger(height))
-  console.assert(Number.isInteger(tilesize))
-  console.assert(Array.isArray(tiles))
   console.assert(Array.isArray(redFlag))
   console.assert(Array.isArray(blueFlag))
   console.assert(Array.isArray(redSpawns))
   console.assert(Array.isArray(blueSpawns))
   this.width = width
   this.height = height
-  this.tilesize = tilesize
   this.world = (function () {
     const world = new p2.World()
     world.applyGravity = false
@@ -122,8 +120,29 @@ function Simulation ({
     this.world.addBody(body)
   }
   // TILES
-  this.tiles = tiles.map(([x, y]) => makeTile(tilesize, x, y))
-  this.tiles.forEach((body) => this.world.addBody(body))
+    /* this.tiles = tiles.map(([x, y]) => makeTile(tilesize, x, y))
+     * this.tiles.forEach((body) => this.world.addBody(body))*/
+  // COLLISION POLYGONS
+  this.polygons = polygons // for broadcast
+  polygons.forEach((vertices) => {
+    const body = new p2.Body()
+    body.isWall = true
+    try {
+        body.fromPolygon(vertices)
+    } catch (err) {
+      if (/Convex vertices/.test(err.message)) {
+        body.fromPolygon(vertices.reverse())
+      } else {
+        throw err
+      }
+    }
+    body.shapes.forEach((shape) => {
+      shape.material = Material.wall
+      shape.collisionGroup = Group.WALL
+      shape.collisionMask = Group.Player.ANY | Group.Bomb.ANY
+    })
+    this.world.addBody(body)
+  })
   // SPAWNS
   this.redSpawns = redSpawns
   this.blueSpawns = blueSpawns
@@ -329,6 +348,23 @@ Simulation.prototype.toSnapshot = function () {
 // STATIC
 
 
+Simulation.fromGeoJson = function (json) {
+  // each group is an array of [x, y] pairs
+  let polygons = []
+  json.features.forEach((feature) => {
+    feature.geometry.coordinates.forEach((coords) => {
+      polygons.push(coords)
+    })
+  })
+
+  return new Simulation({
+    polygons,
+    width: 1200,
+    height: 800
+  })
+}
+
+
 // . = empty
 // X = wall
 // r = red flag
@@ -337,7 +373,7 @@ Simulation.prototype.toSnapshot = function () {
 // < = blue spawn
 // if a team doesn't have a spawn, their players will spawn randomly
 // on their half of the map
-Simulation.fromData = function (tilesize, data) {
+Simulation.fromTextData = function (tilesize, data) {
   console.assert(Number.isInteger(tilesize))
   console.assert(Array.isArray(data))
   data = data.reverse()

diff --git a/server/index.js b/server/index.js
@@ -19,12 +19,13 @@ const Bomb = require('../common/bomb')
 
 
 // Load map from file
-const map1 = fs.readFileSync(path.join(__dirname, '../map1.txt'), 'utf8')
-  .split('\n')
-  .filter(Boolean)
+/* const map1 = fs.readFileSync(path.join(__dirname, '../map1.txt'), 'utf8')
+ *   .split('\n')
+ *   .filter(Boolean)
+ * */
 
 const state = {
-  simulation: Simulation.fromData(32, map1),
+  simulation: Simulation.fromGeoJson(require('../common/map1.json')),
   startTime: Date.now()
 }
 
@@ -68,8 +69,7 @@ server.on('connection', (socket) => {
     map: {
       width: state.simulation.width,
       height: state.simulation.height,
-      tilesize: state.simulation.tilesize,
-      tiles: state.simulation.tiles.map((body) => Array.from(body.position)),
+      polygons: state.simulation.polygons,
       redFlag: Array.from(state.simulation.redFlag.position),
       blueFlag: Array.from(state.simulation.blueFlag.position),
       redCarrier: state.simulation.redCarrier,