Skip to main content

Create the Main Screen

caution

This document needs an UPGRADE

Open the AppRoot.ui file that you created in the last section and add the following code:

//#1
template AppRoot : AppRoot render {
   //#2
   Div(style = [@header-row]) {
      //#3
      Div(style = [@gradient-line]);
      //#4
      Text_H1("Quests");
      //#5
      Div(style = [@gradient-line]);
   }
}

The code above is doing two things:

  • The first section is defining the file, which must follow the format of template FileName : CompanionClassName. In this example, the companion class came with the starter project and can be found at Assets/Evolve/Scripts/AppRoot.cs.
  • Section two is a parent div that draws the top header of the Quest Log using the header-row style.
  • Section three and 5 are the same. They are a div that draws the gradient-line style you created in the last section.
  • Section four is the Text_H1 typography element that you created earlier. It has one parameter, which is the string of text that it should display on the UI.
info

You do not need to create a new backing class for each template. Instead, you can reuse the same backing class across multiple templates. This is useful if you have shared pieces of logic or data that you want to display. There are three ways that you can provide a backing class - read more HERE.

Now that you’ve got the foundation setup, you are ready to push play in Unity and see what you have created. You should now see a screen with a header that looks like this:

incorrect gradient

This looks close, but not quite correct! Two things need to be fixed; the first gradient needs to be the opposite direction and the title text would look better if it had some extra spacing.

Fixing the Gradient​

The first child of header-row that references gradient-line is the only one that needs to be changed, since the last one is facing the correct direction. Fortunately, Evolve has two really handy features to solve this - the ability to nest styles and to query based on the child index.

Open AppRoot.style and update gradient-line with the following code:


style gradient-line {
    MarginTop = 12px;
    BackgroundImage = linear-gradient("GeneralModule::quest_gradient");
    PreferredSize = 300px 4px;

    [when:first-child] {
        BackgroundImageRotation = 180deg;
    }
}

[when:first-child] is a query that tells Evolve to only apply the defined style properties if the element is, well, the first child. BackgroundImageRotation is a handy style property that lets you rotate the background image by a defined amount, which in this case is flipped 180 degrees.

info

There are a lot of different ways that you can query to determine when a style should be applied. For example, you can apply a style to only the second child with when:child-count(== 2)] or [hover] for when the user is over the element. Read more here.

Go back to Unity and either press play or if it’s still running, push control + G to refresh the UI. You should now see the first gradient facing the opposite direction.

incorrect gradient

Fixing the font spacing​

It is common to define a base style that you only want to alter in certain circumstances. For this tutorial, the Text_H1 style will be built with the flexibility to apply it with or without lettering spacing using a style attribute. A style attribute is a way to define a custom key that can be used by the query engine to determine if styling should occur.

Open Typography.style and update the Text_H1 style with the following code:

style <Title_H1> {
    TextColor = white;
    TextFontSize = 48px;
    TextTransform = UpperCase;
    TextFontAsset = @H1_Font;

    [attr:characterSpacing] {
        TextCharacterSpacing = 0.2em;
    }
}

Attribute definition is formatted as [attr:yourCustomName] { //styles }. The custom name is what you must reference when defining the element to tell Evolve to apply the style properties. This means that you will need to update the Text_H1 element in AppRoot to reference the attribute. Head over to the file and replace Text_H1 with the highlighted code below:

template AppRoot : AppRoot render {
   Div(style = [@header-row]) {
      Div(style = [@gradient-line]);
      Text_H1("Quests", attr:characterSpacing);
      Div(style = [@gradient-line]);
   }
}

Go back to Unity refresh the UI to see the QUEST header with character spacing.

incorrect gradient