l3mpire/lemverse: The first-ever coworking metaverse

URL

https://github.com/l3mpire/lemverse

lemverse

What is `lemverse`?

Want to talk with your remote colleagues/friends?
Want to have the office you have ever dreamt of?
Want to friendly get in touch with people without messaging them?
Want to hold virtual conference?
Want to walk inside your own coworking office?
Want to try something new?

If you have answered yes to one of those questions, then lemverse is for you!

You can either launch it locally, on a server or join us at lemverse.com.

ℹ️ Can't wait to install lemverse? You can go directly to the Getting started section
⚠️ For the moment we only focus on compatibility with the Chrome browser

What can I do in lemverse?

Tileset Editor

In order to be able to create your own universe, you will need some tilesets.

We recommend using tileset of 16x16 pixels.

To upload a new tileset, visit the url http://localhost:3000/editor or http://lemverse.example.com/editor. ℹ️ Only people with admin role can access this page.

Here are the description of all parts:

As stated, you drag and drop your image file(s) to upload them.
This part is just a reminder about the index of the layers for all tiles.

Player are between layer 5 and 6.
Default index is 2 and not displayed.

This is the list of all tilesets.

You can either remove the tileset by hitting the cross
Rename it, by double clicking on it

The view of the tileset

When you are over a tile, simply hit a number from 0 to 8 to change the layer
Layer 2 is the default and thus is not displayed
Hit c to change the tile to be a collision tile (will be displayed in red)

Once you have imported the tileset and done some tweak about collision and layering, you can begin to create your universe!

Character Editor

This editor takes place at the same place as the tilesets editor.

To add a new resource, simply drag & drop over the page.

Here are the description of all parts:

Different types of filters to change the dropdown
Here is the list of all resources available in the current category
Display of the character part to help you figure out how to categorize it.
The five possible categories to change the part.

Edit your universe!

For editing the universe you need to have the right to do so. Luckily for you, outside of production anybody can do it!

To move to the editor mode, simply it e and you should see it!

Level edit

Once you hit e you will see something like this:

Here are the description of all parts:

All tiles that you can select. Move your mouse over them and click to select.

Once it's done, you can click on the map to paste it.
You can also select multiple tiles at the same time!

You did mess up and want to clean up things?

You can hit cmd+z to undo what you just did.
Or use the eraser tool to remove one layer (shortcut from 0 to 8) or hit c to remove all layers upon selection.

It's the dropdown of all your tilesets. You can select another one to be able to copy/paste other tiles.
Information about your current pointer on map.

You have the position
Information about the different tiles on each layers (useful to use the right eraser layer)

Zone edit

Once you hit e again you will see something like this:

You can add a zone then select on the map the top left followed by the bottom right corner of the new zone.

If you want to edit a zone, simply click on either corner coordinate then click on the map.

ℹ️ Press "alt" or "option" during edition to snap world coordinates to tiles coordinates

Each zone can be configured to make more things.

To edit those information, simply click on the name of the room (bold text).

