Main.storybord チュートリアル 其の一

前回までは、SpriteKitのチュートリアルをやって見ました。
チュートリアルをやっているうちにあることに気がつきました。。。

XCodeでの基本的な開発方法わからなくね?」。。。と。。。
というわけで、表題の通り基本のチュートリアルをやります。

参考にするサイトは、Storyboards Tutorial in iOS 9: Part 1 - Ray Wenderlichです。
今まで参考にしていたサイトです。

早速、Main.storybordはUIKitでの開発を基本にしている様です。
基本的に「Scene」を作成し、遷移させて各コントロールする、という流れです。 

プロジェクト作成時に入力したものがプロジェクトを選択した時に見ることができます

f:id:Takunoji:20170816162516p:plain

ここで、iPhoneなどにデプロイするプロジェクトはウェブでデプロイするための設定を
行います。Profileの取得など。。。
あと、デプロイするデバイス(iPhoneなど)を指定してやります。

まぁ大雑把にApplicationDelegate.swiftとViewController.swiftがMain.storybordが
密接に関連しているということに留意する。

Main.storybordでViewを作成していきます。
上記のアイコンを選択すると以下の様な画面が見れると思います。

下の画像は、すでにタブを追加したものですが、下の様に各Viewがどの様に遷移するか
一覧できる様になっています。

f:id:Takunoji:20170816163532p:plain

上記のTabViewは、TabViewControllerをドラッグ&ドロップして追加します。
そして、画面の下部分にf:id:Takunoji:20170816163913p:plainがあります。この状態でコンパイルして起動すると
下の様に表示されます。下のタブを切り替えることでView1とView2を切り替えれます。f:id:Takunoji:20170816163944p:plain  f:id:Takunoji:20170816164100p:plain

そのほかに、TextField, Button, Labelなど追加できます。
ただし、実行する時に以下の様なエラーメッセージが出力されることがあります。

f:id:Takunoji:20170816164244p:plain

その時は、ルートになるViewに以下の設定がないために起こるエラーですので
下の様に設定を行います。左が未設定状態、右が設定済みの状態です。

「is Initial ViewController」の部分にチェックを入れるだけです。

f:id:Takunoji:20170816164622p:plain    f:id:Takunoji:20170816164634p:plain

そして、タブ切り替えのタブ部分にイメージアイコンなどの設定もできます。

以上の様にMain.storybordを使用してやると画面の作成が簡単にできます。
さらにSpriteKitでも各画面を「Scene」としているので入力コンポーネントの作成後
SpriteKitでのアニメーションや2D表現を追加してアプリケーションの作成ができるという次第です。

ソースと画面の関連ですが、以下の様にCustomClassを指定してやると
イベント処理などを実装できる様です。(画面とソースのバインドを行う)

f:id:Takunoji:20170815170903p:plain


紆余曲折しましたが、結局のところUIKitでのプロトタイプ作成からやろうと思いました。基本は大事ですね。。。

SpriteKitチュートリアルをやってみる 其の五

前回は、画面がうまく表示されなかったのでその修正をしました。

ちょうど良いので、クラス・ファイルの関係性を、まとめたいと思います。
【処理の順番】

Main.storybord                  → アプリケーション1つにつき一つだけ存在する
GameViewController.swift → UIViewControllerを継承したクラスでアプリのMainになる
GameScene.swift              → 作成した、TitlePageなどの親クラス
GameScene.sks                → 未使用
TitlePage.sks.                    → 初期画面を作成しました
TitlePage.swift                   → 上記画面の動き(アクション)を定義します
Footer.sks                          → フッター部分の画面を定義します
             ※他の画面から参照されます
【補足】

f:id:Takunoji:20170814225359p:plain

*.sksファイルで定義している各画面コンポーネント(ボタン、テキストラベル etc...)
の名前より各コンポーネントオブジェクト(プログラムでアクセスするオブジェクト)
を読み込み処理を行います。名前がプログラムで定義しているものとsksファイルで
定義しているものが違うとエラーになります。

f:id:Takunoji:20170815170848p:plainf:id:Takunoji:20170815170903p:plain

上記はソースと設定する部分のキャプチャです。
汚いですが、クラス図で書くとこんな感じになります。
赤い枠が親クラス、緑の枠が子供のクラスです。

f:id:Takunoji:20170815171638p:plain

