tarosansei | Husky Studios

2022年10月29日2022年10月29日

Word Pressのブログの幅を広げた！

ブログの幅が狭い感じがしたので、少し広げたいなと思って、広げました。
カスタマイズの中の「拡張css」というところで、以下のcssを書いてあげれば広がりました。

以下のサイトを参照させていただきました。ありがとうございました！
https://xn--68j3b2d8le4af20azcz743e.com/pc/wp/wordpress-theme-twenty-seventeen-list-of-child-themes-created#2-1-21200

@media screen and (min-width: 48em) {
    .wrap {
        max-width: 1200px;/*記事・サイドバー・余白の全幅*/
        padding-left: 2em;/*記事の左余白*/
        padding-right: 2em;/*サイドバーの右余白*/
    }
    .has-sidebar:not(.error404) #primary {
        float: left;
        width: 67%;/*記事幅*/
    }
    .has-sidebar #secondary {
        float: right;
        padding-top: 0;
        width: 29%;/*サイドバー幅*/
    }
    .navigation-top .wrap {
        max-width: 1200px;/*メニューバー幅*/
        padding: 0.75em 3.4166666666667em;
    }
    .site-content {
        padding: 2.5em 0 0;/*メニューバーと記事の間隔*/
    }
}

2022年10月29日2022年10月29日

Virtual Market2022 Summerに田植機を出展しました！

今回は、Quest用のワールドでの出展にチャレンジしてみました！
特に作り方は今まで大きく変わらなかったのですが、結構制限がきつかったです。
特に最後まで困ったのは、テクスチャの枚数制限でしょうか。（８枚まで）
ブース全体を作るとテクスチャ８枚はすぐに行ってしまいました。
あと、Quest特有の問題だと思うのですが、いつもは複数のモデルをMeshBakerでモデルもテクスチャもひとまとめにしているのですが、これが使えなかったことが痛かった。。。
よくわからないのですが、MeshBakerで結合したモデルはVR空間で見るとうまく表示してくれませんでした。（確か、色がついてくれなかったような気がします。）
結局、モデルとテクスチャの結合ができなくて、結果、テクスチャ枚数を減らせなくなってしまい、最後まで困ったという感じでした。
あと、地面に水面シェーダーを使ったのですが、これもQuestでは表示してくれませんでした。これは完全にGPUの違いの影響だと思われます。

とにかく、Questワールドは、今までのワールドで出展してきていたので、アップロードまでの手順はスムーズに行きましたが、表示されない問題のところでつまずいた感じでした。おそらく、いきなりQuestワールドで出展したら「全然うまくいかない～！」ってなってイライラしてくる可能性が高いので、やはり初めは通常ワールドで出展したほうが良さそうな気がしました。（だいたい通常ワールドだったらUnityで表示されていた通りにVRChatでも表示される）

冬のVirtual Market2022も出展したかったが、もう締め切り終わっていた。。。

モデルは以下のBOOTHで販売しています。（１００円）
https://taroyan3rd.booth.pm/items/4021342

2022年8月17日2022年8月17日

Gatherの使い方（ホスト編②～spaceの改造～）

前回、spaceを作成しました。
テンプレートを使用して作成すると始めから、ある程度の機能がspace内に備わっているので、そのまま使用しても全然OKだと思います。以下、spaceを改造するときの手順になります。

①誰でも改造できるように設定する。
　改造の権限はオーナーが持っており、オーナーだけにすることもできれば、オーナー以外の誰でも改造できるように設定することもできます。
　
　Settings→Spaceタブ→Space Customizationをクリックし、Global Buildのチェックをオンにすると誰でも改造できるようになります。

②オブジェクトをspaceに配置する
　右下のトンカチのアイコンをクリックする。

そうすると、右側にオブジェクトのリストが表示されるので、あるオブジェクトを選択して、space上でクリックするとそのオブジェクトを配置することができます。
　以下の画像は、ホワイトボードを選択してspaceに配置しようとしている画像です。

