アルゴンUE4/UE5&アプリ開発日記

UE4/UE5の機能やプラグインを紹介します。初心者や中級者向けになってます!!

【UE4】iOSのTestFlight・LeaderBoardを試してみる

AdventCalenderの記事

Unreal Engine 4 (UE4) Advent Calendar2017の記事になります。

qiita.com

軽い気持ちでiOSの配布用ビルドからiOSベータテスト機能であるTestFlightのテストとLeaderBoardまでやったら結構つまづいてしまったのでそちらの方法を紹介します。

UE4.18.2とWindows・iTunesConnectへのアップロードはMacで行いました。

※iOSDevCenterからアカウントを登録する必要があります。

これ個人登録で12700円ぐらい(2017/12/1時点で)かかります。

まあアプリ配信して元を取ればいいんですよ( `ー´)ノ

Appleの開発者登録

ここの部分に関してはUE4とは関係ないので割愛します。

下記のリンク先を確認しつつ登録していただければと。

i-app-tec.com

登録でわからないことがあればコメントを頂ければお答えします(^^)/

ProvisioningProfileと証明書(Certification)の設定

iOSアプリで避けて通れないのが、ProvisioningProfileとCertificationになります。

原理としては証明書登録してAppIDを登録して、

そのApplDを証明書と関連づけて対応する端末を選択することで、

ProvisioningFileを作成します。

証明書をPCに登録・Provisioningを端末・PCにも一応格納して、

アプリを動かすというのが主な流れになります。

Certificationの設定からAppIDの部分は他のサイトを見てもらったほうが早いと思いますので今回はUE4用のProvisioningFileを作成して登録するところまでやります。

配信・TestFlightで使用する場合はDistributionのAppStoreを選択します。

f:id:yoshikata1990:20171217093638p:plain

その後AppIdと適応する証明書とファイル名指定して配布用のプロビジョニングファイルを作成します。

f:id:yoshikata1990:20171217095822p:plain

作成が完了したら、UE4のプロジェクトに適応していきます。

WindowsUE4でProvisioningと証明書を登録する。

プロジェクトのほうに作成したProvisioningファイルと証明書を登録します。

先に証明書を登録します。

Import Certificateボタンから証明書をインストールします。

成功すると追加されます。

f:id:yoshikata1990:20171217105046p:plain

プロジェクト設定→プラットフォームのiOS→MobileProvisionから登録します。

f:id:yoshikata1990:20171217101226p:plain

ここで注意したいのがTestFlightでは右側にある、

「配布」のチェックが入っていないとTestFlight配信が出来ません。

それから、ステータスで「No Valid」になることが多々ありました。

Windowsはプロビジョニングファイルが下記ディレクト

C:\Users\ユーザー名(個別のユーザー名)\AppData\Local\Apple Computer\MobileDevice\

に保存されます。こちらで「No Valid」になっているプロビジョニングファイルを、

削除して再度インストールしなおすとValidになりました。

次にAppIDを登録するときに決めたBundleIdを適応します。

f:id:yoshikata1990:20171217140951p:plain

BundleIdentifier(黒塗りの選択欄)にAppIdを入れてVersionを指定します。

VersionInfoについては配信時、AppStoreに表示されるバージョンになります。

ここまで完了したら、パッケージ設定をして配布用ビルドを作成しましょう!

プロジェクトのパッケージ設定とパッケージ化

プロジェクトのパッケージ設定をします。

パッケージ化する際にはDistributionを必ず選択してください。

f:id:yoshikata1990:20171217154005p:plain

あとは指定したフォルダにパッケージングして、

Distribution用のIPAファイルが作成されれば完了です。

f:id:yoshikata1990:20171217154534p:plain

IPAのアップロードとTestFlightからのインストール

ここからはMacのパソコンが必須です・・・

というより、iTunesConnectへのアップロード方法がXcodeから、

Archiveを作成してのアップロードまたは、

ApplicationUploaderからのアップロードしかないのです(#^ω^)

Windowsからはどちらもできない・・・・

というわけで今回はApplicationUploaderを使って作成したIPAファイルを、

直接アップロードします!!

ApplicationUploaderの使い方は下記に掲載されてます。

一つ一つの手順まで記載されていましたのでわかりやすいかと思います。

makotton.com

実際にアプリのアップロードが完了するとTestFlightタブのところに追加されます。

f:id:yoshikata1990:20171217164131p:plain

テスト中までいくと開発者用登録したアカウント宛にTestFlightの準備が出来たことを、

報告してくれるメールが届きます。下記の画像が実際のものになります。

f:id:yoshikata1990:20171217165207p:plain

メールのリンクをタップすることでTestFlightアプリをインストールして、

TestFlightのアプリからベータテストアプリをダウンロードしてテスト出来ます。

ここまでがTestFlight配信までの流れになります。

もう少し細かい説明が欲しいところがありましたらコメントいただけると幸いです。

GameCenterにログインしてLeaderBoardを表示させる

iOS特有の機能でランキングを競うLeaderBoardの表示してみます。

LeaderBoardに表示する手順は下記の流れになります。

1.iTunesConnectにLeaderboard設定を登録をする。

2.GameCenterにログインする動作の追加

3.leaderBoardを表示する動作の追加

iTunesConnectにLeaderBoard設定を登録する

iTunesConnectにLeaderBoardの設定を登録します。

機能→LaderBoardの横にある「+ボタン」から追加します。

f:id:yoshikata1990:20171217172947p:plain

LeaderBoardからどのようなスコアボードなのか参照名、

LeaderBoardを呼び出すID・フォーマットタイプ(これはInteger)

などなど必要情報を記載します。

f:id:yoshikata1990:20171217174343p:plain

それが完了したら、次にそれの言語フォーマットを登録します。

f:id:yoshikata1990:20171217174535p:plain

言語・スコアの最大値の設定・スコアの呼び方を登録すれば完了です。

GameCenterへのログイン処理

UE4のプロジェクトからGameCenterする処理を作ります。

まずログインしているかどうか「Is Logged In」で確認します。

f:id:yoshikata1990:20171217175431p:plain

ログインしていなければ「Show External Login UI」でログイン画面を表示します。

どちらもGetPlayerControllを渡します。

f:id:yoshikata1990:20171217175721p:plain

LeaderBoardを表示する

あとは「Show Platform Specific LeaderBoard Screen」で呼び出すだけです。

f:id:yoshikata1990:20171217180317p:plain

※LeaderBoardにプレイヤーのスコアを送る。

スコアボードなのでデータの登録します。

データの扱いがIntegerのみなので送信するデータは数値になります。

f:id:yoshikata1990:20171217181002p:plain

ほしい人がいるかどうか分かりませんがサンプルはGitHubに公開予定です

これまで設定したアプリを動作させたのが下のツイートです。

気になる方は見てみてください。

最後にここまでやってみて思ったこと。

WindowsIPA作成して確認できることは本当にすごいことです!!

Xcodeで40行ぐらい書かないとできないことが4つぐらいノードつなげば可能だったりとか!!上げだしたらきりがないけど・・・

ただ・・・アプリ関係の情報が少ないのとあんまり更新が・・・(´・ω・`)

