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 (same number as your loops and pictos).
• 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
You can customize the waiting polo on the stage by editing the .ai source file provided in the anime folder. Edit and export your own
0_polo.png sprite to overwrite the default one.
modbox/anime/0_polo.png (1312x960px)HD sprite of the waiting polo on the stage.
modbox/anime/0_polo-ld.png (656x480px)LD sprite of the waiting polo on the stage.
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 files 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 (which is also the name of your MP3 audio loops). Import your mod folder into the
Incredibox app to check your animation.
Sprites optimization
To ensure your mod can be playbale on low-performance devices, each of your animation sprites has to come with a LD version (low definition). If the HD PNG file is 2000px width, the LD should be 1000px. Then, just add
-ld at the end of the LD file.
modbox/anime/0_polo.pngmodbox/anime/0_polo-ld.pngmodbox/anime/beat.pngmodbox/anime/beat-ld.pngmodbox/anime/voice.pngmodbox/anime/voice-ld.pngetc.
Warning: depeding on your sprites complexity (more than 40 polos' faces) some low-performance devices starts to run really slowly. This is why image optimization is important, save as much kilobyte as you can by finding the right balance between image quality and file size.