③Mapmakerでspaceを改造する 上の画像の「Edit in Mapmaker」をクリックするとブラウザの別タブでMapmakerが表示されます。このMapmakerでは主に以下の３つことができます。
　１．オブジェクトの配置や削除
　２．タイルの効果の設定
　３．壁や床の見た目変更
　上記３項目は、左上のアイコンをクリックすることで選択できます。

オブジェクトの配置や削除は、特別な操作はあまりないので割愛させていただきます。
タイルの効果の設定は、クリックするとspaceの見た目が変わります。

これは、どのようなタイルなのかを示した表示になっていて、タイルの種類は右側のリストに表示されています。クリックすることでspace内の該当タイルがハイライトされます。

・Impassable・・・人が歩けない場所
・Spawn・・・ログインしたときに初めにいる場所
・Portal・・・他のルームやスペースへテレポートするタイル
・Private Area・・・プライベートエリア（この中にいる人達だけでしか会話ができない。エリア外の人には会話は聞こえない。）
・Spotlight・・・ルームにいる全員へ話しかけたいときに使うタイルこれらの中で特によく使うのは「Private Area」かと思いますので、少し説明しておきたいと思います。 ■プライベートエリアの設定
「Private Area」をクリックすると、下にコンボボックスが出てくる。

このコンボボックスは、現在あるPrivate Areaの番号になります。
同じPrivate Area番号内にいるユーザー同士で会話ができるという仕組みになります。
（例えば、「3」のエリアに２人いたら、その２人同士で会話できるが、「3」と「2」のエリアに２人いたら、その２人は会話できません。）
また、「Create a new area」をクリックすると、新しいPrivate Areaの番号を指定することもできます。
例えば、「10」を指定して、space内の10の周りをドラッグすると、「10」のエリアを増やすことができます。また、エリアは繋がっていなくてもいいようです。

■壁と床の見た目の変更 「Walls & Floors」をクリック

すると、左上に「Walls」と「Floors」が表示されるので、壁を改造したい場合は「Walls」、床を改造したい場合は「Floors」をクリック

床の場合を例に以下は記載します。床をクリックすると、右側に床の見た目のリストが表示されます。

ここから、使いたいタイルを選択し、space上でドラッグすると床を配置することができます。以下は、黄色の床を配置した例です。

最後に

細かい機能は他にもたくさんあるのですが、とりあえず使いそうな改造機能だけ紹介しました。

■Gatherの使い方（ゲスト編～参加するまで～）の記事はこちら

Gatherの使い方（ゲスト編①～参加するまで～）

■イベントでのGatherの使い方（ゲスト編～ルーム内操作～）については以下

Gatherの使い方（ゲスト編②～ルーム内操作～）

■Gatherの使い方（ホスト編①～新しいspaceの作り方～）については以下

Gatherの使い方（ホスト編①～新しいspaceの作り方～）

2022年5月18日2022年8月17日

Gatherの使い方（ホスト編①～新しいspaceの作り方～）

■はじめに
　項目が多いため、よく使いそうな項目だけをピックアップしました。
　項目の用語については、個人的に勝手に書いているだけなので正確でない可能性がありますのでご注意ください。今回は、イベント用として新しいspaceを作ってみたいと思います。
　いろんな作り方があるようですが、作り方は大きく変わらないと思います。

■手順
　①Gatherにログインする（URL：https://www.gather.town/）

②ログインしたら、画面右上の「Create Space」をクリック

③そうするとポップアップが出てくるので、３種類の中から選択できますが、今回はどれも選択しません！！
　　おそらくですが、以下のような種類だと思います。
　　　・仕事用
　　　・イベント用
　　　・交流用

　　今回は、３種類のどれも選択せず、左下にある「Advanced setup for experts」を選択しました。

④すると、テンプレートから好きなSpaceを選べる画面に遷移しますので、好きなテンプレートを選んでください。
　　左の項目をクリックするといろんなジャンルのテンプレートが選べます。
　　今回は「Cozy Office」を選んでみました。

