初心者から始めるSceneKITの使い方の基礎（1/1）

 

 

はい、それでは今回はSceneKITというフレームワークを使って

3Dオブジェクトを使ったプログラミングをしていきたいと思います。

それでは、Xcodeの方を開きましょう。今回はXcode8対応となります。

それでは、CreateはNewXcodeプロジェクトを選択します。

テンプレートの方が表示されますね。iOSのゲームを選択しましょう。

Nextをクリックします。ProductName、これは、SceneKITSampleとでもしておきましょう。

 

OrganizationNameは個人名、OrganizationIdentifierは個人や組織を識別するための識別子にしましょう。

LanguageはSwiftを選択します。

GameTechnologyは4つありますけど、この中からSceneKitを選びましょう。

DevicesはiPhoneを選択して、このあたりはチェックを入れないでNextをクリックします。

保存場所を聞かれますので、デスクトップなどを選択してCreateします。そうすると新しいProjectが立ち上が

ります。

 

はい、それでは解説を行っていきますね。Main.StoryBoardを選択します。まず、最初に起動する画面がどのようになっているかを説明したいと思います。

ここにGameViewControllerというのがあって、CMViewと表示されていますね。左側に矢印があります。

このやじるしは、アプリが起動した時、一番最初に起動される画面はこの画面であるということを意味します。

Sceneviewと表示されていますね。このSceneViewはここでも分かる通り、

Gamecontrollerの直下に配置されています。このSceneviewは3Dオブジェクトを表示するために用いるViewになります。

 

それではコードの方を説明していきますね。GameviewControllerを選択します。

Import,UIKITがインポートされていますね。UIKitはこれは、アプリを作るための基本的な要素が全部入っていますので、大抵の場合インポートします。

QuartzCore時間やグラフィックを制御するためのフレームワークですね。

Importscenekit、Scenekitが3Dオブジェクトを扱うためのフレームワークになります。

このように、ClassGameviewControllerと書くことで、GameviewControllerというClassの宣言が行われます。

このClassはUIViewControllerを継承しています。この右向きの矢印は、左向きの矢印で閉じていますけど、この領域にClassのコードを書いていくことになります。

そして、OverrideFuncViewdidLoadと書いてありますね。これはViewdidLoadという名前のメソッドになります。

Overrideと書いてあるのは、このUIViewControllerの中に書いてあるメソッドをうわがきしていることになります。

この中に書かれている命令は、ViewdidLoardが、アプリが立ち上がって画面が読み込まれるタイミングで実行されるんですけど、したがってこの中の処理は、アプリが立ち上がって画面が読み込まれるタイミングで実行されることになります。

 

まずLetSceneSCNScenenamedこのように書かれていますけど、ここでShip.SCNというファイルを読み込んでいます。で読み込んだ結果をSCNという定数に入れていますね。

では、このShipSCNという中を見てみましょう。ここで選択します。

中はこのようになっています。戦闘機の3dオブジェクトがありますね。このように矢印を使って移動することができます。

そしてこの3Dオブジェクトをもうちょっと詳しく見てみましょう。ここを見てみると、NameがShipmeishiという名前がついてますね。

位置に関してはここのXYZを使って変えることができます。オイラー角を使って角度も変えることができます。

例えば、Xの値に90と入れると、このように90度回転します。で、Scaleですね、Xに1を入れるとこのように横に伸びることになります。

このように位置や角度、スケールなどを変えることができます。

そして、この3Dオブジェクトにはテクスチャーが設定されています。

テクスチャーはここで見ることができますね。ディフーズにテクスチャーPNGというものが選択されています。でこのTexture.pngですが、ここにあります。このように3Dオブジェクトにまるでシールのような画像がここに置かれているわけですね。

 

このTextureを3Dオブジェクトに貼りつけて、3Dオブジェクトが完成することになります。

それでは、GameViewController.Swiftに戻ります。LetCameranodeSCNNodeと書かれていますね。これはカメラになります。

3Dオブジェクトは見る方向によって全然違う景色が見れますので、カメラを設定して、カメラの見る方向を設定することで、初めてその画面が出来ることになります。

 

2次元の画面に取り込むことができるようになるわけです。

カメラノードを使って、カメラプロパティに新しいカメラを設定します。そして、Sceneのルートノードにこのカメラを加えてやることでカメラの設定が出来るわけです。カメラの位置の設定をしますね。X方向0、Y方向0、Z方向が15です。

したがいまして、手前方向に15だけ移動させた位置先程の戦闘機のモデルを俯瞰した位置から眺めることになります。

 

lightnodeですね、これは画面にあたる光です。lightnodeが無いと画面が真っ暗になってしまいますので、これが必要になります。

まずlight、lightのプロパティを設定しましてそのlightのタイプを設定します。

今回はオムニタイプを設定します。LightタイプのLihtNodeの位置ですが、このようにYが10、Zが10とちょっと斜め上から照らすことにします。

SceneのルートNodeにこのLightNodeを加えることでLightが画面に追加されます。

