Low FPS

[mktcode]

I'm trying kaboom.js for the first time and I have a simple scene with a level.

import './style.css'

kaboom({
  fullscreen: true,
  global: true
})

loadSprite('tiles', './tilemap.png', {
  sliceX: 3,
  sliceY: 1
})

scene('main', () => {
  const map = [
    '@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',
    '@                                                                          @',
    '@                                                                          @',
    '@     @                                                                    @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@                                                                          @',
    '@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@@',
  ]
  
  const tileSize = 32
  const level = addLevel(map, {
    width: tileSize,
    height: tileSize,
    '@': [
      'wall',
      sprite('tiles', { frame: 0 }),
    ],
    ' ': [
      sprite('tiles', { frame: 1 })
    ]
  })

  action(() => debug.log('FPS: ' + debug.fps()))
})

go('main')

The bigger the level the lower the fps. I'm working on an slow office laptop but performance should be better than this I think. Anything I can do about this? Or is kaboom just not optimized that much yet?

[slmjkdbtl]

Hmm yeah this is pretty slow to me to, kaboom didn't have a performance audit yet (will get to that when it's fairly stable). Curious to know what other tool's performance if you happen to try them. Another thing you can do is toggle .hidden and .paused flag on object if they're out of of view to not render / update them

[joshuacurtiss]

I'll just remark on a related note that I've noticed processor working extremely hard as I develop. Often I'm working on games on an Intel MacBook air just on my couch as I relax in the evening and I'll notice the laptop get very hot with the fan indicating high utilization just in "normal" use (even when not playing but if the game's background processes are running). Not complaining but just noticing this confirms that a performance audit at some point sounds good!!

[slmjkdbtl]

Thx for the feedback. That's very weird, kaboom should be fairly light. Are you having similar issues with other browser game making tools?

[joshuacurtiss]

I was actually thinking to myself that I made a relatively more sophisticated game in Phaser 3 and never had my fan turn up at all I don't think. The Kaboom game I'm doing is basically a bomberman clone so pretty simple motion/collision detection. I was surprised but chalked it up to just inefficiencies that just need to be ironed out.

Note for everyone, I do recommend doing FPS tests without developer tools open though, since things do slow down when they're open.

[slmjkdbtl]

Hmm I'll investigate. Is the game also running slow when the fan hits? Is there any sign of things progressively going slow as the game runs?

[slmjkdbtl]

Also would like to see the code if possible, any chance you are registering some per-frame events every frame like collides() inside an action()?

[joshuacurtiss]

No, although I do have a block like this, which I thought was necessary for player rendering?

player.action(() => {
    player.resolve()
})

[slmjkdbtl]

resolve() doesn't do anything with rendering it checks collision between every obj with solid on them and pushes player out if they collide, can be very costly if there's a ton of solid objs. A common trick is to turn off solid if they're very far from user and impossible to collide

action("block", (b) => {
    b.solid = player.pos.dist(b.pos) <= 20;
});

That's a confusing name yeah, it's renamed to pushOutAll() in upcoming version

[joshuacurtiss]

Hmm interesting. Given that my game is a bomberman clone and all of the blocks and bombs are solids, there's a lot of collision checking i guess. It's really more efficient to check all the blocks' position to the player on every frame? I can try implementing that..

[oaklandgit]

FWIW my experience is exactly as @joshuacurtiss describes. The processor runs very hot. Happy to provide more details re my code and hardware.

[slmjkdbtl]

Yeah please provide code if possible 🙏

[oaklandgit]

Sure. See it on my repl.it here:

https://replit.com/@LarryStone/Tailpipe-WIP

[slmjkdbtl]

Are you all experiencing this inside replit editor? Does this also happen on generic browser tab?

[oaklandgit]

Yes. I had the same thought, but it happens in both environments.

[oaklandgit]

Correction: I spent some more time running my project in a generic browser tab, and I think it's actually fine. So perhaps the culprit is replit and not kaboom.

[oaklandgit]

Update: my game's poor performance could be attributable to the sheer volume of collision checks I have going on. I'm going to be more surgical in my approach to see if that helps.

[adrianfiedler]

I also experience big frame drops when using big levels with a lot of small sprites in it. Even though they don’t have a collider or anything it goes from 60fps down to 19fps only because I add those rows in the level array.

[Zachiah]

Could it be possible to allow blocks to merge in tilemaps? Ie to provide a mechanism of specifying that certain objects should be treated as one larger object?

[thomasjwalsh]

Hey guys, had similar problem with low fps. I'm using chrome. I notice it was fast on safari and firefox. I turned hardware acceleration on for chrome and fps went up to meet safari and firefox. Maybe this helps your problem too?

[stmn]

Today I noticed that k.z() can causing huge fps drops which suprised me. When I changed only some objects order and nothing more my fps grow from 15 to 55 on Safari. Is there any serious reason of this? I see more strange things causing drops (I spend a lot time on optimization), but didn't investigated in details so I will not write about them, but k.z() i'm sure. So if anybody have some fps drops I suggest check k.z() usage.

[oaklandgit]

@stmn Are you using MacOS on an M1 processor? I've found a setting on MacOS that affects Safari performance significantly: "low power mode." For a while, I was having similar low-FPS issues I couldn't track down, and then I realized it was this.

[stmn]

@oaklandgit Yes, however I have this mode disabled.

To be honest Safari is totally not my target, but I like to optimize on slower pc/browser than on faster. It's not important for me if I can just change z layer but I found its worth mentioning.

I stripped and simplified my code and leaved only problematic code. Having two objects on same "z" layer causing drops.

https://gist.github.com/stmn/b5f782acad691964065c0a9efaeb3ce0 https://monosnap.com/file/O6uxUSIc9fBfJBFkQeuVjqJGeyRNag

[oaklandgit]

@stmn

Yeah, me too:

To be honest Safari is totally not my target, but I like to optimize on slower pc/browser than on faster.

Everything I've thrown at Chrome has had no trouble at all, but even with the "low power mode" discovery I mentioned, Safari is still sluggish.

[lajbel]

FPS and optimization was improved so much in the unreleased new version of Kaboom, so will close this :). Thank you!