組み込みメタデータのプロパティ

エディタの Property Editor パネルを使用すると、さまざまなタイプのプロパティを広範に表示して、変更することができます。文字列、ブール、数値などの単純なタイプと、カラーや回転などの複合タイプの両方が対象となります。また、Property Editor にこれらの値をどのように表示されるのかを詳細にコントロールすることもできます。さまざまな UI ウィジェットを使用して多くのプロパティ タイプを表現できます。たとえば、テキスト フィールド、スライダ、スピナー ボックスなどを使用して数値を編集したり、表示ラベル、ツールチップ、順序などをコントロールしたりできます。

Property Editor に編集中のデータを視覚的に表現する方法を指示するには、データにいくつかのメタデータを指定します。指定する方法は 2 つあります。

このリファレンスでは、Property Editor で認識される各種の組み込みメタデータについて詳細に説明し、SJSON タイプ ファイルと JavaScript の両方でこれらをどのように使用するのかを示します。

一般的なエディタ メタデータ プロパティ

これらのパラメータは、すべてのプロパティ コントロール タイプで使用できます。

プロパティ タイプ 既定値 説明
order Number Infinity プロパティの順序を昇順でコントロールします。
control または displayType String null プロパティの編集時に使用するコントロールを指定します。その他のコントロール固有のプロパティについては、以下を参照してください。
label String null プロパティのカスタム ラベルを設定します。
suffixLabel String null プロパティ値の後に表示されるサフィックスを設定します。一部のウィジェット タイプにのみ表示されます。
description String null プロパティの説明を設定します。ツールチップに表示されます。
isReadOnly Boolean false true の場合、ユーザはプロパティを編集できません。
isMultiEditSupported Boolean true false の場合、複数のオブジェクト(合意の編集など)が選択されていれば、ユーザはプロパティを編集できません。
showLabel Boolean true false の場合、エディタ内のプロパティのラベルを非表示にします。
showValue Boolean true false の場合、エディタ内のプロパティの値を非表示にします。

type ファイルの例

{
    type = ":number"
    min = 0
    max = 100
    default = 50
    editor = {
        order = 140
        label = "Health"
        suffix = "HP"
        description = "Initial health of the entity"
        control = "adskPropertySlider"
        step = 10
    }
}

コンパクト表記の例

var numberProperty = props.slider("Health", m.prop(50), {
    order: 140,
    suffix: "HP",
    description: "Initial health of the entity",
    min: 0,
    max: 100,
    increment: 10
})

組み込みコントロールのウィジェット

次のセクションでは、control または displayType メタデータ フィールドで使用できるさまざまな値について説明します。各値は、スライダ、テキストフィールド、チェックボックスなど、対応するタイプの値を表示して操作するためのさまざまな種類の組み込みウィジェットを定義します。

Mithril モデルの短時間での再生

次の例に示すコンパクトな Property Editor 表記では、Mithril getter/setter 関数メカニズムを使用してプロパティ モデルへのアクセスをカプセル化します。詳細については、「UI で Property Editor コマンドを使用する」を参照してください。

これは、プロパティ モデル関数の簡単な例です。

var _propertyData = "This is my data";
function propertyModel (value) {
    if (arguments.length) {
        _propertyData = value;
    }
    return _propertyData;
}

以下に示すほとんどの例では、プロパティ モデルを即座に生成する次の関数を使用しています。

function genModel (value) {
    return function (newValue) {
        if (arguments.length) {
            value = newValue;
        }
        return value;
    };
}

Action

カスタム関数をトリガするシンプルなボタンです。

プロパティ タイプ 既定値 説明
action (コンパクト表記のみ) Function null 引数を伴わない関数です。
trigger (type ファイルのみ) action (「アクションを登録する」を参照) null 実行するアクションです。
text string "" ボタンのテキストです。
color color ボタンの背景色です。任意の HTML カラーが有効です。
iconName string サポートされているアイコン名のリストについては、「Font Awesome Icons」を参照してください。

type ファイル

{
    type = ":string"
    editor = {
        order = 140
        text = "Compute"
        description = "Initial health of the entity"
        control = "Action"
        trigger = {
            type = "js"
            module = "generic_asset/generic-asset-actions"
            function_name = "triggerAction"
        }
    }
}

Javascript

var actionProperty = props.action("Action", function () {
                        console.log('Action is triggered!');
                    }, {iconName: "fa-star-o"}),

