【作って学ぶSwiftアプリ開発入門】SF Symbolsを活用して「福笑いゲーム」を作ろう！

ミニアプリを作って楽しく学ぶSwift入門 第7回

福笑いゲーム画面を作成する

　最後に福笑いのゲームを行う画面を作成します。新規ファイル作成手順で、LuckyLaughGameView.swiftを追加してください。また作成後のViewのコードも次のように変更します。

import SwiftUI

struct LuckyLaughGameView: View {
    var body: some View {
        ZStack {
            Image(systemName: "capsule.portrait.fill")
                .resizable()
                .frame(width: 240, height: 320)
                .foregroundStyle(.yellow)
        }
    }
}

#Preview {
    LuckyLaughGameView()
}

　LuckyLaughフォルダ内にLuckyLaughGameView.swiftが追加されて、次のようになっていれば問題ありません。

　Image(systemName: "capsule.portrait.fill")は福笑いゲームの顔の輪郭になる部分です。ZStackを使用している理由は、これから追加する顔のパーツを重ねられるようにするためです。

　次にドラッグできる顔のパーツを配置するために、作成したDraggableImage(systemName: )をZStack内に記述します。

　SFSymbolsには目、鼻、口のような形のシンボルも用意されており、今回はそれを使用します。

struct LuckyLaughGameView: View {
    var body: some View {
        ZStack {
            Image(systemName: "capsule.portrait.fill")
                .resizable()
                .frame(width: 240, height: 320)
                .foregroundStyle(.yellow)
            
            // ここを追加↓
            DraggableImage(systemName: "eye")
            DraggableImage(systemName: "eye")
            DraggableImage(systemName: "nose")
            DraggableImage(systemName: "mouth")
                .foregroundStyle(.red)
            DraggableImage(systemName: "rectangle.ratio.3.to.4.fill")
        }
    }
}

　DraggableImage(systemName: "rectangle.ratio.3.to.4.fill")はモヒカンヘアー用のパーツです。DraggableImageで追加したViewが画面の左上に表示されます。

　それでは、実際にプレビュー上でドラッグをしてパーツを移動させて福笑いゲームで遊んでみましょう。

　これでゲーム画面も完成です。

アプリを完成させる

　これまで作成したLuckyLaughGameViewとLuckyLaughRuleViewをひとつの画面上の中でタブを使用して切り替えられるようにします。

　すでに作成済みのLuckyLaughViewの変数bodyの中を次のように変更します。

struct LuckyLaughView: View {
    var body: some View {
        TabView {
            Tab("ゲーム", systemImage: "gamecontroller") {
                // ここを変更↓
                LuckyLaughGameView()
            }
            
            Tab("ルール", systemImage: "questionmark.circle") {
                // ここを変更↓
                LuckyLaughRuleView()
            }
        }
    }
}

　各Tab内のコンテンツに作成済みのゲーム画面とルール画面を設定しています。プレビューでもタブを選択することで画面を切り替えられるようになりました。

左：ゲーム画面　右：ルール画面

　以上で福笑いゲームの完成です。

まとめと次回

　今回はアプリを作る過程で、システムで用意されている画像の使い方や自前で用意した画像の使い方、ドラッグで対象のViewを移動させる方法を学びました。

　特にSF Symbolsは、高品質でさまざまなバリエーションもあるため、アプリ開発を助けてくれます。今回紹介したシンボルはほんのひと握りのものなので、ぜひ色々と見て、使ってみてください。

　次回はいよいよ最終回です。これまで作成したアプリをひとまとめにしたアプリを作成します。お楽しみに！