獣は月夜に何を見る...

SpriteKitでゲーム その1- SPACE SHOOTER②

f:id:tukumosanzou:20180702205113p:plain

完成のコードを必要な場合は以下に記載してます。 tukumosanzou.hatenablog.com



では今回から実際に作業に入りましょう。  

GameScene.sksを開きます。 

f:id:tukumosanzou:20180704011653p:plain 

ここではGameScene(Scene: 要するにゲーム画面)の設定を行います。

右上の枠の中です。 

変更点だけ説明します、ColorをブラックSizeをW(width)375H(height)667とします。  

これはIPhone8のディスプレイサイズです(このゲームはiPad第5世代〜とiPhone5s〜に最適化する様に設定するためです。)  

Anchor PointをX(x軸)0 Y(Y軸)0 これはGameSceneの中心座標(つまり原点)がどこかを決めます

 

Gravity(重力)はXを0Yを-9.8(現実世界と同じ重力をシミュレートします。)から0にします。
SKPhysicsWorld - SpriteKit | Apple Developer Documentation を参照

PreviewのShow Camera Boundaries / Show Physics Boundaries / Use Camera Nodeのチェックはとりあえず入れておきます。

ここで一つ説明を。
f:id:tukumosanzou:20180704015708p:plain
Anchor Pointが出てきましたがSpriteKitを使うときは必ず出てきます。 

 

図のように数字は意味をもちます。

赤い四角形がGameSceneだとした場合は(0.0, 0.0)は左下、(0.5, 0.5)で中心ということになります。
これは  

ポジションを指定するときはこのAnchor Pointが重要になります。

SKScene - SpriteKit | Apple Developer Documentation を参照

 

GameScene.swiftを開きます。  

import SpriteKit

class GameScene:  SKScene {

    //ゲーム開始時に呼び出される部分。
    override func didMove(to view: SKView) {

    }

    //画面にタッチした時に呼び出される部分。
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

    }

}

コードがいろいろ書いてありますが上の図になる様に他の部分は消してください。

ゲーム画面の背景になるfunc createBackground()を作成します。

import SpriteKit

class GameScene: SKScene {

    override func didMove(to view: SKView) {

    //関数の呼び出し。
    createBackground()

    }

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

    }

    func createBackground() {

        //SpriteNodeで使うテクスチャにbackground.pngを設定(拡張子は省ける),定数に入れる。
        let backgroundTexture = SKTexture(imageNamed: "background")

        //0~1の間で{}で囲まれた処理を繰り返す
        for i in 0 ... 1 {
            
            //SpriteNodeを作る、テクスチャにばbackgroundを格納した定数backgroundTextureを使う。
            let background = SKSpriteNode(texture: backgroundTexture)

            //描画順を-30にする
            background.zPosition = -30

            //Nodeの中心点をzero=左下隅(0.0, 0.0)にする
            background.anchorPoint = CGPoint.zero

            //backgroundノードの位置を決める、変数iに0〜1の数字が入る事で位置が変化するようにする。
            background.position = CGPoint(x: 0, y: (backgroundTexture.size().height * CGFloat(i)) - CGFloat(1 * i))

            //scene(GameScene)に追加する。
            addChild(background)
            
            //スクリーンの上から下に移動するアクションを作る
            let moveDown = SKAction.moveBy(x: 0, y: -backgroundTexture.size().height, duration: 20)

            //位置を元に戻すアクションを作る。
            let moveReset = SKAction.moveBy(x: 0, y: backgroundTexture.size().height, duration: 0)

            //順番にアクションを実行するsequenceを作る。
            let moveLoop = SKAction.sequence([moveDown, moveReset])

            //sequenceアクションをループさせる。
            let moveForever = SKAction.repeatForever(moveLoop)
            
            //アクショッンを実行する。
            background.run(moveForever)
        }
    }
}

override func touchesBegan()の直後に図のようにfunc background() {}を作成します。

ここではSKSpriteNode(imageNamed: "background")とせずにlet backgroundTexture = SKTexture(imageNamed: "background")としてますが、何故こうしているか理由ですがpositionを決めるときにbackgroundの高さを利用するためです、そうでなければ直接background.pngをSpriteNodeとして指定することもできます。
SKSpriteNode - SpriteKit | Apple Developer Documentation を参照

次にzPosition = -30とありますがこれは何か?。
webサイトを作成するときの技術にCSSがありますがその中のz-indexと同じようなものです。
以下ように図にしてみました。

f:id:tukumosanzou:20180705025718p:plain

SpriteKitはX軸Y軸Z軸で考えます、zPositionは0番目を基点にしてますがあくまでも基準ですので300 20 1 -2などでも構いませんが指定しなければデフォルトで0番になるだけです、2桁の時は2桁または負数は負数で統一するなどある程度のパターン化する方がコード上可読性は良いと思います。

SpriteNodeはaddChild(background)としないとGameSceneに追加されず画面上に表示されないのでこれはお約束だと思ってください。

SKActionでこの背景画像に動きをつけています。
SKAction - SpriteKit | Apple Developer Documentation を参照

つまりfunc createBackground()で何をしているかと言うと背景を上から下にアニメーションさせて昔懐かしい縦スクロールゲームを再現します。
図にすると以下の様になります。

f:id:tukumosanzou:20180705032528p:plain

for i in 0 ... 1なので0〜1の間(計11回)でループさせます。
例としてi=0 i=0.5 i= 1の3パターンで図にしました。

positionのCGPoint(x:, y:)のY軸での位置が変数iによりその都度変動します(変数 i は小数点も含むのでCGFloat()を使う)、その度にmoveBy()で逆Y軸方向に -backgroundTexture.size.height(backgroundの高さ)を20秒(duration: 20)かけて移動(let moveDown)して(0, 0)の元の位置(let moveReset)に戻す、sequenceで連続したアクションとしrepeatForeverで繰り返します。iの値ごとにこのアクションが連続してるので、これで背景が動いてゲームに臨場感が出てきます。
SKAction - SpriteKit |Apple Developer Documentation を参照

ここでシミュレータをiPhone Xで起動してください。

f:id:tukumosanzou:20180705035136p:plain

背景が上から下へ動いていれば成功です。

ではまた次回。



swiftの詳細なら。

TechAcademy [テックアカデミー]

オンラインブートキャンプ iPhoneアプリコース

プログラミング無料体験やってます!。