Particles in Frame

‍The short version:  Particles are incredibly cool visual effects, but don't go overboard because they can be taxing on performance. If you want to learn about another way to create cool dynamic visuals, check out Shaders.

Particles? What's a particle system? Or a particle editor? Let's dive in to explore how you can liven up your Frames with these magical effects. For those that are new here, Frame is a cross-platform immersive collaboration and creation tool that runs right from a web browser on desktop, mobile, and VR. It's the metaverse made easy.

For starters, a "Particle System" uses small, usually animated 2D graphics to create effects like snow, glitter, fireworks, or really anything you can think of that involves lots of small stuff shooting around in space. More sophisticated particle systems can achieve smoke-like effects as well.

Let's dive into how to build these particles in Frame. First, to add them into your Frame you can use the "ADD TO THIS FRAME" dropdown in the sidebar, or the blue plus button in the toolbar on desktop. This button says "PARTICLES" in the screenshot, but we've updated this to just say EFFECTS.

When you add an Effect, we create a "particle system" for you. A particle system is a collection of particles with certain characteristics. Some of these characteristics might be color, frequency, or rate - there are tons of properties you can tweak. So, what does the default particle system looks like? I would describe it as some elegant, luminescent blue fairy dust:

This nice little particle system might be just what you want, but I suspect many of you will want to customize these particles and get more creative. Before I show you how to unlock particle magic, I want to warn you that having too many particle systems, or extremely complex particle systems, might take a toll on the stability and performance of your Frame. Don't go overboard with these - and keep in mind your target audience. If you anticipate lots of people on mobile, you will want to be more careful.

All that said, let me show you how to create your own particle systems! To achieve this, we leverage the impressive Particle Editor from our partners at Babylon.js. For some more info about FRAME's relationship with Babylon.js and their awesome team, check out our blog post from earlier this year that announced the partnership.

First - you need to be in desktop to edit your particle systems. We don't let you do it in VR or mobile yet. As you might expect, you first need to turn on Edit Mode, which you can do with the pencil icon in the bottom toolbar. With Edit Mode on, you will see each Particle System has a little shape that will show up in the middle of it. Click on that shape and you will see our Edit Menu appear at the bottom left. In our Edit Menu, you will see a button for OPEN PARTICLE EDITOR. Click that and the full Particle Editor will appear on the right side of the screen:

This Particle Editor is intimidating at first glance- but it lets you tweak TONS of aspects of these particles to create stunning, vibrant effects.

When the Particle Editor first loads, you will see a smoky, shimmering particle system in there that the editor will have loaded as an example. It doesn't actually show your current particle system that you have selected in your Frame. To get that one to show up, you have to copy and paste its "snippet", which is the string of characters that appears in the Edit Menu at the bottom left, next to "Add Snippet". It's the stuff inside the parentheses.

If you want to make modifications to this specific particle system, copy that snippet ID and then paste it into the Particle Editor on the right. See where it says "Load From Snippet Server" in the Particle Editor. Click that, and then paste in your Snippet ID

Now, when you paste in the Snippet ID of your new Particle System, nothing might appear at first in the preview window. That's because here in the Particle Editor, it might not have an emitter. An emitter is what the particles shoot out from, so without it - no particles for you. You do see the particles in FRAME itself, because that little shape you see in your particle system while you are in Edit Mode is actually an emitter!

No problem, though. Just look in the Particle Editor for the Emitter dropdown (see above), and select emitter. That will give you an emitter in the Particle Editor, and sure enough you should now see the particle system that is in your Frame right inside the Particle Editor preview window:

Awesome. Now, you are in a position to modify your particle system. Keep in mind that making changes in the Particle Editor won't automatically update the particle system in your Frame. Once you make changes and you like what you see, you will need to "Save to snippet server" (you can see that button in above screenshots), and then paste your new snippet ID into the field in FRAME's Edit Menu on the left (see the field below Add Snippet. Your particle system will then update to the new version!

But let's see some of the ways you can use the Particle Editor to tweak your particle systems - this is the fun stuff. In this video below, if you skip to 3 minutes in you will be at the juicy Particle Editor stuff.

This is pretty exciting stuff! Remember that you need to save your new particle system to the snippet server, then copy and paste your new snippet ID into the Edit Mode window on the left to see your new particles in your Frame.

‍

Have you created a cool particle system in your Frame that you want to show off? Let us know on Twitter or share it on our Discord!

‍

We're here to help with any questions about FRAME. Just reach out to hello@framevr.io