Theme Editor Documentation

INTRODUCTION

This guide is designed to inform you of the fundamentals of building themes for Maximus Arcade. The interface for the editor is defined by its four panels: Editor, Property Inspector, Tools, and Color Picker. Let’s start by describing the purpose and functionality of each panel.

EDITOR PANEL

The Editor panel is the rectangular area where you place graphic content, including imported vector art (flash), text boxes, and bitmap graphics when creating a theme. The information displayed in the title bar of the Editor panel is based upon the selected Emulator and Resolution. The Editor panel contains the menus: File, Edit, Resolution, Emulator, Sprite, Interface, Convert Layout, and Help. Also included in the descriptions below are additional key commands and sprite menu options available in the Editor panel.

EDITOR: FILE MENU

• New - Closes an open theme and clears all sprite properties
• Open - Opens an existing theme
• Save - Save an open theme
• Revert - Reverts open theme to its previously saved state
• Import - Import an image into the sprite selected in the Editor panel
• Exit - Exit the theme editor

EDITOR: EDIT MENU

• Undo allows you to undo your last action
• The level of undos can be modified in the Property Inspector>Settings
• Changing the Interface or Resolution selection will purge the undo list

• Redo reapplies the last action that was undone

• Toggles the animation state of a sprite with an Adobe Flash asset

• Toggles the visibility of the sprite selected
• Changing the Interface will reset the sprite visible state
• If you wish to hide a particular sprite you can do one of the following:
  • Move the sprite off the visible area of the Editor panel
  • Set the alpha of the sprite to 0, making it completely transparent
  • Link to an image that is completely transparent

• Clears all sprite attributes and centers it in the Editor panel

• Toggles the moveable state of the sprite selected
• Changing the Interface will reset the sprite locked state

EDITOR: RESOLUTION MENU

• CTRL+G to cycle through selections
• Contains resolution settings supported by the frontend
• All resolutions utilize the same image assets
• Each resolution is a completely different sprite layout

EDITOR: EMULATOR MENU

• CTRL+E to cycle through selections
• Contains emulator setups supported by the frontend
• List is hard coded as emulators are routinely added to the frontend
• Emulators that are not setup with image assets will prompt a “missing image” alert box upon loading the theme in the frontend

EDITOR: SPRITE MENU

• CTRL+P to cycle through selections
• Contains available sprites within the current Interface selection
• Choosing a sprite from the menu will select the sprite in the Editor panel

EDITOR: INTERFACE MENU

• CTRL+F to cycle through selections
• Contains the different interface screens that are available within the frontend: Logo, Emulator Selection, Game Selection, and Loading Screen

EDITOR: INTERFACE MENU: LOGO

• Logo splash screen displayed when launching the frontend
• Contains sprites: background, border_front, and logo_open
• Sprite background and border_front retain the same sprite properties in all Interfaces of a selected resolution

EDITOR: INTERFACE MENU: EMULATOR SELECTION

• Contains sprites: background, border_front, , _title, arrow_left, and arrow_right
• Cycling through emulator selections in the Emulator menu will display images setup for sprites: and _title
• The arrow sprites are commonly flash based arrow animations depicting the method for selecting different emulators

EDITOR: INTERFACE MENU: GAME SELECTION

• Game selection screen based upon the selected emulator
• Contains sprites: background, border_front, cabinet, _marquee,_screen, border_wide, bar_rom, rom_list, rom_list_shadow, rom_title, and rom_title_shadow
• Cycling through emulator selections in the Emulator menu will display images setup for sprites: _marquee and _screen
• The _marquee sprite when in the frontend will be swapped if marquee images are available for import
  • Any marquee that is imported will inherit the alpha channel of the default _marquee sprite asset
• The _screen sprite when in the frontend will be swapped if screenshots or movies are available for import
• The border_wide sprite is actually 3 sprites in one
  • The 3 states of the border are available in Properties Inspector>Sprite>Border
  • The border sprite is used for framing the screenshot/movie. The multiple border options are mainly for MAME, as MAME has both portrait and landscape format screenshots. So a portrait and landscape border is required to frame those screenshots or movies.
  • The “Default” state shows the border sprite when no screenshot or movie is available
  • The “Landscape” state shows the border sprite when images near 4:3 ratio are available for swapping
    • If both movies and screenshots are available, a slight delay will occur while swapping the screenshot to movie
    • The movie will retain the dimensions of the screenshot
  • The “Portrait” state shows the border sprite when images near 9:16 ratio are available for swapping
    • If both movies and screenshots are available a slight delay will occur while swapping the screenshot to movie
    • The movie will retain the dimensions of the screenshot
  • The _screen sprite will also have 3 different dimension settings based on the border state selected
• Bar_rom is the sprite used for highlighting the current game selected
• Rom_list is the sprite which contains the list of games
  • Attributes such as font, font size, font style, font color, alignment, leading, and lines visible
  • Rom_list_shadow is a duplicate of sprite rom_list which can be used for a shadow or other purposes
