Implementing bullets in 2D game - animation and collision detection

[viney12]

Hello, I'm making a simple 2d platformer game with shooting elements, my goal is to achieve a bullet with high velocity (but not a hitscan), that is obedient to collisions and is animated.

My game map is constructed out of 20x20 tiles, so any velocity that is bigger than 20 is causing problems to me as the entity is "jumping" over tiles. Bullets are 5x5 blocks.
My initial solution was to check every position that is between bullet's current position and its position + velocity on its "top" and "botton" like so:

isColliding(level: Level) {
          let currentX = this.sprite.x 
          let currentY = this.sprite.y
          let bottomY = this.sprite.y + this.sprite.height

          for (let i = 1; i < this.VELOCITY; i++) {
              const tile = level.positionToTile(currentX, currentY);
              if (tile?.type === TileType.SOLID_TILE) {
                  return tile;
              }

              const tile2 = level.positionToTile(currentX, bottomY);

              if (tile2?.type === TileType.SOLID_TILE) {
                  return tile;
              }
              currentX += i*this.direction.x;
              currentY += i*this.direction.y;
          }

          return false
}

when I debugged `isColliding` method, I noticed that the loop barely goes even to its half, no idea why...

it is being run in logic loop: 

 logicLoop() {
    this.bullets.forEach((bullet, index) => {
      const tile = bullet.isColliding(this.level);

      if (tile) {
        this.container.removeChild(bullet.sprite)
        this.bullets.splice(index, 1)
        this.container.removeChild(tile.sprite)
        //@ts-ignore
        tile.type = TileType.NO_TILE
      }
    }))
   
    setTimeout(() => {
      this.logicLoop();
    }, 1000/60);
 }

 

moving of the bullet itself is happening in pixi ticker:

this.app.ticker.add((delta) => this.loop(delta));

loop(_delta: number) {
  this.bullets.forEach((bullet) => {
    bullet.sprite.x += bullet.direction.x*bullet.VELOCITY*_delta
    bullet.sprite.y += bullet.direction.y*bullet.VELOCITY*_delta
  })
}

I've attached a short gif illustrating the problem: 
- bullets are barely visible when traveling 
- sometimes jumping through tiles instead of colliding occurrs
I hope I made it clear, looking for any suggestions, thanks!

EDIT: Never mind, solved it! In the loop in `isColliding` method I was adding its counter to current position instead of 1 - bullet was jumping bigger and bigger distance instead of smoothly going through all the positions

Edited December 21, 2022 by viney12