PlayCanvasチートシート Unityと比べてみよう エディタ拡張編 その2

前回の記事で触れてなかったところなどを追加したバージョン

前回の記事
seiroise.hatenablog.com

Unityを使ったことのある人がPlayCanvasに手を出したとき「Unityのアレをやりたいんだけど・・・」という状況が結構あった。
今回はその中でもPlayCanvas版のエディタ拡張的要素であるスクリプト属性についてまとめる。

参考

スクリプト属性についてのリファレンス
Script Attributes | Learn PlayCanvas

注意

PlayCanvasではスクリプトを書いた後にEditorのParseボタンを押さないと更新されないので注意しよう。
また、エディタ上の値をいじったあと、入力を確定させないとLaunch後に反映されないので必ず確定させるよう注意しよう。

目次

数値

Unity

public int hp = 80;

PlayCanvas

ScriptAttribute.attributes.add("hp", {
    type: "number",
    default: 80
});

console.log(this.hp); //80

typeオプションに"number"を指定して数値に、defaultオプションでデフォルトの値を決めてる。

ちなみに日本語でもいける。でもソースコード中に文字列以外で日本語があると精神上よろしくない。
なのでtitleオプションで変更する方が心臓に負担がかからないかも。(あとタブがずれる)

ScriptAttribute.attributes.add("お金", {
    type: "number",
    default: 100
});

console.log(this.お金); //100

titleオプションを使ったバージョン

ScriptAttribute.attributes.add("money", {
    type: "number",
    title: "お金",
    default: 100
});

console.log(this.money); //100

単位の表示

Unityだとエディタ拡張しないとできないので割愛

PlayCanvas

NumberAttribute.attributes.add("weight", {
    type: "number",
    placeholder: "kg",
    default: 60
});

console.log(this.weight); //150(kgは出力されない)

(薄い

スライダー

Unity

[Range(10, 200)]
public float height = 60;

PlayCanvas

NumberAttribute.attributes.add("height", {
    type: "number",
    default: 175.8,
    min: 100,
    max: 250
});

console.log(this.height); //175.8

minとmaxの二つのオプションを必ず指定すること。

文字列

Unity

public string id;

PlayCanvas

StringAttribute.attributes.add("id", {
    type: "string",
});

console.log(this.id); //

defaultオプションで初期値の指定もできる

StringAttribute.attributes.add("name", {
    type: "string",
    default: "太郎"
});

console.log(this.name); //"太郎"

UnityのTextArea属性みたいに複数行入力を可能にするオプションはないみたい

真偽値

Unity

public bool isHeal;

PlayCanvas

BooleanAttribute.attributes.add("isHeal", {
    type: "boolean"
});
console.log(this.isHeal); //false

defaultオプションで初期値の指定もできる

BooleanAttribute.attributes.add("isTrigger", {
    type: "boolean",
    default: true
});
console.log(this.isTrigger); //true

配列

Unity

public string[] characters;

PlayCanvas

Test.attributes.add("characters", {
    type: "string",
    array: true,
});

重複は許されない(gifだと"太郎")

列挙

Unity

public enum Value {
    valueOne = 1,
    valueTwo = 2,
    valueThree = 3
}

public Value value;

PlayCanvas

Test.attributes.add("value", {
    type: "number",
    enum: [
        {"valueOne": 1},
        {"valueTwo": 2},
        {"valueThree": 3}
    ]
});

ベクトル

Vec2

Unity

public Vector2 direction;

PlayCanvas

VectorAttribute.attributes.add("direction", {
    type: "vec2"
});
console.log(this.direction); //[0, 0]

defaultオプションに配列を指定することで初期値の指定もできる。
Vec3とVec4も同様に初期値の指定ができる。

VectorAttribute.attributes.add("direction", {
    type: "vec2",
    default: [1, 2]
});
console.log(this.direction); //[1, 2]

さらにplaceholderオプションに配列を指定することで要素ごとの単位の表示もできる。
これもVec3とVec4も同様に指定できる。

VectorAttribute.attributes.add("direction", {
    type: "vec2",
    default: [1, 2]
    placeholder: ["cm", "cm"]
});

Vec3

Unity

public Vector3 position;

PlayCanvas

VectorAttribute.attributes.add("position", {
    type: "vec3"
});
console.log(this.position); //[0, 0, 0]

Vec4

Unity

public Vector4 rotation;

PlayCanvas

VectorAttribute.attributes.add("rotation", {
    type: "vec4"
});
console.log(this.rotation); //[0, 0, 0, 0]

色

rgb

たしかUnityだとエディタ拡張しないとできないので割愛。(できたっけ？)

PlayCanvas

ColorAttribute.attributes.add("backgroundColor", {
    type: "rgb"
});

console.log(this.backgroundColor); //[1, 1, 1]

defaultオプションに配列を指定することで初期値の指定もできる。
このとき有効なのは0~1のみで0~255でも"#FF5588"などもだめ。
rgbaも同様に指定できる。

ColorAttribute.attributes.add("mainColor", {
    type: "rgb",
    default: [0.2, 0.5, 1]
});

console.log(this.mainColor); //[0.2, 0.5, 1]

rgba

Unity

public Color vertexColor;

PlayCanvas

ColorAttribute.attributes.add("vertexColor", {
    type: "rgba",
});

曲線

Curve

Unity
おそらく一番近いのはAnimationCurve

public AnimationCurve wave;

PlayCanvas

CurveAttribute.attributes.add("wave", {
    type: "curve"
});

CurveSet

多分Unityにはない？かな
curvesオプションに値を指定することでCurveSetになる。

CurveAttribute.attributes.add("xyzCurve", {
    type: "curve",
    curves: ["x", "y", "z"]
});

GradientCurve

Unity

public Gradient gradient;

PlayCanvas

CurveAttribute.attributes.add("gradient", {
    type: "curve",
    color: "rgba"
});

colorオプションに"r"などを指定することでその色だけの曲線を設定することもできる

ツールチップ

Unity

[Tooltip("握力")]
public int grip;

PlayCanvas

NumberAttribute.attributes.add("grip", {
    type: "number",
    description: "握力",
    default: 30
});