A mini-game with collisions in SwiftUI 🔴🔵🟠🟣🟢⚫️

Рет қаралды 7,666

Күн бұрын

Hello Everyone, in this video we will build a mini game with collisions in SwiftUI. The game will be a baby sorting toy dragging one shape to the right color.
How to get the position of a View in SwiftUI? How to build a game lifecycle?. We're going to solve these and more questions. This going to be fun! 😄
Content:
0:00 - Intro
0:31 - Before Starting
1:22 - Project Setup
1:35 - The Model
2:32 - DraggableToy View
6:53 - The main problem
8:35 - ToyContainer View
10:19 - Storing view's frame
11:32 - Adding the real containers
12:35 - Fix DraggableToy's position
15:08 - Detecting Collisions
16:54 - Feedback in the UI
22:28 - Game Lifecycle
27:28 - A Guest testing the game 😄!
28:31 - Do you want to learn more?
------
The full code is here:
github.com/pitt500/BabySortin...
------
Resources:
* DragGesture: developer.apple.com/documenta...
* GestureState: developer.apple.com/documenta...
* Transaction: developer.apple.com/documenta...
* Gesture Interactivity: developer.apple.com/documenta...
------
Other videos in the channel:
* Drag Gestures: • Drag Gestures in SwiftUI
* Protocols with associated types: • Generics in Swift: Pro...
* ViewBuilder: • Tip: @ViewBuilder in f...
* LazyVGrid: • How to replicate Apple...
* GeometryReader: • Building Apple Watch L...
-----
Don't forget to subscribe to the channel, like it, and follow me on social media!
Twitter:
/ swiftandtips
/ pitt500
Finally, ask me for a video you would like to see next 😄!
Credits:
- Music by Wataboi from pixabay.com/
- Thumbnail taken by Kelly Sikkema from unsplash.com/
- Video edited with Final Cut Pro

Пікірлер: 21

@snjvchvn Жыл бұрын

Absolutely loved the ending… great stuff :D

@ColeDano 2 жыл бұрын

Very cool, and loved seeing the real word test at the end :)

@Fullsnackdevelopr 9 ай бұрын

The sound of success at the end brought back memories! 😂

@GloverCom Жыл бұрын

Awesome! Just what I needed!

@Nealcar30489 5 ай бұрын

This is PHENOMENAL! LOVE This. Please keep making more mini games with SwiftUI!

@swiftandtips 5 ай бұрын

Thank you! I will try to bring more content like this in 2024. I really enjoyed experimenting with SwiftUI 🙌🏻

@Kai-wu5hd Жыл бұрын

You save my time! This exaclty the video I've found for ages!

@swiftandtips Жыл бұрын

Glad I could help! 😊

@andrejkling3886 2 жыл бұрын

Excellent tutorial…🔥🔥🔥 thank you so much

@swiftandtips 2 жыл бұрын

Your welcome 🤗! Thank you for the support 🙌🏻

@mario_anto Жыл бұрын

Very, very interesting project. With even not a Code for Babies. Thank you very much for learning this Baby speech.🤗

@marcoalonsogames Жыл бұрын

thansk a lot Pet

@tariqAlmazyad 8 ай бұрын

Very nice tutorial 🎉

@swiftandtips 8 ай бұрын

Thank you!

@AbdulRahmanGhalayini Жыл бұрын

lovely! as for the position of the draggable circle to stay in the middle, it is a simple solution. first wrap the BabyToyView inside a geometry reader. then add a onChange() modifier to listen to change to height using proxy.size.height (as an example) then add the code to update the currentPosition inside the view model. this way whenever the device changes orientation, the position of the draggable circle will stay in the center. i tested it and it is working 100%. if let currentToy = viewmodel.currentToy { DraggableToy( toy: currentToy, position: viewmodel.currentPosition, gesture: drag(position: CGPoint(x: geometry.frame(in: .global).midX, y: geometry.frame(in: .global).maxY - 100)) ) .opacity(viewmodel.draggableToyOpacity) .onChange(of: geometry.size.height) { newValue in viewmodel.currentPosition = CGPoint(x: geometry.frame(in: .global).midX, y: geometry.frame(in: .global).maxY - 100) } }

@swiftandtips Жыл бұрын

Thank you very much! I will apply this solution later

@KelvinGao 4 ай бұрын

can you show me how to implement gesture: drag(position: CGPoint(x: geometry.frame(in: .global).midX, y: geometry.frame(in: .global).maxY - 100)) I mean drag view. I draggable button can't not see after I attempt the particular button horizontally.

@user-eq3zz8zt5t 7 ай бұрын

You following MVVM design pattern You can do it with MV

@swiftandtips 5 ай бұрын

You bet 😀

@FlashGamer521 Жыл бұрын

Must say... as somebody new to swift, you lost me pretty quickly. Probably would have helped if you had made a drop video after your drag video rather than just going into a full app. With so many different components, it's hard to remember what each one is doing -- feels like you are just adding code to seemingly random parts of the program. I'm sure you have your reasoning, but I can't follow it.

@swiftandtips Жыл бұрын

Thanks for your feedback. I’m working to make better content 👍. I left the full code in the description in case you want to take your time to explore it. Cheers!