How to implement crosshair transformation

Questions & Answers
, , , ,
1

How to implement the transformation of such a sight? So that the letter does not appear immediately, but for example a circle smoothly changes its shape to a square, adds a stroke and increases, and then the letter increases, you can simply explain how to implement crosshair animation, or some video that clearly shows how to implement this in the Unity engine. I know how to implement this transformation using HTML/CSS, is there any way to integrate this code into Unity UI? Here is a link to the example of the sight itself and its animation
https://d1yorhay.github.io/Examples/Crosshair_сss/

4

If you use UI Toolkit, it’s heavily based on HTML/CSS. Your css from the example could probably mostly be directly copy-pasted into a .uss file.

As a test, this uxml document:

<ui:UXML xmlns:ui="UnityEngine.UIElements" xmlns:uie="UnityEditor.UIElements" xsi="http://www.w3.org/2001/XMLSchema-instance" engine="UnityEngine.UIElements" editor="UnityEditor.UIElements" noNamespaceSchemaLocation="../UIElementsSchema/UIElements.xsd" editor-extension-mode="True">
    <Style src="project://database/Assets/Test/TestStylesheet.uss?fileID=7433441132597879392&amp;guid=057f6bdfd9fb16647a8fb86ee8beab3a&amp;type=3#TestStylesheet" />
    <ui:VisualElement class="root" style="flex-grow: 1;">
        <ui:Label tabindex="-1" text="e" parse-escape-sequences="true" display-tooltip-when-elided="true" class="circle_square" style="-unity-text-align: middle-center;" />
    </ui:VisualElement>
</ui:UXML>

And this uss:

.root {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    background-color: rgb(132, 200, 215);
}

.circle_square {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0;
    height: 10px;
    width: 10px;
    border-radius: 50%;
    background-color: white;
    opacity: 0.5;
    transition: 0.3s;
}

.circle_square:hover {
    height: 50px;
    width: 50px;
    border-radius: 0;
    font-size: 30px;
    border-width: 1px;
    border-color: black;
    background-color: white;
    opacity: 1;
}

Gives a pretty close result when I test it:
Unity_X3rY4GIQAE

There’s some things to note:

  • uss lacks some css features
  • Unity doesn’t have text in VisualElements by default, you have to use a “Label” element for that instead
  • Adding fonts to Unity is a bit more involved than just going font-family: "Fredoka", sans-serif;, you have to actually include the font (that’s easily googelable)
  • For some reason, setting the text to be aligned middle-center in the uss caused visual bugs, so I did it inline in the uxml instead. That’s a Unity bug.

In order to get that into the Unity game, I created the uxml and uss files above, linked them together (note that the path to the uss-file is hard-coded in the uxml file). In practice, I did that through opening the UI builder and creating the uxml file and assigning classes there. The uss I created by copy-pasting over the css from your example file and hand-modifying all the properties that the compiler complained about.

Then I created a GameObject with a UI Document, assigned a default PanelSettings asset and the uxml document to it.

2

You can have an Animation that controls properties of Canvas UI elements. Now I don’t know exactly what effect you are trying to achieve, because there are no screenshots… for some very special effects you might write a custom shader.

3

I know you can use Blendshapes in 3D to achieve this kind of transformation on avatars and I don’t think it workd in 2D. So you can make 3D meshes looks like 2D ones and use Unity Blenshapes to transform them.
In this video the lips are 3D mesh: https://www.youtube.com/watch?v=FiiQYDGb4Nc