Conveyor belt obstacle/ tiles

[karl5252]

=

Description

Adding a conveyor belt as an obstacle can introduce an interesting dynamic to game, adding both challenge and variety. Using a simple sprite sheet for the conveyor belt and determining its behavior based on map placement (<<< or >>>).

Main consideration though is if it should be an actor and not "background" (level) tile. Creating the conveyor belt as an actor could be beneficial for several reasons, particularly when I want it to have an animated effect and interact with other actors in the game.

When designing levels, I will place conveyor belt tiles where needed, and the game logic will automatically determine their direction based on their placement. This should keep level design flexible and minimizes the need for multiple tiles for different conveyor belt states.

Primary function is to affect the movement of other actors that come into contact with it. The conveyor belt stays in a fixed position but has an animated appearance to convey the sense of motion, and it "drags" or influences the position of other actors that stand on it.

The update method of the conveyor belt would mainly handle its animation cycle, giving the appearance of movement, but the belt's position on the game map remains constant. The interaction effect – the "dragging" of other actors – is handled through collision checks and modifying the positions of the actors that are on the conveyor belt, as they would be influenced by the belt's motion direction and speed.

Rough implementation outline:

Conveyor Belt Actor

ConveyorBelt class that extends the Actor class. This actor will be responsible for the animation and the "dragging" effect of entities that stand on top of it.

class ConveyorBelt extends Actor {
  constructor(pos, speed, direction) {
    super(pos, new Vec(speed * direction, 0));
    this.animationFrame = 0;
    this.direction = direction; // 1 for right, -1 for left
  }

  get type() {
    return "conveyorBelt";
  }

  static create(pos, ch) {
    // Determine direction based on the character used in the level map
    let direction = (ch === '<') ? -1 : 1;
    return new ConveyorBelt(pos, 1, direction);
  }

  update(time) {
    // Update animation frame
    this.animationFrame = (this.animationFrame + time * 10) % 4; // Cycle through 4 frames
    return new ConveyorBelt(this.pos, 1, this.direction);
  }
}

dragging effect:

I have no idea yet how to implement this yet. However it should be triggered by collision similar to Hoopa and Kegga- "top collider"

considerations:

• synchronisation
• actorOverlap update
• specific behavior (actor should be slowed down when moving against the 'stream' and speed up when going 'with' the stream)

drawing the conveyor belt

• I would like to use approximately 3-4 tiles for animation sake only. There will be no idle frame for conveyor belt.
• it would require just one new conditon to drawActors

else if (actor.type == "conveyorBelt") {
  let tileX = actor.animationFrame * gameSettings.scale;
  // Adjust tileX based on the direction
  if (actor.direction === -1) {
    tileX += someOffset; //  To adjust this based on spritesheet layout
  }
  this.cx.drawImage(otherSprites, tileX, conveyorBeltYPosition, gameSettings.scale, gameSettings.scale, x, y, gameSettings.scale, gameSettings.scale); // I am thinking if easier wont be to add small tile sheet for ConveyorBelt instead of messing up with OtherTiles
}

add to levelChars new lines regarding ConveyorBelt

levelChars["<"] = ConveyorBelt; // for left direction
levelChars[">"] = ConveyorBelt; // for right direction

[karl5252]

prototype.update has to at least return this if actor is immovable. Need to figure out how to handle collison, update properly to not 'drop' actors

[karl5252]

For future reference to avoid again try and error

Add conveyor belt sprite to drawActors function in DEBUG MODE

else if (actor.type == "conveyorBelt") {
      // Assuming the first sprite is at the top-left corner of the sprite sheet
      let sx = 0; // Source x-coordinate on the sprite sheet
      let sy = 0; // Source y-coordinate on the sprite sheet
      let sWidth = 20; // Source width (sprite width)
      let sHeight = 20; // Source height (sprite height)
      let dx = x; // Destination x-coordinate on the canvas
      let dy = y; // Destination y-coordinate on the canvas
      let dWidth = width; // Destination width (same as the sprite width, adjusted for scale if necessary)
      let dHeight = height; // Destination height (same as the sprite height, adjusted for scale if necessary)

      // Draw the sprite
      this.cx.drawImage(conveyorBeltSprites, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight);
    }

[karl5252]

OKi doki almost done. Tile:

Here it is how it works: https://github.com/karl5252/Toolio/assets/32590103/392ed763-62bc-4c9b-9d0f-3903a51a0246

Now only thing is to affect other actors

[karl5252]

One issue. Collision detection is not working properly for Kegga na Hoopa. This will go to TODO list.

• overlap- works and logs overlap
• collision- not working
• update of actor other than player - not working