モバイルの情報も説明出来たらと思います。

23日目はるめらやきさんになります!!

 

 

【UE4】クロスツールの使い方とやり方まとめ

クロスツールの説明

UnrealEngineではNvClothソルバーという形で、

布などの表現の設定が出来る仕組みがあります。

下記リンクのリファレンスにて詳しく記載されています。

※今回はUE4.18で試してみました。

docs.unrealengine.com

クロスツールを使用するにあたっての準備

クロスツールを試す前にまず準備するものがあります。

  1. スケルタルメッシュ(ボーンとウェイト・UVをつけておく)
  2. スケルタルメッシュにクロスシミュレーションをしたAPXファイル

上記2つを必要とします。

スケルタルメッシュの作成

Blenderでボーンを入れて、ウェイトも入れておきます。

UVは一面だけつけています。

右の画像がウェイトをつけたときの画像です。

f:id:yoshikata1990:20171104170733p:plainf:id:yoshikata1990:20171104170814p:plain

今回はこちらの説明はメインではないのではないので割愛します。

あとはFBXファイルで書き出せば完了になります。

APEXのClothToolPROFILEでAPXファイルの作成

行う作業の順番は下記の通りです。

  1. 先ほど作成したFBXのモデルデータを読み込む
  2. シミュレーションする面・頂点をペイント
  3. シミュレーションを実行して、ファイルを書き出す