{
  "adminOnly": false|true, // Put true to restrict the zone to administrators
  "name": "PianoSession", // Name displayed when you enter in the zone
  "hideName": false|true, // Shows/hides the name of the zone when the user enters it
  "roomName": "", // Open a jitsi room with the given name, leave empty to do nothing
  "teleportEndpoint": "", // Coordinate "640,480" where unauthorized people will be teleported once enter restricted zone
  "unmute": false|true, // Automatically unmute jitsi mic (useful to unmute people on platform in conference room)
  "unhide": false|true, // Automatically show cam in jitsi (useful to show people face automatically on platform in conference room)
  "url": "https://mczak.com/code/piano/pianoframe", // If present, this will popup an iframe with this url inside
  "fullscreen": false|true, // Set the iframe if full screen or not
  "targetedLevelId": "", // Used for teleport zone. Should be the id of the level to teleport to.,
  "inlineURL": "https://status.lemlist.com|<p>My custom text</p>", // Pop-in content with URL or HTML content
  "disableCommunications": false|true, // Disabling all communications for the user inside the zone
  "yt": false|true, // If the "url" attribute is a YouTube video it allows its integration without blocking
  "requiredItems": ["itm_x", "itm_y"], // Items required to enter the zone
  "spawn": false|true, // Mark this zone as the starting zone, users will be able to enter the level from here
  "popInConfiguration": {
    "position": "top", // Optional: Pop-in position on the zone (center, left, right, bottom or top), set "relative" for custom position using "x" & "y" (default center)
    "x": 0, // Optional: Relative position from the zone's center on X (you need to set "position" to "relative")
    "y": -60, // Optional: Relative position from the zone's center on Y (you need to set "position" to "relative")
    "width": 120, // Optional: Custom width
    "height": 45, // Optional: Custom height
    "className": "wood-style welcome with-arrow tooltip acid fade-in animated-text" // Optional: List of CSS classes to customize pop-in's style
  }
}

Entity edit

An entity is something dynamic outside the map that can be interacted with and animated unlike the world map.

It is possible to do many things with it like :

Create doors
Add unique/customized elements
Create interactions
...

For game developers, an entity should be seen as a simple identifier on which components are added.

For the moment it is possible to create entities only from a JSON configuration, some parameters can be modified directly with an interface.

Here is the structure of a basic JSON for a door:

{
  // Main data
  "_id": "ent_x",
  "name": "Door",
  "levelId": "lvl_z",
  "x": 0,
  "y": 0,

  // 0 = no action / 1 = actionable / 2 = pickable (will be stored in the user inventory)
  "actionType": 0,

  // optional: Linked entity, useful to create triggers
  "entityId": "ent_y",

  // States available (optional)
  "state": "off",
  "states": {
    "off": {
      "animation": "close", // animation to play when entering this state
      "collider": {
        "enable": true // enable the collider
      }
    },
    "on": {
      "animation": "open",
      "collider": {
        "enable": false
      }
    }
  },

  // Entity representation in the simulation (optional)
  "gameObject": {
    "scale": 1,

    // Sprite component (optional)
    "sprite": {
      "key": "image_unique_id",
      "path": "image_url|sprite_sheet_url",
      "frameWidth": 32, // optional: set frame width on the spritesheet
      "frameHeight": 48 // optional: set frame height on the spritesheet
    },

    // Animation component (optional)
    "animations": {
      "open": {
        "repeat": 0,
        "start": 0,
        "end": 5
      },
      "close": {
        "repeat": 0, // -1 to animate endlessly, 0 to animate once, x to animate x times
        "start": 5, // starting animation on the
        "end": 0 // ending frame
      }
    },

    // Physics component (optional)
    "collider": {
      "radius": 15, // use "radius" to create a circle. Use "width" and "height" to create a rectangle
      "offsetX": -15, // collider offset on X
      "offsetY": -30, // collider offset on Y
      "immovable": false, // static or dynamic physic body
      "dragX": 0.05, // drag on x = "friction"/velocity slowdown speed
      "dragY": 0.05, // drag on y = "friction"/velocity slowdown speed
      "collideTilemap": true // enable or disable collision with walls
    }
  }
}

Shortcuts in lemverse

In lemverse you have only few but useful shortcuts!

Who's here and where?

What to know more about the explorers in the same universe?

Hit Tab and you will see them! And maybe ghosts...

Only admin can see others admin (with the 👑).

You can allow other users to edit your universe by clicking on the hammer and spanner 🛠.

Reactions

If you want to use pre-defined reactions, you can hit from 1 to 5 and it will display an emoji on top of your character.

If you want to use a custom one, go to the settings to add one, and use l to activate it!

Share what you want!

Activating camera, sharing screen can be annoying with the mouse itself, so simply use shift+1 (to 4) to switch the state of the options.

Editing the level

