How to hide the scroll bar in a SpriteView when Digital Crown is used

Question

I am updating my Watch games to use SwiftUI and am using a SpriteView to render my SpriteKit SKScene.

However, my games now show the scroll bar at the top right of the Watch screen when I turn the Digital Crown. This didn't happen in the old version.

Is there a way to hide the scroll bar? I see that ScrollView has a showsIndicators option to turn off the scroll bar, but I can't find this for SpriteView.

Does anyone have a workaround to remove the scroll bar?

This is the code I am currently using to show my GameScene.

  @State private var crownPosition = 0.0

  var body: some View {
    
    GeometryReader { reader in
      SpriteView(scene: GameScene(size: reader.size, crownPosition: $crownPosition))
        .focusable()
        .digitalCrownRotation($crownPosition)
    }
  }

Thanks!

2.5k

Posted by

Johnno

Reply

Add a Comment

Answer 1

A friend of mine gave me the solution! To stop the scroll bar appearing when using the digital crown, set isContinuous to true in the .digitalCrowRotation. Here is my latest code which no longer shows the scroll bar:

struct GameScreen: View {

  @EnvironmentObject var screenController: ScreenController
  @State private var crownPosition = 0.0

  var body: some View {

    GeometryReader { reader in
      SpriteView(scene: GameScene(size: reader.size, crownPosition: $crownPosition))
        .focusable()
        .digitalCrownRotation($crownPosition, from: 0, through: 400, by: 4, sensitivity: .medium, isContinuous: true, isHapticFeedbackEnabled: false)
    }
  }
}

I hope this helps others.

Posted by

Johnno

Add a Comment

Answer 2

A friend of mine gave me the solution! To stop the scroll bar appearing when using the digital crown, set isContinuous to true in the .digitalCrowRotation. Here is my latest code which no longer shows the scroll bar:

struct GameScreen: View {

  @EnvironmentObject var screenController: ScreenController
  @State private var crownPosition = 0.0

  var body: some View {

    GeometryReader { reader in
      SpriteView(scene: GameScene(size: reader.size, crownPosition: $crownPosition))
        .focusable()
        .digitalCrownRotation($crownPosition, from: 0, through: 400, by: 4, sensitivity: .medium, isContinuous: true, isHapticFeedbackEnabled: false)
    }
  }
}

I hope this helps others.

Posted by

Johnno

Add a Comment

Answer 3

The accepted answer works. However, now with watchOS 9.1 the scroll bar appears for ~1 second after the view is loaded or when focusable(boolValue) is changed to true

Posted by

emmanuel22

Add a Comment

How to hide the scroll bar in a SpriteView when Digital Crown is used

Accepted Reply

Replies