Search code examples
sprite-kituikit

Proper UI in SpriteKit


My game has UI created in SpriteKit. SKTextures as buttons and SKLabelNodes as labels.

Problem occurs when UI is added on top of game layers. UI has numerous buttons and labels, and since each SKLabelNode calls 1 draw, draw count jumps through the roof. Is there a way to reduce it?

Maybe a better idea would be to use UIKit? Is it possible to have game parallax in the background and different menu segues from UIKit on top? Should I create custom VC for switching views or there is a way to use storyboard? What is the proper way to do it?

Other idea was bitmap font, but that doesn't work for me.


Solution

  • If some or all of the labels are static, you can stick them under an SKEffectNode and have it cache the rendered contents. I’ve used this trick to squish 70 draws down to about 10 in one scene of our current project.

    Edit: The particular scene in our case shows high scores at the end of a game. The change was very simple, from something like this:

    let scores = SKNode()
    for hiScore in ... {
      ...
      scores.addChild(playerName)
      scores.addChild(playerScore)
      ...
    }
    ...
    addChild(scores)
    

    to something like this:

    let scores = SKEffectNode()
    scores.shouldRasterize = true
    // same as before
    ...
    

    AFAIK, the label nodes don't draw the whole screen, and the FPS in our case was still basically OK even with all the labels, at least before adding the background animation. Most of our scenes have around 10 draws, and the main game is about 7, but we had to work some on that to get it to that level. Originally it had about 15-20 draws, and there were times when we were getting noticeable FPS drops. I think the draw count is only a rough indication of what sort of performance you'll get though.