Boolean

チェックボックス コントロールです。

type ファイル

{
    type = ":boolean"
    editor = {
        order = 140
        control = "Boolean"
        isReadOnly = true
    }
}

Javascript

var actionProperty = props.bool("Boolean", genModel(true));

Choice

列挙タイプまたは文字列にマップできるコンボボックスです。

プロパティ タイプ 既定値 説明
options object {} これは、各選択肢に対応する「すてきなラベル」を表すキーと、実際の列挙値を表す値を含む JavaScript オブジェクトです。下記の例を参照してください。
fetch_options (type ファイルのみ) action (「アクションを登録する」を参照) null 動的に生成されたオプションを返すアクションです。
defaultValueName String null 選択されていない場合の既定のラベルです。
defaultValue String null 選択されていない場合の既定の値です。

type ファイル(列挙)

Enum = {
    type = ":enum"
    value = ":string"
    default = "InLoading"
    cases = [
        "Loaded"
        "Unloaded"
        "InLoading"
        "ErrorLoading"
    ]
    editor = {
        control = "Choice"
        label  = "Load state"
        case_labels = {
            "Loaded" = "Loaded"
            "Unloaded" = "Unloaded"
            "In Loading..." = "InLoading"
            "Error while Loading" = "ErrorLoading"
        }
    }
}

type ファイル(文字列)

// This effectively creates a string that will use a Combobox control to select between
// a specific list of string values.
ChoiceString = {
    type = ":string"
    default = "SurfaceNormal"
    editor = {
        control = "Choice"
        label  = "Orient Express"
        fetch_options = {
            type = "js"
            module = "generic_asset/generic-asset-actions"
            function_name = "populateActions"
        }
    }
}

Javascript

var options {
    'Beer': 1,
    'Scotch': 2,
    'Rhum': 3,
    'Wine': 4
};

var choiceProperty = props.choice("Tough choice", genModel(2), options, {defaultValueName: "Choose a drink"});

Color

強度スライダに付随するにカラー見本です。

この見本をクリックすると、カラー ピッカー ダイアログ ボックスが表示されます。

type ファイル(文字列)

Color = {
    type = "core/types/color"
}

カラー ベース タイプの定義

// see core/types/color.type
export = "#color"
types = {
    color = {
        type = ":struct"
        fields = {
            rgb = {
                type = ":array"
                value = "#component"
                size = 3
                default = [0, 0, 0]
            }
            alpha = {
                type = "#component"
                default = 1
            }
            intensity = {
                type = ":number"
                default = 1
                min = 0
            }
        }
        editor = {
            control = "adskPropertyColor"
        }
    }
    component = {
        type = ":number"
        min = 0
        max = 1
    }
}

Javascript

// Simple color:
var colorProperty = props.color("Color", genModel([1,1,1]));

// HDR color:
var hdrColorProperty = props.hdrColor("Color", genModel([1,1,1]), genModel(1));

Number

数値を編集できるスピナー コントロールです。便利な多数の機能が用意されています。

プロパティ タイプ 既定値 説明
min number -2147483648 数値の最小値です。
max number 2147483647 数値の最大値です。
step (type ファイル内) number 0.1 スピナーボタンを押したときに増減する量
increment (JavaScript 内) number 0.1 スピナーボタンを押したときに増減する量
decimal number 4 表示する小数点以下の桁数です。0 の場合は、数値が整数とみなされます。
numericDefaultValue number 0 スピナーを右クリックしたときにリセットされる値です。

type ファイル

Number = {
    type = ":number"
    editor = {
        // Use min/max/default in the editor block instead of the type specification
        default = 1
        min = 0
        max = 1
        control = "Number"
        step = 0.3
        priority = 4
    }
}

Javascript

var numberProperty = props.number("A Numeric Value", genModel(42.111), {
    increment: 0.5,
    min: -9,
    max: 56.9
});

Slider

スライダ コントロールでは、左から右に動くスライダを使用して数値を編集できます。ほとんどのパラメータは number プロパティと似ています(上記を参照)。

プロパティ タイプ 既定値 説明
min number -2147483648 数値の最小値です。
max number 2147483647 数値の最大値です。
step (type ファイル内) number 0.1 スピナーボタンを押したときに増減する量
increment (JavaScript 内) number 0.1 スピナーボタンを押したときに増減する量
decimal number 4 表示する小数点以下の桁数です。0 の場合は、数値が整数とみなされます。

