Jun
30, 2020
Tutorials
Creating Genesis Plaza: Part 2
More features and essentials that make the new open source Plaza come to life!
The revamped Genesis Plaza wowed players in a number of different ways, one of which was by pioneering things that had not previously been possible in Decentraland. This second article in the series will focus on the shiny new features that made their debut in Genesis Plaza and how you can use them yourself in your own scenes.
The whole of the code for Genesis Plaza can be found in this public repo, so feel free to explore and take any ideas you want: https://github.com/decentraland-scenes/Genesis-Plaza
Teleports
Teleports let players jump from one scene to another. We included several teleports in different parts of the Plaza to some of the most popular scenes in Decentraland. Upon entering Decentraland for the first time, many have wondered what there is to do. The teleports provide a way to help players find their way to enjoyable content.
You can now add teleports to your scenes, whether it’s to forge alliances with someone else’s scene, or to connect separate scenes you own that together tell a congruent story. You now have the ability to send players anywhere on the map.
Adding a teleport to your scene just takes one line of code! Just add the following function, indicating the coordinates that you want players to teleport to.
teleportTo(‘-51,1’)
When this is called, players see a confirmation screen with information about where they are being offered to travel, they are able to decline it and stay where they are. This confirmation UI shows info about the destination scene from that scene’s metadata. So if you want to make the UI for the teleport as attractive as possible, make sure the destination scene includes a name, description and screenshot in its scene.json file. See this page in the docs for more details on how to do that: https://docs.decentraland.org/development-guide/scene-metadata/
A teleport can also take players to the most crowded place in Genesis City or to a random location from the curated list that you reach with /goto magic. See the docs for more details.
External links
External links let players travel to a site outside Decentraland. In Genesis Plaza we added several of these to direct players to the Builder, Discord, the Docs, our Blog and Twitter. You can also add external links to your own scene.
Adding an external link is just as easy as a teleport. It takes one line of code:
`openExternalURL(‘docs.decentraland.org’)`
When adding features like these, we’re always very careful about protecting our players from things that could be used to harm their experience in Decentraland. This is why we show players a dismissible confirmation screen before being taken away, to make sure they know that they’ll be leaving and where to. We also only allow the teleports and the external links feature to be used as a direct consequence of the player performing a button action. This is to prevent spammy behavior, like opening a link every few seconds, or every time the player walks into a scene, which could become really annoying.
Read more about external links in the docs.
Streaming audio
If you walk down to the south-west corner of Genesis Plaza, you’ll run into the ‘Artichoke’ building where we stream audio.
Audio streaming is a feature that was launched a little before the new Plaza opened, and the community started experimenting with it – streaming podcasts, live music and even real world events into different scenes and districts.
The code needed to stream audio is quite simple, all you need is this:
const streamSource = new Entity()
engine.addEntity(streamSource)
streamSource.addComponent(
new AudioStream(
"https://icecast.ravepartyradio.org/ravepartyradio-192.mp3"
)
)
The entity you add the AudioStream component to doesn’t need to have a position, because the sound of the audio stream is heard at an even volume through the whole scene. In Genesis Plaza, we used a trigger area (using the Utils library) to intentionally only play the stream when you’re in the area of the building, so that it doesn’t interfere with other things you might want to do in the Plaza.
The code for this is super easy, but getting the right URL to stream has its tricks. The URL must be https, and it must have CORS policies that allow its content to be accessed from other sites, as not all streaming services allow for that.
If you want to host your own streaming server, for example to stream your own podcast or live music to your scene, there are several different tools you might want to use, but we recommend using AzuraCast, which makes it relatively simple. We also recommend Audio Hijack if you need to route audio from different programs running on your machine to the stream; for example if you want to output sounds from music software you’re running.
Streaming video
If you walk up to the opposite corner in Genesis Plaza, to the north-east, you’ll run into the auditorium, where we usually keep a video stream running. This video showcases footage of different locations and games in Decentraland. This screen will also be used for streaming special events, like the SpaceX rocket launch that was streamed live on May 30th.
In these times of confinement, where so many renowned events are being migrated to the virtual world, it really helps to be able to experience them in a more embodied way through the virtual world. Several events have already used Decentraland as their venue, and we hope many more follow that trend soon!
Adding a video stream to a scene requires just a few simple lines of code. You first create material that uses a VideoTexture with the stream’s URL, and then use that material on a primitive shape like a plane or a cube.
Keep in mind that playing a video is a bit of a drain on resources. We recommend not having it play constantly – only when the player is close enough to appreciate it. In Genesis Plaza, as we discussed in the previous post, the video stream on the auditorium only starts playing when players walk into a trigger area.
As with audio streams, the sources you use for streaming video need to use HTTPS and have permissive CORS policies. Unfortunately, many of the most popular video services, like YouTube, don’t allow their content to be played elsewhere, or require it to be played through special proprietary widgets that can’t be rendered inside Decentraland. There are nevertheless some services out there that are more open about content sharing.
If you want to host your own video streaming server, we recommend using either Node-Media-Server, or Nginx RTMP module. Node Media Server is a little simpler to set up, as it already includes the necessary CORS policies.
When configuring the stream, you should keep it lightweight so that it works smoother in-world. We recommend the following settings:
- MP4 format
- 1280x720 pixels of image size
- 24-30 frames per second
- 1000-1500 kbps
This wraps up Part 2 of the Creating Genesis Plaza series, stay tuned for the next series of posts detailing how some of the iconic spots of Decentraland were created.