Swiftで行こう！--パズルゲーム(16パズル)

"iPhone/iPadプログラミングバイブル Swift/iOS8/Xcode6対応"よりゲームの作り方、仕組みを見ていきます。

このパズルは4×4のピースに別れた一枚の画像をシャッフルしてスタートし元に戻すというゲームです。

まず、1枚の画像を16分割するところから始めます。

ゲームを表示する画面を作ります。

 var _gameView: UIView!

そしてアプリ読み込み時

 override func viewDidLoad() {
        super.viewDidLoad()

// コードを書いていく。

}

ここに16分割したカードを表示するようコードを書いていきます。

分割したコードを入れる変数。

  var _piece = [UIImageView]()

画像ですが300px×300pxが1枚(itimai.png)と分割した大きさ、75px×75px(bunkatu.png)を用意してあります。

let picture = UIImage(named: "itimai.png")!
let piece = UIImage(named: "bunkatu.png")!

この画像について"makePieceImageView()"関数を実行して"75px"に分割して画面に表示させます。

for i in 0..<16 {
          _piece.append(makePieceImageView(frame: CGRect(
              x: CGFloat(30+(i%4)*75),
              y: CGFloat(180+Int(i/4)*75),
              width: 75, height: 75),
              index: i, picture: picture, piece: piece))
          _gameView.addSubview(_piece[i])
     }

makePieceImageView()"関数は、

　func makePieceImageView(frame: CGRect, index: Int,picture: UIImage, piece: UIImage) -> UIImageView {
       UIGraphicsBeginImageContextWithOptions(frame.size, false, 0)
       picture.draw(
           in: CGRect(x: CGFloat(-75*(index%4)),
                      y: CGFloat(-75*Int(index/4)),
                      width: 300, height: 300))
       piece.draw(in: CGRect(x: 0, y: 0, width: 75, height: 75))
       let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
       UIGraphicsEndImageContext()
       return makeImageView(frame: frame, image: image)
   }

となっています。

UIGraphicsBeginImageContextWithOptions()については

UIGraphicsBeginImageContextWithOptions - UIKit | Apple Developer Documentation

【Swift3】UIGraphicsBeginImageContextWithOptionsの引数と使い方 - クリアメモリ

で詳しく説明してあります。要するに画像を使うときに使うコードとなっています。

そして、

let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()

アプリで表示している画面のUIImageを作成する - Qiita

表示している画面をそのままimage化すときに使うようです。

最後に"makeImageView()"関数でUIimageViewのインスタンスを生成します。

 func makeImageView(frame: CGRect, image: UIImage) -> UIImageView {
       let imageView = UIImageView()
       imageView.frame = frame
       imageView.image = image
       return imageView
   }

これで、分割した画像ができます。まず全体を表示させます。

次に _gameView.addSubview(_piece[4])として1枚のみ表示させます。

 for i in 0..<16 {
           _piece.append(makePieceImageView(frame: CGRect(
               x: CGFloat(30+(i%4)*75),
               y: CGFloat(180+Int(i/4)*75),
               width: 75, height: 75),
               index: i, picture: picture, piece: piece))
           _data.append(i)
       }
        _gameView.addSubview(_piece[4])

分割できてるようです。