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 画面構成と作成方法

Swift４での開発で、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」から見つけることが出来ます。

セレクトボックスを切り替えると左記のようになります。

そして再度起動します。

落っこちる感じでボールが動くので変な位置ですが。。。

感動するものがありました(笑)

ではでは、今回はここまでという事で。

次回は、落っこちるだけでなくその他の動きもやってみようと思います。

2Dグラフィックス iOSアプリ(Xcode) 其の一

前回、swiftのサンプルコードを眺めました。

この一ヶ月、試行錯誤した結果3Dの技術は2Dが基本になっているようで。。。
2Dから始めようと思います。

参考にするサイトはこちらです。
参考プロジェクトをダウンロードします。サンプルプロジェクト.zip

【1stステップ】

上記のzipファイルをダウンロードしてプロジェクトを開きます。

こんな感じの画面が開けると思います。(Xcodeで開きます)

そして、上記の画面右側「Not Applicable」と表示されていますがその
上部にあるを選択すると下のような画面が見れます。

左のようなパネルが表示され、下部にあるを選択すると下のようになります。

参考にしたサイトでは、最上部にある「Color Sprite」を選択しています

右記をドラッグ&ドロップする↓

そして、上記のスプライトをドラッグ&ドロップで大きくします。

さらに、をクリックします。そして、参考サイトの背景を見つける事が出来ます。

そして、ドラッグ&ドロップします。

出来ました、簡単ですね(笑)
※ドラッグ&ドロップするためのパネルを探すのに苦労しました。。。

今回はここまで、次は動きを加えます。

Swift iOSアプリ開発①

前回は、Swiftのセットアップを行いました。〜X CodeをDLするだけ〜

コーディングしてみたところ。。。※コピーですが
ボタン押下後のアクションはメソッド名と@マーク(アノテーション？)
でバインドするようです。

あとは、対応するメソッドを呼び出してやれば想定通りに起動しました。

今回は、3Dアプリを作成したいので「Scene Kit」を使用します。
参考にするサイトが見つからなかったので動画を参考にしました。

www.youtube.com

プロジェクトの作成では以下のように「SceneKit」を使用するチェックを入れます。

そのほかは普通にプロジェクトを作成します。
⑴そして、以下のフォルダにあるファイルを削除します。

３Dモデルが入っています。

　　　

そして以下のフォルダを削除

そして、余計なものをガンガン削除します。
次は、「viewDidLoad()」のsuper.viewDidLoad();以外を削除する。
⑵１８行目〜６６行目までを削除します。

行番号の表示方法は以下の通り、設定をクリック

テキスト編集？をクリックしてからLine nubersにチェックを入れる

⑶handleTap()メソッドを削除します。
⑷フィールドにSCNViewとSCNScene, SCNNodeを定義します。
⑸同様に上記を初期化します(init()処理で実行します)

まぁ動画をみてもらえばわかる事なので。。。
とりあえず、今日はここまでにします。次回はこの続き2Dでの開発ををやります。

3Dでの開発は、基本の2Dの後にやります。。。

Qtも保留してSwiftへ〜Swift開発環境構築〜

前回、Qtをインストールしました。
でも、結局のところはAndroidSDKを使用してやることになります。
塾考の末、それぞれに作成するのがベストという判断をしました。

Android → Android Studio , Windowsで開発
iOS.      → Swift Macで開発

上記のようにやることにしました。
そして、自分の持っている携帯はiPhoneなので「Swift」で開発という事になりました。

というわけで、Swiftの開発環境構築手順です。

AppStoreより「xcode」と検索しXCodeをインストール

Xcodeを起動すると以下のように表示されます。

「Create a new Xcode project」をクリック
あとはこのサイトを参考にしました。→Creating a 'Hello World' App with Swift

起動結果はこんな感じ、
1.初期表示でボタン「HelloWorkd」(スペルミス)
2.ボタンをクリック後にポップアップ出力

　　　　　　

ソースコードは次回記載いたします。

Qt for mac install 〜UEを諦める〜

