GCVirtualController - change element style and position for thumbsticks - ios

Question

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.

Answer 1

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!!