Title Screen & Save System

Learn how to customize the title screen and handle save file detection.

Title Screen Component

File: menus/src/views/TitleScreen.tsx

Basic Structure

const TitleScreen = (props: BaseMenuScreenProps) => {
  const handleItemSelected = (item) => {
    if (item && !item.disabled) {
      item.action();
    }
  };

  return (
    <div className="title-screen">
      <div className="title-screen-selector">
        <Chooser
          items={props.pageData.actions}
          hasFocus={props.hasFocus}
          onItemSelected={handleItemSelected}
        >
          {(item, selected) => <TitleMenuOption item={item} selected={selected} />}
        </Chooser>
      </div>
    </div>
  );
};

Menu Options

Actions are defined in js/plugins/rpgreact/override_common.js:

Scene_Title.prototype.start = function() {
  const hasSaveFiles = DataManager.isAnySavefileExists();

  const actions = [
    {
      name: "New Game",
      action: Scene_Title.prototype.commandNewGame.bind(this),
      disabled: false
    },
    {
      name: "Continue",
      action: Scene_Title.prototype.commandContinue.bind(this),
      disabled: !hasSaveFiles // Disabled when no saves
    },
    {
      name: "Options",
      action: Scene_Title.prototype.commandOptions.bind(this),
      disabled: false
    },
    {
      name: "Quit",
      action: () => { SceneManager.exit(); },
      disabled: false
    }
  ];

  event(RPGEventType.SCREEN_OPEN, RPGScreen.Title, {actions}, "PluginSceneTitle");
};

Disabling Menu Options

Checking for Save Files

// In RMMZ override
const hasSaveFiles = DataManager.isAnySavefileExists();

Rendering Disabled State

// TitleMenuOption component
export const TitleMenuOption = (props) => {
  const disabledClass = props.item.disabled ? 'disabled' : '';
  return (
    <div className={`title-screen-item ${props.selected ? 'selected' : ''} ${disabledClass}`}>
      {props.item.name}
    </div>
  );
};

CSS Styling

.title-screen-item.disabled {
  opacity: 0.4;
  color: #666;
  cursor: not-allowed;
}

Preventing Execution

const handleItemSelected = (item) => {
  if (item && !item.disabled) {
    item.action(); // Only execute if not disabled
  }
};

Save Screen

File: menus/src/views/SaveScreen.tsx

Loading Save List

const SaveScreen = (props) => {
  const maxSaves = DataManager.maxSavefiles();
  const saveFiles = [];

  for (let i = 1; i <= maxSaves; i++) {
    const info = DataManager.savefileInfo(i);
    saveFiles.push({
      id: i,
      exists: DataManager.savefileExists(i),
      info: info || null
    });
  }

  return (
    <div>
      <Chooser
        items={saveFiles}
        hasFocus={props.hasFocus}
        onItemSelected={(file) => handleSave(file.id)}
      >
        {(file, selected) => (
          <SaveFileSlot file={file} selected={selected} />
        )}
      </Chooser>
    </div>
  );
};

Save File Display

const SaveFileSlot = ({ file, selected }) => {
  if (!file.exists) {
    return <div className={selected ? 'selected' : ''}>Empty</div>;
  }

  return (
    <div className={selected ? 'selected' : ''}>
      <div>File {file.id}</div>
      <div>{file.info.title}</div>
      <div>Playtime: {file.info.playtime}</div>
      <div>Gold: {file.info.gold}</div>
      {file.info.characters.map((char, i) => (
        <span key={i}>{char.name} Lv.{char.level}</span>
      ))}
    </div>
  );
};

Saving

const handleSave = (savefileId) => {
  if (DataManager.saveGame(savefileId)) {
    SoundManager.playSave();
    // Show success message
  } else {
    SoundManager.playBuzzer();
    // Show error message
  }
};

Loading

const handleLoad = (savefileId) => {
  if (DataManager.savefileExists(savefileId)) {
    if (DataManager.loadGame(savefileId)) {
      SoundManager.playLoad();
      SceneManager.goto(Scene_Map);
    } else {
      SoundManager.playBuzzer();
      // Show error message
    }
  }
};

Customization Examples

Custom Title Logo

const TitleScreen = (props) => {
  return (
    <div className="title-screen" style={{
      backgroundImage: 'url(/img/titles/title-bg.png)'
    }}>
      <img src="/img/titles/logo.png" className="title-logo" />
      <Chooser items={props.pageData.actions} {...props} />
    </div>
  );
};

Animated Menu

const TitleMenuOption = ({ item, selected }) => {
  return (
    <div className={`
      title-item
      ${selected ? 'selected scale-110' : 'scale-100'}
      ${item.disabled ? 'opacity-40' : 'opacity-100'}
      transition-all duration-200
    `}>
      {item.name}
    </div>
  );
};

Save File Thumbnails

const SaveFileSlot = ({ file }) => {
  if (!file.exists) return <div>Empty</div>;

  return (
    <div className="save-slot">
      {file.info.faces && (
        <div className="party-faces">
          {file.info.faces.map((face, i) => (
            <img
              key={i}
              src={`/img/faces/${face[0]}.png`}
              style={{
                objectPosition: `-${face[1] % 4 * 144}px -${Math.floor(face[1] / 4) * 144}px`,
                width: '144px',
                height: '144px'
              }}
            />
          ))}
        </div>
      )}
      <div>File {file.id} - {file.info.title}</div>
    </div>
  );
};

Confirm Overwrite

const handleSave = async (savefileId) => {
  if (DataManager.savefileExists(savefileId)) {
    const result = await confirm(`Overwrite File ${savefileId}?`);
    if (!result) return;
  }

  DataManager.saveGame(savefileId);
};

Advanced Features

Auto-Save Detection

// In override_common.js
const hasAutoSave = DataManager.savefileExists(0);
if (hasAutoSave) {
  actions.push({
    name: "Load Autosave",
    action: () => {
      DataManager.loadGame(0);
      SceneManager.goto(Scene_Map);
    },
    disabled: false
  });
}

Cloud Save Indication

const SaveFileSlot = ({ file }) => {
  const isCloudSynced = checkCloudSync(file.id);

  return (
    <div className="save-slot">
      {isCloudSynced && (
        <Icon icon={iconIndex.cloud} className="cloud-icon" />
      )}
      {/* Rest of save file display */}
    </div>
  );
};

Save Corruption Detection

const handleLoad = (savefileId) => {
  try {
    if (DataManager.loadGame(savefileId)) {
      SceneManager.goto(Scene_Map);
    } else {
      showError("Failed to load save file. It may be corrupted.");
    }
  } catch (error) {
    console.error('Save load error:', error);
    showError("Save file is corrupted or incompatible.");
  }
};

Common Issues

Continue button throws error when no saves

Fix: Disable the button when no saves exist (as shown above)

Save file shows wrong data

Cause: Save file structure changed between versions

Fix: Implement save migration:

DataManager.extractSaveContents = function(contents) {
  if (!contents.version || contents.version < 2) {
    // Migrate old save format
    contents = migrateSaveData(contents);
  }
  // Normal load logic
};

Title screen freezes

Cause: Action handler throws error

Fix: Wrap actions in try-catch:

const handleItemSelected = (item) => {
  try {
    if (item && !item.disabled) {
      item.action();
    }
  } catch (error) {
    console.error('Title screen error:', error);
  }
};

See Also

• Chooser Component

• Confirm Dialog

• Plugin Troubleshooting