Use Actor Portraits

Goal

Render an actor’s face portrait using the built-in <ActorPortrait> component. This tutorial focuses on consuming platform data and composing UI; all wiring is already handled.

What you’ll build

A small portrait panel that shows the party leader’s face image, sized with Tailwind classes.

Import the component and read platform data Add the portrait to a screen (for example, menus/src/views/MapScreen.tsx).

// menus/src/views/MapScreen.tsx
import React from 'react';
import { observer } from 'mobx-react-lite';
import RPGBridge from '../bridge/RPGBridge';
import ActorPortrait from '../components/ActorPortrait';

const MapScreen: React.FC<{ pageData: any; isTestMenu: boolean; hasFocus: boolean }> = observer(() => {
  const platform = RPGBridge.GetPlatformData();
  const leader = platform.runtime.gameParty.members()[0];

  return (
    <div className="relative w-full h-full">
      {/* Portrait panel (top-right) */}
      <div className="absolute top-3 right-3 bg-black/60 text-white rounded-md p-2">
        <div className="text-xs mb-1 opacity-80">Leader</div>
        <ActorPortrait className="w-24 h-24" actor={leader} />
      </div>
    </div>
  );
});

export default MapScreen;

Notes

<ActorPortrait> computes the correct face image path and cropping region via platform.gameInfo.faceImageSize.getFaceSprite(...) and renders through <ImageViewport>.
You control sizing with Tailwind (e.g., w-24 h-24). The component preserves the correct viewport slice within the face sheet.

Style variations

Circle avatar: wrap the image in a rounded container.

<div className="w-24 h-24 rounded-full overflow-hidden">
  <ActorPortrait className="w-full h-full" actor={leader} />
</div>

Larger portrait: use w-36 h-36 (or any Tailwind size) to scale.

Build and view Rebuild the UI as usual and run your game. The portrait should reflect the current party leader automatically thanks to MobX observability.

hashtagSee also

See also