diff --git a/assets/backgrounds/bg_main.png b/assets/backgrounds/bg_main.png new file mode 100644 index 0000000..f8b5459 Binary files /dev/null and b/assets/backgrounds/bg_main.png differ diff --git a/assets/backgrounds/logo.png b/assets/backgrounds/logo.png new file mode 100644 index 0000000..c584c60 Binary files /dev/null and b/assets/backgrounds/logo.png differ diff --git a/src/entities/Terrain.js b/src/entities/Terrain.js index 175026c..94a191a 100644 --- a/src/entities/Terrain.js +++ b/src/entities/Terrain.js @@ -66,8 +66,19 @@ export default class Terrain { const length = Math.hypot(dx, dy); if (length < 1) continue; + // The rectangle's top edge needs to sit exactly on the a-b line, which + // means offsetting its center from the segment's own midpoint by + // TERRAIN_DEPTH/2 in the direction PERPENDICULAR to the segment - both + // an X and a Y component (-sin/cos of the segment's angle), not just + // straight down in world Y. Omitting the X term (as a prior version of + // this did) left every non-flat segment's physics body shifted + // sideways from its drawn line by TERRAIN_DEPTH/2 * sin(angle) - with + // TERRAIN_DEPTH deliberately huge (deep enough nothing ever tunnels + // through the bottom), that shift is large even at modest slopes, + // which is exactly what made the bus visibly ride above/through the + // drawn ground on anything but flat terrain. const angle = Math.atan2(dy, dx); - const midX = (a.x + b.x) / 2; + const midX = (a.x + b.x) / 2 - (TERRAIN_DEPTH / 2) * Math.sin(angle); const midY = (a.y + b.y) / 2 + (TERRAIN_DEPTH / 2) * Math.cos(angle); const body = this.scene.matter.add.rectangle(midX, midY, length, TERRAIN_DEPTH, {