HP Trivia (9)
이번글은 좀 중간에 끊기가 애매해서 내용이 좀 길어질 것 같다.
GamePlayView
위의 사진과 같이 디자인을 해보도록 한다.
지난글에서 틀을 짠걸 기반으로 진행한다.
Controls
@Environment(Game.self) private var game
@Environment(\.dismiss) private var dismiss
@State private var animateViewsIn = false
var body: some View {
GeometryReader { geo in
ZStack {
// 생략
...
HP Trivia (8)
GamePlayView
이전글에서 게임로직을 구현해놓았으니, 이제는 직점 게임을 하는 것에 대한 UI를 그려본다.
그전에 PlayButton에 있는
@State private var playGame = false
이걸 ContentView로 옮겨준다.
왜냐면 Playbutton에서는 @Binding Wrapper를 사용할 예정이기 때문
그렇게 관련된 부분들을 전부 바꿔주고
ContentView로 가서
.onAppear {
animateViewsIn = true
//playAudio()
}
.fullScreenCover(isPresented: $playGame) { // new
G...
HP Trivia (7)
Game Logic
가장 중요한 게임로직을 만들어 본다.
우선 로직에 필요한 변수들을 먼저 만들어준다.
var gameScore = 0
var questionScore = 5
var recentScores = [0, 0, 0]
var activeQuestions: [Question] = []
var answeredQuestions: [Int] = []
var currentQuestion = try! JSONDecoder().decode([Question].self, from: Data(contentsOf: Bundle.main.url(forResource: "trivia", withExtension: "js...
HP Trivia (6)
Change Book Status
이번 강의에서는 책(Book)의 상태를 변경할 수 있는 기능을 구현한다.
책 상태는 .active, .inactive, .locked 세 가지로 구분되며, 사용자의 탭 제스처에 따라 상태를 변경하고 뷰에 반영한다.
상태 변경 시도와 오류 발생
처음에는 아래처럼 .onTapGesture를 통해 상태를 바꾸려 했지만, 다음과 같은 오류가 발생한다.
ZStack(alignment: .bottomTrailing) {
Image(book.image)
.resizable()
.scaledToFit()
.shadow(radius: 7)
...
글 자동화 하기
GitHub 블로그 글을 작성할 때, 이미지 링크 뒤에 { width="50%" height="50%" } 같은 속성을 반복적으로 붙이는 작업을 자동화한다.
1. RayCast를 사용한 자동화
설치를 해주고
여기서 snippet을 만든다.
그리고 나는
이렇게 해주었다. (현재는 다시 수정했다.)
이렇게 자주 사용하는 2개에 대해서 iwh, tbk로 설정했다.
사용해보니 espanso 사용하는게 훨씬 나은듯….
2. 코드 자동으로 백틱으로 감싸기
기존까지 글을 정리할때 코드를 복사하면 반드시 백틱으로 감싸줘야했는데
Espanso 앱을 사용하여 간단하게 해결해보려한다.
Espanso를 이...
HP Trivia (5)
Books & Questions
이번 강의에서는 HP Trivia 앱의 Settings 화면(도서 선택 화면) 구성을 준비하기 위한 기초 작업을 시작한다.
사용자가 퀴즈에서 출제될 도서를 선택할 수 있도록 UI를 만들 예정인데, 실제 뷰(View)를 구현하기 전에 이를 뒷받침할 데이터 모델(Book)과 관련 클래스부터 정리할 필요가 있다.
Book Modeling
이제 Book 모델링 부터 시작한다.
하도 많이 해봐서 크게 언급할만한건 없을듯하다.
struct Book: Identifiable {
let id: Int
let image: String
let questions:...
HP Trivia (4)
Single Responsibility Principle
이전 글에서 간단히 언급했던 부분이지만, 이번엔 이 주제를 조금 더 구체적으로 짚고 넘어가려 한다.
현재 ContentView를 보면 모든 UIComponents를 직접 작성하여 코드의 가독성이 상당히 떨어지고 있다.
이제 View들을 새롭게 파일을 만들어서 코드를 옮김으로써 유지, 보수에 좀 더 용이하게 하려고 한다.
크게 어렵지는 않다. 그 View영역만 잘라내서 붙여넣기하면 끝.
Background
AnimatedBackgroundView라는 새로운 파일을 만들고 거기에 관련 코드를 옮겨준다.
var body: some View {
...
HP Trivia (3)
Custom Animations
지난 글에서는 AVAudioPlayer를 활용해 사운드를 재생하고, transition 애니메이션과 함께 청각적 몰입감을 더하는 방법을 구현했다.
이번 글에서는 SwiftUI에서 사용자 정의 애니메이션(Custom Animations)을 통해 보다 세밀하고 생동감 있는 시각 효과를 만들어보려 한다.
참고로 이전에 재생되던 음악은 꺼주는 게 좋으므로 playAudio() 호출은 주석 처리해두자.
버튼에 생명 불어넣기
게임 시작 버튼을 추가하고, Spacer() 2개를 추가해 수직 위치를 조절한다.
버튼은 scaleEffect와 withAnimation(...repeat...
631 post articles, 79 pages.