Objects don't move smoothly on screen

[Gleb]

I've made game where items falling from top to bottom of screen. I measure fps and it always over 60, but items moves with lags (not smoothly). This is especially noticeable on mobile devices. I try to find bottlenecks in chrome profiler but everything looks good. Maybe something I'm doing wrong? 

I try this app settings:

 antialias: true,
 roundPixels: false,
 autoDencity: true,

For this game I use one main ticker in which every second I decide to create item or not.

      const mainTicker = (delta: number) => {
        deltaMS += (1 / 60) * delta

        // every second
        if (deltaMS >= 1) {
          deltaMS = 0
          if (someLogic...) { // generate every second or every third second
            createItem() // generate from 1 to 5 items. createItem invokes 1-5 times
          }
      }

      app.ticker.add(mainTicker)

Then I create item and add it to app ticker. If collision detected or item fly away from screen I remove it form ticker

function createItem(
  app: Application,
  texture: Texture,
  scale: number,
  itemData: ItemDataType,
  main: GameMainInstanceProps,
) {
  const item: ItemProps = Sprite.from(texture)

  item.anchor.set(0.5)
  item.scale.set(scale)

  item.position.y = -item.height / 2 - itemData.offsetY
  item.type = itemData.type

  if (!item.tickerAdded) {
    item.tickerAdded = true
    const moveItem = () => {
      item.position.y += itemData.speed // Move item

      // detect collision
      if (cached.botYborder < item.y && cached.botYborder + 20 > item.y) {
        if (
          main.botBounds.x + cached.botHalfWidth < item.x + item.width / 2 &&
          main.botBounds.x + main.botBounds.width > item.x
        ) {
          app.ticker.remove(moveItem, UPDATE_PRIORITY.INTERACTION)
          main.removeChild(item)
          return
        }
      }
      // item fly away to bottom of screen
      else if (item.position.y - item.height / 2 > app.screen.height) {
        app.ticker.remove(moveItem, UPDATE_PRIORITY.INTERACTION)
        main.removeChild(item)
        return
      }
    }

    app.ticker.add(moveItem, UPDATE_PRIORITY.INTERACTION)
  }

  return item
}

 

Edited October 4, 2022 by Gleb