この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。
データアナリティクス事業本部のしんやです。
先日下記のブログでGather.Townを紹介して以来、『Gather.Town』でカスタムスペースを作成したり、作成したスペースを"増改築"することにハマっています。
そこで当エントリでは、Gather.Town上で、Gather.Townの機能である「Mapmaker」を使って一からカスタムスペースを作っていく手順について、自分なりに気になった部分などを踏まえて紹介したいと思います。
目次
- Gather.Townにおける『スペース(Space)』と『ルーム(Room)』の関係
- まずは欲しいスペースを設計
- プライベートスペースを作成
- 背景画像(Background)の作成
- 背景画像にオブジェクトを配置
- 各種タイルの設定
- 実際に作成した「カスタムスペース」
- まとめ
Gather.Townにおける『スペース(Space)』と『ルーム(Room)』の関係
Gather.Townでは、ユーザーが作成可能な最大粒度の要素を『スペース(Space)』という形で定義しています。この『スペース』単位で、参加(アクセス)可能なユーザーの人数や無償・有償のプランによる各種上限等が定められています。
スペースでは、1つ以上の部屋をマップとして作成することが出来ます。Gather.Townでは、この要素を『ルーム(Room)』と呼んでいます。スペースにアクセスする際はパスワード認証を掛けることが可能で、同一スペース内のルームはパスワード認証が済んでいればシームレスに移動が可能です。またスペース間の移動の場合は都度パスワード認証(及びログイン設定＝ユーザー・カメラ・マイク設定など)の手順を踏むことになります。
スペースやルームの移動については、後述するポータルタイル(Portal Tile)の設定をマップ編集で行うことによって可能となります。
まずは欲しいスペースを設計
シンプルなものであればいきなり画面上でスペース＆ルーム作成へ進んでしまうのもアリですが、Gather.Town上でのスペース＆マップ作成に慣れていないとなんやかんやで手戻りが発生してしまいます。なので、まずは実際の作成作業に移る前に『作りたいスペース＆マップを設計』することから始めましょう。
私個人が思う、作成する上で基本となる考え方を以下に列挙します。
"セル"を最小単位として要素を配置：Gather.Townのルーム作成(及び編集)は、サービスの機能として提供されている『MapMaker』を用いて、32x32ピクセル四方の正方形領域＝セルを最小単位として、背景や前景、セルに対する"タイル設定"(後述)を行う形で進めていきます。画像に関する設定やアップロードについてはこの単位を計算してコンテンツを用意しておく(縦32x横96ピクセルの画像を用意することで縦1x横3マス分のセル要素を表現出来る)ことで、欲しい物をイメージ・設計しやすくなります。
予め用意されているオブジェクトを参考に：Gather.Townでは、予め利用可能なオブジェクトが数多く用意されています。ルームを作成する際に検討する項目としては、まず『机や椅子の配置を決める』ことが挙がってくるかと思いますが、実際に利用可能な机や椅子のサイズ感を確認の上、どういう配置を行っていくかというのをイメージしておくと良いです。
以下はオブジェクトの選択画面でテーブル・机(table)を絞り込んだ際のものです。大小様々なサイズが取り揃えられていますし、向きや色も変更可能となっています。練習用にカスタムマップを1個作ってみてこの辺の塩梅を確認しておくと良いでしょう。
ルームのレイアウトを『縦向き』にするか『横向き』にするか：ルームの全体像を検討する上で『部屋の在り方をどういう向きにするか』というのは考えておく必要があるかと思います。ここでの『向き』は、部屋の東西南北を踏まえたレイアウト、と捉えて頂くと良いでしょう。「使えるオブジェクトの内容」や「入り口・出口のイメージ」等を踏まえてイメージする感じです。
下記はGoogle SpreadSheetを「EXCEL方眼紙」的な使い方でイメージ・設計したものです。内容としては私が物理出社していた際に利用していたオフィスのレイアウトになっています。コロナ禍の影響で2020年の中頃には既に賃貸契約を終了し、今では「在りし日の...」場所となってしまっていたのですが、今回Gather.Townでカスタムスペースを作成出来ると知った時点でまず思い着いたのが「あのオフィスを再現しよう！」というものでした。
プライベートスペースを作成
最終的に作りたかった(作った)スペースは前述の設計図の内容ですが、ここでは必要と思われる手順や要素を簡略化したものを「作り方」として紹介していきます。
今回の目的を実現するためのスペースは、カスタム可能な形で新規作成します。サービスへのサインインを完了した上で下記URLにアクセスし、任意のスペース名称、パスワード(オプション)を設定した上で、ベースとなるマップに『start from scratch[blank]』を選択した上で[Create space]を押下。
パスワード設定をしていた場合は入力を求められますので入力して[Submit]押下。
アバター及びマイク・カメラ設定。好みの設定を行って[Join the Gathering]を押下。(※設定はこの後でも出来ます)
ルームにユーザーとしてアクセスしました。ですがこの時点ではルーム自体まっさらな状態なので何もありませんしどこにも移動出来ません。
画面左側のメニューの[Setting]→[Space]→[Customize Space]→[Open Mapmaker]を選択。
背景画像(Background)の作成
ここから少しずつGather.Townのマップを作り上げていきます。まずは背景画像の作成から。ここでは、「床(Floor Tiles)」と「壁(Wall Tiles)」を敷き詰めていきます。画面右上の[Update Background]を押下→[Draw your own background]を選択。
必要なサイズ分、[Floor Tiles]の任意の床画像タイルを敷き詰めていきます。敷き詰める作業については任意のタイルを選択した上でセル情報を塗る感じでマウス操作すれば設定されていきます。
同様に[Wall Tiles]で任意の壁画像タイルを敷き詰めていきます。床と壁については、はみ出たり不要な描画を消したい場合は[Eraser Mode]を選択した上で対象セルを指定すると消えるようになります。削除モード解除は再度このアイコンをクリックすればOKです。
ここまで設定が完了したら、画面上部の[Save]で設定を保存します。
背景画像にオブジェクトを配置
次に、作成した背景画像にオブジェクトを配置していきます。このオブジェクトも画像となるので、画像を重ねていく作業を続けていく感じですね。
[Objects]タブで「+」をクリックするとウインドウが起動し、様々な種類のオブジェクトを選択、配置出来るようになっています。オブジェクトによっては色や向きを変えることも可能です。また、ウインドウの右端には、対応するアクションやURL等を値として設定出来るようにもなっています。ここでは雰囲気を出すべく、扉や入り口、
また机や椅子などを適宜配置していきます。
各種タイルの設定
ざっと、それっぽい雰囲気となるように配置が完了しました。
ここからは、セル毎に制限や挙動を加える設定を行います。この設定は「タイル」と呼ばれる設定をセルに対して付与することで実現します。
Spawn Tile
このタイルは、ユーザーがスペースやルームに入った時のスタート地点となる場所を指定するものとなります。何らかトラブルがあった際に「スタート位置をリセットした」場合のスタート地点としても機能します。
試しに下記の状態でこのスペース(ルーム)にアクセスしてみます。この場合、左上の黄緑セルは後述設定で「アクセス出来ないセル」扱いの設定となり、実際にアクセスすると身動きが取れない状態となります。左上のSpawn Tileは初期設定で存在していたもので、右下のものは後から追加したものです。
ルームにアクセス。いきなり詰みました。メッセージにも「e押下、またはrespawnして入り直してください」という旨表示されています。
respawnは画面左側メニューの設定から[User]→[respawn]で実行可能です。
今度はちゃんと動ける位置から始めることが出来ました。そしてこの後、この事象を回避するために、左上のSpawn Tileは削除しました。
Impassable Tile
このタイルを指定されたセルは移動が出来なくなります。壁やテーブルなど、ユーザーが移動出来ない、または要素として重なることが出来ない設定としたいセルに指定します。
Private Space Tile
このタイルを指定されたセルは、同じIDを指定された1つ以上のセル内であれば会話が出来る(プライベートエリアとして会話が成立する)ようになります。仕事用デスクや会議室、n人席のエリア(の椅子部分)を任意のIDで指定して使います。
デスク周りを任意のIDでPrivate Space Tile指定した例です。従来、Gather.Townでは指定の距離に近付くと会話が出来るようになりますが、Private Space Tileで指定されたエリアの場合、ユーザーはこのエリアに入ることで、初めて会話が可能になります。
Spotlight Tile
このタイルを指定されたセルでは、ユーザーは音声をルーム・スペース内の全員に届けることが出来るようになります。集合を掛けたい・全体アナウンスを行いたいというような場合に便利な機能です。
Gather.Townでは「それ用」のアイコンがあるので部屋の任意の位置にこのオブジェクトを設定してみます。画像を選択し、
配置完了。
画像を配置したセルに、合わせてSpotlight Tile指定を行います。
実際にアクセスしてみます。「部屋全体にブロードキャスト出来るよ！」とメッセージが表示されています。カメラ・マイク設定の部分にも「spotlighted」という文字が表示されています。
Portal Tile
このタイルを指定したセルでは、任意のスペース内のルーム間移動、または異なるスペース間の移動が可能となります。
任意のスペース内におけるルーム間移動
まずは前者、「任意のスペース内のルーム間移動」から試してみます。とその前に、移動するための別のルームをスペース内に作成します。[Rooms]横の「＋」をクリックするとルームの追加が可能となるので、任意の名前を入力し、1つめのルームを作った時と同じ手順でルームを作成してください。
ちなみにルームは「デフォルトとして指定」「ルームの削除」がそれぞれ可能となります。内容に応じてご利用ください。
ここではちょっと雰囲気を変えて以下のようなルームを作成してみました。
タイル指定に戻ります。遷移元となるルームの任意の場所(それっぽく移動出来るように、ドア等の位置に設定するのが自然でしょう)をPortal Tileとして指定。
すると以下の様に[Pick Portal Type]というウインドウが表示されます。ここでは左側の[Portal to a room]を選択。
スペース内の任意のルームを選択出来るようになります。ここでは追加で作成したルームを選択。
遷移した先のルームのどこに移動するかを追加でセル指定します。
今回指定した通用口は都合横に2セル分あったので、同じ設定を繰り返し行います。
また、逆に「遷移先」から「遷移元」で戻る時の設定も同様に行います。
これで、ルーム間移動を、あたかもルーム同士が繋がっているかのような挙動で実現することが出来ました。
任意のスペース間移動
「任意のスペース間移動」についても、前述のスペース間ルーム移動と途中までは手順同じです。
スペース間移動だと「ちょっとしたワープ」的なイメージかな？と思ったので別途それっぽいアイコンを用意し、ルーム内に配置。
配置した画像オブジェクトのセルにPortal Tile指定を追加します。今度の遷移指定先は右側の[Portal to a another space]を指定してください。
遷移先スペースのURLを入力して[Submit]を押下。
ちなみに任意のスペースのURLについては、スペースログイン後、左上の「ぶどう」アイコンをクリックするすることで確認することが出来ます。
要素にアクセスする(触れる)と、以下のような形で「Enterキー押下でスペースにアクセスしてください」の旨メッセージが表示され、Enterキー押下でスペースに移動します。
実際に作成した「カスタムスペース」
ここまでの内容を踏まえ、実際に存在していたオフィスを再現してみたスペースがこちらです。休憩室周りの雰囲気や要素配置などについては出社時の記憶や写真等を参考に頑張りました...！我ながら良い感じで出来たなと思っております。
スペース情報を公開した際の同僚の主な反応が以下。当時のオフィスを知る同僚に喜んでもらえたので作った甲斐がありました。
また、勢い余って当時あったオフィスの近くにあった「生魚の超美味しいお店」も再現してしまい、業務後にリモート飲み会を開いてしまいました。ちょっとしたギミック(食べ物のドット画を注文に応じて配置することで雰囲気出たw)で楽しめたりしたのでこれはこれでアリでしたね。
まとめ
という訳で、Gather.Townのマップ作成機能「Mapmaker」でカスタムスペースを1から自作してみた手順の紹介でした。
Gather.Townでは、背景画像(Background)の他にも前景画像(foreground)の指定も可能なのですが、Gather.TownのMapmakerでは「前景画像の作成」自体が出来ず、専用のツールを使うのがスムーズです(というかツールを使った方が画像作成はスムーズ...というのがこのエントリを書いている最中に個人的に実感した次第です)。この辺は別途エントリを改めて紹介出来ればと思います。