Like described in the previous part, we must use e to launch the edit mode.

Shout out to your surrounding!

Like in real life, you can shout around you.

We restricted this to the zone you are currently in.

To do so, simply hit r and speak!

Once you finished, just release the touch and your message will be sent to everybody and played instantly.

Leave a message!

It may happen that a user isn't available to chat. Fortunately, it's possible to leave a message for the user.

The use is very simple, you just have to go near the person to whom you want to leave a message and then press the p key, speak and release the key.

The user will then receive a notification. You can also open your notification list and listen to old messages using cmd/ctrl + 5.

How to create a new universe?

To create a new universe you need to add a document in the levels collection.

Simply run the following command in your browser console:

Levels.insert({ _id: Levels.id(), name: "My test universe" });

For the level structure, here are an explanation of all fields:

{
  "_id": "lvl_XXXXXXXX", // Id of the level (useful for TP)
  "name": "My test universe", // Name of your universe
  "spawn": {
    // Spawn position in level
    "x": 42,
    "y": 7
  },
  "skins": {
    "guest": {
      // Guest Avatar
      "body": "chr_11111111111111111", // Id "characters" collection
      "accessory": "chr_22222222222222222", // Id in "characters" collection (Optional)
      "hair": "chr_33333333333333333", // Id in "characters" collection
      "eye": "chr_44444444444444444", // Id in "characters" collection
      "outfit": "chr_55555555555555555" // Id in "characters" collection
    },
    "default": {
      // Default Avatar when user create account
      "body": "chr_11111111111111111", // Id "characters" collection
      "accessory": "chr_22222222222222222", // Id in "characters" collection (Optional)
      "hair": "chr_33333333333333333", // Id in "characters" collection
      "eye": "chr_44444444444444444", // Id in "characters" collection
      "outfit": "chr_55555555555555555" // Id in "characters" collection
    }
  }
}

You can use the level id everywhere it's useful, like in the defaultLevelId property in settings.json (More information below).

Tell me more about `settings.json`!

This file regroups all information about the settings.

Please note, that as stated in section Deploy in production, there is an additional file with sensitive information that will be merged with the one in the repository.

ℹ️ It's better to copy the file _settings.json available in the app folder instead of copying the excerpt below

‣

Click to toggle contents of _settings.json

Getting started!

Once you have cloned the repo:

Install system dependencies:

Meteor (you will need to install NodeJS if you are using Windows)
GraphicsMagick (most likely available in your package manager, e.g. brew install graphicsmagick)

Go to ./app/
Install JS dependencies: meteor npm install
Run the app: meteor --settings settings-dev.json

The app should now be accessible at http://localhost:3000, and MongoDB at mongodb://localhost:3001/meteor.

LocalTunnel to debug with other computers

Webrtc is working when on localhost, but if you want to test with another computer you need to have an HTTPS connection.

You will need to use a tunnel to expose you laptop over internet.

We decided to use localtunnel.

Once it's installed on an accessible server, setup env variable LT_DOMAIN without http(s) so just the domain.

After that, simply launch ROOT_URL=https://lemverse-$(whoami).${LT_DOMAIN} meteor --settings settings-dev.json.

Modify createMyPeer in peer.js to change the host to lemverse-peer-USER-DOMAIN while USER=whoami and DOMAIN=LT_DOMAIN env variable.

Access to your local instance at: https://lemverse-USER-DOMAIN.

⚠️ Don't forget to change the port to 443 for peers when using local tunnel

First login

Simply create your account and voila!

You now have a nice player with everything is black!

The first user will always be an admin and so has the right to edit the level by pressing E. If you are not the first user, you are not admin, and so you can not change anything 😭.

Let's change that!

Execute this command and you should become admin:

remote(
  `Meteor.users.update(Meteor.userId(), { $set: { roles: { admin: true } }})`
);

Now enjoy the possibility to edit by simply pressing E on you keyboard (see more detail below).