• Rom_title is the sprite which contains the name of the currently selected game list
  • Attributes such as font, font size, font style, font color, alignment, leading, and lines visible
  • Rom_title_shadow is a duplicate of sprite rom_list which can be used for a shadow or other purposes

EDITOR: INTERFACE MENU: LOADING SCREEN

• Loading screen displayed before launching a game
• Contains sprites: background, border_front, and screen_load
• The loading screen is an optional interface that must be activated on a per emulator basis in the preferences panel of the frontend

EDITOR: CONVERT LAYOUT MENU

• Convert Layout calculates all sprite properties of the current resolution over to the resolution that was selected from the pull down menu
• This works great for quickly converting a desired sprite layout to other resolutions
• Example: If you are working in 640x480 resolution and you select 800x600 in the Convert
• Layout menu, you will overwrite the 800x600 layout with the layout based on your current 640x480 resolution
• Converting from a non-vertical resolution to a vertical resolution
  • If working in 640x480 and then choosing to convert the layout to 640x480 vertical, the sprites will be rotated 90° and placed to a comparable position

EDITOR: WINDOW MENU

Windows within the theme editor application

EDITOR: HELP MENU

This documentation.

SPRITE POPUP MENU (right-mouse click on sprite)

• #sprite: - Name of sprite selected
• Import - Import an image asset into the sprite selected
• Convert Sprite - Same methodology as Convert Layout except instead of the entire layout converted to the selected resolution, just the selected sprite is converted to the selected resolution
• Transform - Methods for setting rotation and shape parameters to a sprite
• Arrange - Methods for adjusting Z-Depth of a sprite
• Align - Methods for adjusting the location of a sprite based on the current resolution dimensions
• Alpha - Method for adjusting the opacity of a sprite
• Animate, Lock, Visible, Reset - Same functionality as Editor>Edit

KEY COMMANDS

• UP/DOWN/LEFT/RIGHT - Moves a sprite 1 pixel in the desired location
• SHIFT + UP/DOWN/LEFT/RIGHT - Moves a sprite 10 pixels in the desired location
• CTRL + UP/DOWN - Adjusts the font size of a font sprite 1 point
• CTRL + LEFT/RIGHT - Adjusts the width of a font sprite 1 point

PROPERTY INSPECTOR

The Property Inspector simplifies modification by making it easy to access the most commonly used attributes of the selected sprite. You can make changes to the sprite or theme attributes in the Property Inspector without accessing the menus or panels that also control these attributes. Depending on the media of the selected sprite, the Property Inspector displays specific information and settings.

• Manage sprite attributes
• Animate, Lock, Visible, Reset buttons - Same functionality as Editor>Edit
• Media type (bitmap, flash, or text)
• Sprite name
• Location on X/Y axis
• Width, Height, Rotation, Skew, Alpha, Z-Depth, Flip-Horizontal/Vertical
• Filename - Path to the linked image asset
• Animation - Direction the sprite is animated on and off the screen in the
• Emulator interface
• Sub-tabs
  • Font - Font family, font style, alignment, leading, size, and lines visible
  • Border - Described under Interface>Game Selection
  • Defined Images - Additional sprites for Emulator and Game Selection interfaces

• Select, import, and play interface sound effects

• Personalized information of the them
• Preview image of theme for viewing in the frontend preferences panel
• Resolutions that have been setup and that will be saved in the them

• Level of undos

• Report generated when saving a them

TOOLS

The tools in the Tools panel allow you select, scale, and rotate sprites located in the Editor panel.

• Move - Move a sprite on X/Y axis
• Scale - Proportionately scale a sprite
• Rotate - Rotate a sprite 0-360°

COLOR PICKER

The Color Picker allows the changing of color for text sprites. You may enter RGB values through the input fields, adjust the slider bar arrows to select a color, or sample a color from the color bar with the eyedropper cursor.

DEFINITIONS

Flash - A multimedia authoring and playback system from Adobe. Launched in 1996 by Macromedia, which was acquired by Adobe in 2005, Flash became popular for its animated graphics. Responsible for much of the animations, advertisements and video components found on today's Web sites, the Flash Player is a free client application that works with popular Web browsers.

Image Assets - Image file types that are compatible for import into the theme editor (PNG, JPEG, GIF, and SWF).

Skew - The angle to which the vertical edges of the sprite are tilted (skewed) from the vertical. Negative values indicate a skew to the left; positive values indicate a skew to the right. Values greater than 90° flip an image vertically.

Sprite - A sprite is an object that controls when, where, and how image/font assets appear in the frontend. Sprite properties include the sprite’s size and location, file assigned to the sprite and the sprite’s name. Different properties can alter the appearance of a sprite. You can rotate, skew and flip sprites without affecting the assigned file.

Z-Depth - Sprites appear in the Editor panel layered according to the Z-depth in which they are assigned in the Property Inspector. Sprites with larger Z-depth values appear in front of sprites with lower values.