⑤選択すると、右側にバーが出てきますので、以下を入力し、「Create space」をクリック
　　・Space name
　　・スペースを作る目的を選択（What are you building this space for?）

⑥Spaceが作られて、いきなり入室画面になりますので、入室します。
　　（「Join the Gathering」をクリック）

⑦すぐにルームが作られて、入ることができました。

⑧もう一度ログインして、ホーム画面の左上の「My spaces」をクリックすると、新しく作ったSpaceが登録されていることが確認できます。

■Gatherの使い方（ゲスト編～参加するまで～）の記事はこちら

Gatherの使い方（ゲスト編①～参加するまで～）

■イベントでのGatherの使い方（ゲスト編～ルーム内操作～）については以下

Gatherの使い方（ゲスト編②～ルーム内操作～）

■Gatherの使い方（ホスト編②～spaceの改造～）については以下

Gatherの使い方（ホスト編②～spaceの改造～）

■次回
　- ホスト側のGatherの使い方におけるSpaceのカスタマイズについて書きたいと思います。

2022年4月30日2022年8月17日

Gatherの使い方（ゲスト編②～ルーム内操作～）

■はじめに
　項目が多いため、よく使いそうな項目だけをピックアップしました。
　項目の用語については、個人的に勝手に書いているだけなので正確でない可能性がありますのでご注意ください。

■基本的なキー操作
　- ADSWキー　：キャラクターの上下左右移動
　- Xキー　：ホワイトボードなど、何か反応するものの前で押すと、何かが開く
　- Fキー　：クラッカーが出せる！にぎやかし用
　- Zキー　：踊る！にぎやかし用

■退出する場合
　ブラウザを閉じれば退出 ■マップ内のオブジェクトについて
　- プライベートエリア
　　下の画像にあるように絨毯が敷いてある場所はプライベートエリアとなっていて、この中に入ると、周りが少し暗くなる。この状態の場合、同じプライベートエリアにいる人だけでしか会話ができなくなり、エリア外の人には会話が届かなくなり、逆にエリア外の会話も聞こえなくなります。一人でもくもく作業をしたいというアピールをする場合にも使えるかも。

– スポットライトエリア
　　下の写真では赤色の絨毯の上がスポットライトエリアに設定されています。（このエリアの設定はホスト側で自由に設計できるため、見た目は作る人によって変わります。）
　　このエリアに入ると、入った人がスポットライトモードとなり、カメラ画面にメガホンマークのようなアイコンが表示されます。そして、入った人が発言するとその発言は、ルーム全体へ届くようになりますので、一斉送信したい場合などに活用できます。（プライベートルームにいる人にも声が届きます）

■画面左下のアイコンについて
　①Gatherの設定
　②キャラクターアイコン（選択はできない）
　③キャラクターの詳細設定
　④マイクの有効無効切り替えアイコン
　⑤カメラの有効無効切り替えアイコン
　⑥ジェスチャーアイコン
　⑦画面共有設定
　⑧手を上げるアイコンがキャラクターの上に表示
　⑨ミニマップ
　⑩写真撮影ボタン

■①Gatherの設定
　主に使う部分は、カメラ、マイク、スピーカーの切り替えくらいかと思います。

■③キャラクターの詳細設定
　Change Character　：キャラクターの見た目を替える
　Turn On Quiet Mode　：これにすると近くにいる人としか話ができなくなるらしい。（あまり使ったことはない）
　Respawn　：もう一度ルームに入りなおす（キャラクターが初期位置へ戻る）

■⑥ジェスチャーアイコン
　このアイコンをクリックすると、キャラクターの上にアイコンが表示される。
　意思表示として使える。
　Editをクリックすると、他のアイコンに切り替えることもできます。

■⑦画面共有設定

■⑧手を上げるアイコンがキャラクターの上に表示
　- おそらく、挙手をしたい場合などに使うんだと思います。（投票や確認などで使用？）
　- 挙げたら挙げっぱなしになるので、またアイコンをクリックして消す必要がある。

