#Gamedev Tutorials

How To Make a simple Neon Billboard ad in Unity with Magica Voxel

Part 1 - Billboard


Share
FavoriteLoadingAdd to favorites

Since I started putting in more time for learning Unity, I came up with some techniques for bringing my work on voxel art into that platform. After some experience with Magica Voxel - about six months ago - I thought I had to bring that to Unity somehow, by breaking a barrier I had set for myself when I was still avoiding Unity. After a very intense period of study, I began to take the first steps for creating more with this game engine. I started a scene project, based on cyberpunk environments, mainly with references to the original Blade Runner and the new movie Blade Runner 2049. I started posting about it on twitter and some people began to ask me how I managed to get certain materials done.

Then I decided to write this simple tutorial to highlight the use of two specific materials: the neon and the transparent Billboard (the Blade Runner movie poster in the image above). They are effects that you can achieve with some free resources and by manipulating Unity's lighting system. In this first tutorial, we will work on the first material: the Transparent Billboard. Let's get this up and running!

Transparent Billboard

Transparent Billboard was based on the idea of transparent displays, common to games and movies. The technique I used was very simple and it can be quickly applied, which will give a very interesting result. Initially, I modeled  the billboard frame on the Magica Voxel:

Billboard frame modeled in Magica Voxel
Billboard frame modeled in Magica Voxel

Next, I generated an OBJ file to export it to Unity as an asset. Then I set up a scene with simple objects on Unity to simulate a street. I used cubes with Bricks_03_red material and a plan with granite_01 material (both from Free Architecture Textures - see link below).

Next, I imported my billboard frame for the Unity project. I put it on the scene, then I rescaled it and applied the material metal02_diffuse (Basic Metal Texture Pack).

Now let's create the transparent billboard. Initially, I made a jpg image in Photoshop to make the ad inside the scene. It's my billboard texture.

Next, I imported the texture as a new jpg file asset called indie.jpg into my project on Unity.

I created a new material that I called Billboard, modifying the Shader for Particles / Additve, and I applied the texture indie.jpg to it.

Don't mind if it appears to be distorted when you apply it to the object. You can make the necessary adjustments later. Let's create a new plan and let's call it adplane. This plan is that one you will use to get the material from the billboard. Let's instantiate it on the billboard object itself so that it becomes one thing.

Then I will adjust the plan for better proportions.

Finally, apply the material.

Note: There may be a need to resize the plane, as well as the frame, to minimize distortion. Don't worry if this happens. It's part of the process.

Let's turn the billboard and fit it into one of the cubes. Notice that it is transparent, with a very interesting effect. But can we improve a little bit more?

Adding Light to the Billboard

Initially I'm going to turn on the directional light, to give environment an atmosphere of a night time. For that, I will erase it from the scene:

I will create two point lights. First, a white color according to the image below:

Then, a red one.

The result will look like this:

I can even make improvements with light probes, depending on what you want to do with your ambient light, as well as apply postprocessing effects. There are no limits to these features.

Final Words...

I hope this simple tutorial can help you enhance your scenes, and give more life to your game scenarios. If you have any questions, shoot an email to mgleitef@gmail.com and or leave your message on the comment section below. I will be glad to answer your questions. In the next article, we will make a very simple and functional neon material.

 

Assets used in this tutorial

Basic Metal Texture Pack - https://www.assetstore.unity3d.com/en/#!/content/37402

Free Architecture Textures - https://www.assetstore.unity3d.com/en/#!/content/23834

Unity Project File (2018.1.0f2) - https://goo.gl/SxAGJz

Tags
#gamedev #indiedev #tutorial #unity3D #gaming gamer #unity voxel bladerunner MagicaVoxel #neon #magica

Manoel Garcia

Portuguese Voxel artist, game designer, and toy maker. Living in 80's all the time...

Leave a Reply

Your email address will not be published.

Back to top button
feedback_mix.png