変種オセロのUIを作ってみた。（その6）

昨日は駒の描画を実装した。

今日からはボードの描画を実装していく。

ボードの構成について

まずは、ボードの構成について。

ボードを単に一つのスプライトにしてもいいのだけど、その場合、タッチされた場所を都度計算したり、駒の場所を管理したりと、ちょっと面倒。

そこで、ボードのスプライト上にマスのスプライトを用意する。
そうすれば、そのマスのスプライトに場所の情報を持たせることで、タッチされた場所を計算する必要がなくなるし、駒の場所を管理する必要もなくなる。
さらに、マスのスプライトの色を変えることで、プレイ可能な場所を示したり、最後にプレイされた場所を示したりすることも出来る。

イメージとしては、次のような感じ。

なお、BoardOverというのは普通は不要なんだけど、ボードの枠に合わせてラインを角丸にしてるので、角のマスが角丸に見えるようにするために、今回は用意してある。
（マスの形状を角とそれ以外で分けるのが面倒なので）

マスの描画

さっそく、マスの描画から。

SKNodeを継承して、SquareNodeを作る。

//==============================
// YWF
//------------------------------
// SquareNode.swift
//==============================

import SpriteKit

public class SquareNode: SKNode {
  public static let size = CGSize(width: 60.0, height: 60.0)
  
  public let row: Int
  public let col: Int
  private let square: SKShapeNode
  
  public private(set) var piece: PieceNode!
  
  public init(row: Int, col: Int) {
    self.row = row
    self.col = col
    self.piece = nil
    self.square = SKShapeNode(rectOfSize: SquareNode.size)
    self.square.lineWidth = 0.0

    super.init()
    
    self.addChild(self.square)
  }
  
  public required init?(coder aDecoder: NSCoder) {
    fatalError("init(coder:) has not been implemented")
  }
  
  public func addPiece(status: PieceNode.Status) {
    if self.piece == nil {
      self.piece = PieceNode.get(status)
      self.addChild(self.piece)
    }
  }
  
  public func removePiece() {
    if self.piece != nil {
      self.removeChildrenInArray([self.piece])
      self.piece = nil
    }
  }
}

とりあえずは、そのマスの場所の情報と、駒の追加/削除だけ用意した感じ。
マスの色を変えたりといった機能は、あとで追加していく。

今日はここまで！