Gatherの使い方(ホスト編②~spaceの改造~)

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


①誰でも改造できるように設定する。
 改造の権限はオーナーが持っており、オーナーだけにすることもできれば、オーナー以外の誰でも改造できるように設定することもできます。
 
 Settings→Spaceタブ→Space Customizationをクリックし、Global Buildのチェックをオンにすると誰でも改造できるようになります。
②オブジェクトをspaceに配置する
 右下のトンカチのアイコンをクリックする。
そうすると、右側にオブジェクトのリストが表示されるので、あるオブジェクトを選択して、space上でクリックするとそのオブジェクトを配置することができます。
 以下の画像は、ホワイトボードを選択してspaceに配置しようとしている画像です。
③Mapmakerでspaceを改造する 上の画像の「Edit in Mapmaker」をクリックするとブラウザの別タブでMapmakerが表示されます。このMapmakerでは主に以下の3つことができます。
 1.オブジェクトの配置や削除
 2.タイルの効果の設定
 3.壁や床の見た目変更
 上記3項目は、左上のアイコンをクリックすることで選択できます。
オブジェクトの配置や削除は、特別な操作はあまりないので割愛させていただきます。
タイルの効果の設定は、クリックするとspaceの見た目が変わります。
これは、どのようなタイルなのかを示した表示になっていて、タイルの種類は右側のリストに表示されています。クリックすることでspace内の該当タイルがハイライトされます。
・Impassable・・・人が歩けない場所
・Spawn・・・ログインしたときに初めにいる場所
・Portal・・・他のルームやスペースへテレポートするタイル
・Private Area・・・プライベートエリア(この中にいる人達だけでしか会話ができない。エリア外の人には会話は聞こえない。)
・Spotlight・・・ルームにいる全員へ話しかけたいときに使うタイル これらの中で特によく使うのは「Private Area」かと思いますので、少し説明しておきたいと思います。 ■プライベートエリアの設定
「Private Area」をクリックすると、下にコンボボックスが出てくる。
このコンボボックスは、現在あるPrivate Areaの番号になります。
同じPrivate Area番号内にいるユーザー同士で会話ができるという仕組みになります。
(例えば、「3」のエリアに2人いたら、その2人同士で会話できるが、「3」と「2」のエリアに2人いたら、その2人は会話できません。)
また、「Create a new area」をクリックすると、新しいPrivate Areaの番号を指定することもできます。
例えば、「10」を指定して、space内の10の周りをドラッグすると、「10」のエリアを増やすことができます。また、エリアは繋がっていなくてもいいようです。
■壁と床の見た目の変更 「Walls & Floors」をクリック
すると、左上に「Walls」と「Floors」が表示されるので、壁を改造したい場合は「Walls」、床を改造したい場合は「Floors」をクリック
床の場合を例に以下は記載します。 床をクリックすると、右側に床の見た目のリストが表示されます。
ここから、使いたいタイルを選択し、space上でドラッグすると床を配置することができます。 以下は、黄色の床を配置した例です。
最後に

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

■Gatherの使い方(ゲスト編~参加するまで~)の記事はこちら
■イベントでのGatherの使い方(ゲスト編~ルーム内操作~)については以下
■Gatherの使い方(ホスト編①~新しいspaceの作り方~)については以下

Gatherの使い方(ホスト編①~新しいspaceの作り方~)

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

