Gather Wiki
No edit summary
Tag: Visual edit
No edit summary
Tag: Visual edit
 
(14 intermediate revisions by 4 users not shown)
Line 1: Line 1:
== Gather 101 ==
+
== Guides on this Wiki ==
   
  +
* [[Guide:Advanced Custom Maps Intro]]
* [https://drive.google.com/file/d/1AFbV2WOg0xJwBHY1SCr2FGgn0x1oto2R/view Unofficial Instructions PDF] (Credits to Aekkraj Ganesan Krishnan)
 
  +
* [[Guide: Communities on Gather|Guide: Communities on Gather (old)]]
  +
* [[Guides/Advanced Gather|Guide: Advanced Gather by CHI]]
  +
*[[Guides/Crowdsourced Mapmaker FAQ|Discord Crowdsourced FAQ (old)]]
   
  +
== Video Tutorials (External)==
== Mapmaker ==
 
   
  +
*[https://www.youtube.com/watch?v=_srsbCjCUNk Gather mapmaker tutorial for creating virtual classrooms]
* [https://jackc94.medium.com/450%E4%BA%BAgather-town%E6%B4%BB%E5%8B%95%E5%B1%95%E5%8D%80%E8%A8%AD%E8%A8%88%E7%B6%93%E9%A9%97%E5%88%86%E4%BA%AB-d029ac363c03 Chinese Mapmaker Guide]
 
  +
  +
==Mapmaker Guides (External)==
  +
  +
*https://2minutetabletop.com/custom-maps-light-shadow/ - Adding Shadows
 
*[https://jackc94.medium.com/450%E4%BA%BAgather-town%E6%B4%BB%E5%8B%95%E5%B1%95%E5%8D%80%E8%A8%AD%E8%A8%88%E7%B6%93%E9%A9%97%E5%88%86%E4%BA%AB-d029ac363c03 Chinese Mapmaker Guide]
 
*[https://docs.google.com/document/d/1cHxGbYPFyyGIbbYb4SC38sg7Jsgg_ynGGjvVGrEvQr0/edit?fbclid=IwAR1qFWcGODfR5j4H7WeTM0qyXxnuerqOpy8YPKUkfBr8rQSbx5Ju4jw_Zzs Another Chinese Mapmaker Guide]
 
*[https://docs.google.com/document/d/1cHxGbYPFyyGIbbYb4SC38sg7Jsgg_ynGGjvVGrEvQr0/edit?fbclid=IwAR1qFWcGODfR5j4H7WeTM0qyXxnuerqOpy8YPKUkfBr8rQSbx5Ju4jw_Zzs Another Chinese Mapmaker Guide]
* [https://docs.google.com/document/d/1TfQZmuT6Fh8seSgrvFpb7Tm0ViHkB6M92hl5XsY-Prw/edit#heading=h.4woj16qbp4bs English Mapmaker Guide (Outdated)]
+
*[https://docs.google.com/document/d/1TfQZmuT6Fh8seSgrvFpb7Tm0ViHkB6M92hl5XsY-Prw/edit#heading=h.4woj16qbp4bs English Mapmaker Guide (Outdated)]
  +
*[https://support.gather.town/help/best-practices-for-space-design Best Practices for Space Design (Gather Official)]
  +
  +
== External Gather Guides ==
  +
 
* [https://drive.google.com/file/d/1AFbV2WOg0xJwBHY1SCr2FGgn0x1oto2R/view Unofficial Instructions PDF] (Credits to Aekkraj Ganesan Krishnan)
  +
*[https://www.reunivous.com/guide Gather Basics] (ReiniVous)
  +
  +
== Guide: Adding custom sound to your space ==
  +
What you need:
  +
  +
* Get API KEY from official website <nowiki>https://gather.town/apiKeys</nowiki>
  +
*# Click generate new key and keep your "api key"
  +
* Find room ID, ex: cO2KsWeJpxhD5rTi/ROOM_NAME
  +
* Find your map ID, ex: coffee-shop
  +
* A URL that hosts your desired MP3 file or stream
  +
  +
# Open https://gt-item-shop.web.app/
  +
# Fill in API key, Room ID, Map ID
  +
# Click Load
  +
# Fill in the X Y coordinators where you want the sound emitter
  +
# Fill in the volume, and the distace in tiles you want the emitter to reach
  +
# Click set to place the emitter in the map.
  +
  +
Done!
  +
  +
== Guide: Creating "Open in New Tab" Objects==
  +
Sometimes you want to have an object in Gather that opens an external website. Or maybe you encountered a page that cannot be embed. Here, using a quick trick to attaching a link in the embed object works well.
  +
  +
To do this, you could use something like https://codesandbox.io/ and create a small static website for the redirect. You will get a link, and set your Gather object to have that as its embed url.
  +
  +
Here is an example of a lunch object:<syntaxhighlight lang="html">
  +
<!DOCTYPE html>
  +
<html lang="en">
  +
<head>
  +
<script type="text/javascript" src="https://codesandbox.io/public/sse-hooks/sse-hooks.f648b14c15c640a14a557113a991cb8d.js"></script>
  +
<script type="text/javascript" src="https://codesandbox.io/static/js/banner.be879265d.js"></script>
  +
  +
<meta charset="UTF-8" />
  +
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  +
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
  +
<title>Static Template</title>
  +
</head>
  +
<body>
  +
<h1>
  +
Click to order lunch! (opens in a new tab)
  +
</h1>
  +
<script crossorigin type="text/javascript" src="https://codesandbox.io/static/js/watermark-button.be960f43b.js"></script>
  +
</body>
  +
<script>
  +
window.onclick = () => {
  +
window.open("https://doordash.com");
  +
};
  +
</script>
  +
</html>
  +
</syntaxhighlight>
  +
==Guide: Adding Custom Objects==
  +
Want to add a custom image into your space?
  +
  +
Use PhotoPea -https://www.photopea.com/ and resize the object to a multiple of 32 pixels. 32 pixels is the size of one tile in Gather.[[File:Unnamed.png|center|frameless|link=https://gathertown.fandom.com/wiki/File:Unnamed.png]]Here is an example. A photo of a penguin I want framed. I pop it into Photopea. I add brown edges. And resize to 32 pixels. Here is the result:[[File:Unnamed (2) (1).png|center|frameless|link=https://gathertown.fandom.com/wiki/File:Unnamed_(2)_(1).png]]<br />
  +
== Active Image Tricks for Gather Town ==
  +
In gather town, you can create customized objects by uploading pictures. If you want to make more customized objects change, just set the obecjts as an interactive object.
  +
  +
Interactive objects are different from normal objects. They will be triggered when the character enters the activation distance (at this time, there will be a message that you can interact by pressing the x key). If there is no special requirement, generally we will set the item as Note object. When the user presses the x key, a default message will appear. (Note: The message part must be filled in (you can fill in a blank or the like), otherwise you it wont work.)
  +
====Prerequisite knowledge====
  +
=====1. The size of the objects=====
  +
The size of each grid on the map is 32x32 pixels. So a 40x70 pixels picture will become a 2x3 grid object after uploading, and there will be 24 pixels wide blank space on the right side, and 26 pixels wide blank space below.
  +
=====2. Activation distance=====
  +
The trigger range is counted from the outside of the grid where the object is placed. If the Activation distance is 3, then the entire trigger range will be 9x8 grids. If distance is set to 0, it can only be triggered by standing directly on the object.
  +
=====3. Active image (in advanced options)=====
  +
The picture displayed when the object is triggered. If this picture is different from the original size, the triggered picture will be presented in a way that aligns with the upper left corner of the original picture.
  +
====Examples====
  +
=====1. Change the Object Image=====
  +
When the object image and the active image are different, a change will occur when triggered.
  +
=====2. Make the Object appear =====
  +
When the object image uses a blank image, it will cause the sudden appearance of the active image when it is triggered.
  +
=====3. Make the Object disappear=====
  +
When the active image uses a blank image, the object image will suddenly disappear when triggered.
  +
====Advanced Examples====
  +
=====1. Mimicking "Dialog"=====
  +
The original picture is an npc image , and you want that afterwards the image will be a picture with dialogue after it is triggered . At this time, the active image is set as a picture with dialogue, but the object image cannot directly use pictures with only npc. It is necessary to trim the dialogue from the picture with dialogue, and then get a picture of the same size to be used as an object image. Otherwise, the position of the character will be off after the trigger.
  +
===== 2. Items get bigger=====
  +
If the original image is a 1x1 Image, I hope it will become a 5x5 Image after it is triggered.
  +
  +
If we just use the basic method, the location of the enlarged Pokémon will be off. This is why you need to actually use two objects, one that is invisible before triggering, and another that is invisible after triggering.
  +
  +
Credits to:
  +
  +
https://hackmd.io/@flab/gathers?fbclid=IwAR15mj4tDWdJyGXB99mzrd0ccCiXzGChpU0lb5r0lFhZYI6C1iDY04MLRMY#Embed-Refs

Latest revision as of 18:15, 26 January 2022

Guides on this Wiki[]

Video Tutorials (External)[]

Mapmaker Guides (External)[]

External Gather Guides[]

Guide: Adding custom sound to your space[]

What you need:

  • Get API KEY from official website https://gather.town/apiKeys
    1. Click generate new key and keep your "api key"
  • Find room ID, ex: cO2KsWeJpxhD5rTi/ROOM_NAME
  • Find your map ID, ex: coffee-shop
  • A URL that hosts your desired MP3 file or stream
  1. Open https://gt-item-shop.web.app/
  2. Fill in API key, Room ID, Map ID
  3. Click Load
  4. Fill in the X Y coordinators where you want the sound emitter
  5. Fill in the volume, and the distace in tiles you want the emitter to reach
  6. Click set to place the emitter in the map.

Done!

Guide: Creating "Open in New Tab" Objects[]

Sometimes you want to have an object in Gather that opens an external website. Or maybe you encountered a page that cannot be embed. Here, using a quick trick to attaching a link in the embed object works well.

To do this, you could use something like https://codesandbox.io/ and create a small static website for the redirect. You will get a link, and set your Gather object to have that as its embed url.

Here is an example of a lunch object:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script  type="text/javascript" src="https://codesandbox.io/public/sse-hooks/sse-hooks.f648b14c15c640a14a557113a991cb8d.js"></script>
    <script  type="text/javascript" src="https://codesandbox.io/static/js/banner.be879265d.js"></script>

    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Static Template</title>
  </head>
  <body>
    <h1>
      Click to order lunch! (opens in a new tab)
    </h1>
    <script crossorigin type="text/javascript" src="https://codesandbox.io/static/js/watermark-button.be960f43b.js"></script>
  </body>
  <script>
    window.onclick = () => {
      window.open("https://doordash.com");
    };
  </script>
</html>

Guide: Adding Custom Objects[]

Want to add a custom image into your space?

Use PhotoPea -https://www.photopea.com/ and resize the object to a multiple of 32 pixels. 32 pixels is the size of one tile in Gather.

Unnamed

Here is an example. A photo of a penguin I want framed. I pop it into Photopea. I add brown edges. And resize to 32 pixels. Here is the result:

Unnamed (2) (1)


Active Image Tricks for Gather Town[]

In gather town, you can create customized objects by uploading pictures. If you want to make more customized objects change, just set the obecjts as an interactive object.

Interactive objects are different from normal objects. They will be triggered when the character enters the activation distance (at this time, there will be a message that you can interact by pressing the x key). If there is no special requirement, generally we will set the item as Note object. When the user presses the x key, a default message will appear. (Note: The message part must be filled in (you can fill in a blank or the like), otherwise you it wont work.)

Prerequisite knowledge[]

1. The size of the objects[]

The size of each grid on the map is 32x32 pixels. So a 40x70 pixels picture will become a 2x3 grid object after uploading, and there will be 24 pixels wide blank space on the right side, and 26 pixels wide blank space below.

2. Activation distance[]

The trigger range is counted from the outside of the grid where the object is placed. If the Activation distance is 3, then the entire trigger range will be 9x8 grids. If distance is set to 0, it can only be triggered by standing directly on the object.

3. Active image (in advanced options)[]

The picture displayed when the object is triggered. If this picture is different from the original size, the triggered picture will be presented in a way that aligns with the upper left corner of the original picture.

Examples[]

1. Change the Object Image[]

When the object image and the active image are different, a change will occur when triggered.

2. Make the Object appear[]

When the object image uses a blank image, it will cause the sudden appearance of the active image when it is triggered.

3. Make the Object disappear[]

When the active image uses a blank image, the object image will suddenly disappear when triggered.

Advanced Examples[]

1. Mimicking "Dialog"[]

The original picture is an npc image , and you want that afterwards the image will be a picture with dialogue after it is triggered . At this time, the active image is set as a picture with dialogue, but the object image cannot directly use pictures with only npc. It is necessary to trim the dialogue from the picture with dialogue, and then get a picture of the same size to be used as an object image. Otherwise, the position of the character will be off after the trigger.

2. Items get bigger[]

If the original image is a 1x1 Image, I hope it will become a 5x5 Image after it is triggered.

If we just use the basic method, the location of the enlarged Pokémon will be off. This is why you need to actually use two objects, one that is invisible before triggering, and another that is invisible after triggering.

Credits to:

https://hackmd.io/@flab/gathers?fbclid=IwAR15mj4tDWdJyGXB99mzrd0ccCiXzGChpU0lb5r0lFhZYI6C1iDY04MLRMY#Embed-Refs