For the wheels i made simple generic script which rotates a object by a given speed along a given axis.
import { Behaviour, serializeable } from "@needle-tools/engine";
export enum RotationAxis {
X, Y, Z
}
export class Rotator extends Behaviour {
//@type RotationAxis
@serializeable()
axis : RotationAxis = RotationAxis.X;
//@type float
@serializeable()
speed = 1;
update() {
const angle = this.speed * this.context.time.deltaTime;
switch(this.axis) {
case RotationAxis.X:
this.gameObject.rotateX(angle);
break;
case RotationAxis.Y:
this.gameObject.rotateY(angle);
break;
case RotationAxis.Z:
this.gameObject.rotateZ(angle);
break;
}
}
}
I might had to write the enum manually in the Unity C# side, but after that it worked as expected
Then we have the grid with faded borders
First we offset UVs based on which we sample the the tile texture. This creates the grid. Then by calculating a nice faded circle the two results are multiplied.
This creates this basing illusion.
After that, i wanted to add more sexy-ness to the whole presentation by adding some sort of highlight. I decided to highlight the wheels with a dashed circle rotating with the wheel.
Again, i decided for faster iteration it would be a custom unlit shader.
this would nearly break the immersion, but this was made for a reason. That’s tied to the next point.
.
.
4) 3D UI
Luckily Needle started to support custom fonts and generally supports 3D UI so making this was a breeze.
Two normal text components docked into space.
These two are the main shots… and that gets us to the last point.
I think the only note worthy thing to describe is how the cut was made
In order to not making multiple animations… which in theory you sometimes want for better reorder capabilities.
In the “Curves” view where you can set the interpolation