[iOS 8] SpriteKit でミニゲームをつくる #7 ビットマップフォント

ビットマップフォント

前回埋め込みフォントのブログを書きましたが、SpriteKitではビットマップフォントも簡単に使えるようです。

まず、フォントのfntファイルとpngファイルを用意します。
cocos2dxなどでビットマップフォントを使っていた場合は、そのまま使える場合もあります。
自分で作成する場合は、こちらのツールを使用すると簡単に作成できます。

http://renderhjs.net/shoebox/

では、手順です。
フォントのfntファイルとpngファイルをプロジェクトにインポートします。

stack_penguin_07_11


下の画像のようにチェックを入れて、「Finish」をクリックします。

stack_penguin_07_12


インポートできました。

stack_penguin_07_13

stack_penguin_07_14

次に使い方です。コードで設定します。

// レイヤーを取得する。
let consoleLayer = childNodeWithName("consoleLayer")

// ラベルを取得する。
let giveUpLabel = consoleLayer?.childNodeWithName("giveUpLabel") as SKLabelNode

// ラベルテキストをいったん保持する。
let giveUpLabelText = giveUpLabel.text

// テキストを空にする。
// 空にしないと、sksファイルで設定していた文字が表示されたままになり、2重になってしまうため。
giveUpLabel.text = ""

// フォント名を指定する。
giveUpLabel.fontName = "outline"

// 保持していたテキストをセットする。
giveUpLabel.text = giveUpLabelText

// サイズを調整する。
giveUpLabel.xScale = 0.4
giveUpLabel.yScale = 0.4

SKLabelNodeの「fontName」にフォント名を指定するだけで表示されます。
L12で空文字をセットしていますが、こうしないと最初にsksファイルで設定していた文字が表示されたままになり、2重になってしまうようです。
文字の大きさを変更するには「fontSize」ではなく、「xScale」と「yScale」で変更します。


では、動かしてみます。

stack_penguin_07_05

はい。表示されました。

次回へつづく。ではでは。

完成品はこちら。つみペンギン
つみペンギン stack_penguin_qrcode

姉妹品はこちら。ペンギン陸上-スプリント-
ペンギン陸上-スプリント- athlete_penguin_sprint_qrcode