まずAPEX-SDKをダウンロードします。

https://developer.nvidia.com/gameworksdownload#?dn=physx-apex-sdk-1-3-0

ダウンロードが完了したら、zipファイルをどこに書き出すか指定します。

f:id:yoshikata1990:20171104174038p:plain

作成されたZipファイルを解凍して、

そのフォルダ内のbin→vc10win32-PhysX_3.3のフォルダまで移動します。

その中のClothingToolPROFILE.exeを起動します。

起動したら右上のFile→Load Meshを選択します。

f:id:yoshikata1990:20171104190206p:plain

そうすることで、モデルを読み込むことができます。

PaintingをMax Distanceを選択します。

Edit → View → Painting Visibleを選択しておくことでブラシを適応した箇所を分かりやすくします。

Update Tangent Spaceもクリックしてください。

最初はワイヤーフレーム紫色で表現されています。

f:id:yoshikata1990:20171105080904p:plain

最初自分でやった時カメラを回せなかったり、いろいろ苦労したので、

操作方法だけ軽く説明します。

  • Paint:ペイントする際の適応する強弱
  • Scale:シミュレーションする強度
  • Falloff:範囲の絞り
  • Radius:適応する円の広さ
  • Alt+ドラッグ:カメラ回転
  • Alt+右クリックドラッグ:拡大・縮小

f:id:yoshikata1990:20171105074001p:plain

シミュレーション用のペイントを施すことで白くなります。

白い部分は布の表現を適応されることになります。

白い円はマウスオーバーすると表示される、

シミュレーションペイントの範囲になります。

f:id:yoshikata1990:20171105073534p:plain

問題なければSingle Layerd Clothタブを選択してStart Simulationを選択

f:id:yoshikata1990:20171105080710p:plain

下記のようにシミュレーションが正常に動作していれば問題ありません。

f:id:yoshikata1990:20171105081923p:plain

シミュレーションの設定も各種あるので、そちらも紹介します。

  • EnableWind:風の設定。下のパラメータで方向と強さを変える。
  • Groundplane:最初の状態だと地面が生成された状態になります。

問題がなさそうならSave Selectedを選択してAPXファイルを作成します。

f:id:yoshikata1990:20171105085242p:plain

UE4でClothツールを使ってみる

UE4に先ほど作成したモデルをインポートします。

すべてをインポートでボーンなどすべてインポートします。

f:id:yoshikata1990:20171105100858p:plain

それが完了したらスケルタルメッシュの編集画面を開き、

APXファイルを適応します。

+ボタンからインポートできます。

インポートが完了すると下記のようにClothingDataに反映されます。

f:id:yoshikata1990:20171105101049p:plain

設定ではこれで完了ではなく、

LODの部分にAPXファイルを適応してあげます。

これでスケルタルメッシュにクロスのデータを付与することが出来ます。

f:id:yoshikata1990:20171105101559p:plain

UE4のほうでActive Cloth Paintで布ができます。

Clothingタブのウィンドウの一番下にある、Brushで可能です。

一つ上のToolSettingで塗る濃さを変更して、

赤枠で囲っている箇所で塗る箇所の大きさ、強さを変更します。

f:id:yoshikata1990:20171105101353p:plain

設定が完了したら、

Active Cloth Paintを再度選択し解除してから保存します。

※解除しないとメッシュが正常に表現しなくなります。

それから、布っぽい表現になっているか確認するために、

wind Directional SourceをLevelに配置します。

f:id:yoshikata1990:20171105103453p:plain

風の角度は横に向けると分かりやすくなります。

方向を斜め右にしています。

f:id:yoshikata1990:20171105105416p:plain

動かすと下記のTwitterのように動けば動作はできているかと思います。

以上がクロスシミュレーションの対応になります。

今後もう少し実用的に作ってみようと思います。