---

name: dressup-playable-maker description: Create dress-up style playable ads for mobile advertising platforms like Mintegral. Use when the user needs to create or customize a fashion dress-up interactive ad with character customization, clothing items, and CTA buttons. Supports template-based generation with customizable assets (character, clothes, background, UI styles).

Dressup Playable Maker

Create interactive dress-up playable ads for mobile advertising platforms.

Quick Start

Generate a new playable from template:

python3 scripts/generate.py --input-dir /path/to/assets --output-dir /path/to/output

Required Assets Structure

Input folder should contain:

assets/
├── character/
│   ├── body.png          # Base character body
│   ├── hair/
│   │   ├── hair_1.png
│   │   ├── hair_2.png
│   │   └── hair_3.png
│   ├── dress/
│   │   ├── dress_1.png
│   │   ├── dress_2.png
│   │   └── dress_3.png
│   └── shoes/
│       ├── shoes_1.png
│       ├── shoes_2.png
│       └── shoes_3.png
├── background.jpg        # Game background
└── ui/
    ├── button_bg.png     # Selection button background (optional)
    └── hand_cursor.png   # Hand hint cursor (optional)

Customization Options

Colors

Edit generated config.js:

• primaryColor: Main theme color
• buttonBorderColor: Selected item border color
• backgroundOverlay: Background tint

Layout

Edit generated style.css:

• --character-scale: Character size (default: 1.1)
• --button-size: Selection button size
• --bottom-spacing: Distance from buttons to screen bottom

Categories

Modify steps array in index.html to change clothing categories:

• Default: ['hair', 'dress', 'shoes']
• Can add: ['accessory', 'makeup', 'background']

Output Structure

output/
├── index.html      # Main game file (v57)
├── mraid.js        # MRAID support
└── assets/         # Copied and optimized images

Platform Support

• Mintegral: Full support with MRAID 3.0
• Other platforms: Generic playable format

Best Practices

1. Image sizes: Keep character parts under 500KB each
2. Format: Use PNG for transparency, JPG for backgrounds
3. Dimensions: Character parts should align at same canvas size
4. Testing: Always test on actual mobile devices

Version History

• v57: Fixed hair/head item selection bug (index mismatch)
• v56: Initial version

Advanced: Manual Customization

For full control, edit the generated index.html:

• defaultHair, defaultDress, defaultShoes: Set default outfits
• gameReady(), gameStart(), gameEnd(): Lifecycle hooks
• window.install(): CTA button action

Troubleshooting

Character parts not aligning: Ensure all images have same canvas size and anchor point.

Buttons too small/large: Adjust --button-size in CSS or regenerate with different base size.

Performance issues: Reduce image file sizes, limit to 3-4 clothing items per category.

Selection showing wrong item: Fixed in v57 - ensure using latest template.