■⑨ミニマップ
　- クリックするとオブジェクトが無くなり、全体の部屋のマップが表示され、自分がどこにいるのかがわかるようになるようです。

■⑩写真撮影ボタン
　- クリックすると「Photo Mode」というポップアップが表示され、「Take photo」をクリックすると画像を保存してくれます。
　- Photo settingsの設定を変更することで、カメラのオンオフ（顔出しが嫌な人などがいた場合に使えそう）やキャンバスの拡大率を設定できます。

■画面右下アイコンについて
　①Info board（情報ボード）
　②Build tool（オブジェクトの配置）
　③Calendar（スケジュール）
　④Chat（チャット）
　⑤Participants（参加者）

■①Info board（情報ボード）
　- クリックするとInformation Boardのポップアップが表示される。
　- 全体連絡的な目的で使えるのかもしれない。

■②Build tool（オブジェクトの配置）
　- マップ上に色々なオブジェクトを配置することができる。
　- また「Erase」を選択することで、配置されたオブジェクトを消すこともできる。
　- このBuild toolは、ホストがゲスト側のオブジェクト配置を許可していないと使えないので注意！

■③Calendar（スケジュール）
　- 次回のイベントなどのスケジュールを管理することができるようだ。まだあまり使い方を知らない。。。

■④Chat（チャット）
　- Zoomのチャット機能とほぼ同じ。
　- 文字でルーム内にいるメンバーとチャットできます。

■⑤Participants（参加者）
　- 参加者一覧を見ることができます。（今は一人だけですが。）

■Gatherの使い方（ゲスト編～参加するまで～）の記事はこちら

Gatherの使い方（ゲスト編①～参加するまで～）

■Gatherの使い方（ホスト編①～新しいspaceの作り方～）については以下

Gatherの使い方（ホスト編①～新しいspaceの作り方～）

■Gatherの使い方（ホスト編②～spaceの改造～）については以下

Gatherの使い方（ホスト編②～spaceの改造～）

■次回
　- ホスト側のGatherの使い方を書きたいと思います。

2022年4月29日2022年8月17日

Gatherの使い方（ゲスト編①～参加するまで～）

同ソもくもく会というもくもく勉強会のイベントでZoomを使っていたのですが、最近Gatherというオンライン会議のサービスに切り替えました。
そこで、使い方がわからなくならないように、メモしておきたいと思います。
まずはゲスト編として、イベントに参加する側の使い方をまとめておきたいと思います。
後で、ホスト側（開催する側）の使い方もまとめておきたいと思います。

■ Gatherとは
2Dのマップ内でドット絵のキャラクターが動き回り、同一空間内で参加者同士がワチャワチャできるサービス。カメラやマイク機能もあるので、zoomのようなオンライン会議もできる。

■ 参加方法
・まずはGatherの招待リンクをホスト側からもらう。
　（https://app.gather.town/invite?token={〇〇〇〇}）
・ブラウザで招待リンクを開く
　初めての場合は、マイクとカメラのアクセス許可をするかどうか聞かれるので、「Allow」にしておく。（たぶんブロックしておいても、後で設定で許可はできると思います。）

初めての場合は、以下のようなGatherの画面になっているはずなので、必要な項目の設定をする。

設定項目
　　- キャラクターの名前（Enter your nameのところ）
　　- カメラの選択
　　- マイクの選択
　　- スピーカーの選択
　　- カメラ、マイクを入室時にONにするかどうか（右上のカメラ画面内のアイコン）
　とりあえず、今のキャラクターのままでよければ、「Join the Gathering」ボタンをクリックして入室する。

・（任意）キャラクターを編集する場合
　「Edit Character」ボタンをクリックすると、ドット絵のキャラクターを編集できます。
　基本的に、「Base」「Clothing」「Accesories」「Special」の項目を選択していくだけです。

そのあと、「Next Step」ボタンを押すと、名前を決める画面になるので、入力する。

「Finish」ボタンを押したら、初めの入室するかどうかの画面に戻る。

・入室後
　まずは、チュートリアル用の2Dマップへ飛ばされますので、そのまま進めていきます。

