2019-03-31

snowのフェイスフィルターのスパイダーマンバージョンを作りたいpart2

皆さんこんにちは🌞こんばんは🌇

Misagonです‼️

フェイスフィルタースパイダーマンバージョンを考えてから随分と日が開いてしまいましたが、忘れていたわけではありません😑

試行錯誤の結果、スパイダーマンのフェイスフィルターを作ることに成功しました‼️

まずは見てましょう‼️ジャカジャン🎊

f:id:gon339:20190326192448j:image

なかなかのクオリティですね‼️

合成してるわけじゃないですからね💦

それでは早速手順を記載していきます。

①ARKit2.0 for Unityをダウンロード

ダウンロード後、解凍してUnityにドラッグアンドドロップしてください。

※iosのバージョン確認もしてね

bitbucket.org

②Spidermanの3Dモデルを入手 (Sketcfhabに登録必要※無料です)

Spider-Man Homecomingby VALLEYOFDEA7Hon Sketchfab

sketchfab.com

③Spidermanの3Dモデルを編集して頭だけにする

ダウンロードしたものはモデルがカクカクしているのでBlenderで重複頂点を削除したり、表面を滑らかにしたりと編集します。(Blenderのサイトなどで調べてね)

f:id:gon339:20190331172500p:plain

④Unityに編集したSpidermanのモデルをインポート

f:id:gon339:20190331173136p:plain

⑤各種設定

ARKit2.0とSpidermanのモデルをインポートしたらあと少しです。

まず、UnityARKitPlugin>Examples>FaceTrackingの階層を開いてその中にある

FaceAnchorSceneを開きます。

f:id:gon339:20190331173536p:plain

するとヒエラルキービューに

CameraParent

ARFaceAnchorManager

ARCameraTracker

AxesPrefab

Directional light

が表示されます。（上画像参照）

AxesPrefabは削除か非表示にして構いません。

ARFaceAnchorManagerを選択すると、右側のインスペクタービューに

f:id:gon339:20190331174425p:plain

このように表示されます。このAnchor Prefabと書いているところに

インポートしたSpidermanのモデルを指定します。(以下参照)

f:id:gon339:20190331174926p:plain

これで顔を認識した時に表示されるオブジェクトの準備ができました。

次にFaceTrackingの使用を許可する必要があるので

UnityARKitPlugin>Resources>UnityARKitPlugin>ARKitSettingを選択し

f:id:gon339:20190331175524p:plain

AR Kit Uses Facetracking

App Requires AR Kit

の有効にチェックを入れます。

これでシーンを保存してビルドします。(プラットフォームをiosに切り替えてね)

⑥シャッターボタンの追加

スクリーンショットをカメラロールに保存するための設定をします。

Assetフォルダの下にPluginフォルダを作成しその中にiOSフォルダを作成します。

iOSフォルダの中にScreenShot.mmというファイルを作成します。(Xcodeで.mmファイルを作成できます。)

作成したファイルに次のプログラムを上書きします。

---------------------------------------------------------------------------------

#import <Foundation/Foundation.h>
#import <AssetsLibrary/AssetsLibrary.h>
#import <AVFoundation/AVFoundation.h>

extern "C" void SaveToAlbum (const char* path)
{
UIImage *image = [UIImage imageWithContentsOfFile:[NSString stringWithUTF8String:path]];
ALAssetsLibrary *library = [[ALAssetsLibrary alloc] init];
NSMutableDictionary *metadata = [[NSMutableDictionary alloc] init];
[library writeImageToSavedPhotosAlbum:image.CGImage metadata:metadata completionBlock:^(NSURL *assetURL, NSError *error) {}];
}

--------------------------------------------------------------------------

ボタンを押したらスクリーンショットを撮るスクリプトはこちら※.cs

using System.Collections;
using UnityEngine;
using System.IO;
using System.Runtime.InteropServices;