type ファイル

Number = {
    type = ":number"
    editor = {
        // Use min/max/default in the editor block instead of the type specification
        default = 1
        min = 0
        max = 1
        control = "Slider"
        step = 0.3
        priority = 4
    }
}

Javascript

var sliderProperty = props.slider("Percentable", genModel(50), {min: 0, max: 100, increment: 1});

String

既定では、文字列プロパティはシンプルなテキスト ボックスを使用して編集します。

プロパティ タイプ 既定値 説明
isMultiline boolean false テキスト ボックスが複数行にまたがるかどうかを定義します。
lineRows number 0 isMultilinetrue の場合は、テキストボックスの行数を指定できます(1 ~ 8)。

type ファイル

SingleLine = {
    type = ":string"
    editor = {
        label = "Single Line"
    }
}
MultiLine = {
    type = ":string"
    default = "pow"
    editor = {
        label = "Multi Line"
        isMultiline = true
        lineRows = 4
    }
}

Javascript

var stringProperty = props.color("Color", genModel([1,1,1]));

var colorModel = genModel([1,1,1]);
var intensityModel = genModel(1);
var hdrColorProperty = props.hdrColor("Color", colorModel, intensityModel);

Path

パスのプロパティを使用すると、オペレーティング システムで提供されるウィンドウを使用して、ディスク上のフォルダやファイルを選択できます。

プロパティ タイプ 既定値 説明
browserType string File または Folder を指定できます。表示されるネイティブ パス セレクタのタイプを定義します。
browseTitle string ネイティブ ダイアログ ボックスのタイトルです。
browseFilter string 特定の拡張子を持つファイルのみを表示するためのファイル フィルタです。

type ファイル

FilePath = {
    type = ":string"
    editor = {
        control = "PathProperty"
        browseType = "File"
        browseTitle = "Select an exe"
        browseFilter = "*.exe"
    }
}
DirPath = {
    type = ":string"
    editor = {
        control = "PathProperty"
        browseType = "Folder"
        browseTitle = "Select a folder"
    }
}

Javascript

var fileProperty = props.file("File", genModel('c:/Pogram Files (x86)/Git/bin/git.exe'), "Pick an exec", "*.exe"),
var dirProperty = props.directory("Folder", genModel('c:/Pogram Files (x86)/Git'), "Pick a folder"),

Range

2 つの数値の最小値フィールドおよび最大値フィールドが含まれているコントロールです。

type ファイル

Range = {
    type = "core/types/range"
}

Javascript

var range1= props.range("Range [-100, 100]", "mini", genModel(25), 'maxi', genModel(75), {min: -100, max: 100, increment: 0.5}),
var range2 = props.range("Read Only", "MIN", genModel(25), 'Max', genModel(75), {min: -100, max: 100, increment: 0.5, isReadOnly: true})

Vector

2、3、または 4 個のコンポーネントのリストを表示する場合に使用できる、回転を除くコントロールです(以下の Rotation を参照)。

type ファイル

Position = {
    type = "core/types/vector3"
}

Vector3 ベース タイプの定義

// see core/types/vector3.type
export = "#vector3"
types = {
    vector3 = {
        type = ":array"
        value = ":number"
        size = 3
        default = [0, 0, 0]
        editor = {
            control = "adskPropertyVector3"
        }
    }
}

Javascript

var vec2 = props.vector2("Vector2", genModel([34, 78]), {min: -100, max: 100, increment: 0.5});

var vec3 = props.vector3("Vector3", genModel([1,2,3]));

var vec4 = props.vector4("Vector4", genModel([34, 78, 67, -90]));

Rotation

3 つのラジアン値で構成されたベクトルをデータ モデルとして使用するコントロールです。角度に変換された値を持つ 3 つのスピナーが表示されます。

type ファイル

Rotation = {
    type = "core/types/rotation"
}

回転ベース タイプの定義

// see core/types/rotation.type
export = "#rotation"
types = {
    rotation = {
        type = ":array"
        value = ":number"
        size = 3
        default = [0, 0, 0]
        editor = {
            control = "adskPropertyRotation"
        }
    }
}

Javascript

var rotation = props.rotation("Rotation", genModel(0, -1.52, 3.14));