チュートリアルの流れ
　　- まずは「ADSW」キーでキャラクターを移動させて、マップの青枠のところまでキャラクターを移動させる。

– カメラ、マイクのミュートとミュート解除を行う。
　　　切り替えをチカチカ行えばOK

– 反応するオブジェクトの前に立ち、「Xキー」を押して反応させる

– そうすると反応した画面が表示されるので、右上の「×」をクリック、もしくは「Xキー」を押下すると閉じる。

– そうすると、再度2Dマップに戻るので、見てみると、マップの島の右上に入口らしきものが生成されている。
　　　（つまり、チュートリアルが終わって、あなたは招待されているルームへ入ることができるようになったということみたいです。）

・門をくぐると、招待されたルームへ移動することができます。
　- 入室後、「あなたは不在の時に自動でミュートになります」というメッセージが出る場合がありますが、その場合は「Got it」をクリック

・これで入室は完了しましたので、あとは自由に動き回ってみてください。

■（任意）ログイン
　今のままでは、Gatherにログインはしておらず、ゲストとして入室している状態のようです。そのため、今後継続的にGatherを使用していきたい方は、Gatherのアカウントを作成しておいたほうがいいと思います。ログイン方法は以下になります。
　- 画面左下のグレープアイコンをクリック

　- 「Sign In」をクリック

– あとは、Googleのアカウントでサインインするか、Emailでサインインするかを選択して、Gatherのアカウントを作成してください。

■イベントでのGatherの使い方（ゲスト編～ルーム内操作～）については以下

Gatherの使い方（ゲスト編②～ルーム内操作～）

■Gatherの使い方（ホスト編①～新しいspaceの作り方～）については以下

Gatherの使い方（ホスト編①～新しいspaceの作り方～）

■Gatherの使い方（ホスト編②～spaceの改造～）については以下

Gatherの使い方（ホスト編②～spaceの改造～）

2022年3月1日2022年3月1日

Brackeys Game Jam 2022.1に参加してみた！

少し時間的に余裕ができたので、Brackeys Game Jam2022.1という日本でいうところのunityroomの1週間ゲームジャムのようなイベントに参加してみました！

UnityでWebGLのゲームを作成しました。

今回はゲーム自体は非常にシンプルで、操作はクリックだけど3D謎解きゲームになっています。アイテムなどをクリックして探索をして、暗号を解いて出口から出ればクリアとなります。ゲームはシンプルですが、今回のゲームでは結構内部的にしっかり作りました。特にこだわったところは以下になります。

・UniRx、UniTaskをなるべく使うようにしました。
・マスターデータの管理にJSONファイルを使い、JSONファイル内のデータはExcelで作成するようにしました。

また、今後は以下を改善したいと考えています。
・ExcelからJSONファイルへの書き込みの自動化（Unityエディタ拡張か、Excelマクロか）
・今回は状態管理的な機構をゲーム内に入れなかったが、入れておいたほうがよかったかも。（今はポーズ中、プレイ中、初期化中、タイトル画面中など）

プレイ動画は以下になります。

ゲームのURLはこちら
（WebGLなのでブラウザでプレイできますが、PCの要求スペックが高めかもしれません）
https://tarosansei.itch.io/prisondream

2022年2月10日2022年2月10日

Substanceでローポリモデルにハイポリの凹凸をノーマルマップとしてベークする方法

色々なサイトにやり方が書いてありますが、いつも忘れてしまうので自分用にまとめておきました。

【手順１】
ハイポリモデルを何かダウンロードしてくる。
今回は、「Sculpture showing “St. Anna” from 18th century」を使用させていただきました。
https://sketchfab.com/3d-models/sculpture-showing-st-anna-from-18th-century-f46414a1d86a42349e6cdb046f892a4e
ダウンロード形式は「obj」を指定

【手順２】
Blenderでハイポリモデルをimportする。

【手順３】
まずは、このハイポリをfbxファイルでexportする。

export設定は自由だが、自分は以下のような感じ。

