2.2.6 Cycle 6 Terrain

Design

The aim of this cycle is to get a working terrain generation which has a simple sine wave for collision.

Objectives

• Render a single-coloured terrain on the screen

• Add collision to the terrain so bullets can't fall through

• Make sure players/characters can't spawn below the terrain

Key functions

Function Name	Use
generateTerrain	Renders a drawing of the terrain which will be randomized in a later cycle but is a sine wave for now
tCollision	Spawns in objects to add collision to the terrain as drawings don't have collision

Pseudocode

FUNCTION drawTerrain:
    for i in WIDTH:
        draw line from bottom of screen to sine wave in center
        
FUNCTION tCollision:
    for i in WIDTH:
        add collision rectangle every 16 pixels along the sine wave
        
onDraw(drawTerrain())

during "practice" scene:
    tCollision()

Development

Outcome

The outcome is a sine wave terrain with collision coloured red and players now spawn on top of the terrain.

main.ts

import kaboom from "kaboom"
import "kaboom/global"
import {drawTerrain, tCollision} from "./terrain-generate.js"

export const WIDTH = 1920
export const HEIGHT = 1080
const GRAVITY = 450

kaboom({
  width: WIDTH,
  height: HEIGHT,
})

/*
const recording = record()

onKeyDown(".", () => {
  recording.download({filename: "recording"})
})

onKeyDown(".", () => {
  download({dataurl: screenshot()})
})
*/

setGravity(GRAVITY)

loadBean()
loadPedit("barrel", "sprites/barrel.pedit")
loadPedit("bullet", "sprites/bullet.pedit")

function addBtn(txt, p, f) {
  // add a parent background object
  const btn = add([
    rect(240, 80, { radius: 8 }),
    pos(p),
    area(),
    scale(1),
    anchor("center"),
    outline(4),
  ])

  // add a child object that displays the text
  btn.add([
    text(txt),
    anchor("center"),
    color(0, 0, 0),
  ])

  // onHoverUpdate() comes from area() component
  // it runs every frame when the object is being hovered
  btn.onHoverUpdate(() => {
    btn.scale = vec2(1.2)
    setCursor("pointer")
  })

  // onHoverEnd() comes from area() component
  // it runs once when the object stopped being hovered
  btn.onHoverEnd(() => {
    btn.scale = vec2(1)
  })

  // onClick() comes from area() component
  // it runs once when the object is clicked
  btn.onClick(f)

  return btn

}

scene("practice", () => {

  onDraw(() => {
    drawTerrain()
  })

  tCollision()
  
  onLoad(() => {
    add([
      pos(250, 250),
      text("Press \"esc\" to return to menu"),
      lifespan(2, { fade: 0.5 })
    ])
  })

  const bean = add([
    sprite("bean"),
    pos(80, HEIGHT/1.2 - 180*Math.sin(80/75)),
    rotate(0),
    anchor("center"),
    {
      SPEED_HIGH: 150,
      SPEED_LOW: 45,
      power: 0
    }
  ])

  const target = add([
    sprite("bean"),
    pos(1500, HEIGHT/1.2 - 180*Math.sin(1500/75)),
    area(),
    anchor("center")
  ])

  bean.add([
    sprite("barrel"),
    scale(3, 3),
    pos(0, -60)
  ])

  target.onCollide("bullet", () => {
    addKaboom(target.pos)
    destroy(target)
    destroyAll("bullet")
    go("practice")
  })

  onCollide("bullet", "ground", () => {
    destroyAll("bullet")
  })

  const newBullet = (position, angle) => {
    add([
      sprite("bullet"),
      pos(position),
      scale(1, 1),
      offscreen({ destroy: true }),
      area(),
      anchor("center"),
      body(),
      rotate(angle),
      move(vec2(Math.cos(angle / 180 * Math.PI), Math.sin(angle / 180 * Math.PI)), (bean.power + 20) * 8.3),              //Calculating movement vector
      "bullet"
    ])
  }

  const angle = add([            //UI for displaying the angle of player
    text(Math.floor(bean.angle)),
    pos(24, 24)
  ])

  const power = add([          //UI to display power of the shot
    text(Math.floor(bean.power)),
    pos(100, 24)
  ])

  onKeyDown("space", () => {
    if (get("bullet").length == 0) {
      let endOfBarrel = vec2(bean.pos.x + 85 * Math.cos(-0.15 + bean.angle / 180 * Math.PI), bean.pos.y + 92 * Math.sin(-0.15 + bean.angle / 180 * Math.PI)) //Find the position of the end of the barrel to add bullets
      let bullet = newBullet(endOfBarrel, bean.angle)
    }
  })

  onUpdate(() => {
    angle.text = Math.abs(Math.floor(bean.angle))  //Update player angle UI
    power.text = Math.floor(bean.power)
  })

  let rotationSpeed = bean.SPEED_HIGH

  onKeyDown("alt", () => {
    rotationSpeed = bean.SPEED_LOW  //Slow rotation when holding alt
  })

  onKeyRelease("alt", () => {
    rotationSpeed = bean.SPEED_HIGH  //Normal when alt released
  })

  onKeyDown("left", () => {
    if (bean.angle > -70) {
      bean.angle += -rotationSpeed * dt() //Rotate left
    }
    else {
      bean.angle = -70  //Stop at 70 degrees anticlockwise
    }
  })

  onKeyDown("right", () => {
    if (bean.angle < 0) {
      bean.angle += rotationSpeed * dt() //Rotate right
    }
    else {
      bean.angle = 0  //Prevent tank rotating the wrong direction
    }
  })

  let smooth = 3;

  onKeyDown("up", () => {
    smooth += 1.2 * dt()
    if (bean.power < 100) {
      bean.power += 0.7 * smooth ** 2 * dt() //Increase power smoothly
    }
    else {
      bean.power = 100  //Maximum power 100
    }
  })

  onKeyRelease("up", () => {
    smooth = 3
  })

  onKeyDown("down", () => {
    smooth += 1.2 * dt()
    if (bean.power > 1) {
      bean.power -= 0.7 * smooth ** 2 * dt()  //Decrease power smoothly
    }
    else {
      bean.power = 0  //Minimum power 0
    }
  })

  onKeyRelease("down", () => {
    smooth = 3
  })

  onKeyDown("escape", () => {
    go("main-menu")
  })

})