public class ScreenShot : MonoBehaviour
{
[DllImport("__Internal")]
private static extern void SaveToAlbum(string path);

IEnumerator SaveToCameraroll(string path)
{
// ファイルが生成されるまで待つ
while(true)
{
if(File.Exists(path))
break;
yield return null;
}

SaveToAlbum(path);
}

void Update()
{
if(Input.GetMouseButtonDown(0))
{
#if UNITY_EDITOR
#else
string filename = "test.png";
string path = Application.persistentDataPath + "/" + filename;

// 以前のスクリーンショットを削除する
File.Delete(path);

// スクリーンショットを撮影する
ScreenCapture.CaptureScreenshot(filename);

// カメラロールに保存する
StartCoroutine(SaveToCameraroll(path));
#endif
}
}

⑦Xcodeでアプリをインストールします。

シャッターボタンを追加した場合

info.plistを選択し

右クリックでAdd Rowで以下を追加します。(追加しないとカメラで写真を取った時にアプリがクラッシュします。)

Privacy - Photo Library Additions Usage Description

⑧完成

f:id:gon339:20190331185736p:plain

という流れでした！これでみんなもスパイダーマン！！

2018-11-24

よくあるTPSのRPGを作りたい！！その2 忘備録

こんにちは、こんばんは！Misagonです！！

今回はよくあるスマホゲーRPGの基礎を独学自力で作成していきたいと思います！

C#を使用するのですが、私はスクリプト系の知識はほぼないので、極力スクリプトは自分で書かずに他力本願でいきたいと思います。

使用機材、ソフトはこちら↓

Unity

Blender

Photoshop Elements

Mac Book Air (メモリ増設有り)

まずはProjectを作成します。今回使用したAssetはこちら↓

"Unity-Chan!"model (後述するアニメーションのmotionなどが含まれています。)

3rd Person Controller +Fly Model(シンプルな人型のキャラクターオブジェを使用するためだけに使用)

Joystick Pack (ジョイスティックパッドの導入に使用)

Mecanim Locomotion (アニメーションを動かすのに使用)

を使用します。

まず3DでProjectを作成します。

f:id:gon339:20181123233654p:plain

今回はとりあえず、フィールドを作ってその上をキャラクターに歩かせたいので、

ヒエラルキーを右クリック→3Dオブジェクト→Terrainを選択します。

画面上にTerrainが表示されるので、右側のインスペクタービューで

x-256 y 0 z -256に設定するとTerrainが真ん中に来ます。

この時点で画面上部からファイル→「シーンを別名で保存」で保存しておきます。

次に、画面下部のAssetsから「Virtual joystick Pack」を開き、中にある「3DExampleScene」をダブルクリックして開きます。

f:id:gon339:20181123235146p:plain

するとSceneが開くので、ヒエラルキーにあるCanvas、Scene、Player Example 3Dを選択してコピーします。

f:id:gon339:20181123235544p:plain

コピーした状態で、先ほど保存したSceneを開き、ヒエラルキーに貼り付けます。

すると画像のようになります。

f:id:gon339:20181124000929p:plain

これでフィールドとキャラクター、キャラクターを操作するためのjoystickを追加することができました。ここから調整していきます。

まずはTerrainにテクスチャを貼りましょう。

画面上部のアセット→パッケージをインポート→環境を選択しTerrain関係のテクスチャやオブジェクトをダウンロードします。

Terrainを選択した状態で、インスペクターの筆マークを選択し、下の「テクスチャを編集」を選択し、「GrassHill」を追加します。

f:id:gon339:20181124003130p:plain

追加するとフィールドにテクスチャが貼られます。

f:id:gon339:20181124004416p:plain

次にキャラクターを追加します。今の状態では白い四角しかいないので、別のキャラクター追加します。

3rd Person + Fly→Modelsからchar_shadowを選択し、画面にドラッグします。

f:id:gon339:20181124004918p:plain

キャラクターを選択した状態で、Assets→Virtual Joystick Pack→3D Example内の

「Player 3D Example(Script)」をキャラクターのインスペクタービューにドラッグアンドドロップします。その後、Joystickの項目が追加されるので、Joystickの横の○から対応する「Fixed joystick」を追加します。これで、キャラクターをJoystickで操作することができます。

ヒエラルキーのPlayer Example 3Dを参考にすると分かりやすいと思います。

ここまで設定できたらもう役目を果たしたので削除して大丈夫です。

f:id:gon339:20181124005150p:plain