My favourite field of computer science would definitely be video game development. I spend a few hours each weekend working on shader effects, physics engines and all sorts of other game subsystems. So when people started asking us for Raygun.io support for Unity 3D, of course I jumped at the opportunity to sneak in some video game development during work hours! Shout out to the Unity 3D team for creating a fantastic product. I found the editor very easy to use for this blog post without needing a single peek at the documentation. Raygun4Unity will be in open beta very soon.
Before we begin, lets take a quick look at the Unity editor. After creating a new project for a 3D game, you’ll see something like this (without the temporary cube that I’ve added):
Right in the center of course is the 3D scene viewer. Here you can see your scene taking shape in real time as you make changes to it. The 3D scene viewer is interactive, allowing you to click objects to display handles. These handles can be dragged to translate or rotate the object – as you’d expect from any decent 3D editor.
On the left hand side you’ll see the Hierarchy tab which shows the nested structure of all the game objects you’ve added to the scene including cameras and lights. This is also useful for selecting objects that you need to manipulate, but can’t click on them in the 3D scene viewer if they are being covered by other objects.
On the right hand side is the Inspector panel which displays all the details about the currently selected object – which could be a game object in the scene or even an asset.
Finally, along the bottom is the Assets pane where you can navigate the assets directory and view all the 3D meshes, textures and materials. I like how assets are visually displayed (which you’ll see soon), making it very easy to find what you’re looking for. To keep things simple for this blog post, I dumped all the assets in a single folder called Raygun.
While working on this blog post, I had the 3D scene viewer in isomorphic mode. This can be done by clicking the text in the top right corner of the 3D scene viewer just below the axis control. The great thing about isomorphic mode is that when you click-drag the right mouse button, the camera will swivel all the way around the object you are editing. (In perspective mode, the camera rotates on the spot by default, or you can hold Alt + left mouse drag to swivel). In any mode, click-dragging the middle mouse button can be used to pan.
Adding 3D meshes
Now lets start building up the raygun object. One way to do this would be to create a single mesh for the entire raygun and apply a colored texture. Instead, I have split the raygun into all the individual bits to be assembled in Unity. To do this, I used a 3D mesh editing application called Blender 3D, and then exported each mesh using the 3ds format. Then to get these into Unity I simply dragged the exported mesh files from Windows Explorer into my Raygun assets folder in Unity.
Adding these 3D meshes to our scene could not be simpler – just drag each mesh from the assets pane into the Hierarchey tab. Dropping a mesh on an existing game object in the Hierarchy tab will start to build up the nested structure of the Raygun. By doing these drag and drop operations, Unity is creating new game objects, and automatically applying a “Mesh Filter” component to them which references the dragged mesh. A “Mesh Renderer” component referencing the default grey diffuse material is also added so that the meshes can be rendered in some way. These “components” that I’m referring to can be seen in the Inspector panel. As you add each mesh to the scene, drag the arrows in the 3D scene viewer to position them where you want. Continue this until the raygun has been fully assembled.
If you hit the play button to run the game, you’ll see the raygun looks pretty dull. This is because the scene doesn’t have any lights yet. The reason why the meshes look better while you’re editing them is because the scene viewer has built-in lighting (which you can toggle on or off with the little sun button above the scene). So lets add our own light to the scene. I’ve decided to go with a directional light which you can add by clicking the “Create” button at the top of the Hierarchy tab and then select “Directional Light”. The position of a Directional light won’t actually affect anything, so position it wherever you like – I placed it close to the camera. What does matter is the direction of the light. Switch to rotation editing by using the buttons in the top left corner of Unity. Then rotate the light rays however you wish.
Following the style of the Raygun.io logo, lets apply some toon shaders. Unity provides many built-in shaders ready to use including some basic toon shaders, and there are many shaders available in the Unity Assets store. The toon shaders aren’t loaded into your Unity project by default, so let’s do that now. Right click the Assets folder, hover over “Import Package” and select “Toon Shading”. Now we can create materials for the Raygun that use the toon shader. Right click the folder where you want to store the materials and select “Material” from the “Create” menu. Rename the material to something appropriate based on what it will be used for. When you select the material, its details can be viewed and edited in the Inspector panel. In the Shader combo box at the top, select Toon -> Basic to see all the toon shader properties – such as the Color which you’ll want to change. For the ToonShader Cubemap property, hit the “Select” button and then choose the “Toony shader”.
Now simply drag the material from the assets folder and drop it onto one of the game objects in the Hierarchy tab. Once this is done for all the subcomponents, you’ll have a nicely illuminated and colored Raygun.
Anyone in the Mindscape office could tell you of my obsession with particle emitters. So I just had to get in at least a basic particle emitter before the end of this blog project. Click the little “Create” button in the top right corner of the Hierarchy tab and select “Particle System”. Drag the new particle system object onto the muzzle of the raygun and set its position to (0,0,0) in the Inspector panel. The default particle image has too much gradient for our toonish style of the Raygun, so I’ve created a particle image that is just a white circle on a transparent background. To apply your own particle image, add the image somewhere in your assets directory, and then drag the image from the Assets pane to the Particle System in the Hierarchy tab. By selecting the Particle System, you’ll see a heap of options appear in the Inspector panel, all of which can be expanded to display even more options.
The first bunch of options let you set the starting state of each particle including the position, rotation, size and color. Each property can be set to a constant, calculated from a curve, or randomly selected between constraints. Most of the remaining options define how each particle changes over time. For this blog post, I’ve set the Shape to be a sphere with a radius of 0.7, and checked the “Emit from shell” option. Then I changed the “Start Speed” to -2, and the “Start Lifetime to 0.4 so that the particles are sucked towards the center of the emitter sphere and then stop. Last of all I set the “Start Color” to white and cause the color to animate to blue by setting the “Color over Lifetime” option. And here is the final result:
IMMA CHARGIN MAH LAZER
I hope you’ve enjoyed a look at how easy it is to get started with Unity 3D. Check back later for more blog posts like this one as we march towards releasing Raygun error reporting for Unity 3D. All the best for your video game projects!