- Examples
- π² Installation
- π How to use
- π How to Customize
- π¨βπ» Contributors
- βοΈ Author
- π License
- Customizable background and thumb/foreground
- Normal Joystick Example
- Locking Joystick Example
- Polar or XY Coordinates
(View Code Example) (View Code Example) (View Code Example)
Add this repository's URL
https://github.com/michael94ellis/SwiftUIJoystick
Add this line to your podfile
pod SwiftUIJoystick
// An example Joystick
// Copy this example and modify it
import SwiftUI
import SwiftUIJoystick
public struct Joystick: View {
/// The monitor object to observe the user input on the Joystick in XY or Polar coordinates
@ObservedObject public var joystickMonitor: JoystickMonitor
/// The width or diameter in which the Joystick will report values
/// For example: 100 will provide 0-100, with (50,50) being the origin
private let dragDiameter: CGFloat
/// Can be `.rect` or `.circle`
/// Rect will allow the user to access the four corners
/// Circle will limit Joystick it's radius determined by `dragDiameter / 2`
private let shape: JoystickShape
public init(monitor: JoystickMonitor, width: CGFloat, shape: JoystickShape = .rect) {
self.joystickMonitor = monitor
self.dragDiameter = width
self.shape = shape
}
public var body: some View {
VStack{
JoystickBuilder(
monitor: self.joystickMonitor,
width: self.dragDiameter,
shape: .rect,
background: {
// Example Background
RoundedRectangle(cornerRadius: 8).fill(Color.red.opacity(0.5))
},
foreground: {
// Example Thumb
Circle().fill(Color.black)
},
locksInPlace: false)
}
}
}
You can subscribe to changes
Use a JoystickBuilder to build your own Joystick Controls' Background/Base and Thumb/Foreground views
@StateObject private var monitor = JoystickMonitor(width: 100)
private let draggableDiameter: CGFloat = 100
Joystick Builder applies the joystickGestureRecognizer
JoystickBuilder(
monitor: self.joystickMonitor,
width: self.draggableDiameter,
shape: .rect,
background: {
// Example Background
RoundedRectangle(cornerRadius: 8).fill(Color.red.opacity(0.5))
},
foreground: {
// Example Thumb
Circle().fill(Color.black)
},
locksInPlace: false)
Apply the joystickGestureRecognizer to any of your views to receive updates on the monitor
YourView()
.joystickGestureRecognizer(monitor: self.joystickMonitor,
width: self.width,
shape: self.controlShape,
locksInPlace: self.locksInPlace)
parameter | type | description | default |
---|---|---|---|
monitor | JoyStickMonitor | ObservableObect that publishes the Joystick control's XY and Polar coordinates | no |
width | CGFloat | The width or diameter of the Joystick control | no |
Output values will be from 0-width | |||
shape | JostickShape | The shape of the Joystick's hitbox area, rectangluar or circular Valid input: .rect or .circle |
no |
background | some View | Any View type input can be put here to create a background for the Joystick | no |
foreground | some View | A View for the thumb or foreground of the Joystick | no |
locksInPlace | Bool | A bool to determine if the Joystick resets back to the center when release | no |
All issue reports, feature requests, pull requests and GitHub stars are welcomed and much appreciated. I would enjoy fixing or adding anything you need!
To make a contribution, I would help you if you ask, or
- Fork this repo
- Make your changes and test
- Update readme as neded and add yourself to Authors section
- Make a Pull Request
- After merge update podspec version and project version appropriately (Major/Minor/Patch paradigm)
- Push changes
- Create new version tag to match podspec and project version
- Update pods repo, run this command in the package directory 'pod trunk push SwiftUIJoystick.podspec'
Created By: Michael Ellis - https://www.michaelrobertellis.com/
Inspired by Bradhowes Joystick for Swift, I had used this previously but I switched to pure SwiftUI
https://github.com/bradhowes/Joystick
A Big Thanks To Steven.Lin c941010623 - https://github.com/c941010623
SwiftUIJoystick
is available under the MIT license. See the LICENSE file for more info