ℹ️ In production, to execute the remote command you need to add yourself (Meteor.userId()) in the admin array in settings.json (something like usr_XXXXXX) or hide it in the /usr/local/etc/lemverse.json (Server side only!).

Roles

In lemverse you have different roles:

Guest: Can move everywhere but can not talk, share screen nor listen
User: Can move everywhere except admin zone (adminOnly=true), talk, listen, share screen
Editor: Same as User but can also edit the level
Admin: Same as Editor (for all levels) but can go to every zones and give people Editor roles (Through UI)
God: Same as Admin but can also run remote command from the console

Deploy in production!

Docker images

Official image

The official lemverse image is lempire/lemverse.

If you want to pull the last version, you should do:

docker pull lempire/lemverse:latest

Build

Production

To build the latest version of lemverse, simply run the following command:

docker build . -t lempire/lemverse:latest

Development

To build from you source without having to install anything, you can run the following command:

docker build -f Dockerfile.dev . -t lempire/lemverse:dev

Or run the full dev env with hot reload: docker-compose up -d

It take a while to start the server. Then every change in the project will be automatically reloaded.

Deploy

Visit example/docker-compose-prod to find the deployment instructions with docker-compose stack.

Slack Notification upon deployment

To have a slack notification, you need to install the slack cli on the workstation from which you will deploy.

You should also have an environment variable LEMVERSE_CHANNEL

Useful commands/tricks

Beta flag

If you want to add feature either not completely finished or just to test for few users, you should use beta flags.

To use the beta flag, you have one function isLemverseBeta which can be called either in .hbs file as is or in .js with lp.isLemverseBeta('myBetaFlag').

The beta flag are stored in an array named beta inside each document in users collection.

Maintenance aka Import/Export data

Export

Since the data is stored in mongo database, you can simply use the command:

mongoexport --db lemverse --collection=tilesets --jsonArray --out lemverse-tilesets.json

Import

To import a saved collection, use the following command to import it:

mongoimport --db=lemverse --collection=tilesets --host=localhost --port=9001 --file=./lemverse-tilesets.json --drop --jsonArray

The command will replace the current tilesets collection with the data inside the file.

`remote` command

Within your browser, you can safely (god only) execute command in your backend.

We provide a command named remote that will pass the content to the backend to be executed with eval.

For example, to add a beta flag to yourself execute this command in your browser:

remote(
  "Meteor.users.update({ _id: Meteor.userId() }, { $addToSet: { 'beta': { $each: ['myAwesomeFeature'] } } });"
);

Custom avatars

It's possible to modify the avatars displayed during a discussion using an image API. To do so, you just have to modify the settings.json file.

You can add dynamic parameters to your URL using [user_id] or [user_name] to access id and name of the user who requests an avatar.

Website with images API :

Example with Robohash: https://robohash.org/[user_name]?set=set4&bgset=bg2&size=320x240

Assets

We use paid assets from limezu on itch.io.

By default lemverse appears in black because you have no textures in the project, you must go to the editor to upload the different textures.

Star History

License

AGPLv3

Credits

Screenshots

l3mpire/lemverse: The first-ever coworking metaverse

lemverse

Table of contents

What is lemverse?

What can I do in lemverse?

Tileset Editor

Character Editor

Edit your universe!

Level edit

Zone edit

Entity edit

Shortcuts in lemverse

Who's here and where?

Reactions

Share what you want!

Editing the level

Shout out to your surrounding!

Leave a message!

How to create a new universe?

Tell me more about settings.json!

Getting started!

LocalTunnel to debug with other computers

First login

Roles

Deploy in production!

Docker images

Official image

Build

Production

Development

Deploy

Slack Notification upon deployment

Useful commands/tricks

Beta flag

Maintenance aka Import/Export data

Export

Import

remote command

Custom avatars

Assets

Star History

License

Credits

Screenshots

What is `lemverse`?

Tell me more about `settings.json`!

`remote` command