Simple Cartoon River Water Material (Unreal)

In this post I will demonstrate how to create a very simple cartoon river like in the video below:



1. Creating the river mesh and UV mapping in Maya

The river mesh is a plane that has been deformed to be shaped like a meandering river:

To make the water texture look like it is following the curves in the river, we will use a little trick when creating the UV mapping for our mesh.

We first create a normal planar UV map; the UVs will follow the same shape as the vertices in the mesh:

 Then, in the UV editor, we straighten the uvs back out like this:

Now when we animate the texture downwards in our uv space, it will follow the curves in the object.

2. Import the texture file and the water mesh into Unreal.

On the water mesh, in the Details panel under Lighting, toggle Cast Shadow off.

This will prevent the water mesh from generating a Distance Field. If the water had  distance field, the water shader below would cover it completely in foam and you would not see the water texture. Without the Distance Field on the water, we will only get foam in places where the water mesh is close to or intersects other meshes.

3. In Project settings, under Lighting,  toggle "Generate Mesh Distance Fields" on.

4. Create a new Material, and name it M_RiverWater.

Set up its shader as in the image below:

On The Panner node, set Speed Y to -0.5.

On the TexCoord node, set UTiling and VTiling to a value that looks good with your texture (I used 8)

5. Apply the material to the river mesh, and hit play to test.

You should see the water texture follow the bends in the river, and a white rim where the ground mesh intersects the water, like in the video above. You can control the width of the white rim using the FoamStrength parameter, and the speed of the water by changing the Speed Y value of the panner node.

This material is very simple. It could be improved by adding some deformation to imitate waves.

Doggie: Implementing an area trigger and spawning an object

Yesterday I implemented a small feature in my prototype where my little dog can dig up a bone:

The dig interaction is available if the dog is in a dig trigger area and the user holds down the down arrow key. After 4 seconds of digging, a bone appears that can be consumed by running through it, which triggers a flying stars effect.

Here is the implementation of this feature in Unreal. You can click on the images to make them bigger & more readable.

1. Input settings. This sets the down arrow key as the user input for triggering the Dig interaction.

2. Dig Area. This is an empty actor with a collision sphere attached. Its blueprint triggers an event when the dog enters the sphere:

Settings for the trigger collision sphere:

Trigger Area blueprint:

3. Character blueprint. This contains the logic for determining whether the dog can enter the digging interaction and spawning the bone. Right now it doesn't destroy the trigger area or spawn a dirt mound model to mark the dug up area, this will be added in a later version.

4. Animation setup: Animation has a IsDigging variable that corresponds to the one in the character blueprint. It is set in the Event graph of the Animation blueprint. Note that you have to cast the Pawn Owner to the Pet Character to get access to the Character BP IsDigging variable.

 The dig animation has a start, a digging loop, and a stop animation. These are set up in a pretty standard way in the animation statemachine:

Transition logic between the states:

5. Finally, the Bone blueprint. This is attached to the bone mesh (which has a collision box) and contains the logic for destroying the bone and playing the stars effect when the dog runs through it. 

Unreal: Doggie

I've started to take a serious look at Unreal. Here is a small prototype I've been working on in order to explore how to work in the engine:




I started with a cartoon dog model I had made some time ago. I re-rigged and weighted it and made a few animations (idle, run, jump) to start with. For the hook up in Unreal I used a lot of the information in this series of tutorials:

Unreal 3rd Person Tutorial

but I changed a few things around when I wasn't getting the animation quality I was looking for, specifically with the anticipation in the jump.

The environment is still in the experimental blocking phase - I just made a landscape, a water plane, a tree, and a rock in Maya and used them to very roughly create a little scene. Most likely the layout of this will change completely as I add actual game play features.

The water shader came originally  from this site:

UnrealtySimon

and I changed it to flow constantly in one direction rather than going from side to side.

So far this has been quite fun. I am impressed with the level of documentation and support you can get in Unreal; and I generally like its animation features.