GameScene.swiftで定義した、goNextScene(), goPreviousScene()など頭に
「override」が付いていて、小クラスで同じ名前のメソッドはこのクラスのメソッドを
オーバーライドします。
【補足】
オーバーライドするということは、GameSceneを継承した各クラスでそれぞれの
処理を起動できるということです。
逆に、オーバーライドしなければ親クラス(GameScene)のメソッドが起動します。
ここら辺を注意してやれば、実際に処理が起動するはずです。
因みに筆者は、起動こそしましたが、パソコンのスペックでしょうか。。。
アニメーションがすごーーーーく遅かったです。(悲)

以上、画面遷移までのチュートリアルでした。

この続きは、次回。。。

SpriteKitチュートリアルをやってみる 其の四

前回は、画面からコードを実装しました。
そして、結局のところは起動できたか否か?の部分ですが。。。
できませんでした。
デバックコンソールに以下の様なエラーが出力されて、「?」となりました。

f:id:Takunoji:20170815103019p:plain

そして、原因を見つけるために一度実装を確認するのが常騰手段ですが。。。
今回は、仕組みからしてよくわかっていなかったので、仕組みを見直しました。
主にプロパティ設定部分です。根拠は、「found nil」と出力されているからです。
※「nil」は「null」のことの様です。
エラーが出力されている行がいかになります。

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

フッターで定義されているボタンが見つからずに「nil」っていた様です。
そして、チュートリアルを読み返すと、案の定ありました。
フッターの設定漏れがありました。ObjectLibraryからReferenceを選択して

ドラッグ&ドロップします。

f:id:Takunoji:20170815103639p:plain

そして、Referenceのプロパティ設定を行います。

f:id:Takunoji:20170815103806p:plain

名前が正しいことを確認してください。「名前」で書くソースを参照してくる様です。
Javaの場合(C++とかでも使用します)DIなんて呼びます。「オブジェクト名」でクラスローダーでインスタンスを取得する。。。まぁ「new」を使用しないインスタンスの取得方法です。
これと同じ要領で画面コンポーネントを取得しているだろうと仮説を立てました。
そして、Referenceの設定をして画面を改めて起動して見ます。
。。。作成途中で設定した、アニメーションが起動して背景がずれました(笑)

f:id:Takunoji:20170815104216p:plain

まだ、ボタンアクションが起動していないので、

次回はアクション部分を起動できる様に実装 or 修正します。

SpriteKitチュートリアルをやってみる 其の三

前回参考サイトを見ながら、*.sksファイルの作成を行いました。
画面の作成テンプレート(*.sks)をXCodeのUI上で作成いたしました。

だけども肝心のコードにはほぼ何も触れていませんでした。

今回は、swiftファイルの作成方法を確認した後の部分から入ります。
※TitlePage.swiftを作成しましたがこれは使用しません

TitlePage.sksの画像が全て画面に表示されました。
今度は、アニメーションを追加します。
以下は、シュミレータで今までに作成したものを起動して確認した状態です。

f:id:Takunoji:20170814223040p:plain

これまで作成していた「TitlePage.sks」からf:id:Takunoji:20170814223331p:plainを開いてください。
以下の様な画面が見れるはずです。

f:id:Takunoji:20170814223302p:plain

因みに、左側には各ボタンなどのスプライトの名前とイメージが参照できる様になっていますのでアニメーションさせる対象を間違うと想定外のスプライトが動きます。

アニメーションの作成画面です。
右端のメディアファイルの一覧より、Move Actionをドラッグ&ドロップします。

f:id:Takunoji:20170814223443p:plain

下の様になるはずです。そして、

f:id:Takunoji:20170814223539p:plain

Moveを選択すると以下のプロパティ選択画面が見れると思います。
f:id:Takunoji:20170814223648p:plain

上記の様に入力して、「Animate」ボタンを押下するとアニメーションが見れます。

細かい部分は参考サイトを参照してください。

そして「TitlePage.sks」から「Scene01.sks」を参照いたします。

f:id:Takunoji:20170814224242p:plain

上記の様な感じの画面が見れるはずです。
そして、Footer.sksを開きます。
中身は何もありません。
TitlePage.sksと同じ要領で、button_previous, button_next and button_sound_on

ドラッグ&ドロップして追加してください。
それから改めて「Scene01.sks」を開いてみると

f:id:Takunoji:20170814224742p:plain

フッターができているではないですか⭐︎

ここで、今までのファイルの関係をまとめます。(CustomClass名)

GameScene.sks → 未使用
GameScene.swift → TitlePage.sksのCustom Classに指定している(GameScene)
GameViewController → sksロード処理を行う
TitlePage.sks → トップページ(TitlePage)
Scene01.sks  →  2番目のページ : Footer.sksをインクルードする
Footer.sks.      →  2番目のフッター部分ページ(footer)

