Anime
modbox/anime/In this folder, you have to organize your animated character files (aka the polos). The Incredibox graphics engine works with a homemade mechanism. You have to use Adobe Animate to open and edit our .fla source file. It will let you save so much time on lipsync and you'll never again have to edit every
sprite.json file manually 😅
• You can include a maximum of 20 polos in your mod.
• SWF file size must be 164x380px (will be 328x760px once exported as a PNG sprite).
• Prefer vector assets within the SWF so you don't have to worry about resolution.
• The names of your animation files must match the key/value
name in
animearray.
• Convert your SWF to a PNG sprite with our SWF2sprite tool.
Custom polo sprite
modbox/anime/0_polo.png (1312x960px)You can customize the original polo sprite file by editing the .ai source file provided in the anime folder. Edit and export your new
0_polo.png sprite to overwrite the existing file.
Make animation
Open and edit the
polo-template.fla with Adobe Animate. The specific tree structure and object names in this file are required for the final exportation steps (SWF to PNG sprite). You just have to hit CTRL+ENTER to export and run the SWF file of your animation. Keep this file structure and organization:
file.fla
└── stage
└── polo
├── headanim
│ └── limit
├── headwait
└── costume
polo
Double-click the polo object on the stage to enter it. You can see it contains its own timeline with 3 child objects. From there, you can edit the costume object, the headwait and the headanim object. The only thing you have to animate on this timeline is the headanim xy positions.
polo.headanim
The headanim object contains its own timeline on which you'll have to animate each polo's face frame by frame (don't manage the xy head position here, every face stays at the exact same position).
You can manage the lipsync easily thanks to the faces picker we've prepared. Open the Library panel (Window > Library) and find the objects named pick-A, pick-O, pick-K, etc…. Drag and drop one of them onto the stage and click on it once. Now, open the frame picker (Window > Frame picker) so you can select the right face variation.
polo.headanim.limit
The headanim contains an object called limit. Once your lipsync is 100% done, check on your timeline which frame has the biggest height and place the limit under the face. It will indicate where to crop the face during the SWF to PNG sprite conversion process.
headwait
This object is for the waiting state of the character during the game (when polo is waiting for the loop before starting). The headwait can't be animated.
costume
In this object, you can add new clothes to the character. The costume can't be animated. Vector shapes extending beyond the stage will be cropped during the PNG sprite export process.
Convert animation to sprite (SWF2Sprite)
Once your animation looks great, you can convert your SWF into a PNG sprite file. Open our SWF2sprite tool (you need an SWF reader such as Adobe Flash/Animate installed on your computer) and click
Convert to select your SWF animation file. If you've respected the file tree structure and object names from the
polo-template.fla, you should see the SWF2sprite analyzing your animation. It will compare each face to save only different ones before exporting a PNG file (try not exceed more than 40 faces per sprite). Plus, the tool will generate and export a JSON file filled with all data needed by the Incredibox graphics engine (such as polo's head xy position, head height, crop size, etc…).
Include animation
Once you have exported your animation PNG sprite and JSON data, you can put this file into the
anime/ folder. Don't forget to add your animation name by editing the key/value
name of the
animearray array in the
app.json file. Import your mod folder into the
Incredibox app for Steam to check your animation.