カスタマイズ

パーツの選択がどう解決されるか、どの色を変えられるか、マニフェストをもとにピッカー UI を作る方法を説明します。

選択

選択スロットは head、body、bottom、item、glasses の 5 つで、それぞれにパーツを 1 つずつ指定します。値の書き方は 3 通りあり、どれも同じパーツに解決されます。

{
  head: 'braids';
} // name, scoped to the slot
{
  head: 'head-braids';
} // global alias
{
  head: 'hm1-p-000020';
} // canonical part ID

名前はコードでもプロンプトでも読みやすいのが利点です。保存するデータには、変わることのない正規 ID を使います（状態の保存を参照）。名前の一覧はパーツにあります。

item と glasses には、どちらも none という名前のパーツがあります。アバターに何も付けないときはこれを選びます。

色

色を変えられるスロットは 6 つです。どのスロットも参照していない部分は色が固定されているので、アクセサリーは独自の配色を保ち、輪郭線だけが stroke の色に連動します。

background には 'transparent' も指定できます。16 進数の色は、先頭の # があってもなくても受け付けます。

マニフェストからピッカーを作る

マニフェストには UI グループごとのパーツがすでに並んでいて、それぞれのプレビューも描画できます。このデータを map するだけでピッカーが作れるので、パーツ一覧やサムネイルを別に管理する必要はありません。

import { createPartPreview, getPartsForUiGroup } from '@humation/core';
import { humation1 } from '@humation/assets-humation-1';

const bodyOptions = getPartsForUiGroup(humation1, 'body').map((part) => ({
  id: part.id,
  name: part.name,
  previewSrc: createPartPreview(humation1, part).toDataUri(),
}));

複数のグループに対応した完成形は、アバタービルダーで確認できます。