/ English

Unity: Making a simple scene with Shader Graph materials - Part 1

(Part 2 coming soon)

I've been making some experiments with Unity 2018.1 for a while, and one of the things I like the most is Shader Graph: making custom materials using visual nodes and getting immediate results is just great.

One of the games that I played a lot when I was a kid was Space Harrier 3D, the first game I got for my Sega Master System a long time ago, so I've tried to reproduce its gameplay visuals on Unity. This is the final result:

plane

The player constantly advances toward the horizon, and can move left and right. There are only three GameObjects in there: a cylinder for the player and two planes for the floor and background. The textures are procedurally created on Shader Graph, and this is how the objects are positioned on the scene, with the player selected:

scene_overview

The camera is positioned behind the player to give the correct perspective.

camera_detail

In this post, we'll discuss the simpler material: the floor.

Floor material

This is the complete graph:

floor_shader

The floor is made with a Checkerboard node, which is readily available on the editor. Start by plugging its output to the Color input of the Unlit Master node, which will give an initial result, and leave the other Unlit Master parameters on their default values.

Now let's tweak the Checkerboard parameters, listed below on reverse order:

floor_shader_checkerboard_detail

  • Frequency: this is a Vector2 parameter that specifies the horizontal and vertical frequency of the squares. In this example, I've set it to (12,4), which in my case looks nice from the camera position.
  • Color A and Color B: the color of each alternating square, just pick whatever combination you like. They're material properties, so you can set them from the editor or via script.
  • UV: you can supply a custom UV for the generated texture, and this is where things get interesting.

As you can see in the final result, the texture is scrolling towards the screen, as if the player is running into the horizon, and we can easily achieve this effect with the Tiling and Offset node: if we keep increasing the offset by a fixed amount, the texture will keep scrolling and repeating itself.

In this example, we just have to keep increasing the Y coordinate of the offset, which can be achieved with a Time node. As the Offset input of Tiling and Offset is a Vector2, just create a new Vector2 node and plug the Time output from the node to the Y coordinate of the Vector2. The texture will probably be scrolling too fast or too slow, so just use a Multiply node and plug in a value to scale it just right. In this case, the scale is a property called Speed multiplier.

floor_shader_detail_time-1

Also on the Vector2 node the X input is connected to a Displacement variable - this is needed to make the floor scroll horizontally when the player moves. Increase it to increase the X offset, making the floor move right, decrease for making it move left. Just make a component that takes a Material as parameter and increase/decrease the displacement as needed.

This should be enough for the scrolling floor effect: the floor will be constantly advancing towards the player, and scroll left or right according to the player movement. If the floor seems to be running in the opposing direction, rotate the floor object or multiply the offset Y coordinate by -1.

In the Part 2 I'll explain the background material, which was made to look like a mountain range.