前回は、UEでの画面作成に着手しておりました。。。
だがしかし、有能すぎるのも考えもの。。。

実際には、Unreal Engineでゲームが作成でき、デザインなどお楽しみ要素が沢山ある
。。。今回は、「ゲーム」が作りたいのではなく「プログラム」を作りたいので
UEを諦める方向になりました。
※UEで出力したソース、フレームワークの内容を理解すればプログラム作成可能です。
  正直言ってプラグインを作る、ちょいとクラスをカスタムするものの様に思います。

そして、結局Qtを使用して作成することにしました。
今までの苦労が報われた様な気がします。

UEを勉強したのも甲斐があり、今まで考えていたUI作成方法だとデザイン部分も全て

プログラムで描画するところでした。。。がUEの自動生成されるフォルダー構成を
参考にして、プログラムを組めば「デザイン」「情報処理」を分断した形で実装できます→デザイン部分を誰かに協力してもらう(頼める人がいれば。。。)

というわけで、前回はハードディスク及びGPUの都合でWindowsにインストールしましたが、Qtでも結局はAndroidSDK, iosであればMac仕様のファイルとか契約とか。。。

とりあえず、「Androidは面倒臭くない」「iOSは面倒臭い」という答えが出たので
MacOSでiOS開発、WindowsでAndoid開発を行うことにします。

やっぱり重いんです、Qtのダウンロード。。。

UE4 画面作成～イントロダクション的な～

前回、何とかUnrealEngineのセットアップができました。

QtCeratorは使用できませんでしたが、まぁ良しとします。
プログラムの作成はどちらでもよいので・・・(必要になったらやります。)

現状としては、UE4によるUI作成→ゲーム作成がメインなので。。。

でも、UE4は使ってみた感想としてプログラム必要ない感じでできていました。
起動する時には以下のような画面です。

一番手前に表示しているのは、自分で作成した、アクター(画面コンポーネント)になります。
チュートリアルも豊富にあり、使い方はチュートリアルで何とかなりそうです。

目標達成アプリの作成も一気にUI設計の詳細部に突入しました。
画面の３Dオブジェクト作成にBlenderを使用、
UI上の動きなどの作成UE4で作業をしております。
画面のコントロール方法などすべてチュートリアルで分かります。

はっきり言ってドキュメントがこれだけ充実しているアプリケーションは見たことがないです。(笑)

Blender Python CubeでCubeを作る

前回は、シンプルにCubeを作成いたしました。

今回はプログラムっぽく...手で作成したくない様なCubeを作成します。

上記のスクリプトを起動するとエラーになります。ちょいと修正すれば動きます。
起動すると以下の様な感じで作成されます。

テスト的によくわからないけどサンプルコードを書いて見ると仕組みがわかって良い

今回のコードは以下です。

import bpy

for k in range(5):
for j in range(5):
for i in range(5):
bpy.ops.mesh.primitive_cube_add(
radius=0.25, location=(i,j,k))

本当はインデントがあったのですが。。。

まぁそれはさておき、今回筆者はBleander Pythonを初めて使用しました。
ソースを見る限り「どうやら３次元ループでCubeを作成する様だ」と予想がつきます。
ぶっちゃけて「location=」の部分は意味がわかっておりませんでしたが
起動して見て「あぁ」って感じです。

結果としては 5 x 5 x 5でCubeを並べただけですが、中々にアーティスティック🌟
サンプルコードを作った人はデザインもできるのでしょうな(笑)

余計なお世話かもしれませんが、一応。。。
「i=0, j=0, k=0」→「i=1, j=0, k=0」→「i=2, j=0, k=0」....
「i=0, j=1, k=0」→「i=1, j=1, k=0」→「i=2, j=1, k=0」....
「i=0, j=1, k=1」→「i=1, j=1, k=1」→「i=2, j=1, k=1」....
とlocationの値を更新しながCubeを作成し、最終的に画像の様なオブジェクトが作成されます。

次回は、BlenderでのPythonスクリプトの基本的な部分について記載いたします。