English | 简体中文
When the software runs successfully, you will see the following interface:
The software consists of three areas and two buttons. Below is a detailed introduction.
The preview area is responsible for displaying the results of the image loaded into the software after splitting. Each split is highlighted by a default red box. This area also displays the current position of the mouse in the bottom-right corner.
You can load images by dragging and dropping image files from a folder into the preview area:
load_image.mp4
The preview area will open the last loaded image by default and execute the splitting algorithm on it. If the image is large, please be patient as it may take some time.
You can use the following operations to browse images in the preview area:
view_image.mp4
- Zoom in/out: Use
Ctrl + Mouse Wheel Up/Downto zoom in or out. - Move the preview area: Use
Mouse Wheel Up/Downto move the preview area up or down, and useShift + Mouse Wheel Up/Downto move it left or right.
Since the splitting algorithm makes trade-offs between performance and accuracy, there may be cases where the image is not correctly recognized:
In the image above, the hair of the character on the left is not recognized as part of the image due to gaps between pixels. We can adjust its size, and we can also press the Delete key to remove unnecessary boxes (areas that do not need to be split):
modify_box.mp4
You may have noticed that when an image is successfully loaded, a new item is added to the file list area. Its field displays the full path of the image.
When multiple images are added, you can freely select any image by clicking on its item. The algorithm will be executed the first time an image is selected. For larger images, please be patient as it may take some time:
select_images.mp4
Each time an image is added, the file list area will automatically select the last newly loaded image. If an image is added repeatedly, the file list area will automatically select the last repeated image.
Here, we display image information, selected box information, and the export folder path for sprites.
We display image information here, including the name, path, dimensions (width x height), and format of the image:
If the name or path cannot be fully displayed, you can use the scroll bar on the right to view the hidden content.
We display the selected box's top-left coordinates, width, and height here. You can modify these values by entering numbers in the corresponding fields and pressing Enter to confirm. If the input is valid, the box will update accordingly:
Once all boxes are adjusted, you can click Save to save the current changes. When switching images, the displayed box positions will reflect the last saved state.
save_box_modify.mp4
Once all boxes are adjusted, you can click Save to save the current changes, then click the Browse button to select a destination folder, and finally click Export to export the split images:
export_sprites.mp4
If you are unsatisfied with the box adjustments, you can undo the last operation using Ctrl+Z (or Cmd+Z on Mac). Alternatively, you can discard all changes by switching images and clicking the Cancel button.