SKLabelNodeの基準位置（座標原点）を変更する

iPhoneアプリに限らずとも開発場面に於いては座標の把握は大切でしょう。 Xcode の2Dゲームフレームワーク SpriteKit に於いても例外ではなく先祖ノードの当たるシーンに配置する 各子孫ノードには其々、座標原点、即ち基準位置があり標準では上下左右ともセンターに規定されています。

さて但し原点を左上に取るSpriteKit座標系では座標を考える上で 各ノードの左上に基準点があった方が具合が良い場合も多いでしょう。 此の中央に標準設定される基準点を変更せしめるプロパティは SKSpriteNode には anchorPoint として用意されています。

myNode.anchorPoint = CGPoint(x:0, y:0)

以上の如く記述すればノードの左上に基準点が設定されるのは屡々用いる所でもあります。 ところで文字を画面に表示せしむる SKLabelNode も同じで良いかと言うと此れは anchorPoint プロパティは持ちませんのでどうすれば良いかを調べ、検証します。

スポンサーリンク
日付：2016年10月6日
開発機：MacBook Air（11-inch, Mid 2013）
MacOSバージョン：OS X 10.11.6
Xcodeバージョン：8
言語：Swift 3
主関連アプリ：Fine Kingdom（邦題：楽小王国）

結果から言えば上下の設定には verticalAlignmentMode: SKLabelVerticalAlignmentMode が、左右の設定には horizontalAlignmentMode: SKLabelHorizontalAlignmentMode が用意されているのを用いて設定します。 Apple Developer Documentation の SpriteKit の項に SKLabelNode が用意され、其々専用ページが用意されているのでリンクと各値を下に貼り置きます。

  • SKLabelVerticalAlignmentMode
    Options for aligning text vertically.
    Symbols　Constants
    • case baseline
      Positions the text so that the font’s baseline lies on the node’s origin.
    • case center
      Centers the text vertically on the node’s origin.
    • case top
      Positions the text so that the top of the text is on the node’s origin.
    • case bottom
      Positions the text so that the bottom of the text is on the node’s origin.
  • SKLabelHorizontalAlignmentMode
    Options for aligning text horizontally.
    Symbols　Constants
    • case center
      Centers the text horizontally on the node’s origin.
    • case left
      Positions the text so that the left side of the text is on the node’s origin.
    • case right
      Positions the text so that the right side of the text is on the node’s origin.

以上を鑑みた実装コード例が以下になります。

func myLabelDisp(_ playerPoint:Int, xOffset:CGFloat, yOffset:CGFloat) {
   let ftSize:CGFloat = 24.0
   showPlayerPoint.fontColor = UIColor.darkGray
   showPlayerPoint.fontSize = ftSize
   showPlayerPoint.text = String(playerPoint)
   showPlayerPoint.position = CGPoint(x: xOffset, y: yOffset)
   showPlayerPoint.verticalAlignmentMode = .top
   showPlayerPoint.horizontalAlignmentMode = .left
   self.addChild(showPlayerPoint)
}

上記関数にては引数に座標のX軸、Y軸を与えていますが 左上を座標原点として考えれば良いようになっています。

Swiftもバージョンが進み書式も幾らか変じていますので 過去の書式例とは差異が生じていますので注意が必要です。 本記事では手元の開発環境である Xcode8 、 Swift3 に於ける例を示しています。

Fine Kingdom（邦題： 楽小王国）
無料：カテゴリ: ゲーム： 9+ 評価
バージョン： 8.0
リリース： 2017年2月7日
更新： 2020年4月9日
サイズ： 9.3 MB
互換性： iOS 12.0 以降のiPhone、iPod touch に対応。および、macOS 11.0以降とApple M1 チップを搭載したMac に対応。