0

I am working on a SwiftUI-based application that utilizes GCVirtualController to provide basic on-screen controls. While getting it set up has been relatively simple, I'm not particularly happy with layout and appearance of the controls themselves -- especially in portrait mode where the layout is completely broken.

Ideally what I'd like to do is to move the thumbsticks closer together and otherwise alter their appearance (such as make them smaller and/or add some more transparency).

Apple has some pretty sparse documentation on GCVirtualController and I don't see many examples of this API's use just looking around on GitHub. What I can find is it should be possible to customize the appearance of controller elements via the ElementConfiguration object. Among other things, this allows for a UIBezierPath property which seems like exactly what I would need. The problem is if I use code like this:

virtualController.updateConfiguration(forElement: GCInputLeftThumbstick, configuration: { _ in
  var c = GCVirtualController.ElementConfiguration()
  c.path = UIBezierPath(rect: CGRect(x: 0, y: 0, width: 20, height: 20))
  return c
})

It doesn't seem to actually do anything to change the thumbstick appearance at all. (If I change other properties like "c.isHidden = true" that does work so I do know something is wired up here behind the scenes.)

For the sake of experimentation I tried applying this same code to GCInputButtonA and it did change the inner-button appearance -- so that's something, but it's not really what I want either. Maybe I'm just running into some undocumented limitations with this API.

Then there's the other problem -- even if I am able to somehow customize the appearance of the thumbsticks, I still do not see any obvious way to alter their positioning on the screen. This is important because right now GCVirtualController is broken on portrait mode; the left analog thumbstick is completely missing so I'd like to move things closer together while in portrait mode.

Hopefully someone who's more familiar with this may have some ideas what I'm getting wrong here. I'd prefer to not have to use 3rd party virtual controller APIs if possible, but I have a distinct feeling that's the direction I'll need to go.

2
  • I don't use this particularly but the Apple samples and videos might be useful if you haven't tried them developer.apple.com/documentation/gamecontroller/… Dec 18, 2021 at 1:39
  • Thanks -- I did watch the videos before but I watched them again and they say pretty plainly that manual placement is not supported (which really stinks). They also say that you should be able to customize elements with UIBezierPath but that doesn't seem to work with analog sticks (which isn't documented anywhere I can find but seems to be the case). It seems like GCVirtualController is pretty inflexible once you want to go beyond the most basic use cases and that's a bummer. I guess I'll need to find something else to meet my needs.
    – theficus
    Dec 29, 2021 at 23:34

1 Answer 1

0

I too am excited! :) I watched the video and they just outright changed the "method/func/api" Here is what I came up with and an example. What I also found out is, I am pretty sure you can put any symbol like say size 500x500, since you need a UIBezierPath, the api just scales the bounds to fit in the button (but you have to center). Without further a do...

let virtualConfiguration = GCVirtualController.Configuration()
virtualConfiguration.elements = [GCInputLeftThumbstick,
                                 GCInputRightThumbstick,
                                 GCInputButtonA,
                                 GCInputButtonB,
                                 GCInputButtonX]

virtualController = GCVirtualController(configuration: virtualConfiguration)
        
virtualController!.updateConfiguration(forElement: GCInputButtonX, configuration: { _ in
  let starPath = GCVirtualController.ElementConfiguration()
    
    let offX = -25.0
    let offY = -26.0
    starPath.path = UIBezierPath()
    starPath.path!.move(to: CGPoint(x: 25+offX, y: 1+offY))
    starPath.path!.addLine(to: CGPoint(x: 33.82+offX, y: 13.86+offY))
    starPath.path!.addLine(to: CGPoint(x: 48.78+offX, y: 18.27+offY))
    starPath.path!.addLine(to: CGPoint(x: 39.27+offX, y: 30.64+offY))
    starPath.path!.addLine(to: CGPoint(x: 39.69+offX, y: 46.23+offY))
    starPath.path!.addLine(to: CGPoint(x: 25+offX, y: 41+offY))
    starPath.path!.addLine(to: CGPoint(x: 10.31+offX, y: 46.23+offY))
    starPath.path!.addLine(to: CGPoint(x: 10.73+offX, y: 30.64+offY))
    starPath.path!.addLine(to: CGPoint(x: 1.22+offX, y: 18.27+offY))
    starPath.path!.addLine(to: CGPoint(x: 16.18+offX, y: 13.86+offY))
    starPath.path!.close()
    UIColor.gray.setFill()
    starPath.path!.fill()

  return starPath
})
            
// Connect to the virtual controller if no physical controllers are available.
if GCController.controllers().isEmpty {
    virtualController?.connect()
}

Cheers!!

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.