【SpriteKitで始める #2】SKLabelNode
こんにちは、@Yuuです。
SpriteKitの記事も3回目（0回から始めているため）。
今回はSKLabelNodeの使い方を解説します。
第0回から読んで下さってる人には大変お持たせ致しました。
ようやくSpriteKitらしいコードを書いていきますよー。
スポンサーリンク
コードを書く前に
解説を行う環境
今回僕が解説を行う環境です。
- OS：OS X Yosemite10.10.5
- Xcode：7.1
Xcodeのバージョンが7以降なのでSwift2での解説になります。
Swift（無印）でも書き方はほぼ一緒だと思いますが、違う場合はご了承下さい。
作成に使用するプロジェクト
今回は前回にあたる第1回の記事、【SpriteKitで始める #1】プロジェクト作成編で作成したベースとなるプロジェクトを使用します。
まだ作成していない人、もしくは作成がうまくいかなった人は以下のGitHubよりダウンロードをして下さい。
meganedogYuu/GameSample01 - GitHub
SKLabelNodeとは
SKLabelNodeはSpriteKitを使って文字を表示する際に使用するNodeです。
以下のイメージで表示している文字は全てSKLabelNodeを使用して表示しています。
上記の画面に関して今回の記事内で作り方の紹介はありませんが、最後にご紹介するGitHubに上げているプロジェクト内にはソースコードがありますので、興味がある人はそちらからダウンロードして下さい。
では、実際にプロジェクトを作成してどのように作るか見ていきましょう。
SKLabelNodeを使用する
僕はプロジェクト名を「GameSample02」に変更しています。
ですが、前回作ったまま・GitHubからダウンロードしてきたままのプロジェクト「GameSample01」上に処理を記載して問題ありません。
ですので、解説する際の画像が「GameSample02」になっていても気にしないで下さいね。
1. SKLabelNodeの基本的な使い方
最初は定番の「Hello, World!」を表示してみます。
GameScene.swiftのdidMoveToView(view: SKView)メソッド内を書き換え、GameScene.swiftを以下のようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
import SpriteKit class GameScene: SKScene { /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // フォントを指定しLabelを作成 let myLabel = SKLabelNode(fontNamed: "Chalkduster") // Labelに表示する文字列を設定 myLabel.text = "Hello, World!" // フォントサイズを設定 myLabel.fontSize = 40 // 表示するポジションを指定 myLabel.position = CGPoint(x:self.frame.midX, y:self.frame.midY) // シーンに追加 self.addChild(myLabel) } } |
実行する前にコードの解説をしちゃいますね。
9行目で使用するフォントを指定して「SKLabelNode」のインスタンス、「myLabel」を作成。
12〜18行目までは、「myLabel」のフォントのサイズ・配置位置などの設定を行い、21行目でSceneに配置（画面に表示されるように）しています。
どうでしょう？
それぞれの行でどのような処理を行っているか、分かりやすくありませんか？
このようにコードを読んでいけば、どこでどんなことをやっているか何となく分かるのがSpriteKitのいいところだと僕は思っています。
今回のコードの中だと18行目が少し分かりづらいですね。
この行でmyLabelをどこに配置するかを決めています。
今回は、Senceのど真ん中に配置するような指定をしています。
このNodeの配置方法に関しては、いずれ1つの記事としてきちんと取り上げますね。
ではでは、お待たせしました！
ここまで書いたら実行してみましょう。
ちゃんと「Hello, World!」が表示されましたね！(๑•̀ㅂ•́)و✧
2. SKLabelNodeのカスタマイズ その1
上記のファイルを少し変更してみたいと思います。
今のままだと画面が真っ黒なので、試しに画面の色を変更し文字の色も変更してみたいと思います。
またフォントも変更してみたいと思います。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
import SpriteKit class GameScene: SKScene { /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // フォントを指定しLabelを作成 let myLabel = SKLabelNode(fontNamed: "Arial Iatlic") // Labelに表示する文字列を設定 myLabel.text = "Hello, World!" // フォントサイズを設定 myLabel.fontSize = 40 // 表示するポジションを指定 myLabel.position = CGPoint(x:self.frame.midX, y:self.frame.midY) // 背景色を白くする self.backgroundColor = SKColor.whiteColor() // Labelのフォントの色を変更 myLabel.fontColor = SKColor.redColor() // シーンに追加 self.addChild(myLabel) } } |
コードを変更又は追加した部分にはマーカーを引いてあります。
まず、9行目で先ほどと違うフォントを指定しています。
今回指定したフォントは「Arial」というフォントのイタリック体です。
この部分にはカスタムフォントを指定する事も出来ます。
カスタムフォントを指定してみたい！
という人は、以前書いた記事を参照してみて下さい。
そして、21行目で画面全体の背景色を白くしています。
また、24行目でLabelのフォントの色を赤くしています。
これで実際に実行してみると
このように先ほどとは違うフォントで「Hello, World!」が実行されましたね。
2. SKLabelNodeのカスタマイズ その2
次はSKLabelNodeを複数配置する方法をご紹介します。
解説を行うために新たにGameScene2.swiftというファイルを作成し、ViewController.swiftでこちらのGameScene2クラスを呼び出すように設定しています。
では、以下が複数のSKLabelNodeを呼び出す際に使用したGameScene2の全文です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 |
import SpriteKit class GameScene2: SKScene { // GameSceneとほぼ同じ設定のSKLabelNode var myLabel1 = SKLabelNode() // フォントと文字の色を変更 var myLabel2 = SKLabelNode() // 左寄せにして文字の色を変更 var myLabel3 = SKLabelNode() /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // 全体の背景色を変更する self.backgroundColor = SKColor.whiteColor() // myLabel1を画面に追加 self.addMyLabel1() // myLabel2を画面に追加 self.addMyLabel2() // myLabel3を画面に追加 self.addMyLabel3() } /// 画面にmyLabel1を追加する private func addMyLabel1() { // Labelに表示する文字列を設定 myLabel1.text = "Hello, World1!" // フォントサイズを設定 myLabel1.fontSize = 40 // 表示するポジションを指定 myLabel1.position = CGPoint(x:self.frame.midX, y:self.frame.maxY - 120) // Labelのフォントの色を変更 myLabel1.fontColor = SKColor.redColor() // シーンに追加 self.addChild(myLabel1) } /// 画面にmyLabel2を追加する private func addMyLabel2() { // Labelに表示する文字列を設定 myLabel2.text = "Hello, World2!" // フォントを変更 myLabel2.fontName = "Times New Roman" // フォントサイズを設定 myLabel2.fontSize = 40 // 表示するポジションを指定 myLabel2.position = CGPoint(x:self.frame.midX, y:self.frame.midY) // Labelのフォントの色を変更 myLabel2.fontColor = SKColor.blueColor() // シーンに追加 self.addChild(myLabel2) } /// 画面にmyLabel3を追加する private func addMyLabel3() { // Labelに表示する文字列を設定 myLabel3.text = "Hello, World3!" // ラベルを左寄せ myLabel3.horizontalAlignmentMode = .Left // フォントサイズを設定 myLabel3.fontSize = 40 // 表示するポジションを指定 myLabel3.position = CGPoint(x:self.frame.midX, y:self.frame.minY + 120) // Labelのフォントの色を変更 myLabel3.fontColor = SKColor.greenColor() // シーンに追加 self.addChild(myLabel3) } } |
長いですね・・。(； ･`д･´)
今回はコードの説明を行う前に実行した時の画面を表示してみたいと思います。
3番目のLabelが変な位置にありますが、少し変わった設定を行っただけなのでご安心を。
ではコードの解説を。
6,9,12行目で生成しているmyLabel1、myLabel2、myLabel3というSKLabelNodeのインスタンス変数に対し、Sceneが表示された時に呼ばれるdidMoveToViewメソッド内で画面に表示を行う設定をそれぞれaddMyLabel1()、addMyLabel2()、addMyLabel3()というメソッドで行っています。
今回のコードの中ですと、マーカーを引いてある76行目が特殊ですね。
これはmyLabel3に行っている処理ですが、左寄せにして表示するという処理内容になります。
この76行目で使っているhorizontalAlignmentModeというメソッドに対しては、デフォルトだと「.Center」という中央寄せの設定がされています。
これはどういう事かというと、
デフォルトの「.Center」の場合、文字の中央をpositionで指定した位置に表示。
今回指定した「.Left」の場合は、文字の左端をpositionで指定した位置に表示するという事です。
そのため、今回myLabel3は文字の先頭を中央から表示した結果、このような他のLabelに比べ変な位置にあるように感じる表示になった、というわけです。
ちなみに「.Right」と指定した場合は文字の右端をpositionで指定した位置に表示してくれます。
気になる人は「.Right」も実行してみて下さいね。
ここまでのコードは今回もGitHubに上げてありますので、もし良かったら参考にしてみて下さい。
また１番最初に紹介した画面を「GameScene3.swift」という名前で一緒に入れてあるので、興味がある人は見て下さい。
meganedogYuu/GameSample02 – GitHub
あとがき
今回はSKLabelNodeを使用する方法をご紹介しました。
どうでしょう？なんとなくSpriteKitの使い方がつかめたでしょうか？
次回はSKSpriteNodeの使用方法を解説したいと思います。
更新は1月下旬を予定しています。
SpriteKit#3の記事書きました！
【SpriteKitで始める #3】SKSpriteNode
ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧
この記事が気に入ったらいいね！
して最新情報をチェックしよう！
