Changes: Guides

Revision as of 02:01, 29 October 2021

Guides on this Wiki

Video Tutorials (External)

Gather mapmaker tutorial for creating virtual classrooms

Mapmaker Guides (External)

External Gather Guides

Unofficial Instructions PDF (Credits to Aekkraj Ganesan Krishnan)
Gather Basics (ReiniVous)

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

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:

<!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.

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:

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. The picture below is an object with a size of 3x2 grid. If the Activation distance is 3, then the entire trigger range will be 9x8 grids (as shown in the figure below, that is, expand 3 grids up, down, left, and right). 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 item when it is triggered.

3. Make the Object disappear

When the active image uses a blank image, the item 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

@@ Line 1: / Line 1: @@
 == Guides on this Wiki ==
-[[Guide: Communities on Gather]]
-[[Guides/Advanced Gather|Guide: Advanced Gather]]
+* [[Guide: Communities on Gather]]
+* [[Guides/Advanced Gather|Guide: Advanced Gather]]
-[[Guides/Crowdsourced Mapmaker FAQ|Discord Crowdsourced FAQ]]
+* [[Guides/Crowdsourced Mapmaker FAQ|Discord Crowdsourced FAQ]]
 == Video Tutorials (External)==