Skip to content

Image Resource Editor #78

@RupertAvery

Description

@RupertAvery

FIXED BUILD: https://github.com/RupertAvery/PSXPackager/actions/runs/22267346240/artifacts/5604132029

The Image Resource Editor features a canvas where the user can composite multiple image or text layers that will be compiled to a PNG image and written to the PBP or saved to a PNG file. The user can also choose to save the composition as an XML template file.

Image

At the top is a menu described in #79

The editor is composed of the Canvas and the Layer list on the right.

Layer List

The Layer list is ordered with the topmost layers on the top. Image layers will display as a thumbnail of the image. Text layers will display as a Times New Roman T.

Clicking on a layer in the layer list will select the layer for editing on the Canvas.

Double-clicking on a Text layer will display the Text Editor popup #80

Layer Context Menu

See #79

Layer Background Context Menu

See #79

Canvas

The canvas displays the layers stacked on top of each other in the order defined by the Layer list. A dark grey border defines the extents of the canvas image

When a layer is selected, a light blue rectangle will be overlaid on the canvas, showing the bounds of the selected layer. Clicking and dragging anywhere on the canvas with a layer selected will move the layer. Above the canvas, the X, Y, Width and Height properties will be displayed in editable textboxes.

Editing the textboxes and pressing Enter or losing focus (clicking somewhere else or tabbing) will cause the property on the layer to be updated.

Pressing the arrow keys with the layer selected will move the layer in the corresponding direction by one pixel.

Holding CTRL and clicking on the canvas will select the topmost layer under the cursor.

Double-clicking the selected text layer will display the Text Editor popup #80

Canvas Context Menu

See #79

Tooltip

When an image layer is selected, the following tooltip will be displayed

Use arrow keys to adjust position. Drag bottom-roght corner to resize.

When an text layer is selected, the following tooltip will be displayed

Use arrow keys to adjust position. Double-click to edit text. Drag bottom-roght corner to resize.

Known Issues

  • Resetting Layers when all layers have been cleared crashes the application

Metadata

Metadata

Assignees

Labels

enhancementNew feature or request

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions