Swift4 SpriteKitとUIKitを併用する

イントロダクション

前回はSpriteKitの画面の構成について調べました。
今回は、SpriteKitとUIKitの併用についてやります。※参考サイト

そして、サンプルファイルのダウンロードを行います。

参考サイト解釈

サンプルは実際に参考サイトを見ながら実装する様になっている様です。

参考サイトの以下のインデックス？部分を参照しています。

Architecture of the App

そして、UIKitを使用する画面のソース(サンプルではTitlePage.sks)に以下をインポートします。→UIKitフレームワークとその他のサポートされる機能

import UIKit

とSpriteKitフレームワーク

import SpriteKit

そして、入力コンポーネントを作成するSubViewを作成します。
※サンプルではFooter.sks

以下のフォルダ「ProtoTypeMkhyap」を右クリック → New File → iOS

　

SpriteKit Scene(テンプレート)を選択→Nextボタンを押下します。
名前を入力して「Create」

【余談】やり方がほぼ同じなのでテンプレート選択を間違えると他のものができます。
Cocoa Classを作成する場合は以下の通り

そして、「Cocoa Touch Class」を選択→Nextを押下します。

TitlePage.sksを開き「Scene」インスペクターの「Custom Class」を開きます。

左の部分を選択してやると上記右上に表示されます

ちなみに、上記のビューが大きすぎる場合は、のマイナスを押下すると
サイズが小さくなります。

【本題】

さて、引き続きファイルの作成を行います。

上記で画面の土台になる部分に入力コンポーネントを追加します。

作成した、からのSpriteKitテンプレートに入力コンポーネントを追加します。

サンプルの場合は「ボタン」なのでイメージを追加して、そのイメージに対して
アクション(動き)を実装しています。アニメーションは、別の機会に。。。

作成した、fotter.sksのファイルとfotter.swifを土台の画面上に乗せるイメージです。

TitlePage.sksとfotter.sksをルートになる「GameScene.sks」に追加して実装完了。

ソースには以下の様に実装します。
GameScene.switft

var footer:SKNode!

var btnNext: SKSpriteNode!

var btnPrevious: SKSpriteNode!

var btnSound: SKSpriteNode!

var btnHome: SKSpriteNode!

fotter.swift

override func sceneDidLoad() {

  super.sceneDidLoad()

  footer = childNode(withName: "footer")

}

イメージの追加時のコードは以下

btnNext = childNode(withName: "//buttonNext") as! SKSpriteNode

btnPrevious = childNode(withName: "//buttonPrevious") as! SKSpriteNode

btnSound = childNode(withName: "//buttonSound") as! SKSpriteNode

btnHome = childNode(withName: "//buttonHome") as! SKSpriteNode

ページ遷移

func goToScene(scene: SKScene) {

  let sceneTransition = SKTransition.fade(with: UIColor.darkGray, duration: 1)

  scene.scaleMode = .aspectFill

  self.view?.presentScene(scene, transition: sceneTransition)

}

サンプルでの各ページ実装

In TitlePage.swift, override the method to return the next scene:

override func getNextScene() -> SKScene? {

  return SKScene(fileNamed: "Scene01") as! Scene01

}

In Scene01.swift add:

override func getPreviousScene() -> SKScene? {

  return SKScene(fileNamed: "TitlePage") as! TitlePage

}

With all that in place, you can now override the touch handler in GameScene.swift by adding this method:

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

  guard let touch = touches.first else { return }

    

  // 1

  let touchLocation = touch.location(in: self)



  // 2

  if footer.contains(touchLocation) {

    let location = touch.location(in: footer)



    // 3

    if btnNext.contains(location) {

      goToScene(scene: getNextScene()!)

    } else if btnPrevious.contains(location) {

      goToScene(scene: getPreviousScene()!)

    } else if btnHome.contains(location) {

      goToScene(scene: SKScene(fileNamed: "TitlePage") as! TitlePage)

    }

     

  } else {



    // 4

    touchDown(at: touchLocation)

  }

}

あとは実装してみて、感触をつかむのが良いと思います。

てか、これから実装入ります。。。ではでは(笑)