■手順
 ①Gatherにログインする(URL:https://www.gather.town/
②ログインしたら、画面右上の「Create Space」をクリック
③そうするとポップアップが出てくるので、3種類の中から選択できますが、今回はどれも選択しません!!
  おそらくですが、以下のような種類だと思います。
   ・仕事用
   ・イベント用
   ・交流用

  今回は、3種類のどれも選択せず、左下にある「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の使い方(ホスト編②~spaceの改造~)については以下


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

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の使い方(ホスト編①~新しいspaceの作り方~)については以下
■Gatherの使い方(ホスト編②~spaceの改造~)については以下
■次回
 - ホスト側のGatherの使い方を書きたいと思います。

Gatherの使い方(ゲスト編①~参加するまで~)

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


■ Gatherとは
2Dのマップ内でドット絵のキャラクターが動き回り、同一空間内で参加者同士がワチャワチャできるサービス。カメラやマイク機能もあるので、zoomのようなオンライン会議もできる。
Gatherの2Dマップ画面
■ 参加方法
・まずは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の使い方(ホスト編①~新しいspaceの作り方~)については以下
■Gatherの使い方(ホスト編②~spaceの改造~)については以下

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

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

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


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


【手順2】
Blenderでハイポリモデルをimportする。
インポート画面
【手順3】
まずは、このハイポリをfbxファイルでexportする。
Blenderでfbxファイルの書き出し(Export)
export設定は自由だが、自分は以下のような感じ。
fbx書き出し設定
【手順4】
選択中のハイポリモデルにモディファイア「Decimate」を適応して、ポリゴンを削減する。
Decimateのほうがリメッシュよりも、UVを壊さないから便利らしいです。
BlenderのDecimateモディファイアー
Ratioを1.0から0.1とか、小さい数値にすると削減できるので、目標の削減値になったら、「apply」を適応して、ポリゴンを削減する。
DecimateモディファイアーのApply
【手順5】
ポリゴンを削減したモデルをfbxファイルでExportする。
設定は、ハイポリの時と同じでよい。
ファイル名は「Statue_lowpoly.fbx」などのようにローポリと分かるように書き出しておく。
fbxファイルの書き出し設定
【手順6】
Substance Painterを立ち上げて、New projectでローポリを開く。
Normal Map FormatはBlenderの場合は、OpenGLにしておく。
Substance Painterの新プロジェクト画面
【手順7】
TEXTURE SET SETTINGS内にあるMESH MAPSのところにある「Bake Mesh Maps」ボタンをクリックする。
TEXTURE SET SETTINGS画面
【手順8】
High Difinition Meshesの右側にあるメモのようなアイコンをクリックして、ハイポリのfbxファイルを選択する。
また、Matchのところは、「By Mesh Name」に設定しておく。
そのあと、「Bake selected textures」をクリックするとベーク開始
ベーク設定画面
【手順9】
手順8まで完了すると、MESH MAPSにベークされたテクスチャがセットされる。
よくわからないが、LAYERSで自分でペイントしたテクスチャとは別にデフォルトでセットされるテクスチャとなるようだ。(説明が難しい)
とりあえず、これで凹凸がリアルにつくようなったと思う。(ハイポリの凹凸がノーマルで焼き込まれるので)
ベーク後のTEXTURE SET SETTINGS画面

ベーク前
ベーク後
【手順10】
あとは、Substance PainterのLAYERSでいつも通りテクスチャをペイントしていけばOK
LAYERSで自分でテクスチャを貼り付けた画面
【手順11】
テクスチャ作成が終わったら、テクスチャを書き出す。
Substance PainterでテクスチャExport
【手順12】
設定は自由だが、Unityの場合は添付画像のように設定してExportボタンをクリック
主な設定箇所
・Output directory 保存フォルダ
・Output templete どの形式で出力するか
・File type pngかjpegかなど
・Size 1024pxで出力するかなど
・Padding 不明(UVの各ポリゴンの境界をどうするかなのか?)
テクスチャExportの設定画面

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

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

結論としては、「.gz」のファイルでビルドされるわけではなかった!
なので、「.unityweb」でビルドされたファイル群を手動で「.gz」にファイル名を変更したのちに、今までと同じようにunityroomへアップロードすれば問題なくプレイできた。
ビルドされたら生成されるファイル群
手動でファイル名を変更した
ちなみに、自分のサーバーなどで動作確認する場合は、拡張子を「.gz」にすると動かなかった。「.unityweb」に戻すと正常に動作した。

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

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

自分は今回は①の方法で解決した。
フォルダ名変更

オリジナル3Dアバター「タロ屋の女将」をBOOTHで公開しました!

Virtual Market2021に出店用として、オリジナル3Dアバター「タロ屋の女将」をBOOTHで公開しました!12/4より始まるVirtual Market2021でも見れるようになっているので、是非見てみてください! Virtual Market2021 では女将が自らのアバターをモーション付きで説明してくれますw
出展ワールドは「復刻江戸城城下町 Re:エド華町」です。

アバター自体はBOOTHで無料配布しておりますので、是非ダウンロードしてみてください!
https://taroyan3rd.booth.pm/items/3461151
タロ屋の女将
  • 今回の制作にあたって、フルスクラッチでオリジナルアバターを作る上の手順をまとめておいたので、メモしておきたいと思います。以下、自分なりの作成手順です。
    • モデルの三面図作成
    • モデル作成
      • メッシュ作成
      • ボーン作成
      • ウェイトペイント
      • UV展開
      • テクスチャ作成
      • 表情(シェイプキー)作成
    • ダイナミックボーン割り当て
    • VRMファイル作成(VRM対応のため)
    • BOOTHで公開
まとめると非常に簡潔な感じですが、実際はかなりの時間がかかりました。自分はすごく作業スピードが遅いので、200時間くらいかかりました。また、その他にやらないといけないこととして、BOOTH公開用にサムネイル作成や、規約文章などの用意、Vketへ出店のためのブースをUnityで制作などがあり、こちらもトータルすると100時間くらいかかった気がします。でも何はともあれ、出店まで間に合ってよかった~(゚Д゚;)

TOKYO GAME SHOWのVRを見てきました!

TOKYO GAME SHOWで開催中のVR企画を見てきました!
GAME FLOATとGAME FLOAT SKYという2つのワールドがあり、それぞれコンセプトが違ったようです。

リンクはこちら(もう終了していますが。)



GAME FLOATのほうは、いわゆるコミケで言うところの企業ブースみたいな感じでした。
新作ゲームの宣伝などが主な目的っぽい感じですね。
GAME FLOAT SKYは企業ブースという点では同じですが、アバター限定のワールドのようでした。いわゆるVirtual Marketみたいな感じでしょうか。


どちらもサクサク動きました!かなり描画負荷を低減されて作られているような感じですね。
また、使っているプラットフォームがそれぞれ違い、GAME FLOATのほうは、xambrを、GAME FLOAT SKYのほうは、Doorを使っているようでした。

SKYのほうは、ブラウザでも見えるのがとても手軽でいいなと思いました。VRでも見れたんだと思うんですが、ブラウザだけでしか見なかったです。不満点としては、リンクをクリックすると別タブでリンクが開いてくれないので、ワールドを強制退去させられてしまうことでした。(もしかしたら回避策があったのか?!)

GAME FLOATはHTC VIVEとQUEST2で見てみました。どちらもサクサクで動きました。PC版の容量は300MBくらいあったので、1ワールドに結構多くのデータを取り込んでいる感じがしました。でも動画データがほとんどだったのかもしれません。LoDを使って、遠くのモデルは見えないようにするなどの負荷低減策も取られていて、細かい配慮がされている感じがしました。不満点としては、完全に個人的な意見ですが、ワープモードでの移動で、バックできないことと、ワープモードでワープできる距離が短すぎることくらいですかね。


どんどんVRのプラットフォームも洗練されてきている感じがしますね(^-^)
© 2022 Husky Studios (タロ三世商会), All rights reserved.