Search Unity

  1. Unity 6 Preview is now available. To find out what's new, have a look at our Unity 6 Preview blog post.
    Dismiss Notice
  2. Unity is excited to announce that we will be collaborating with TheXPlace for a summer game jam from June 13 - June 19. Learn more.
    Dismiss Notice
  3. Dismiss Notice

Question Various issues with Marker customization

Discussion in 'Timeline' started by Julien-Lynge, May 27, 2024.

  1. Julien-Lynge

    Julien-Lynge

    Joined:
    Nov 5, 2010
    Posts:
    146
    I'm seeing a number of weird things with trying to visually modify markers on the timeline. Am I doing anything wrong trying to customize the timeline visuals? Can anyone give any more information on why things are working this way?

    I started working from the example here: https://github.com/Unity-Technologies/TimelineMarkerCustomization

    I'm using the latest Timeline package with 2022.3.21.

    Here's what I'm seeing:
    • It seems that I have to put any styles in Stylesheets/Extensions/common.uss. If I change any part of that path, I get the error:
      Cannot find style X for Y
      UnityEngine.GUIUtility:processEvent (int,intptr,bool&)
      Is that correct? I don't see that documented anywhere; I only figured it out by starting from Unity's example and modifying until things broke.

    • When I change the common.uss, nothing actually changes until I edit a random script and unity recompiles. Is that expected?

    • It seems like most uss parameters don't work for marker customization. Here's my stylesheet, with notes on what's not working:
    Code (CSharp):
    1. /* Hidden (Minimized) State */
    2. DestroyEvent
    3. {
    4.     width: 24px;
    5.     height: 24px;
    6.     /* Loading one of the built-in editor icons works fine */
    7.     background-image: resource("d_P4_DeletedLocal");
    8.     /* None of these do anything */
    9.     border-width: 1px;
    10.     border-color: #FF0000;
    11.     color: #FF0000;
    12.     -unity-background-image-tint-color: rgb(255, 0, 0);
    13. }
    14. /* Normal State */
    15. DestroyEvent:checked
    16. {
    17.     /* This works (built-in icon) */
    18.     background-image: resource("Cancel");
    19.     /* None of these do anything */
    20.     border-width: 2px;
    21.     border-color: #FF0000;
    22.     background-color: rgba(255, 0, 0, 255);
    23.     color: #FF0000;
    24.     -unity-background-image-tint-color: rgb(255, 0, 0);
    25.     /* These don't seem to work - it always uses the size from DestroyEvent at the top */
    26.     width: 12px;
    27.     height: 12px;
    28. }
    29. /* Selected State */
    30. DestroyEvent:hover:focus:checked
    31. {
    32.     /* None of these do anything */
    33.     background-image: none;
    34.     background-color: rgba(255, 0, 0, 255);
    35.     border-width: 1px;
    36.     border-color: #FF0000;
    37.     color: #FF0000;
    38.     -unity-background-image-tint-color: rgba(255, 0, 0, 255);
    39.     /* These don't seem to work - it always uses the size from DestroyEvent at the top */
    40.     width: 12px;
    41.     height: 12px;
    42. }
    43.  
    Am I doing something incorrect here? Does anyone have a working example that allows you to change icon size, colors, borders, etc. in the different states?
     
    Last edited: May 28, 2024
  2. Julien-Lynge

    Julien-Lynge

    Joined:
    Nov 5, 2010
    Posts:
    146
    FYI, I found this in the comments of TimelineAttributes.cs. It actually gives very helpful info that's missing in the code documentation and the online guide, so I figured I'd post it here for anyone that's interested.

    Code (CSharp):
    1. ///<summary>
    2. /// Use this attribute to customize the appearance of a Marker.
    3. /// </summary>
    4. /// Specify the style to use to draw a Marker.
    5. /// <example>
    6. /// <code source="../DocCodeExamples/TimelineAttributesExamples.cs" region="declare-customStyleMarkerAttr" title="CustomStyleMarkerAttr"/>
    7. /// </example>
    8. /// How to create a custom style rule:
    9. /// 1) Create a 'common.uss' USS file in an Editor folder in a StyleSheets/Extensions folder hierarchy.
    10. /// Example of valid folder paths:
    11. /// - Assets/Editor/StyleSheets/Extensions
    12. /// - Assets/Editor/Markers/StyleSheets/Extensions
    13. /// - Assets/Timeline/Editor/MyMarkers/StyleSheets/Extensions
    14. /// Rules in 'dark.uss' are used if you use the Pro Skin and rules in 'light.uss' are used otherwise.
    15. ///
    16. /// 2)In the USS file, create a styling rule to customize the appearance of the marker.
    17. /// <example>
    18. /// <code>
    19. /// MyStyle
    20. /// {
    21. ///   /* Specify the appearance of the marker in the collapsed state here. */
    22. /// }
    23. ///
    24. /// MyStyle:checked
    25. /// {
    26. ///   /* Specify the appearance of the marker in the expanded state here. */
    27. /// }
    28. ///
    29. /// MyStyle:focused:checked
    30. /// {
    31. ///   /* Specify the appearance of the marker in the selected state here. */
    32. /// }
    33. /// </code>
    34. /// </example>
    35. /// <seealso cref="UnityEngine.Timeline.Marker"/>
     
  3. Julien-Lynge

    Julien-Lynge

    Joined:
    Nov 5, 2010
    Posts:
    146
    Something I learned while trying to figure out how marker USS actually works:

    If you look through the USS documentation, it tells you to use url('') for accessing images within your project. That doesn't work for background-image icons for timeline markers. If you try it, you'll get a
    StyleCatalog System.InvalidCastException
    error.

    Instead, use this:
    Code (CSharp):
    1. background-image: resource('Assets/Icons/MarkerIconSelected.png');