- ■Gather.Townとは
- ■Gather.Townの背景と前景についての前提知識
- ■必要なツールとソース
- Step.0 自社オフィスの見取図を手に入れる
- Step.1 MapmakingをCloneする
- Step2. テンプレートをベースに作っていく
- Step3. 不要なものを消していく
- Step4. 作りたいものを作っていく
- Extra Step1. 影を付ける
- Extra Step2. 背景を設定する
- Step5. 画像を出力しGatherに設定
- Step6. Tile Effectを設定する
- Step7. 細かな効果設定をする
- ■おわりに
- ■参考資料
こんにちは!
実は9月から株式会社Hajimariに入社していた上山です。
インターネットでは 「やむ」 という芸名でやらせていただいております🙏
ITプロパートナーズ事業部にてスクラムマスター兼開発という立ち位置で、チームが幸せに働けるように日々研鑽しています!
メインはZennで書いています😉
QiitaはQiita Organizationのために使っています😭
Hajimariでは、
現在リモートワーク・オフィス出社をその日の予定に合わせて決めることのできる
「365日リモートワークOK制度」を取り入れており、
各メンバーが生産性高く働ける方法を考えて仕事をしております。
(詳しくは↓を見ていただければと思います。)
リモートワークを取り入れるにあって大事なのは、
やはりコミュニケーションの取り方なのではないかと思っております。
対面とは違い、気軽にコミュニケーションが取れないようでは
リモートワークの利点も十分に活かしきれなくなってしまいます。
そこで、今回はリモートワークでも社内のコミュニケーションを活発化させる為に
Gather.Townを使ってリアルオフィスを再現してみました!
Gather.Townを使うにあたり
「何か特別な技術が必要なんでしょ?」
と思われる方もいらっしゃると思います。
しかし、今回必要なのは根気です。
何時間も少しずつポチポチする根気さえあれば、誰でも実現可能になるように記事を執筆させていただきました。
ぜひ読まれた方は、ご自分の根気で自社のリアルオフィスを再現し
「社長!Gather.Townでオフィス再現したんで、明日からフルリモートでいいっすか!!!!?」
と提案してみてくださいww👍
■Gather.Townとは
もう新進気鋭と言われないくらい、定番のオンラインビデオツールになりました。
ご存知でない方にヒトコトで簡単に説明しますと、「昔のドラクエ気分でオンライン通話できる」 ツールになります。
「Google Meetでもよくない?」と思われる方もいらっしゃると思いますが、 「実際に、その場にいる」 オフィス感を出すのであればGather.Townのほうが優位です。
朝出社して、自分の席で仕事して、退社時に接続を切る。実際の出社退社のような感覚も味わえるため、一体感通してはオススメです。
「リモートでずっと繋げっぱなしとかヤバ・・・」 と思われたそこの方、Gatherにはプライベートスペース機能があり、「常に繋ぎっぱなし」という状態ではありません。
詳しい説明はここでは省きますが要は 「リモート下でも、一緒に仕事をしている雰囲気」 を作るためのツールです。
■Gather.Townの背景と前景についての前提知識
まず、前景と背景の概念のざっとした説明をします。
以下の画像のように
になります。これを踏まえて前景・背景を分けて作っていく必要があります。
Gather.Townの前景・背景共に設定できる画像は以下の条件です。
- 3200 x 3200 ピクセル以下
- 最大ファイルサイズ3MB
「どうやって設定するの?」という点ですが、公式の方でドキュメントを準備してくれているため、参照してみてください。
ざっくり伝えると、下部メニューバーにあるBuild Toolから
Edit in Mapmakerに移動するとドキュメントと同じマップ編集画面に進めると思います。
■必要なツールとソース
Tiled
実際に前景・背景画像になるマップを作成していくツールはTiledになります。
基本的にはこのツールを使って制作を進めていきます。
gathertown/mapmaking
実はGather.Townの公式から既存のマップテンプレートやマップオブジェクトをGithub上で公開されています。
基本的にはこのアセットを使って積み木のように積んでいく作業をしていきます。
Step.0 自社オフィスの見取図を手に入れる
場合によっては一番難しい問題です。会社の見取図やそれに準ずるものを持っていそうな人に聞いて手に入れる必要があります。
もしかしたら、ない場合もあります。(その場合は残念ながら根気度が高くなります)
この工程をちゃんとこなせるかどうかで制作コストが段違いで変わってきます。
ぜひ手に入れられるように全力で努力をしてください🙏
Step.1 MapmakingをCloneする
ここで技術ブログ要素を出しておきます。
git clone git@github.com:gathertown/mapmaking.git
クローンしてきます。めちゃめちゃ容量が大きいので注意してください!!
「Gitの使い方わからないよ><」という方にもZIPでダウンロードする方法を一応載せておきます。
Step2. テンプレートをベースに作っていく
mapmaking/maps/templates/Office Modern(Skyscraper)/Office Modern12.tmx
を今回はベースに作成していきます。
新しく作ってもいいのですが、アセットのimport関係がちょっと面倒なのでテンプレートを変えるほうが楽で良いです。
テンプレート自体を残しておきたいという方は同じディレクトリ下に複製して名前を変えて編集していきましょう!
基本機能説明
基本的にタイルセットからGather側で用意されているタイルを使用していきます。
凄腕デザイナーとかであれば自分でタイルセットなども自作出来るのですが・・・私はそうではないので、既製品をポチポチ積み木していきます。
ここらへんのツールを主に使います
- スタンプ(Bキー)
- 右クリックで範囲選択、その後範囲選択したものをスタンプとして押せます
- 消しゴム(Eキー)
- 右クリックで範囲選択消去
ここの部分のツールは基礎です。覚えておきましょう👀
Command + Sで保存です。これを忘れてしまうととてつもなく取り返しのつかない失敗を引き起こす可能性があるので注意してください。
また、レイヤーの概念も重要です。前の章で書いた通り、上にあればあるほど前面に来ます。
Step3. 不要なものを消していく
レイヤーから装飾となる影などを削除していきます。
そうするとテンプレートからはtopper
とTile Layer1
というものだけになり、topper
が前景部分、Tile Layer1
が背景部分となります。
もちろん多彩な表現をするためにはここからレイヤーを増やしたりするのですが、基本的な根幹部分はこの2つになります。
そしたらこの2つのレイヤーの中にある不必要なものもすべて消してしまいましょう!
見取図など手に入れる事ができた人はぜひ下地として使ってしまいましょう。
その際に、まずはbase
というレイヤーを最下層に作成し、そこに下地を置いておくことをオススメします。
【タイルセット】の場所に画像をドラッグ&ドロップした後に、こちらの設定で取り込んでしまいましょう。
注意点として、ちょっと画像が小さいかも・・・と思っても拡大する方法が物理的に画像サイズを大きくするしかありません。
他に良いやり方を知っている方がいらっしゃったらぜひ教えていただければなと・・・😭
そして下地として画像を読み込んだ姿は下のようになります。
Step4. 作りたいものを作っていく
ツールの使い方を理解しつつ、少しずつ積み上げていってください・・・。
注意してほしいのは、コーディングと同じでいきなり細部にこだわらないことです。
息切れして挫折する可能性が高くなります。少しずつ、少しずつ積み上げていきましょう。
タイルセットは以下を主に使うと思います。
Gather Decoration Exterior
が装飾品floors_3_simple_S20C-5
が床タイルtoppers
が天井素材walltexture
が壁素材WindowsObjects
が窓素材Gather Shadows 1.x
が影素材
そして、地道に積み上げられたオフィスはこちらになります。
基本的に家具類はGatherに取り込んでから設置するので壁と床設置がメインになります。
レイヤーの説明ですが
object
- 柱などの前景に含めたいオブジェクトを入れています。
wall objects
- 窓などの壁の上に置きたいものを配置しています。
over topper
- 各部屋の区切りとしての黒い細線の部分で使われています。
topper
- 壁が主にここで配置されています。ここまで前景で主力する想定です。
background topper
- 壁の下部に当たる部分がここで配置しています。
- ここから背景に含まれる想定です。
- この分け方をしないと、壁の下にキャラの頭の一部が入ってしまい、微妙に違和感を感じてしまいます。
- (これ以降の画像ではbackground topperレイヤーは存在していないのですが、テスト段階で気づき手戻りして増やしました)
back objects
- 椅子をここで配置しています。
back objects2
- 椅子が2マス使うケースがあり、隣同士で設置したかったためレイヤーを分けています。
carpet
- カーペットや壇上などの「床の上に設置したいもの」をここに置いています。
floor
- 床です。
base
- 下書き・ガイド線として使った画像のレイヤーです。後で消します。
Extra Step1. 影を付ける
shadow
レイヤーを一番上(前面)に作成し影を配置していきましょう。
タイルセットはGather Shadows 1.x
です。
影を付けると急に重厚感が出てきました(そんなに変わったように見えませんが・・・)
階段部分は影で上か下に行くかを判別できるようになるので、結構重要な要素かもしれません。
Extra Step2. 背景を設定する
今のままではなんとも言えない悲しさがあります。そうです。背景がないからです。
しかし、背景まで一から作っていくとしたら制作が何十倍にも膨らんでしまいます。
その上、背景は基本的に見るだけで行けないもの・・・。コストに対するリターンもそれほど大きくありません。
なのでここではGatherで使われている背景を使っていきます。
mapmaking/large splash art/
に入っている画像をタイルセットとしてインポートし、使っていきます。
超絶雑ですがこんな感じにまとめました。さっきよりは雰囲気がよくなった(と信じたい)です。
Step5. 画像を出力しGatherに設定
前景出力と背景出力の2ステップを行います。
まずは前景から。前景としたいレイヤーだけを表示させほかは非表示にします。
そうしたら、上部メニューバーから
ファイル > 画像でエクスポートを選択し、以下のようなウィンドウで「表示レイヤーのみを含める」をチェックします。
そしてエクスポートです。これにて前景画像の出力が完了しました。
同様に背景画像の出力も行ってください。
いよいよ取り込みです。
前提知識の章で取り上げた操作方法からマップ編集画面へ移動し、背景画像のインポートと前景画像のインポートを行ってください。
そうすると上手く取り込めます。
Step6. Tile Effectを設定する
今のままだと自由に壁を貫通できたり、行けてほしくない場所に行けてしまいます。
なので、ここからは当たり判定を付けてちゃんと行けないように制限を付けていきます。
Tile Effectのタブから Impassableを選択し、行けてほしくない場所に設定していってください。
そしてObjectsから家具を配置していってください。
ある程度置き終えるとそれなりに形になってきます。いい雰囲気ですね!!
Step7. 細かな効果設定をする
会議室で空間を区切れたり、席の近くでしか声が聞こえないようにしたりなど、様々な設定ができます。
そしてできた完成品がこちらです!
概ねいい出来ではないでしょうか🤔
前景画像を意識しつつ制作したことにより、柱の後ろにも隠れられるようになりました。
前景画像設定のおかげで、天井の梁も表現されているように見えます。
前景と背景をきちんと意識しながら作ることがGather.townのマップを作る上で重要なことが分かりますね。
これを意識しないと手戻りが結構発生してしまうので、精神衛生上あまり良くないです😭
■おわりに
Gather.townのマップをカスタムすることで、よりチームの結束力を高めることができます。
コロナ禍でリモート業務が普及した今、昔の「リアルオフィス」を再現することで今一度盛り上がり、関係性の質を高めてもいいのかもしれません。
ハイブリッド勤務を採用している企業では、リアルオフィスの席と座っている人がリンクしているだけで、もし自分がリアル出社した際に「誰が」「どこに」座っているかが分かります。
新卒の方で、なかなかオフィスに来れない方に一体感を感じてもらうためにも良いのでしょうか?
Gather.townでリモートで希薄になってしまった社員間のやりとりが少しでも活発になれば嬉しい気持ちです。
■参考資料
株式会社Hajimariでは、Laravelをメイン言語として自社開発・受託開発を行なっており、
一緒に開発を行なっていただけるエンジニア募集しています!
長野拠点の立ち上げメンバーも大募集しています!
興味のある方は以下の記事をぜひご覧ください!
みなさまとお会いできるのを心からお待ちしております!
www.wantedly.com www.wantedly.com www.wantedly.com www.wantedly.com