Main.storyboard 実装編
前回、チュートリアルを見ながらstoryboardの仕組みを学習しました。
今回は、それを踏まえて実装して見ました。
まずstorybordは以下の様な感じです。
ぶっちゃけて、実装なしで起動しても見た目のみなら表示できます。
その代わり、ストーリボード上で作成する必要があります。
画面の見た目(動きなし)であればストーリボードのみで作成ができます。
※画面切り替え(タブを使用するなどすればコードなしでもある程度いけます)
そして、今回の作成時のポイント(ハマったところ)はMain.storyboardに
IDなどを重複してつけるとエラーが出ることです。
「Thread 1: signal SIGABRT」こいつが原因を突き止めるのに大変でした。
storyboardにある各部品上で右クリックして黄色の三角マークを消してやる方法で
解消しました。
参考サイト:
そして、動き(タップ時に〜動かす)などは各Viewを初期化する時にイベントハンドラ
を設定してやるのがプログラミングの常套手段ですので、その時の初期化処理の
呼び出し方を発見するのに手間取りました。
結局のところは、親クラス(UIViewController)の初期化処理をオーバーライドしてやる
ということなので、以下の様になりました。※中身は未実装です。
ちなみに「required」修飾子は子クラスにもオーバーライドを矯正するものらしいです
あと、「?」「!」はオプショナルで。。。まぁ「Null」との新しい付き合い方を使用する時に使います。※詳細は、こちら(演算子一覧見たくなってました)
なんだかんだで作成したストーリボードです。
ルートになるViewControllerにContanerViewを2つ追加してます
上が入力用のコンテナ、下が描画用のコンテナになってます。
そして、各swiftファイル、画面コンポーネント一覧
ルートになるのが「ViewController.swift」で上のコンテナが「InputView...」です。
InputにはImageFileを追加しております。※「Assets.xcasets」に配置してます。
そして、実行結果です。
下の方に「 *** Testgin ***」が出力されていると思います(笑)
以上、実装編その1でした。
Main.storybord チュートリアル 其の一
イントロダクション
前回までは、SpriteKitのチュートリアルをやって見ました。
チュートリアルをやっているうちにあることに気がつきました。。。
「XCodeでの基本的な開発方法わからなくね?」。。。と。。。
というわけで、表題の通り基本のチュートリアルをやります。
Xcodeの基本
参考にするサイトは、Storyboards Tutorial in iOS 9: Part 1 - Ray Wenderlichです。
今まで参考にしていたサイトです。
早速、Main.storybordはUIKitでの開発を基本にしている様です。
基本的に「Scene」を作成し、遷移させて各コントロールする、という流れです。
プロジェクト作成時に入力したものがプロジェクトを選択した時に見ることができます
ここで、iPhoneなどにデプロイするプロジェクトはウェブでデプロイするための設定を
行います。Profileの取得など。。。
あと、デプロイするデバイス(iPhoneなど)を指定してやります。
まぁ大雑把にApplicationDelegate.swiftとViewController.swiftがMain.storybordが
密接に関連しているということに留意する。
Main.storybordでViewを作成していきます。
上記のアイコンを選択すると以下の様な画面が見れると思います。
下の画像は、すでにタブを追加したものですが、下の様に各Viewがどの様に遷移するか
一覧できる様になっています。
上記のTabViewは、TabViewControllerをドラッグ&ドロップして追加します。
そして、画面の下部分にがあります。この状態でコンパイルして起動すると
下の様に表示されます。下のタブを切り替えることでView1とView2を切り替えれます。
そのほかに、TextField, Button, Labelなど追加できます。
ただし、実行する時に以下の様なエラーメッセージが出力されることがあります。
その時は、ルートになるViewに以下の設定がないために起こるエラーですので
下の様に設定を行います。左が未設定状態、右が設定済みの状態です。
「is Initial ViewController」の部分にチェックを入れるだけです。
そして、タブ切り替えのタブ部分にイメージアイコンなどの設定もできます。
以上の様にMain.storybordを使用してやると画面の作成が簡単にできます。
さらにSpriteKitでも各画面を「Scene」としているので入力コンポーネントの作成後
SpriteKitでのアニメーションや2D表現を追加してアプリケーションの作成ができるという次第です。
ソースと画面の関連ですが、以下の様にCustomClassを指定してやると
イベント処理などを実装できる様です。(画面とソースのバインドを行う)
紆余曲折しましたが、結局のところUIKitでのプロトタイプ作成からやろうと思いました。基本は大事ですね。。。
次回は、実装をやってみます。
SpriteKitチュートリアルをやってみる 其の五
イントロダクション
前回は、画面がうまく表示されなかったのでその修正をしました。
ちょうど良いので、クラス・ファイルの関係性を、まとめたいと思います。
処理の流れ
【処理の順番】
Main.storybord → アプリケーション1つにつき一つだけ存在する
GameViewController.swift → UIViewControllerを継承したクラスでアプリのMainになる
GameScene.swift → 作成した、TitlePageなどの親クラス
GameScene.sks → 未使用
TitlePage.sks. → 初期画面を作成しました
TitlePage.swift → 上記画面の動き(アクション)を定義します
Footer.sks → フッター部分の画面を定義します
※他の画面から参照されます
【補足】
*.sksファイルで定義している各画面コンポーネント(ボタン、テキストラベル etc...)
の名前より各コンポーネントオブジェクト(プログラムでアクセスするオブジェクト)
を読み込み処理を行います。名前がプログラムで定義しているものとsksファイルで
定義しているものが違うとエラーになります。
上記はソースと設定する部分のキャプチャです。
図で関係を見る
汚いですが、クラス図で書くとこんな感じになります。
赤い枠が親クラス、緑の枠が子供のクラスです。
GameScene.swiftで定義した、goNextScene(), goPreviousScene()など頭に
「override」が付いていて、小クラスで同じ名前のメソッドはこのクラスのメソッドを
オーバーライドします。
【補足】
オーバーライドするということは、GameSceneを継承した各クラスでそれぞれの
処理を起動できるということです。
逆に、オーバーライドしなければ親クラス(GameScene)のメソッドが起動します。
ここら辺を注意してやれば、実際に処理が起動するはずです。
因みに筆者は、起動こそしましたが、パソコンのスペックでしょうか。。。
アニメーションがすごーーーーく遅かったです。(悲)
以上、画面遷移までのチュートリアルでした。
この続きは、次回。。。
SpriteKitチュートリアルをやってみる 其の三
イントロダクション
前回、参考サイトを見ながら、*.sksファイルの作成を行いました。
画面の作成テンプレート(*.sks)をXCodeのUI上で作成いたしました。
だけども肝心のコードにはほぼ何も触れていませんでした。
コードに触れる
今回は、swiftファイルの作成方法を確認した後の部分から入ります。
※TitlePage.swiftを作成しましたがこれは使用しません。
TitlePage.sksの画像が全て画面に表示されました。
今度は、アニメーションを追加します。
以下は、シュミレータで今までに作成したものを起動して確認した状態です。
これまで作成していた「TitlePage.sks」からを開いてください。
以下の様な画面が見れるはずです。
因みに、左側には各ボタンなどのスプライトの名前とイメージが参照できる様になっていますのでアニメーションさせる対象を間違うと想定外のスプライトが動きます。
アニメーションの作成画面です。
右端のメディアファイルの一覧より、Move Actionをドラッグ&ドロップします。
下の様になるはずです。そして、
Moveを選択すると以下のプロパティ選択画面が見れると思います。
上記の様に入力して、「Animate」ボタンを押下するとアニメーションが見れます。
細かい部分は参考サイトを参照してください。
そして「TitlePage.sks」から「Scene01.sks」を参照いたします。
上記の様な感じの画面が見れるはずです。
そして、Footer.sksを開きます。
中身は何もありません。
TitlePage.sksと同じ要領で、button_previous, button_next and button_sound_on
をドラッグ&ドロップして追加してください。
それから改めて「Scene01.sks」を開いてみると
フッターができているではないですか⭐︎
各ファイルの関係
ここで、今までのファイルの関係をまとめます。(CustomClass名)
GameScene.sks → 未使用
GameScene.swift → TitlePage.sksのCustom Classに指定している(GameScene)
GameViewController → sksロード処理を行う
TitlePage.sks → トップページ(TitlePage)
Scene01.sks → 2番目のページ : Footer.sksをインクルードする
Footer.sks. → 2番目のフッター部分ページ(footer)
※影が薄いファイルは赤字にしてあります。
全体としては以下の様になっています。
そして、以下のコードを追加します
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」が設定されています。
そして、GameViewControllerでは下の様な感じです。
さらに、前回までに作成した画面を読み込む仕組みとしては
画面ファイル*.sksを追加した時に作成した「TitlePage.sks」を読み込むために
初めの段階で"GameViewController"と記述していた部分を"TitlePage"に編集します。
以下の様な、形になります。
そして、
view.ignoresSiblingOrder = true
を編集して、
view.ignoresSiblingOrder = false
に変更します。
これで、追加したページを表示することができました。
最後に
TitlePage.swiftの作成を行います。前回作成した「SpriteKit Scene」と同様にして
Cocoa Touch Classを作成します。
次回は、これの続きを行います。
SpriteKitチュートリアルをやってみる
イントロダクション
前回まで、中途半場にチュートリアルをやっていましたが、結局はやって見ないことにはわからない。。。と悟りました。(笑)
なので、チュートリアルを初めからやります。ちなみにXcode9です。
やってみる
【サンプルプロジェクトのダウンロード】左のリンクからダウンロードして下さい。
ダウンロード後に、XCode9.0 betaで筆者は開きました。
左のプロジェクトファイルです。
開いたら、チュートリアルに必要なファイルは揃っています。
これが、大雑把なクラス構成図になります。
ソースコードはGameViewControllerをルートにして実装していきます。
そして、Main.storybordはGameViewController.swiftの以下の部分をロードする様です。
if let scene = SKScene(fileNamed: "GameScene") {
// ...
}
*.sksは画面の作成、*.swiftは処理を実装します。
下の様なCustom Classはsksファイルとswiftファイルを連携する様です。
【タイトルページの作成】
ます初めに、タイトルページを作成します。正確にはTitlePage.sksファイルを咲くせします。
File/New/File… 、iOS/Resource/SpriteKit Scene template
上の様な画面でSpriteKitのテンプレートを選択し、Nextボタンをクリック
からのテンプレートが表示されるので、下にある画像の様な画面からドラッグ&ドロップして追加します。
backgound-titlepageファイルを選ぶ
同様にして、「titleText」「button_read」をドラッグ&ドロップして以下の様に表示
SpriteKitではNode(背景、タイトルなど)を配置して表示します。下の様な関係です。
ソース上では、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
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)
}
}
あとは実装してみて、感触をつかむのが良いと思います。
てか、これから実装入ります。。。ではでは(笑)
SpriteKit 画面構成と作成方法
Swift4での開発で、SpriteKitを使用している時につまずいたところをメモ。
SpriteKitにUITextFieldが表示できない。
色々とサイトを眺め、コードを書いたりしてやるが表示できない。
【原因】
「self.view?.addSubview(textField)」で追加すると画面のルート部分に追加されるので画面上に目で確認する事ができない→意味なし(笑)
【参考サイト】
SpriteKit Tutorial: Create an Interactive Children’s Book with SpriteKit and Swift 3
このページによると、
SpriteKitの画面コンポーネントの構成について記載してある。大雑把に以下の通り
・画面コンポーネントについて
1. Main.storybordはアプリケーション起動時にGameControllerViewに追加される。
if let scene = SKScene(fileNamed: "GameScene") {
// ...
}
上記のコードは、「GameScene.sks」ファイルで作成した画面を取り込んでいる処理で
今後作成するクラスはGameSceneクラスの子どもになる
【クラス関連図?】
【ページの作成方】XCodeでの操作になります。
1. /File/NewFile/ ... iOS/Resource/SpriteKit Scene テンプレートを選択する。
2. Nextを押下して、タイトルページをシーンエディターで作成します。(TitlePage.sks)
※アセット(作成したイメージファイルなど)はMedia libraryから取得する事ができます。
全てのイメージファイルなどは、Assets.xcAssets に保存しておいてください。
イメージは以下の様です※未確認
そして参考サイトでのソースを
First, in GameViewController
, the template created this line:
view.ignoresSiblingOrder = true
から
In GameViewController
, set this value to false
:
view.ignoresSiblingOrder = false
へ書き換えると以下のように表示されるみたいです。※自分は実行していません。。。
以上が画面の基本的な構成部分になります。次回は、UIKitの追加方法について
2Dグラフィックス iOSアプリ(Xcode) 其の三
前回は、参考サイトを見ながらXCodeでの画面作成をやりました。
おさらいです。
1. XCodeでのSpriteKit使用方法画面のどの部分を操作するか?
2. 同様に重力をかけるにはどうしたら良いか?
3. 重力はかけたが、ボールが画面の外に落っこちた。
について学習、結果を参照しました。
今回は、重力をかけたものに範囲(画面の枠内)に止まるように(今回は跳ね返ります)
コードを追記します。
具体的には以下のコードを追記します。
// 1
let borderBody = SKPhysicsBody(edgeLoopFrom: self.frame)
// 2
borderBody.friction = 0
// 3
self.physicsBody = borderBody
自分が調査したところ、メソッド名が「didMove」だったり「didMoveTo」だったりしてよくわかりませんでしたが、XCodeをみると「didMove」だったので
まぁよし!としました。(サンプルのコードはdidMoveになっているはずです。)
自分の書いたコードです。
そして、実行結果です。※上下に移動しています。
わかり辛いかもしれませんが、微妙にボールの位置が違います。
次回は、作成したコードに色をつけて、行きます。
2Dグラフィックス iOSアプリ(Xcode) 其の二
前回は、背景などを作成しました。サンプルプロジェクトをダウンロードしています。
今回は、ボールを追加して動かします。参考サイトはこちら
前回に引き続き、ドラッグ&ドロップでボールを追加します。
※やり方は前回の記事を参考にしてください。
以下のような画面が見れると思います。
いよいよここからが本番!!
物理学的に画面上のオブジェクトを動かす環境がSprite Kitにあり
画面上に作成した各オブエジェクトは作成するゲームに応じて重力趣味レーション機能を提供します。※英訳したのですが間違ってたらすいません。。。
まぁ重力計算を行い物理シュミレーションを行う機能が付いているって事ですね。
実際に物理シュミレーションを行うのには、設定が必要になります。
その設定をphysic bodyと呼ぶみたいですが、設定するために「Attribete Inspector」を
開かないといけないのですが、参考サイトの下の方に画像がついていました。
自分の開発環境はXCode9.0 beta4です。以下のような感じになります。
とりあえずは、これで起動して見ました。
デフォルト設定だと縦長になるのでHardWare > Rotate Rightをクリックします。
なんか変ですが、感動するものがありました。(何もしていませんが(笑))
そして、重力をかけるための設定。Physics Definitionを設定します。
「Attribete Inspector」から見つけることが出来ます。
セレクトボックスを切り替えると左記のようになります。
そして再度起動します。
落っこちる感じでボールが動くので変な位置ですが。。。
感動するものがありました(笑)
ではでは、今回はここまでという事で。
次回は、落っこちるだけでなくその他の動きもやってみようと思います。