Monday, March 21, 2016

The Title

Spriter won't actually make the animation easier in Vargenstone's case, due to the perspective, but it may make the interaction between animation and game easier, especially now that my painting program of choice now has an experimental Spriter Exporter. Tomorrow's my day off, and I intend to spend a couple of hours tinkering with said tools to see if a) they make things more efficient and b) if the efficiency gain is sufficient to justify altering my workflow.

Meanwhile, since our Flash expert explained how he did the title for Elvetika, here's a bit on how I made the title Screen for Vargenstone:

That's the title screen in 3D view.  Three graphics overlaid.  They scroll up at different speeds (parallax), giving a neat little effect where you are looking at the moon, and then the camera seems to pan down to show the Krag.

I need to make the trees half again as tall.  Right now, you can see the top of the Krag even at the beginning, and the warmer colors pull the viewer's eyes away from the moon.  This second part is intentional, but it needs to happen after a moment of looking at the moon through trees.

Here's a bit of code!  This script is attached to the camera. It's quick and nasty, and I don't care. I've left out the variable declarations at the top for space.

void Update ()
    elapsedTime += Time.deltaTime;

    if (timeToStart < elapsedTime)
        backdrop.transform.position = paraScroll(
        foreground.transform.position = paraScroll(
        extremeForeground.transform.position = paraScroll(

        currentEasing = Mathf.Lerp(easeIn, interpolationFactor, 

            easeIn * Time.deltaTime);

    if (timeToTitle < elapsedTime)
        var spr = (SpriteRenderer)titleText.GetComponent(

        spr.color = new Color(1,1,1, 
            spr.color.a + Time.deltaTime * titleInterpolation);

Vector3 paraScroll(Vector3 start, Vector3 target)
    target = Vector3.Lerp(

        start, target, Time.deltaTime * currentEasing);
    // Reset the z to maintain image stack height.
    target.z = start.z;
    return target;

There's something wrong with this code, as part of the idea is it will accelerate into the pan instead of just jumping in at full speed. But the final effect is close enough for hand grenades.

1 comment:

  1. After seeing your splahs screen, I'm thinking of stealing that parallax use for Elveteka, no programming for me though, just WYSIWYG in Flash.

    It's funny how we ended with the same structure: sky, mountain, foreground. I even had a sketch with flanking trees at first!