Tech Note: How to switch FBX versions in Maya

When exporting assets from Maya to other applications, it is often critical to use a specific version of FBX. Unreal for example only supports FBX 2016, any other version of FBX will result in failed exports and crashes.

By default, Maya will be set up to use the latest version of FBX, but you can switch to earlier versions in the FBX export settings. To do so, you need to edit the export preset:

With the asset you want to export selected, open the Export options (click on the square next to Export Selection... to get to the options window):

In the Export Selection Options, set the File Type to FBX Export. 

Then, under File Type Specific Options, select Edit Preset:

In the preset, scroll down until you see Advanced Options. Expand this and click on FBX File Format. In here, you can set the FBX version you need to use. Save the preset.

I had to restart Maya after doing this to get it to actually switch versions, but your mileage may vary.

Samurai vs Rabbit

An animation I made for fun while working on MySims.


 

 (Characters copyright Electronic Arts)

Dr Seuss-ish procedural tree generator in Unity

Here are some screenshots from a personal prototype I created last year, to explore problem sets around procedural asset generation. The question I was trying to solve for myself was what kinds of rule sets would create consistently pleasing but still diverse assets.

The result was a rather fun Dr Seuss style plant generator. Here are some screenshots of the kinds of things it produces. Everything about these assets is created from scratch in Unity - meshes, textures, even the color design.

I might do a more in-depth write up of some of the methods I used later, but for now enjoy the pretty pictures!

Minez

Minez! was a prototype game I made to see what would happen if a game's central mechanism was built around audio clues rather than visuals.



You are the captain of a small U-Boat who is sent into an underwater mine field to find an accidentally triggered mine. The mine emits sonar pings at regular intervals, and you need to find it using only the cues from the audio before it explodes.

I threw in a defusing puzzle as well that was basically a game of Simon, which isn't included it in the video below since it isn't really relevant to the problem I wanted to explore.

I found the experiment very compelling - the emphasis on listening rather than looking seemed to increase the sense of being there, and the tension.

tem·po·rar·y

Another Unity project, this is my contribution to the genre of "serious games"; it feels rather relevant to me today, so I am finally posting some footage from it.

Make sure that you have the sound on, it is a big part of this piece.

Eyetastic!

This is from a small Flash project I made some years ago. I wanted to create some really nice eye motion for looking at the mouse pointer, where the pupil properly stops moving at the rim of the eye and a pair of eyes doesn't go crazy cross eyed when the mouse is between the eyes. Then I went a little crazy with the arrangement, and the result is satisfyingly psychedelic :)



Here is the source code for the eye motion:

package {
import flash.display.MovieClip;
import flash.events.Event;

public class Eye extends MovieClip {

public var eyeball:Eyeball;
public var eyeballMask:EyeballMask;
public var pupil:Pupil;
public var maxDistance;

public function Eye():void {
eyeball.mask = eyeballMask;
pupil.mask = eyeballMask;
eyeballMask.alpha = 0;
maxDistance = 156;
addEventListener(Event.ENTER_FRAME, followMouse);
}

function followMouse(e:Event):void {
// calculate mouse offset
var distx:Number = mouseX - eyeball.x;
var disty:Number = mouseY - eyeball.y;
var dist:Number = Math.sqrt(distx*distx + disty*disty);
//if the pupil is within the confines of the eyeball
//translate it towards the mouse at a set fraction
if (dist < maxDistance) {
pupil.x = distx / 7;
pupil.y = disty / 7;
}
//if the pupil is at the edge of the eyeball
//translate it along the radius of the eyeball
else {
var angleA:Number = Math.atan2(distx, disty);
var angleB:Number = (180*(Math.PI/180)) - ((90*(Math.PI/180)+angleA));
disty = maxDistance * Math.cos(angleA);
distx = maxDistance * Math.cos(angleB);
pupil.x = distx / 7;
pupil.y = disty / 7;
}
}
}
}