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()については
で詳しく説明してあります。要するに画像を使うときに使うコードとなっています。
そして、
let image: UIImage = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
表示している画面をそのまま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])
分割できてるようです。
この記事が気に入ったらサポートをしてみませんか?