34 ratings
Creating Floating Text with Particle Systems
By R234
This step-by-step tutorial explains how to create dynamic floating text in Source Filmmaker using a rope particle system, from creating the texture and material files to making them appear in your shots.
Rate  
Favorite
Favorited
Unfavorite
Requirements
You will need these programs to follow my guide:

-GIMP ( http://www.gimp.org ), or any other image editing software that supports layer masks such as Photoshop
-VTFEdit ( http://nemesis.thewavelength.net/index.php?p=41 )
-Notepad
-Source Filmmaker (duh!)
Step 1: The .vtf File
Note: this part of the tutorial is written for GIMP 2.6. If you have Photoshop or another similar program and are familiar with it, you should be able to work out how to achieve the same result by following these instructions, but I can only offer support for GIMP. You also need to make sure your software supports layer masks.

First of all, we need to launch GIMP, and create a new image. One important thing to keep in mind is that your image's dimensions must be powers of 2. It should also be wider than higher, if it isn't square. In my case, I want the text to be fairly high resolution, so I'll go for 1024X512.



So this is what the GIMP window should look like:



Next step is to choose the text's colour. We can also give it a fancy gradient or texture, but I'll simply go for a solid cyan with the bucket fill tool.



Now for the text itself. To do that, we'll need a layer mask, so go ahead and right click the "background" layer in the layers window, and choose "Add Layer Mask...".



We'll make it a full black layer mask with the appropriate radio button, and click "Add".



Our image should now be fully transparent, and show the grey checkered background. We'll now need to show the layer mask so we can edit it, so go ahead and right click the layer again, this time choosing "Show Layer Mask" (you should also make sure "Disable Layer Mask" isn't checked while you're at it). The image should now turn fully black.



Now's time for the actual text. Using the text tool, we'll write our line of text in white (the white colour is important). The thing to keep in mind here is to take up most of the image with text so that it's as high resolution as possible, but by still keeping a bit of blank on both sides. This'll make it easier to set the text's length in SFM. Something like this will do the job quite well:



So now the layers window should look like this, with the text in its own layer above the actual image layer:



We'll need to paste this text into the layer mask. To do so, select the text layer, then select the whole image (Ctrl+A), copy it (Ctrl+C), select the background layer's mask (the black rectangle/square), paste (Ctrl+V), click outside of the image's boundaries with the select tool to apply the floating layer. You can then delete the text layer. You should now have something like this:



We can now right click the layer and uncheck "Show Layer Mask", to preview what the text will actually look like in SFM.



If you're happy with the result, next step is to rotate the image 90°. This is important, because rope particle systems in SFM read textures from top to bottom. To do that, Just go into "Image", then "Transform", then "Rotate 90° counter-clockwise" (clockwise also works though, it just means you'll have to move a different joint on the particle system in SFM. More on this in part 3).



And that's it, the texture's done! Now we need to save it into a .tga image. First thing is to make sure the actual image is seleted in the layers window, not the layer mask. If the mask is selected it won't save correctly (you'll get a warning if you attempt to save the layer mask instead). Then go into "File", "Save as..." (I hear it's "Export" in GIMP 2.8, thanks to Pte Jack for pointing that out). Give it an eloquent name and save it somewhere you'll remember. For now I'll save it on the desktop, and call it "hello.tga".



You'll have to "export" the .tga, not just save it. The menus differ depending on the version of GIMP you have, but the bottom line is to do what GIMP tells you will allow you to retain the layer mask data.

Now that we have a texture file saved as a .tga, we need to make it into a .vtf (Valve Texture File). Thankfully, with VTFEdit, this is a piece of cake. So let's Launch VTFEdit, and import our .tga file. The import dialog appears:



Uncheck "Generate Mipmaps", if it isn't already. Mipmaps will only make the texture look bad in the case of a rope particle system. Click "OK". This is what the imported image looks like:



It might seem like the layer mask is gone, but it's simply not visible by default in VTFEdit. You can preview it by clicking "View", then "Mask".

All you really have to do now is click "Save", and save the .vtf file.


Step 2: The .vmt File, and File Placement
Now that our .vtf file is ready, we need to do two things for it to work in SFM: Place it in the correct folder path, and create a .vmt (Valve Material Type) file associated with it. I know VTFEdit can generate VMTs, but the ones it creates will not work properly in our case, so we'll make our own.

Go to your Source Filmmaker "game" folder, which is usually located in "{drive}/program files (x86)/Steam/SteamApps/common/SourceFilmmaker/game/". Go into your desired mod folder. I recommend "usermod", but you can use one you created as well. Then go to "materials" (create it if it does not exist). Finally, create a folder for your custom materials. I'll call mine "R234", that's where I put the stuff I made myself. Your current filepath should thus look like "{drive}/program files (x86)/Steam/SteamApps/common/SourceFilmmaker/game/usermod/materials/{folder}/", like in the example below:



Move your .vtf file here. Now, you need to make the .vmt. This is easy enough: Just open notepad, and type the following in it:

"UnlitGeneric"
{
"$baseTexture" "{your folder's name}/{your .vtf's name, without the extension}"
$translucent 1
}

...and save it as a .vmt file, preferably in the same folder as your .vtf and giving it the same name. As an example, this is what my hello.vmt file looks like:



If you've followed all the steps correctly so far, you should have two files in a folder that's in a "materials" folder, namely {name}.vtf and {name}.vmt, and everything should be perfectly SFM ready!
Step 3: Manipulating the Text in SFM
Now that we have our texture and material files, let's launch everyone's favourite CG program, Source Filmmaker. I'll assume you already have your project file with map loaded and all that, ready to add the floating text.

So first and foremost, we'll import a rope particle system. So let's click the "Add" (+) button in the Animation Set Editor window, and choose "Create Animation Set for New Particle System".



So now, what particle system should we use? Theoretically, any one that's a "rope" particle system will do, but my favourite to use is in "tf/particles/class_fx.pcf", and it's called "laser_sight_beam". It has all the necessary controls and isn't too hard to edit for our purpose, so we'll use this one.



Set the start time, emission duration and lifetime according to your shot's needs (the latter two must be set to how long you want the text to be visible). Once we have the laser sight particle system imported, we need to instance it so we can modify it. To do that, right click the animation set, choose "Show in Element Viewer", "Particle System"...



...then right click the particle system's name ("laser_sight_beam1" in green at the top), and finally choose "Instance Particle System".



A "+" should appear next to "particleSystemDefinition", meaning you can now edit the particle system's parametres. First thing we'll do is remove the glowing dot at the end of the beam. Click the + to expand "particleSystemDefinition", and then expand its "children" section. Select "laser_sight_beam_dot", and hit your Delete key to get rid of it.



Next, we'll change the material to the one we created. A bit lower should be a "material" element, with "particle\bendibeam.vmt" as value. Change it to your custom folder's name, a backslash and the name of your .vmt. In my case I have to type "R234\hello.vmt".



Next step: go in "particleSystemDefinition" > "renderers" > "render_rope", and look for a variable called "texel_size", with a default value of 10000. Set it to about 0.05. What this value does is set the "width" the texture is drawn at.



Let's get back into the Animation Set Editor tab and expand "laser_sight_beam1", then "all". Select "controlPoint0" (or "controlPoint1" if you rotated the texture clockwise instead of counter-clockwise in GIMP), make sure the Timeline is in Motion Editor mode, and move the control point to the right with the translation gizmo.



You might have to move the playhead around a bit for the particle system to adjust according to the joint, and if you haven't already, move the playhead completely out of the shot for it to refresh. You can now fine tune the distance you need to put the control point joint at, and the text's width by going back into the Element Viewer. For instance, here, I decided to reduce the texel size to 0.04, and moved the joint a bit farther to get the wanted width.



There's one last value you should adjust, and that's the text's height. The variables you need to edit for this are situated in "particleSystemDefinition" > "initializers" > "Radius Random", and are called "radius_max" and "radius_min". You should set both of them to the same value, unless you want the text to be all wavy (you can experiment with it to see what I mean).



So that's it! By messing around with these you should be able to get the text to look just as you want it to. You can then animate the particle system's "transform" joint like you would anything else, to have text fly by, shake, follow someone, etc etc.
Conclusion
I hope this tutorial helped you! If you think anything is not well explained enough, or even saw something minor like a typo, don't hesitate to comment about it, and I'll gladly do anything I can to rectify any mistakes I made.

I would also like to point out that with enough creativity, this method can also be used to make some pretty cool stuff besides floating text. On this note, I leave you with a shot of my next video's main character, nonchalantly gazing ahead, a wisp of straw in his mouth...

9 Comments
< >
R234  [author] Mar 21 @ 8:41pm 
@Flutter_Swat
Well, this isn't a very convenient process for a still render like a wallpaper. I think you'd be making your life an awful lot easier if you just edited the render afterwards in Paint.NET or GIMP or whatever.

But, whatever floats your boat I guess.
Flutter_Swat Mar 21 @ 8:34pm 
THANK YOU, you helped out so much with a wallpaper im working on
[NMP]Destructor Jan 13 @ 4:02pm 
When the camera is too far away from mine, it becomes blurry and wavy
Deeakron Dec 7, 2013 @ 5:02pm 
Thanks, although this is after the 2ND time I used this... :]
[Dapper] Al3x Oct 2, 2013 @ 12:15pm 
Thanks, this was very helpful! :)
Tamas Jul 15, 2013 @ 9:49am 
Could you tell me how to use this method to create an unusual particle effect so to speak? I have an animated cash.vtf file which is made by Valve. this is the only particle effect for unusuals that is not a normal "particle effect"

I have done anything that this article mentioned, but it doesn't seem to work, all I see is a big texture with all its frames.
› rogue13 Jun 13, 2013 @ 4:49pm 
very nice. Well done sir.
Scoutaloo May 25, 2013 @ 4:29pm 
Just what I needed. +1
PalmliX Feb 25, 2013 @ 8:01am 
This is a great guide man, thank you so much!