⛳
TimelineのMarkerの見た目を変更する

2025/07/09に公開
 はじめに何故かAIに聞いても検索してもイマイチ完全な情報が少なかったので、メモとして書いておきます。
Markerの種類が色々増えてくると、ひと目で区別がつかないため視認性が悪くなってきていました。

そこで、Markerの上にアイコンを重ねて表示するようにして、視認性を向上させることにしました。

 環境Unity 6000.0.46

 実装後の見た目こんな感じで、Markerの上からアイコンを重ねて表示している感じです。

アイコン画像は絵文字です。

 実装方法Editorにて以下のような親クラスを作成します。
MarkerEditorを継承して、DrawOverlayメソッドをオーバーライドします。
ついでに、GetMarkerOptionsメソッドもオーバーライドして、ツールチップを設定します。これはマウスを合わせたときに表示されます。
using UnityEditor;
using UnityEditor.Timeline;
using UnityEngine;
using UnityEngine.Timeline;

public class IconMarkerEditor : MarkerEditor
{
    public const string PathToIconTextureFolder = "テクスチャフォルダのパス（各自書き換えて下さい）/";
    public const string PngExtension = ".png";
    public const string BackgroundTextureName = "背景のテクスチャ名（各自書き換えて下さい）";

    // 表示するアイコンのテクスチャ画像
    readonly Texture2D _markerTexture;

    // 背景のテクスチャ画像
    readonly Texture2D _backgroundTexture;    

    /// <summary>
    /// アイコンのテクスチャ名
    /// </summary>
    protected virtual string NameOfIconTexture => "";

    public IconMarkerEditor()
    {
        _markerTexture = EditorGUIUtility.Load($"{PathToIconTextureFolder}{NameOfIconTexture}{PngExtension}") as Texture2D;

        if (_markerTexture == null)
        {
            Debug.LogError("Marker texture not found. Please ensure the path is correct.");
        }

        _backgroundTexture = EditorGUIUtility.Load($"{PathToIconTextureFolder}{BackgroundTextureName}{PngExtension}") as Texture2D;

        if (_backgroundTexture == null)
        {
            Debug.LogError("Background texture not found. Please ensure the path is correct.");
        }
    }

    public override MarkerDrawOptions GetMarkerOptions(IMarker marker)
    {
        return new MarkerDrawOptions { tooltip = marker.ToString() };
    }

    public override void DrawOverlay(IMarker marker, MarkerUIStates uiState, MarkerOverlayRegion region)
    {
        if (uiState != MarkerUIStates.Selected) // 選択されていない場合はアイコンを描画しない
        {
            var markerRegionCenter2 = region.markerRegion.xMin + (region.markerRegion.width - 26f) / 2.0f;
            var bgRect = new Rect(
                markerRegionCenter2,
                region.markerRegion.y - 10f,
                26f,
                26f
            );
            
            GUI.DrawTexture(bgRect, _backgroundTexture); // 背景画像を描画
            GUI.DrawTexture(bgRect, _markerTexture); // その上にアイコン画像を描画
        }

        base.DrawOverlay(marker, uiState, region);
    }
}
あとは各マーカーにてファイル名を指定して継承するだけです。

このとき、Markerは専用のアトリビュート[CustomTimelineEditor]を付けておく必要があります。
実装例
using UnityEditor.Timeline;

[CustomTimelineEditor(typeof(TalkLogPlayMarker))]
public sealed class TalkLogPlayMarker : IconMarkerEditor
{
    protected override string NameOfIconTexture => "ledger";
}

[CustomTimelineEditor(typeof(SfxPlayMarker))]
public sealed class SfxPlayMarkerEditor : IconMarkerEditor
{
    protected override string NameOfIconTexture => "musical_note";
}

[CustomTimelineEditor(typeof(BgmStopMarker))]
public sealed class BgmStopMarkerEditor : IconMarkerEditor
{
    protected override string NameOfIconTexture => "muted_speaker";
}
指定した位置に名前（NameOfIconTexture）通りのアイコン画像を配置しておくと、Timeline上でマーカーの上にアイコンが表示されるようになります。

 参考
QualiArts engineer blog - Unityを活用したUIアニメーションの開発フローのツール改修事例

↑他にもいろいろなEditor拡張の実装例が書かれているので参考になります
はじめに

環境

実装後の見た目

実装方法

参考

Discussion