ちなみにSceneに追加できるのはNodeですね、カメラや3Dオブジェクト、ライト全てNodeになります。

 

次、AnbientNodeですね、先程のLightNodeは一方向から照らすものでしたけど、AmbientNodeは全体を照らす光になります。

Ambientoタイプを設定します。そして、同様にSceneに追加します。

今回の環境の光はダークグレーのカラーにしています。そして、Sceneから船の3Dオブジェクトを取り出します。

この3Dオブジェクトもノードで表現されています。このShipに対してアクションを追加します。

beatForeverで次のアクションを繰り返します。Rotatebyラジアンで2だけ1秒かけて回転する。

この回転を繰り返すことにより、この船はY軸を中心として常に回り続けることになります。

 

SCNViewですね、画面からViewを取り出します。そして、Sceneを設定します。

SceneをViewに先程設定したこのSceneの方を設定します。

SharrowCameraControllでカメラの回転ができるようになります。そして、SCNviewShowstaticsで画面下部に現在の3Dオブジェクトの状況が表示されるようになります。そして、背景色を黒に設定します。

 

そして画面にジェスチャーレコナイザーというものを追加します。Tapジェスチャー、UITapGestureRecognizerでターゲットセルフ

このクラスの中にあるHundleTapというメソッドが呼ばれるようにします。

でこのSCNViewにこのジェスチャーを加えることで、そのSCNViewをタップしたときに、このHundleTapが常に呼ばれるようになるわけです。

ではこのHundleTapの中身を見てみましょう。

HundleTapの中身、引数としてジェスチャーRecognizedというのが渡されていますね。

SCNViewを画面から取ってきまして、このジェスチャーrecognizerの位置を、Tapされた位置を取得します。

 

HitresultをHitTestというメソッドを使って取得します。

そしてタップしたところにいずれかのものがあればカウントが0より大きくなりますので、その時にこのような処理を行います。

resultanyobjectHitresult0最初の要素を取り出します。

タップしたものが、この場合は飛行機になりますね。飛行機のマテリアルを取り出します。このResultから最初のマテリアルを取り出します。

そしてここでアニメーションを始めます。SCNTransactionBeginAnimationで開始です。

 

AnimationDurationで何秒かけてアニメーションするか設定します。

CompletionBlockはアニメーションの処理が完了したら何を行うかですね、で、MaterialemissionContentsでそのemission、放出する色を設定します。

この場合は赤に設定します。そしてSCNTransactionCompletionBlockで処理が完了した時の内容を書いています。

赤い色の放出が完了したタイミングで今度は黒の色の放出を始めます。0.5秒かけて

UIColorBlackを放出します。

Blackは標準の色ですので、これで元の状態に戻る訳です。

SCNTransactionCommitでアニメーションが実行されます。

それでは、実際に実行してみて動作の方を確認してみましょう。シミュレーターを起動して動作の確認を行ってみます。

 

そのほかにいくつかのメソッドがありますね。手動とRotateで画面回転に対応するかどうか、PrefirstStatusBarHiddenでステータスバーを表示させるかどうか。

この場合はTrueで表示させるになっていますね。SupportedInterfaceOrientationで縦向き横向きどの方向をサポートするのかを設定します。

そして、DidrecieveMemoryWarning、これはメモリーが不足した時に呼ばれる処理ですね。

ではそろそろシミュレーターが立ち上がったかもしれません。

シミュレーターのサイズがこのように小さい場合はScaleで大きさを変えることができます。50％にしました。大きくなりましたね。

 

このように先程RunActionで指定した回転の動作が起きています。

そして画面をこのようにSwipeすると戦闘機が回転します。これはカメラの見る角度が方向が変わっているせいですね。

 

戦闘機をタップするとこのように赤く色が変わります。

先程設定したタップジェスチャーとあとこの色の放出Emitterの設定のお蔭ですね。

画面下部にはこの3Dオブジェクトに関する情報が表示されています。

このようにして、今回Xcodeに標準でついているSceneKitを使った3Dオブジェクトの表示サンプルを使うことができました。

このSceneKitを使うことで比較的簡単に3Dオブジェクトを使ったゲームなどを作ることが出来ますので、是非皆さんも試してみてくださいね。

今回は以上になります。

 

Tekuruプログラミングスクールでは、

動画だけでは伝わりきらない、アプリ開発の楽しさや、

気軽に質問できる雰囲気で、プログラミングを学ぶことができます。

もっと深く、プログラミングを理解したい方は、ぜひ体験会にお越しください。

 

どこよりも楽しく学べるアプリ開発スクールを運営しています。

フォローしてしてくれると、とてもうれしいです☆

Facebook

https://www.facebook.com/techool

 

Twitter

https://twitter.com/TekuruSchool

 

YouTubeチャンネル

https://www.youtube.com/channel/UCpQfWE0TpewbXYnGyxxBkow

 

毎週土曜日の夜に動画のアップロードをしています。

よければ、チャンネル登録お願いします！

ソースコードや、操作の仕方、などなど、

なんでも気軽にコメントください。