scene("multiplayer-menu", () => {
  addBtn("Join Game", vec2(250, 150), () => { })
  addBtn("Create Game", vec2(250, 250), () => { })
  addBtn("Return", vec2(250, 350), () => { go("main-menu") })
})

scene("main-menu", () => {
  addBtn("Practice", vec2(250, 250), () => { go("practice") })
  addBtn("Multiplayer", vec2(250, 350), () => { go("multiplayer-menu") })
})

go("main-menu")

terrain-generate.js

import {WIDTH, HEIGHT} from "./main.js"

export const drawTerrain = () => {
  for (let w = 0; w < WIDTH; w += 3){
    drawLine({
      p1: vec2(w, HEIGHT),
      p2: vec2(w, HEIGHT/1.2 - 180*Math.sin(w/75)),
      width: 3,
      color: rgb(255, 0, 0)
    })
  }
}

/*let tPoints = []

export const drawTerrain = () => {
  if (tPoints.length == 0){
    tPoints.push(vec2(0))
    for (let w = 0; w < WIDTH; w += 3){
      tPoints.push(vec2(w,-HEIGHT/2 - 180*Math.sin(w/75)))
    }
    tPoints.push(vec2(WIDTH,0))
  }
  drawPolygon({
    pts: tPoints,
    fill: true,
    pos: vec2(0, HEIGHT)
  })
}*/ //fill component for this method seems to function unexpectedly so discontinued

export const tCollision = () => {
  for (let w = 0; w < WIDTH; w += 16){
    add([
      pos(w, HEIGHT/1.2 - 180*Math.sin(w/75)),
      rect(8,15),
      area(),
      color(255,255,0),
      anchor("top"),
      opacity(0),
      "ground"
    ])
  }
}// Some code

Challenges

There were many challenges encountered while completing this cycle. The first was finding an efficient way to render the terrain. Using a single polygon from the kaboom.js codebase and creating an array of points for the polygon to fill doesn't work as expected, as the fill attribute creates lines from the first point to all the other points on the polygon making it look wrong. To fix this a line from the bottom of the screen to the point on the sine wave was created on every 3rd pixel with a 3 pixel width in order to keep detail but also retain a higher fps count.

Another challenge was that the lines rendered by draw functions in kaboom have no collisions. This meant that small invisible rectangles with collision had to be put along the terrain, originally on every pixel, which created a lot of frame drops due to approximately 2000 objects being calculated by the game. Therefore they were made big enough to stop bullets falling through the ground with one being placed every 16th pixel along, which functions just as good as you would want it to.

Testing

Tests

Test	Instructions	What I expect	What actually happens	Pass/Fail
1	Run code	Kaboom should run	Kaboom ran normally	Pass
2	Enter "practice"	Terrain visualising a sine wave should be present	Terrain works	Pass

Evidence

A sine wave being used as the pattern for our generated terrain