【 SwiftUI 】 Pong Wars を SwiftUI に移植してみた

見てて飽きないので Xcode Playground で SwiftUI の練習。

ソースは以下2つあればいけるだろう、と雰囲気で。

👉 vnglst/pong-wars hatena-bookmark
👉 vocdex/pong-wars-python: Python version of Pong Wars with Pygame hatena-bookmark

一つのファイルで終わらせたい。

 

🏓 結果




 

🏓 まとめ

Playground では遅すぎですがソースコード。

テストプロジェクトなどで Preview や Simulator でみると、

まあ、スピードもそれなりで上の動画の雰囲気でした。

Gist のコードはあれこれ更新されていきます。いってます。

どうぞよろしくお願います。

 

🏓 追記

4100ループ付近で。

残念 !

計算と描画ははっきり区別しないと痛い目に遭いそうな感じ。

→ 修正しました。

→ 2024-02-07 衝突時のロジックを確認、更新しました。


【Swift】2次元配列 で 転置行列 ( transpose matrix )

これやりたくなるときありますよね。

転置行列(てんちぎょうれつ、英: transpose [of a matrix], transposed matrix)とは、m 行 n 列の行列 A に対して A の (i, j) 要素と (j, i) 要素を入れ替えてできる n 行 m 列の行列のことである。転置行列は tA, AT, A⊤, Atr, A′ などと示される。行列の転置行列を与える操作のことを転置(てんち、英: transpose)といい、「A を転置する」などと表現する

👉 転置行列 - Wikipedia hatena-bookmark

これを、変換すると、


[
  [1, 2, 3, 4, 5], 
  ["A", "B", "C", "D", "E"],
  ["あ", "い", "う", "え", "お"],
  ["か", "き", "く", "け", "こ"]
]

こうなるやつ。


[
  [1, "A", "あ", "か"],
  [2, "B", "い", "き"],
  [3, "C", "う", "く"],
  [4, "D", "え", "け"],
  [5, "E", "お", "こ"]
]

Swift で、extension で、やってみます。

 

🔄 配列系のプロトコルは多すぎないか

Xcode の反応をみながら、とりあえずいけた。

縦横インデックスを

きれいに .indecies で取りたかったけど、

うまく取れなかった。


extension Collection where Element: Collection,
                           Self.Index == Int, Element.Index == Int {

  func transposed1() -> [[Element.Element]] {
    let cols = 0 ..< (self.first?.count ?? 0)
    let rows = 0 ..< self.count
    var result: [[Element.Element]] = []
    for col in cols {
      var newRow: [Element.Element] = []
      for row in rows {
        newRow.append(self[row][col])
      }
      result.append(newRow)
    }
    return result
  }

}

// [[1, "A", "あ", "か"], [2, "B", "い", "き"], [3, "C", "う", "く"], [4, "D", "え", "け"], [5, "E", "お", "こ"]]

Array とか Collection。

where 句 や Element。

書きながらでないと、きっと理解できない感じがする。

👉 Collection | Apple Developer Documentation hatena-bookmark

 

🔄 for ループ を map に

「空配列を作成して要素追加」てのがなんとなくだるいので、

map を使います。

入れ子なので「$0」は使いません。


func transposed2() -> [[Element.Element]] {
  let cols = 0 ..< (self.first?.count ?? 0)
  let rows = 0 ..< self.count
  return cols.map { col in
    rows.map { row in
      self[row][col]
    }
  }
}

すぐに、return から始めたいので、

最初の let を省略。


func transposed3() -> [[Element.Element]] {
  return (0 ..< (first?.count ?? 0)).map { col in
    (0 ..< count).map { row in
      self[row][col]
    }
  }
}

ここまででいいか。

 

🔄 まとめ

まとめておきます。

また、勉強したら更新します。

Swift の「プロトコル」ってなんか高級。

👉 あなたの知らないCollectionの世界 #Swift - Qiita hatena-bookmark


【SwiftUI】 iOS / macOS の レイアウト記述を typealias で切り替える

よくある入力欄を iOS で作ります。


// iOS

Form {
  Section(header: Text("Name of Living Accommodation")) {
    Group {
      TextField("Enter place name here…", text: $placeName)
    }
  }
  Section(header: Text("Address of Living Accommodation")) {
    Group {
      TextField("Enter address here…", text: $address)
    }
  }
}

いい感じです。

👉 Form | Apple Developer Documentation hatena-bookmark
👉 Group | Apple Developer Documentation hatena-bookmark

macOS に切り替えてみます。

なんか気持ちが悪いです。

以下のようにレイアウト記述を書き換えます。


 iOS   | macOS
-------+----------
 Form  → List
 Group → GroupBox


// macOS

List { // *
  Section(header: Text("Name of Living Accommodation")) {
    GroupBox { // *
      TextField("Enter place name here…", text: $placeName)
    }
  }
  Section(header: Text("Address of Living Accommodation")) {
    GroupBox { // *
      TextField("Enter address here…", text: $address)
    }
  }
}

いい感じになりました。

👉 List | Apple Developer Documentation hatena-bookmark
👉 GroupBox | Apple Developer Documentation hatena-bookmark

自動で切り替えるようにしておきます。


// iOS and macOS

#if os(iOS)

Form {
  Section(header: Text("Name of Living Accommodation")) {
    Group {
      TextField("Enter place name here…", text: $placeName)
    }
  }
  Section(header: Text("Address of Living Accommodation")) {
    Group {
      TextField("Enter address here…", text: $address)
    }
  }
}

#else

List { 
  Section(header: Text("Name of Living Accommodation")) {
    GroupBox { 
      TextField("Enter place name here…", text: $placeName)
    }
  }
  Section(header: Text("Address of Living Accommodation")) {
    GroupBox { 
      TextField("Enter address here…", text: $address)
    }
  }
}

#endif

長ったらしいですね。

たった3か所の置き換えだけなのに。

■ typealias を使う

レイアウト記述の同名のエイリアスを作ってそれらを OS で切り分けます。


// iOS and macOS

#if os(iOS)
typealias TripForm = Form
typealias TripGroupBox = Group
#else
typealias TripForm = List
typealias TripGroupBox = GroupBox
#endif


 typealias    | iOS   | macOS
--------------+-------+----------
 TripForm     | Form  | List
 TripGroupBox | Group | GroupBox

それらエイリアスを使って本体は記述する。


// iOS and macOS

TripForm { // *
  Section(header: Text("Name of Living Accommodation")) {
    TripGroupBox { // *
      TextField("Enter place name here…", text: $placeName)
    }
  }
  Section(header: Text("Address of Living Accommodation")) {
    TripGroupBox { // *
      TextField("Enter address here…", text: $address)
    }
  }
}

これできれいに切り替えできました !

typealias を切り替えることで、

本体コードの挙動を置き換えてます。

さすが、Apple 公式サンプルコードは勉強になります。


Trip/Trips-SwiftData/Trips/EditLivingAccommodationsView.swift
Trip/Trips-SwiftData/Trips/SwiftUIHelper.swift

以下、Apple ページ「Download」からどうぞ。


👉 Adopting SwiftData for a Core Data app | Apple Developer Documentation hatena-bookmark