0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 1 year has passed since last update.

SwiftUIの基本パーツでドット絵風のマリオを作ってみた

Posted at

作ったきっかけ

SwiftUIの基本であるHstackとVstackとSpacerをより理解するために何か作れないかと
思い作ってみました。

完成物

下記の画像になります。

   

こちらの画像のコード載せようと思ったのですが単調ですごく長くなるので一部だけ載せて
残りはgitのURLを貼っておきます。
下記は帽子を作成しているパーツになります。
基本は作りたいドットに合わせてパーツを組み合わせていくだけなのですが
唯一注意するのは上下のパーツの位置を合わせる時に Spacer().frame(width: 20)等で
位置を指定してあげる必要があります。

struct ContentView: View {
    var body: some View {
        VStack {
            VStack(spacing: 0) {
                //帽子のパーツ
                Group{
                    Rectangle()
                        .foregroundColor(.red)
                        .frame(width: 50, height: 10)
                    HStack(spacing: 0) {
                        Spacer()
                            .frame(width: 20)
                        // 右にスペースを追加
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: 80, height: 10)
                        Rectangle()
                            .foregroundColor(.red)
                            .frame(width: 10, height: 10)
                    }
                }

もし全て気になる方いらっしゃいましたら下記にあります。
https://github.com/yasuyamakyosuke/DotMario

他にもドット絵なら色々作れそうで面白かったです。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?