トマシープが学ぶ

Unity/VR/AR/デザイン好きのミーハー 記事内容は自分用のメモです

縦でも横でも対応できるUnityのスマホUI設計【Unity】

ワールドを移動する系のアプリにフォーカス

他アプリの縦・横画面

私が見たことあるのはZEPETOとRev Worldぐらいかな

Rev Worldは対応しているっていうか、Auto RotationでLandscapeのチェックを外し忘れてるだけなのでは?というぐらい横画面には最適化されてない。

デフォルトが縦

f:id:bibinbaleo:20220114112403j:plain

f:id:bibinbaleo:20220114112407j:plain

 

ZEPETOはちゃんとどちらでもきれいに表示される。

f:id:bibinbaleo:20220114112411j:plain

f:id:bibinbaleo:20220114112415j:plain

ちなみに端末を傾けたら変わるのではなく、マイクボタン横のボタンを押さないと変わらない。

またルーム機能でのデフォルトは横画面で、縦画面にしたら一部使えない機能やゲームがある。

ちなみにルームはデフォルト横画面だけど、ルームを探す画面などその他は縦画面。

f:id:bibinbaleo:20220114113239j:plain

RobloxやClusterもそうだよね。

端末回転によって自動で回転させるよりは、横のほうが良い場面だけ横画面に自動で回転させる方式でも良さそう。

 

Mozilu Hubはブラウザなので当然縦横対応してるけど、横にしたらめっちゃ見える範囲が狭まって操作しずらい

f:id:bibinbaleo:20220114113402j:plain

全画面に出来ないのかな・・・?

f:id:bibinbaleo:20220114113406j:plain

 

ちなみにウマ娘はライブとストーリーと最近レースも横画面を選択できるようになった

f:id:bibinbaleo:20220117220212p:plain

f:id:bibinbaleo:20220117220218p:plain

 

縦と横のメリデリ

ワールド移動に関しては横のほうが空間全体が見えて楽しい気がする。

f:id:bibinbaleo:20220114112411j:plain

縦にしたら当然持ちやすい。

あと縦のほうが周りをくるくる見たくなる感じがする。一度に見えないからこそ動かしてくれるかもしれない。これは360度動画だと、せっかくの360度動画なのに横画面だと絵として完成しているから、あまり視点を動かしてくれないみたいなのにつながるかも

f:id:bibinbaleo:20220114112415j:plain

IDやパスワードの入力などキーボードが表示されるものは絶対縦画面のほうが良い。

入力しやすさもあるし、デザインする側としても、縦だと画面上半分に入力欄を置きやすい。

f:id:bibinbaleo:20220114114401p:plain

Unity

私のアプリは横画面デフォルトで作っている。

Portraitにチェックを入れて縦画面にしてみたら、RevWorldみたいにUIパーツが小さくなってしまう。

f:id:bibinbaleo:20220114113653p:plain

Canvas Scaler

現在Canvasはこんな設定になっている。横画面のiPhoneXのサイズを基準にUIを配置している

f:id:bibinbaleo:20220114125833p:plain

これをScale With Screen SizeにしてHeightを1にするとでかくてあふれちゃうけど、0.5ぐらいにすると、縦でも横でもちょうどよくなった!

f:id:bibinbaleo:20220114125836p:plain

UIによっては0.3ぐらい

姿勢検知で数値変更

Auto Layoutで対応できない部分は、姿勢を検知してUIの位置を明示的に変えないといけないだろうな~

もしくはその画面だけ回転禁止にして一方向にするとか。

以下の記事にあった

www.am10.blog

blog.yucchiy.com

deviceOrientationで向きを取れる

Unity - Scripting API: DeviceOrientation

 if (Input.deviceOrientation == DeviceOrientation.FaceDown)

if (Input.deviceOrientation == DeviceOrientation.LandscapeLeft || Input.deviceOrientation == DeviceOrientation.LandscapeRight)

 

Updateで取り続けないといけないのかな?Inputだからまあしょうがないか。

 

UI

ジョイスティックの位置が難しい。右下に置いてたけど、縦画面にしたら画面下部に置いているUIと被ってしまう。

ZEPETOも同じ状況だから、縦画面の時は少し上にジョイスティックの位置をずらしている

f:id:bibinbaleo:20220114112415j:plain

ボタンが並んでる系は縦でも横でもいけるものが多そうだけど、2カラムのリストとかきつい。

折り返ししないテキストも縦に合わせると文字数が少なくなる

 

最後に

Cnvasがかなり分かれてるアプリだからCanvasの設定を一つ一つ変えるのは大変。Canvasをプレハブ化してたので、大部分は一気に変更できてよかった。一部プレハブを使ってない部分があった・・・

共通パーツを使うのって大事だな〜

Unity1Week「正」に参加しました

久しぶりに参加する。

bibinbaleo.hatenablog.com

今回は「正」

作ったもの

unityroom.com

www.youtube.com

アイデア

「正」と見て真っ先に思ったのはお正月だからかな?ということ。

twitterでみていると「正の字」を使ったものや「正拳突き」、「正解」など

 

季節感があるものが好きだからやっぱり正月で行く。

正月飾りとか虎とかかざり餅とか題材にできないかな〜と考えたけど

ゲームジャム期間がクリスマスだから、クリスマス〜おおみそかを超えて無事正月を迎えるみたいなコンセプトにする。

 