【手順４】
選択中のハイポリモデルにモディファイア「Decimate」を適応して、ポリゴンを削減する。
Decimateのほうがリメッシュよりも、UVを壊さないから便利らしいです。

Ratioを1.0から0.1とか、小さい数値にすると削減できるので、目標の削減値になったら、「apply」を適応して、ポリゴンを削減する。

【手順５】
ポリゴンを削減したモデルをfbxファイルでExportする。
設定は、ハイポリの時と同じでよい。
ファイル名は「Statue_lowpoly.fbx」などのようにローポリと分かるように書き出しておく。

【手順６】
Substance Painterを立ち上げて、New projectでローポリを開く。
Normal Map FormatはBlenderの場合は、OpenGLにしておく。

【手順７】
TEXTURE SET SETTINGS内にあるMESH MAPSのところにある「Bake Mesh Maps」ボタンをクリックする。

【手順８】
High Difinition Meshesの右側にあるメモのようなアイコンをクリックして、ハイポリのfbxファイルを選択する。
また、Matchのところは、「By Mesh Name」に設定しておく。
そのあと、「Bake selected textures」をクリックするとベーク開始

【手順９】
手順８まで完了すると、MESH MAPSにベークされたテクスチャがセットされる。
よくわからないが、LAYERSで自分でペイントしたテクスチャとは別にデフォルトでセットされるテクスチャとなるようだ。（説明が難しい）
とりあえず、これで凹凸がリアルにつくようなったと思う。（ハイポリの凹凸がノーマルで焼き込まれるので）

【手順１０】
あとは、Substance PainterのLAYERSでいつも通りテクスチャをペイントしていけばOK

【手順１１】
テクスチャ作成が終わったら、テクスチャを書き出す。

【手順１２】
設定は自由だが、Unityの場合は添付画像のように設定してExportボタンをクリック
主な設定箇所
・Output directory 保存フォルダ
・Output templete どの形式で出力するか
・File type pngかjpegかなど
・Size 1024pxで出力するかなど
・Padding 不明（UVの各ポリゴンの境界をどうするかなのか？）

2021年12月26日2021年12月26日

unityroomへアップロードするときのファイル拡張子が「.gz」の件

Compression FormatをGzipに変更しても、結局ビルドされるファイルが「.unityweb」だったのでどうすればいいのか迷ってしまった。

結論としては、「.gz」のファイルでビルドされるわけではなかった！
なので、「.unityweb」でビルドされたファイル群を手動で「.gz」にファイル名を変更したのちに、今までと同じようにunityroomへアップロードすれば問題なくプレイできた。

ちなみに、自分のサーバーなどで動作確認する場合は、拡張子を「.gz」にすると動かなかった。「.unityweb」に戻すと正常に動作した。

2021年12月26日2021年12月26日

UnityのStandard Asset内のスクリプトで自分のスクリプトの変数にアクセスできない問題

非常にハマってしまったので、メモで残しておきたいと思う。

何をやりたかったかというと、UnityのStandard Asset内にある、FPS用のプレハブ「FPSController」を使って、FPSゲームを作ろうと思っていた。しかし、このプレハブにアタッチされているスクリプト「FirstPersonController.cs」内を編集しようとしたときに問題が発生した！GameManagerクラスを自作し、このクラスをシングルトンにしていて、このクラス内の変数に「FirstPersonController.cs」内でアクセスしようと思っても、アクセスできなかったのだ。原因は非常にシンプルだった。「Standard Assets」というフォルダ名は特殊フォルダーになるらしく、自作スクリプトよりも先にコンパイルされるらしい。そのため自作スクリプトへはアクセスできないということだった。

https://docs.unity3d.com/ja/current/Manual/ScriptCompileOrderFolders.html

対策としては以下２つが考えられる。
①フォルダ名「Standard Assets」を別のフォルダ名に変更してしまう。
②フォルダ「Standard Assets」内にある使いたいスクリプトだけを別フォルダへ移動する

自分は今回は①の方法で解決した。