【SpriteKitで始める #3】SKSpriteNode
こんにちは、@Yuuです。
SpriteKitの4回目の記事（3回目から書いているため）、今回は「SKSpriteNode」をご紹介します。
スポンサーリンク
コードを書く前に
解説を行う環境
今回僕が解説を行う環境です。
- OS：OS X Yosemite10.10.5
- Xcode：7.2
Xcodeのバージョンが7以降なのでSwift2での解説になります。 Swift（無印）でも書き方はほぼ一緒だと思いますが、違う場合はご了承下さい。
作成に使用するプロジェクト
今回も第1回の記事、【SpriteKitで始める #1】プロジェクト作成編で作成したベースとなるプロジェクトを使用します。
まだ作成していない人、もしくは作成がうまくいかなった人は以下のGitHubよりダウンロードをして下さい。
meganedogYuu/GameSample01 - GitHub
SKSpriteNodeを使用する
SKSpriteNodeとは
SpriteKitには「スプライト」と呼ばれるゲームのキャラクターや武器など、画像で表現する1つのオブジェクトがあります。
その「スプライト」を表現するノートがSKSpriteNodeです。
今回は「スプライト」を表現するにあたり、以下の画像を使用したいと思います。
今回は丸々したわんこの画像を使っていきたいと思います。
このわんこの画像を使用したい人は右クリックからダウンロードして使って下さい。
＊ただし、この画像の著作権はYuuが保持していますので、この画像を使用した商品を販売・配布することはしないで下さいねー。
プロジェクトは先ほども書いた第1回の記事のプロジェクトを使用していきます。
今回僕は説明用にGameSample03というプロジェクト名に変更していますが、その辺は皆さんのプロジェクトに合わせて作成を行って下さい。
画像を表示させる
とりあえずSKSpriteNodeを使って画面に画像を表示させるところから始めたいと思います。
1. プロジェクトと画像を関連付ける
まずプロジェクトに画像を関連付けます。
画像では「Main.storyboardの下辺りに...」と書いていますが、「GameSample03」のフォルダ内であればどこにドラッグアンドドロップしても大丈夫です。
ドラッグアンドドロップすると以下のような画面が表示されると思います。
その際に「Add to targets」というところのプロジェクト名（僕の場合「GameSample03」）にチェックマークが入っている事を確認して下さい。
僕は今回「Destination」の「Copy items if needed」にチェックマークを付けましたが、これは付けても付けなくてもどちらでも構いません。
2. 画面に表示させる
次にGameSceneを編集して、犬の画像のスプライトを作成し画面に表示させます。
そのためにGameScene.swiftを編集します。
didMoveToView内にコードを追記しGameScene.swift全文が以下のようになるようにします。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
import SpriteKit class GameScene: SKScene { /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // 犬の画像のスプライトを作成 let dogSprite = SKSpriteNode(imageNamed: "dog.png") // 配置位置を決める dogSprite.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame)) // 配置する self.addChild(dogSprite) } } |
コードの解説を簡単にすると、9行目でSKSpriteNodeのインスタンスを作成し、12行目で配置位置を決め、15行目で画面に表示する。
という流れになっています。
これで実際にエミュレータで起動してみると以下のようになります。
わー！画像が大きい！w
威圧感がハンパない事になっちゃってますね。
これはサイズの調整をしなきゃですね。
画像を調整する
というわけで画像のサイズを変えてみます。
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) { // 画面の背景色を変更 self.backgroundColor = UIColor.whiteColor() // 犬の画像のスプライトを作成 let dogSprite = SKSpriteNode(imageNamed: "dog.png") // 配置位置を決める dogSprite.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame)) // サイズを変更 dogSprite.size = CGSizeMake(100, 100) // 配置する self.addChild(dogSprite) } } |
上記のコードを実行すると以下のように表示されます。
サイズが小さくなって、だいぶ落ち着きましたね（笑）
先ほどのコードの解説をしますと、18行目で画像のサイズを変更しています。
CGSizeMakeはCGSizeMake("width", "height")というように値を指定する事が出来ます。
今回の画像は正方形の画像なので、widthをheightより長くすれば横長に表示されますし、heightをwidthより長くすれば縦長に表示されます。
例えば以下のような感じ。
左の画像がCGSizeMake(300, 100)、右の画像がCGSizeMake(100, 300)を指定しています。
色をブレンドする
サイズを変更したコードから更にコードを編集し、犬の画像に色をブレンドします。
20~24行目を追記して、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 24 25 26 27 28 29 |
import SpriteKit class GameScene: SKScene { /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // 画面の背景色を変更 self.backgroundColor = UIColor.whiteColor() // 犬の画像のスプライトを作成 let dogSprite = SKSpriteNode(imageNamed: "dog.png") // 配置位置を決める dogSprite.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame)) // サイズを変更 dogSprite.size = CGSizeMake(100, 100) // 色を重ねる dogSprite.color = UIColor.redColor() // 重ねる色のブレンド量 dogSprite.colorBlendFactor = 1 // 配置する self.addChild(dogSprite) } } |
これで実行すると
あぁぁ・・わんこが梅干しみたいになっちゃった・・
(；ω；)
そんな感想はさておき、先ほどのコードの21行目で重ねる色を指定しています。
重要なのは23行目の「カラーブレンド係数」と呼ばれるcolorBlendFactorという値。
colorで指定した色をどれくらいブレンドするか決める事が出来ます。
値は「0〜1.0」まで指定可能で、「0でブレンドしない、1.0でブレンド量Max」になります。
ちなみにcolorBlendFactorの初期値は「0」に設定されているので、colorを指定してあげるだけでは色が付かないので注意です。
以下の画像は、上から「0・0.2・0.4・0.6・0.8・1.0」の順でcolorBlendFactorの値を変えてみました。
こんな具合に変化するんだなぁという参考にして頂ければ幸いです。
その他のプロパティ
最後に画像を途中で変更する方法と、アンカーポイントについて解説したいと思います。
まず先ほどのわんこの画像と同じ要領で、以下の画像を「cat.png」という名前でプロジェクトに読み込ませておきます。
背景が真っ黒のにゃんこの画像になります。
こちらのにゃんこの画像を使用したい人は、右クリックからダウンロードして使って下さい。
＊こちらの画像も著作権については、わんこの画像と同様によろしくお願いします。
上の画像を読み込ませた後、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 24 25 26 27 28 29 |
import SpriteKit class GameScene: SKScene { /// Sceneが表示された時に呼ばれる override func didMoveToView(view: SKView) { // 画面の背景色を変更 self.backgroundColor = UIColor.whiteColor() // 犬の画像のスプライトを作成 let sprite = SKSpriteNode(imageNamed: "dog.png") // 配置位置を決める sprite.position = CGPoint(x:CGRectGetMidX(self.frame), y:CGRectGetMidY(self.frame)) // サイズを変更 sprite.size = CGSizeMake(100, 100) // 画像を変更 sprite.texture = SKTexture(imageNamed: "cat.png") // スプライトの基点を変更 sprite.anchorPoint = CGPoint(x: 1.0, y: 1.0) // 配置する self.addChild(sprite) } } |
変更を加えた場所にハイライトを行っています。
これで実行してみると以下のように表示されます。
表示位置が今までと違いますが、これはアンカーポイントの変更を行ったからです。
ではコードの解説を。
最初に「dog.png」を指定してインスタンスを生成していますが、21行目で画像を変更しています。
そして23行目でアンカーポイントというものを変更しています。
コメントアウトに記載したように、アンカーポイントというのは「スプライトの基点」です。
アンカーポイントはスプライトの左下が「x: 0, y:0」、右上が「x: 1.0, y: 1.0」、中央が「x: 0.5, y: 0.5」となっており、初期値は「x: 0.5, y: 0.5」が指定されています。
つまりデフォルトだとスプライトの中央を基点にして表示するよう設定されている、ということですね。
そしてSpriteKitでは、アンカーポイントがpositionで指定した位置に配置されるようになっています。
そのため、今回は画像の右上が画面の中央にくるように配置された、というわけです。
ここまでのコードはGitHubに上げてありますので、もし良かったら参考にしてみて下さい。
また、わんこを段々赤くしているファイルが「GameScene2.swift」という名前で一緒に入れてあるので、興味がある人は見て下さい。
meganedogYuu/GameSample03 – GitHub
あとがき
今回はスプライトを表示するためのSKSpriteNodeを見てきました。
前回のSKLabelNodeの時同様、コードを見てなんとなく理解出来るところがSpriteKitのいいところですね。
次回は「SKShapeNode」について解説しようと思います。
更新は2月下旬予定です。
ではでは
今回はこの辺で！ヽ(•̀ω•́ )ゝ✧
この記事が気に入ったらいいね！
して最新情報をチェックしよう！