回っている地球の上にクリスマスツリー、年越し蕎麦、壁などがあって当たらないようにジャンプするっていう感じ

f:id:bibinbaleo:20211221085447p:plain

干支を置いても良さそう!

キャラクターどうしよう。そもそも2Dのジャンプとかアニメーションとか全然わからない。まあアセット使えばなんとかなるっしょ。

2D+キャラの作品

bibinbaleo.hatenablog.com

dkrevel.com

素材

以下全部「時短だ」より

イラストストック「時短だ」 – 時短に役立つ素材サイト

f:id:bibinbaleo:20211221215433p:plain

f:id:bibinbaleo:20211221215436p:plain

f:id:bibinbaleo:20211221215438p:plain

 

f:id:bibinbaleo:20211221215444p:plain

f:id:bibinbaleo:20211225201744p:plain

はで富士山 – イラストストック「時短だ」

 

走るキャラはこちらから

検索結果 | human pictogram 2.0

f:id:bibinbaleo:20211221215606p:plainf:id:bibinbaleo:20211221215608p:plain

f:id:bibinbaleo:20211221215604p:plain

いらすとや

www.irasutoya.com

大晦日 | かわいいフリー素材集 いらすとや

www.irasutoya.com

BGMや音

正月になるにつれ盛り上がりたい。

でもそんな都合のいい短い曲探すの大変>< 効果音とかで盛り上げたらいいのかな?

dova-s.jp

あと除夜の鐘とかはちゃんとゴーンて鳴らしたい。

www.kurage-kosho.info

クリスマス

dova-s.jp

正月

dova-s.jp

BGM

クリスマスの効果音などの邪魔にならない曲ないかなと思って「当たり障りのない」で調べたら2つ出てきた。いい感じにあたりさわりない

dova-s.jp

dova-s.jp

フォント

bibinbaleo.hatenablog.com

配置

円にしようと思ったけど並べるのめんどくさいし、変更しにくいので普通に直線にしよ

f:id:bibinbaleo:20211222211921p:plain

f:id:bibinbaleo:20211225201901p:plain

場面遷移

今回は世界が動くアニメーションに対して、ユーザーはジャンプするだけの操作

Timelineで全部アニメーションさせたら楽かな

雰囲気でできた

f:id:bibinbaleo:20211223220835p:plain

キーの消去は、タイムラインのトラックをダブルクリックしたら出てくるAnimationウィンドウでできる

f:id:bibinbaleo:20211223220812p:plain

ジャンプで避ける

スペースを押したらAdd Forceしてジャンプする。

    private void Jump(){
Player.GetComponent<Rigidbody2D>().AddForce(Vector2.up * jumpingPower);
    }

liibercraft.com

 

人にも乗り越えるものにも全部にBoxColliderつけてる

f:id:bibinbaleo:20211225205924p:plain

人間にはRigidbody2Dをつけてる

mogi0506.com

f:id:bibinbaleo:20211225192206p:plain

Rigidbodyの値とAddForceの度合いでジャンプの仕方を調整

上の方に天井を置いておいて、ジャンプしすぎを防ぐ

 

ミスしたら最初から

最初は迫ってくるものに当たったらミスとして最初からにしようとしたけど、難しすぎたので、右にある壁に当たったら最初からにした

 

OnColliderEnterってそのオブジェクトにつけないと動かないんだっけ・・・?

Scriptは人間につける気はなかったけど、参照の仕方が分からなかったから人間につけた