※影が薄いファイルは赤字にしてあります。

全体としては以下の様になっています。

f:id:Takunoji:20170814225359p:plain

そして、以下のコードを追加します

In GameScene.swift, add these properties to GameScene:

var footer:SKNode!
var btnNext: SKSpriteNode!
var btnPrevious: SKSpriteNode!
var btnSound: SKSpriteNode!
var btnHome: SKSpriteNode!

Each of these properties will match a sprite in Footer.sks. To connect them, add this method at the bottom:

override func sceneDidLoad() {
  super.sceneDidLoad()
  footer = childNode(withName: "footer")
}

この時点で、下部にあるボタンの処理がつながりました。(実装済)
これでうまくいくはず。。。


結果は、自分でやってみるか次回を待て(笑)



SpriteKitチュートリアルをやってみる 其の二

前回は、画面作成のファイルを編集したり。。。とXCodeで作成する画面の扱いを
やりました。

今度は、GameController.swiftを編集します。

【ここでちょっと仕組みの話】
仕組みとして、Main.stroybordで初めにGameController.swiftを読み込み
以下のソース部分でGameScene.sksが読み込まれます。

if let scene = SKScene(fileNamed: "GameScene") {
   // ...
}

Main.storybordの設定は以下の部分で指定してあります。
CustomClassで「GameViewController」が設定されています。

f:id:Takunoji:20170814183449p:plain

そして、GameViewControllerでは下の様な感じです。

f:id:Takunoji:20170814183751p:plain

さらに、前回までに作成した画面を読み込む仕組みとしては
画面ファイル*.sksを追加した時に作成した「TitlePage.sks」を読み込むために
初めの段階で"GameViewController"と記述していた部分を"TitlePage"に編集します。
以下の様な、形になります。
そして、

view.ignoresSiblingOrder = true

を編集して、

view.ignoresSiblingOrder = false

に変更します。

f:id:Takunoji:20170814185107p:plain

これで、追加したページを表示することができました。

最後に
TitlePage.swiftの作成を行います。前回作成した「SpriteKit Scene」と同様にして
Cocoa Touch Classを作成します。

f:id:Takunoji:20170814113724p:plain

 

次回は、これの続きを行います。

 

SpriteKitチュートリアルをやってみる

前回まで、中途半場にチュートリアルをやっていましたが、結局はやって見ないことにはわからない。。。と悟りました。(笑)
なので、チュートリアルを初めからやります。

サンプルプロジェクトのダウンロード】左のリンクからダウンロードして下さい。

ダウンロード後に、XCode9.0 betaで筆者は開きました。

f:id:Takunoji:20170814173758p:plain左のプロジェクトファイルです。

開いたら、チュートリアルに必要なファイルは揃っています。

これが、大雑把なクラス構成図になります。
ソースコードはGameViewControllerをルートにして実装していきます。

f:id:Takunoji:20170814103320p:plain

そして、Main.storybordはGameViewController.swiftの以下の部分をロードする様です。

if let scene = SKScene(fileNamed: "GameScene") {
   // ...
}

*.sksは画面の作成、*.swiftは処理を実装します。
下の様なCustom Classはsksファイルとswiftファイルを連携する様です。

f:id:Takunoji:20170814113034p:plain

【タイトルページの作成】
ます初めに、タイトルページを作成します。正確にはTitlePage.sksファイルを咲くせします。
File/New/File… 、iOS/Resource/SpriteKit Scene template

f:id:Takunoji:20170814120144p:plain

上の様な画面でSpriteKitのテンプレートを選択し、Nextボタンをクリック
からのテンプレートが表示されるので、下にある画像の様な画面からドラッグ&ドロップして追加します。

f:id:Takunoji:20170814175042p:plainbackgound-titlepageファイルを選ぶ

同様にして、「titleText」「button_read」をドラッグ&ドロップして以下の様に表示

f:id:Takunoji:20170814175515p:plain

SpriteKitではNode(背景、タイトルなど)を配置して表示します。下の様な関係です。

f:id:Takunoji:20170814105739p:plain

ソース上では、SKSceneはGameScene.sksで作成しているところです。
とりあえず、ここまでで一区切りいたします。

次回は、ソース上でのコーディングを行います。

 

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

f:id:Takunoji:20170814113654p:plain f:id:Takunoji:20170814120144p:plain

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

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

f:id:Takunoji:20170814113724p:plain

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


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

f:id:Takunoji:20170814112958p:plain

f:id:Takunoji:20170814113034p:plain左の部分を選択してやると上記右上に表示されます

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

【本題】

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

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

作成した、からの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)
  }
}

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

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