void OnCollisionEnter2D(Collision2D other){
if (other.gameObject.tag == "object"){
Reset();
}

クリアした後も最初に戻れるようにしたくて、これもTimelineでUIをオンにするようにした。

f:id:bibinbaleo:20211225202138p:plain

f:id:bibinbaleo:20211225202102p:plain

キャラクターアニメーション

ちゃんと走ったりジャンプしたりするようにしようかな・・・時間がないし今の挙動的にこのままシュールなのでも良さそうだけど

dkrevel.com

f:id:bibinbaleo:20211225204117p:plain

ちゃんと走ったけど画像がちゃんと走っているコマ送りじゃないから微妙だった〜

スプラッシュ

スプラッシュに最初の画面をスクショを設定しておくといい感じになる。

f:id:bibinbaleo:20211225205249p:plain

これ昔からしてたけど、最近Appleのガイドラインに「初期画面と同じUIデザインを起動画面にせよ」って書いてて私のやり方は当たってたんだな〜と思った。

WebGLビルドとUnityroomアップロード

久々に見たらゲーム実況ポリシーを設定できるようになってる!神!!

unity1weekのゲーム全部やる系の人にボロクソに言われるのが辛くてやめた部分もあるので・・・

f:id:bibinbaleo:20211223205200p:plain

WebGLをビルドするときはCompression FormatをGzipにする必要があるって

f:id:bibinbaleo:20211225192211p:plain

 

バグなのか、unityroomで最初に起動したとき、画面をクリックしないと音が鳴らないしSpaceキーが効かない

完成

明日の20:00に公開されるはず

https://unityroom.com/games/welcomeshougatu

動画

youtu.be

 

 

Unity Editorの進化とか小ネタを実践する【Unity2021.2】

UnityEditorも日々進化を続けている。

Unity2021.2で知らないこと試す〜

Unity 2021.1 ベータ版公開、フィードバック募集中です | Unity Blog

Unity 2021.2 beta is available for feedback | Unity Blog

#UniTips15sも試す!

 

実際に手を動かしてメモ〜

動くメニュー!

なんといってもここが動かせる。動かしたいと思ったことはないけど

f:id:bibinbaleo:20211214224747p:plain

デフォルトがTextMeshPro!

デフォルトのTextがTexcMeshProになってる。従来のはLegacyにある

f:id:bibinbaleo:20211214214853p:plain

Inspector

Properties⇦神

Inspectorsのロックをしなくても固定できるようになったって!これは神

固定したいものでPropertiesを押す

f:id:bibinbaleo:20211214215715p:plain

するとInspectorではなくそのオブジェクトの名前の別ウィンドウができる!!!強い!!!

f:id:bibinbaleo:20211214215712p:plain

この機能ググっても出てこないな・・・名前がプロパティだからな

コンポーネント全開・全閉

Expand All Components、Cpllapse All Componentsでコンポーネントを全部開く・全部閉じるができる

f:id:bibinbaleo:20211214221505p:plain

Transform

生成位置を000

Createした時変な位置にできる

f:id:bibinbaleo:20211214215235p:plain


Preference>Scene Vie>Create Object at Origin

f:id:bibinbaleo:20211214214845p:plain

これで000にできる

f:id:bibinbaleo:20211214215118p:plain

全部の値を一気に変える

f:id:bibinbaleo:20211214214840p:plain

ヒエラルキー

開く

altキーを押しながら開くと全部開く

f:id:bibinbaleo:20211214224023p:plain

複製時末尾の数字

ProjectSetting >Editorで末尾の数字の設定が変えられる

今まで通りの()、ピリオド、アンダーバー

f:id:bibinbaleo:20211214225845p:plain

アンダーバーで良さそう。

f:id:bibinbaleo:20211214225944p:plain

正直なにもつかなくていいんだけどな〜どうせ名前変えるし

こちらの拡張を使ってもいいかも

baba-s.hatenablog.com

選択の記憶

あとヒエラルキーの選択を覚えておけるって!知らなかった。Sceneを移動したら記憶は消えてた

 

プレハブ

プレハブに含まれるものが見れる

f:id:bibinbaleo:20211214224345p:plain

f:id:bibinbaleo:20211214224343p:plain

いつか使えそう?いつ使うんだろう

 

uGUI

Anchor

普段こんな感じ

f:id:bibinbaleo:20211214212958p:plain

altを押したらなんと位置も変わる!

f:id:bibinbaleo:20211214212906p:plain

左上に移動したりしてくれる!便利〜

f:id:bibinbaleo:20211214213046p:plain

shiftを押しながらだと、Anchorの位置も変わる

f:id:bibinbaleo:20211214212910p:plain

aspect ratio filter

画像比率を一定に保ってくれる。最初にImageをSet Native Sizeなどを押してその画像のサイズにしてからAspect Ratio Filterコンポーネントを追加する

f:id:bibinbaleo:20211214214310p:plain

www.hanachiru-blog.com

全画面

ウィンドウをMaximizeできる

f:id:bibinbaleo:20211214222039p:plain

f:id:bibinbaleo:20211214222036p:plain

これ前もGameウィンドウだとPlay Maximizedで実行中に全画面できたよなーと思ったら進化してた

f:id:bibinbaleo:20211214222158p:plain

Play Forcsedだと別ウィンドウにしてた時に前面に出る

f:id:bibinbaleo:20211214222030p:plain

カラープリセット

listモードにしたら名前をつけられる

f:id:bibinbaleo:20211214222826p:plain

ライブラリとして保存できる。

f:id:bibinbaleo:20211214223458p:plain

デフォルトだとEditor共通の場所に保存されて、LocationをProjectにしたらAssets>Editorの下に保存された!これGit共有したら自動で反映されるのかな??

f:id:bibinbaleo:20211214223744p:plain

(Preferences Folderの時の場所↓)

f:id:bibinbaleo:20211214222828p:plain

最後に

ロゴ変わっちゃったね・・・

f:id:bibinbaleo:20211214230219p:plain

慣れない

SkyboxとSphereで360度映像を流す方法【Unity2020.3】

以前のが古いので書いた

bibinbaleo.hatenablog.com

bibinbaleo.hatenablog.com

Skybox

Render Texture作成

まずRenderTextureを作ります

f:id:bibinbaleo:20211210121857p:plain

Sizeを表示したい解像度にします。360度動画なので2:1。あとDepth BufferをNo Depth bufferにする

f:id:bibinbaleo:20211210122103p:plain

VideoPlayer

流したい動画をヒエラルキーにドラッグ。VideoPlayerが自動でつく。

f:id:bibinbaleo:20211210122217p:plain

VideoPlayerのRenderModeをRender Textureにして、さっき作ったRenderTextureをセット

ついでにLoopにチェックを入れると動画がループする

Skybox用マテリアル

次に新規マテリアルを作成。ShaderをSkybox>Panoramamicにする

f:id:bibinbaleo:20211210122437p:plain

そしてSphericalに最初に作ったRender Textureを設定

f:id:bibinbaleo:20211210122422p:plain

Skybox設定

Window>Rendere>LightningでSkybox設定のウィンドウを出す

f:id:bibinbaleo:20211210122638p:plain

EnviromentタブのSkybox Materialを上で作ったマテリアルにする。

f:id:bibinbaleo:20211210121859p:plain

完成

これでシーンを実行したら流れる!

f:id:bibinbaleo:20211210123853p:plain

Sphereに流す

RenderTexture作成~VideoPlayer設定

Skyboxの時と同じ

シェーダー用意

シェーダーを何にするかはいろいろあるけど、今回はこちらを使う

qiita.com

自分でCreate>Shader>何でもいいを作って、↑の記事の中のコードをコピペ

f:id:bibinbaleo:20211210132650p:plain

 

他のシェーダーについてはここでいろいろ試した

bibinbaleo.hatenablog.com

マテリアル作成

新しいマテリアルを作ってさっきのシェーダーを選ぶUnlit>TextureCullFrontMirror

f:id:bibinbaleo:20211210124530p:plain

そして作成したRenderTextureをセットする

f:id:bibinbaleo:20211210124653p:plain

Sphere

Sphereを作って、さっきのマテリアルをセットする

f:id:bibinbaleo:20211210124524p:plain

Sphereを大きくしてカメラを真ん中に置くなどする

f:id:bibinbaleo:20211210124957p:plain

完成

f:id:bibinbaleo:20211210125011p:plain

 

【Unity】XD⇨UnityへのUI反映のための手探りフローメモ

この記事は以下のアドベントカレンダー2の記事です。

qiita.com

「エンジニアリングに興味があるデザイナーやデザインに興味があるエンジニアが知見や想いを書き綴っていくカレンダーです」とのことだったのですが、デザインとエンジニアリングに両方関係してたらいいだろうと思って深く考えず登録してしまった。

私はデザインもエンジニアリングも中途半端にできてできない人間。(どちらに興味があるというよりは、全部一人でできるようになったら楽なのにな〜と思っています)

 

今はXDでUIデザインしたり、それをUnityに反映したり、Unityのフロントエンド実装(UniRxでViewの部分や画面遷移書くとか)をちょっとしたりしています〜

 

状況

小さなチームでXR系のスマホ&PC対応のアプリをUnityで作っています。(今回XR要素は全くないですが)

デザイナーさんエンジニアさんいます。(私は中途半端でデザインチーム兼フロントエンド)

メンバーの誰も大規模なUnityをつかったアプリ業務経験がないし、私も新卒3年目で何も分かってないので手探りでXD⇨UnityへのUI反映のフローを作って半年ぐらい運用してみました。

その記録と悩みです。いい方法じゃないと思うので参考にしないでください・・・

 

基準サイズ

まず一番最初に悩むのが基準サイズ。

今回、スマホもPCも同じUnityシーンで、Unityのマルチ解像度機能に頼るので基準を何にするか難しい。

 

デザイナーさんはiPhoneXのサイズでXDでUI作成したい。812×275

f:id:bibinbaleo:20211203220018p:plain

でもUnity的にはiPhoneXのサイズはそもそも 2,436×1,125とXDの3倍だし 、iPhoneX以降はセーフエリアの関係で実質的にボタンを置ける範囲の縦横比がXDと違う。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bibinbaleo/20210406/20210406162824.png

せめてiPhone8のサイズを基準にしたらセーフエリアのことは一旦考えずに済むけど、デザイナーさん的にはボリュームゾーンであるiPhoneX以降のノッチがあるタイプを基準にしたいそうだ

3x問題について

ちゃんと理解できてなくて今調べたけど、実際のiPhoneデバイスの解像度はXDでデフォルトで作成されるアートボードのサイズの3倍なんだよね・・・

XDの方のサイズをCSSピクセル、実際のデバイスのサイズをデバイスピクセルと呼ぶらしい。

f:id:bibinbaleo:20211203222335p:plain

この二つの解像度については以下の記事が詳しかった。やっとちゃんと理解できた

d-fount.com

私が一人でXDでUIを作ってUnityまで実装してた頃はXDのアートボードサイズもUnityのCanvasの基準サイズもデバイスピクセルで作ってた。その方がUIの書き出しや配置が楽だったから。

でもデザイナーさん曰く、XDなど用に提供されるUIのコンポーネントはCSSピクセルで提供されることが多いので、CSSピクセルのサイズで作りたいとのことだった。

 

結局、XDはCSSピクセルの812*275で、UnityのCanvasの基準サイズはiPhoneXのセーフエリアのデバイスピクセルの2172x1062にして運用した。

Unityの基準をこんなよくわからない数字にしているプロジェクトが他にあるのか不安;;

普通何にするんだろう

 

ちなみにここでUnityの基準と言っているのは、マルチ解像度対応の時はみんなするであろうこの設定のサイズのことです。

https://cdn-ak.f.st-hatena.com/images/fotolife/b/bibinbaleo/20200515/20200515134537.png

bibinbaleo.hatenablog.com

 

セーフエリアについて

XDのほうでは、セーフエリア枠をピンクの枠として書いて、その中にUIを配置するようにしてもらっている

f:id:bibinbaleo:20211203220902p:plain

でもUnityのほうではこのピンクがCanvasの基準だからノッチのないiPhone8だと端っこにUIが配置されてしまう・・・

どうしたらよかったんだろう・・・

 

書き出し

XDでデザインが終わったら随時リンク共有を更新する。

私はXDソフトから直接UIを書き出してたけど、XDを入れていないエンジニア向けにはリンク共有でブラウザから書き出したり、配置をみれるようにした。

 

XDから素材を書き出す時は3倍にして書き出す。最近変わった気もするけど書き出し設定で書き出し先をiOSにすると、設定サイズという項目が出てくる。

f:id:bibinbaleo:20211203225755p:plain

設定サイズは素材がX倍になるという意味じゃなくXDでアートボードをCSSピクセルの何倍で作っていたかを選べばいい。

f:id:bibinbaleo:20211203223914p:plain

qiita.com

今回の場合1x。そしたら今のサイズの1倍,2倍,3倍のサイズのUIが出力されるので3xのものをUnityに入れる。

f:id:bibinbaleo:20211203225821p:plain

 

Unityでの配置

Unityで配置する時はGameウィンドウのサイズをUnityの基準の2172x1062にして作業した。

f:id:bibinbaleo:20211203225740p:plain

UnityでUIを配置する時、大きさ・位置はXDの値を参照する。

大きさはXDの3倍、位置はXDのピンクの枠からの距離×3をUnityのCanvasの端からの距離として配置している。

 

Anchorは配置するときに適宜設定。

f:id:bibinbaleo:20211203225829p:plain

デザイナーさんはマルチ解像度のことまで考えていないときもあるので、端っこなのか真ん中を基準にした方がいいか迷う時は適宜相談した。

 

セーフエリア内にCanvasを自動で収めるのはこちらの記事のスクリプトを使った。

eiki.hatenablog.jp

それについてはこっちに書いた

bibinbaleo.hatenablog.com

確認

配置が終わったらGameViewのサイズをFreeにして幅を変えてちゃんと想定通りに配置されるか確認したり、DeviceSimulatorでiPhoneX系のを選んでセーフエリアで変になってないかなどをみる。

bibinbaleo.hatenablog.com

夢中になってると忘れがちで実際にビルドして変になってること気づくこともあった

悩み

基準とセーフエリア

上のフローの中でも書いたけど、XDとUnityの基準サイズみんなどうしてるんだろう・・・

あとセーフエリア。セーフエリアについてはちゃんと言語化できないけど、UnityでのUIは一時にも色々つまづきポイントがあってつらい・・・

全画面にしたいものとボタンのようにセーフエリア内に配置したいものがある。

背景とボタンだけなら上の記事にあったような階層構造で問題ないけど、全画面スクロールできるマップがうまくセーフエリア外に表示できなかったり。複雑になってきた時うまくいかない・・・

リンク更新

XDはリンク更新がファイルの作成者しかできない。私はデザイナーさんからXDの共同編集者機能でファイルを共有してもらってたけど、私はリンク更新できない><

デザイナーさんに頼んでしてもらうしかないけど、忙しいからな〜

これについてはXDFesでもFigmaに移行した理由として話されてた。

f:id:bibinbaleo:20211203230820p:plain

https://www.youtube.com/watch?v=syvmgX1xc34&t=3115s

次のプロジェクトでは私がファイル作成者になってみた。私の方が暇なはずなので・・・でもどうだろうな〜XDを更新するのはデザイナーさんの方が多いだろうし・・・

Figmaのほうがいいのかな?まだ仕事でFigma使ったことないので共同作業での使い勝手が気になる。

bibinbaleo.hatenablog.com

反映

悩みではないけどXD⇨Unityに変換するアセットもある。XD側で命名をちゃんとしないといけないので大変そう。使った方がいいのかな〜

bibinbaleo.hatenablog.com

 

最後に

ゲーム会社とか大きい組織でどうやってるか知りたい〜

 

ポエム

私はもともとデザイン系の学部でしたが、所属学科はゲームやwebを作ったりデジファボとかやったりと幅広くしていました。

学科長は「デザインもエンジニアリングもわかる橋渡し的存在になりなさい」みたいなことを言っていました。

なんやかんやあって今そういうポジションになりそうです。相変わらず、どちらも中途半端にしかできないクズですが;;

キャリアとか考えないなら、私の願いは一人で全部作れる人間になりたいです。

【Unity】SNSシェア機能を実装できるアセット【NatShare】

いくつかあるみたいなので使ってみる。

UI参考はこちら

bibinbaleo.hatenablog.com

環境:Unity2020.3.20

NatShare

無料のアセット!

assetstore.unity.com

リポジトリもある

github.com

ドキュメント

https://docs.natml.ai/natshare/preliminaries/getting-started

準備

アセットストアから入れた。

f:id:bibinbaleo:20211125155617p:plain

スクリプト1枚だけ・・・?いやいやそんなはずなくない??他の記事見たらiOSのプラグインとかあるよ??

f:id:bibinbaleo:20211125155622p:plain

と思ったらPackagesのほうに入ってた。

f:id:bibinbaleo:20211125164745p:plain

基礎

以下のドキュメントを参考にボタンを押したら以下が呼ばれるようにした

Getting Started - NatShare

    public void TakePhoto()
    {
        // Capture a screenshot
        var screenshot = ScreenCapture.CaptureScreenshotAsTexture();
        // Create a share payload
        var payload = new SharePayload();
        // Add the image
        payload.AddImage(screenshot);
        // Share!
        payload.Commit();
    }

f:id:bibinbaleo:20211126094116p:plain

PCというかUnityEditorで押しても何も起きない。

 

Androidビルドしてみた。

Android API level 24+ (Android N or newer)
iOS 13+

ちなみにNatShare関係ないけどAndroidOS12にビルドするとき、API level31を選ぶとエラーが出て端末にインストールできない・・・なんで

f:id:bibinbaleo:20211125173211p:plain

無事うごいた。

f:id:bibinbaleo:20211126094201p:plain

テキスト追加

こんな感じでテキスト差し込みを追加

// Add text
        payload.AddText("私は今トマシープアプリを楽しんでいます! #トマシープ https://bibinbaleo.hatenablog.com/");

無事できた

 

各SNSでの表示

iOSでも特に何も設定しなくても動いた

f:id:bibinbaleo:20211126143757p:plain

Android

f:id:bibinbaleo:20211126123806p:plain

Twitter

f:id:bibinbaleo:20211126143804p:plain

 

LINE

f:id:bibinbaleo:20211126143807p:plain

Instagram。iOSだとこんな感じで選ぶ画面が出た。でもアカウント変えたらこの画面は出なかった。

f:id:bibinbaleo:20211126143856p:plain

アプリ側で設定したテキストは表示されない。

どこかのサイトに書いてたけどFacebookも同様のはず

f:id:bibinbaleo:20211126143810p:plain

AndroidだとそもそもInstagramの投稿画面に行かなかった。ただInstagramのアプリが開いた。

私の環境の問題かな?

 

参考

nobushiueshi.com

dofilabs.blogspot.com

social-connector

4年前で更新が止まっている

github.com

nn-hokuson.hatenablog.com

使ってない

最後に

撮影→プレビュー→シェアボタンってしたいので改善しないといけない。

Rect2DMaskのソフトシャドウ【uGUI】

ソフトマスクを調べてた時にちょうどこちらの記事が出てきた

shibuya24.info

RectMask2Dだとソフトにできるらしい。

これでスクロールビューの下の部分をボヤーっと出来たらいい感じになりそう!と思って試した。

 

結果的にImageとかtextはできたけど、TextMeshProには適用されなかった;;

TextMeshPro

f:id:bibinbaleo:20211025152502p:plain

ふつうのText

f:id:bibinbaleo:20211025152507p:plain

Image

f:id:bibinbaleo:20211025152727p:plain

シェーダーが違うのかな

あとそもそも下だけグラデーションっていうのができないからどっちにしろ使えない

f:id:bibinbaleo:20211025152504p:plain

 

 

uGUIのボタンにソフトシャドウを付けたい

uGUIの機能で付けられるShadowはくっきりしている。

f:id:bibinbaleo:20211025150705p:plain

もやもやっとしたのを付けたい

方法1:影画像を背景に置く

もやもやとした画像をXDとかで作って、ボタンの下にImageとして置く。

f:id:bibinbaleo:20211025150156p:plain

f:id:bibinbaleo:20211025150701p:plain

きれいだけど、Unityのヒエラルキー的に影のほうが上にならないといけないので変な感じ;;Buttonの子に置きたいのに

f:id:bibinbaleo:20211025150659p:plain

方法2:ボタン画像に初めから影を付けておく

XDでドロップシャドウでボタン画像に影を付けて書き出せばできる。

f:id:bibinbaleo:20211025150944p:plain

f:id:bibinbaleo:20211025150947p:plain

でも書き出された画像サイズがXDでの見た目のボタンサイズと違う。ドロップシャドウ分が追加されてしまう。XDの指示通りにUnityに配置してるとこれはつらい;;

f:id:bibinbaleo:20211025151042p:plain

方法2:アセット

UnityAssetで探す。

これだけかな?これニューモフィズムできるって紹介されてたやつだ

assetstore.unity.com

以下の記事のはなくなってた。

baba-s.hatenablog.com

最後に

公式で付けれるようにならないかな

 


UnityのuGUIで逆マスクとモワモワMask

 

UnMask

大きい画像の中の一部を切り抜く逆マスクは既存のuGUIのマスク機能じゃできないらしい。

以下のアセットを使えば逆マスクができる

github.com

kan-kikuchi.hatenablog.com

OpenUPMでもPackagManagerのgitでも入れられる。ちゃんとしてるー

OpenUPMの入れ方よく分からないからPackageManagerで入れた。以下のURLを打てばいい

https://github.com/mob-sakai/UnmaskForUGUI.git

ヒエラルキーの構造が結構複雑で分かりにくかった。直感的じゃない。

でもできた。一つの画像に対して複数UnMaskもできたから、チュートリアルで黒い半透明のパネルをUIの部分だけ切り抜くみたいなのもできた。

 

スクショとかとってたけど、昔すぎてどっかにいちゃった・・・

もわもわMask

グラデーションのかかっているMaskも既存のuGUIじゃできない

いくつかある。試してないけど

上の逆マスクと同じ作者さんのもの

github.com

baba-s.hatenablog.com

 

あとRect2DならUnity2020からグラデーションができるらしい。

 

iOSのスクロールーバーのデザインとuGUI

iOSのスクロールバーのデザイン

Appleが配布しているXDのガイドライン?みたいなのには載ってなかった

safariだとこんな感じ。

f:id:bibinbaleo:20210914154932p:plain

f:id:bibinbaleo:20210914154935p:plain

半透明で、背景の色の明度?によって白と黒と変わるっぽい。どうやって判定してるんだろう?

f:id:bibinbaleo:20211006214219p:plain

設定アプリでも表示される

f:id:bibinbaleo:20211006214226p:plain

uGUI

uGUIのスクロールバーをiOS風にした。バーの部分を丸っぽいのにして細くして、背景を透明にしたら再現できる。

ただ画面全面地図見たいな、スクロールするコンテンツの上にバーを出すのはできなかった。

背景を透明にしても、Cameraの後ろのが映る

どうしたらいいんだろう・・・

docs.unity3d.com

あとiOSみたいに触れると表示されるのがいいってデザイナーさんに言われた。スクリプト書かないと無理そう。結局、スクロールバー非表示にした

tetsujp84.hatenablog.com

nekobata.blog.jp

qiita.com

 

 

忙しいし自分の技術も足りなくて色々中途半端で放置してるの疲れた・・・

GooglePlayConsoleへのadbファイルのアップロード時のエラー【Unity】

内部テストするためにabbファイルをGooglePlayConsoleをあげたときに出たエラーなど

Androidのabbビルドが150MB超えた

f:id:bibinbaleo:20210825122418p:plain

develop.hateblo.jp

unagirabbit.hatenablog.com

developer.android.com

解決方法

軽量化した

bibinbaleo.hatenablog.com

APIレベル

150MB以下のをアップしたら次はこんなエラーが出てアップロードできなかった。

f:id:bibinbaleo:20210825153444p:plain

現在、お客様のアプリは API レベル 29 を対象にしています。セキュリティとパフォーマンスが最適化された最新の API を利用するには、API レベル 30 以上を対象にする必要があります。アプリの対象 API レベルを 30 以上に変更してください。詳細

developer.android.com

え、Unityの設定どうしたらいいんだ?多分TargetAPIの問題?

f:id:bibinbaleo:20210825153441p:plain

TargetAPIってなに???調べてもよく分からなかった。

qiita.com

解決方法

とりあえず原因は、今ローカルにあるAndroidの最高SDKが29なせいらしい

blog.yucchiy.com

この記事にあるように一旦どのUnityプロジェクトでもいいのでTargetAPIを30にしてビルドすると、ローカルにAndroid Level 30のSDK?が入る。


これでhigest installedが30になるので、AutomaticにしてもTargetAPIが30になってOK!

完全にブロック

新しいエラーが出た

この APK は、バージョン コードがより高い 1 つ以上の APK で完全にブロックされているため、ユーザーに配信されません。この APK をリリースから削除するか、このリリースに含まれている APK の対象やバージョン コードを確認してください。

ビルドバージョンが前より1個以上高いと出るらしい。

www.hirohomme.com

前のエラーが出たからビルドしなおしたら、ビルドバージョン上げろと言われたので1→2に上げただけなのに;;まだリリースしてないのに。

解決方法

⇨エラーではじかれたアップロードが残ってたせいだった。リリースを編集でアップロード欄?かどこかで消去したら治った。

f:id:bibinbaleo:20210825172302p:plain

その他

アプリの APK(バージョン コード 1)が権限 android.permission.READ_PHONE_STATE, android.permission.RECORD_AUDIO, android.permission.CAMERA をリクエストしています。アプリの APK でこの権限を使用するには、プライバシー ポリシーの設定が必要となります。
エラー
このアプリが COVID-19(新型コロナウイルス感染症)の接触確認アプリまたは感染状況やワクチン接種状況を確認するアプリであるかどうかを申告してください。

・マイクの許可使うならプライバシーポリシー設定せよ

・コロナ関係のアプリ化も無条件で設定せよ

 

内部テストでもこの二つは設定しないといけないのか。

左下のほうのポリシー>アプリのコンテンツから設定できる。

f:id:bibinbaleo:20210825172812p:plain

こんなのできてたんだね~この項目が消える日が早く来るといいね

f:id:bibinbaleo:20210825172551p:plain

f:id:bibinbaleo:20210825172918p:plain

最後に

XCodeも嫌いだけど、GooglePlayConsoleも初期はいろいろエラー言ってきてめんどくさい~

ビルドバージョンをUnity側で上げないといけないのもめんどい。

Build Reportと軽量化【Unity】

Androidのapkが200MBぐらいになってGooglePlayStoreにアップできない><

軽量化してみる

そのために何が容量を食っているか見る

Build Report Inspector

qiita.com

Unityの公式アセット。

Build Report InspectorはPackageMangerの検索から出ないので、git urlとして「com.unity.build-report-inspector」を入力する

f:id:bibinbaleo:20210906125844p:plain

入れたらビルドする。

そしてWindow>Open Last Build Reportでファイルの場所が表示されるので選択

f:id:bibinbaleo:20210906110100p:plain

SourceAssetsをみたら具体的なファイル名が表示されていた。プロジェクトで使っていない画像ファイルも含まれていた><

これを消したけどまだ160MBぐらい::

 

日本語のフォントファイルがかなり容量を食っている。

qiita.com

Unknown

35MBのUnknownファイルがある。いったい何なのか

f:id:bibinbaleo:20210906111649p:plain

確実にこれのせいじゃん・・・

→使っている動画ファイルでした。なぜunknownとなったのだろう

Build Report

BuildReportInspectorを使わなくてもBuildReport見れるみたいだけど、どこにファイルあるんだろう

qiita.com

軽量化

TextがTextMeshProと普通のTextが混ざっていて、無駄にフォントファイルがあった。

TextMeshPro用に変換したら元のファイルデータは不要。

変換する

kan-kikuchi.hatenablog.com

TextMeshPro用のフォントを用意しておけばTextコンポーネントの上についているボタンで変換できる。

f:id:bibinbaleo:20210906165700p:plain

何かにもともと入っていたOpenSansは置き換えられたけど、自分でTextMeshPro用に作ったNotoSansだとうまく変換できなかった

f:id:bibinbaleo:20210906165704p:plain

名前を同じにしたらいいのかと思って、TextMeshProのほうの名前をもとのフォントと同じにしたけどダメ。

漢字とひらがなで分けているからダメなのか?どうやって置き換えの判定しているんだろう。

 

最後に

この記事を書いていた翌日になんとこりんさんがビルドサイズを小さくする記事を公開していた!
すごく具体的で参考になりそう

 

VRMをVRChat用に変換してアップ 【Unity2019/SDK2】

Unity2019

VRChatの推奨Unityのバージョンが2019にあがった。

その状態でのVRMアバター変換やってみる。

前回やったときはUnity2018だった。

bibinbaleo.hatenablog.com

2021/8/9現在推奨バージョンがUnity2019.4.29

ちなみにまた間違えてUnity2020で開いてSDK入れてエラー出ちゃった;;

Assets\VRCSDK\Dependencies\VRChat\Editor\EnvConfig.cs(416,28): error CS0117: 'PlayerSettings' does not contain a definition for 'SetVirtualRealitySDKs'

SDK

変換ツールは公式ではUnity2019での動作確認されていない。

booth.pm

でも動く

今回はこのバージョン使った

VRM Converter for VRChat-27.1.1 + UniVRMExtensions-1.6.3 + UniVRM-0.79.0

 

VRChatのSDKは2種類あるけど、まだSDK2でいいかな?

f:id:bibinbaleo:20210829204205p:plain

2にした。

VRCSDK2-2021.08.04.11.23_Public

変換

あとは同じ。(っていうかUnityのバージョン上げた以外全部同じやん。)

VRMアバターを入れる。VRoidMobileで作ったアバター。

hub.vroid.com

変換のSDKにunivrmは入っているのでアバター入れるだけで大丈夫。

f:id:bibinbaleo:20210829211415p:plain

シーンにおいて、選んだ状態でVRM0> Duplicate and Convert for VRChat

f:id:bibinbaleo:20210321170231p:plain

 

変換されたらVRChat SDKで変換

f:id:bibinbaleo:20210829211252p:plain

注意が出るけど大丈夫だった

f:id:bibinbaleo:20210829211224p:plain

かわいい

f:id:bibinbaleo:20210829211757p:plain

アップできた!

f:id:bibinbaleo:20210829212505p:plain

(おまけ)買ったアバターアップ!

Vketで知って初めてアバターかった!

booth.pm

これをVRChatにアップするには、ユニティちゃんトゥーンシェーダー を入れる必要があるらしい

今Ver.2.0.7

unity-chan.com

ダウンロードしたけどどれ入れたらいいんだ??一番下のでいいのかな

f:id:bibinbaleo:20210829205357p:plain

ちゃんと表示された

f:id:bibinbaleo:20210829210235p:plain

f:id:bibinbaleo:20210829210232p:plain

設定

f:id:bibinbaleo:20210829210228p:plain

他の方が作ったアバターアップするの初めてだから設定あってるか不安だな

・VRChat利用:可(publicでのアップロードは不可)

って書いてたからPrivateにした。そこだけ気にしたらいいのかな?

 

アップしたら視点が高くなってた

設定見たら確かに身長と合ってない。変更した

f:id:bibinbaleo:20210829214536p:plain

これで直った!

f:id:bibinbaleo:20210829214532p:plain

かわいい

f:id:bibinbaleo:20210829215335p:plain



最後に

今まで使っていたアバターに少し飽きたからVRoidMobileで新しく作ったんだけど、昨日終了間際に行ったVket6で素敵なアバターに出会ったので買った~

白髪たまらない

f:id:bibinbaleo:20210829222235p:plain

booth.pm

1500円でVRMもVroidファイルもついているのありがたい。

Vroidファイルは\Documents\vroid\avatarsに置く

これで衣装も変更できる!

f:id:bibinbaleo:20210829223332p:plain

肌テクスチャ置き換え

f:id:bibinbaleo:20210829223328p:plain

かわいい系もいいな~

f:id:bibinbaleo:20210829223322p:plain

TextMeshProの英語フォントとかウエイトとか

Version3.0.6

英語フォント

前回日本語フォントのNotoSansJPは変換した。今回は英語フォントを変換したい。

bibinbaleo.hatenablog.com

使うのはRobotフォント。数字だけ使えればいい

https://fonts.google.com/specimen/Roboto

 

良い設定方法が分からない><

適当に設定したらなんか白い薄い膜がついた・・・

f:id:bibinbaleo:20210803111710p:plain

Atlas Resolutionを128*128にしてみたら解像度悪いし数字そろってないしなんなん??

f:id:bibinbaleo:20210803112131p:plain

この設定にしたらいい感じになったと思う

f:id:bibinbaleo:20210803111713p:plain

f:id:bibinbaleo:20210803140514p:plain

設定項目の説明

ググっても日本語フォントばっかり出てくる。

公式のサイトどこだろう?ここか?

docs.unity3d.com

FontAssetCollectionのリンク押すとYoutube動画に飛ぶ><

www.youtube.com

こちらの記事は詳しかった

qiita.com

あとUnityデザイナーズバイブルの本にもTextMeshproの項目があった

Weights

生成したassetsに他のWeightを設定できる項目があるので設定した。

f:id:bibinbaleo:20210803113022p:plain

これをどこで切り替えるんだ?TextMeshPro側に選ぶ場所なくない?

f:id:bibinbaleo:20210803113251p:plain