# Dressup Playable Maker

> 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).

- Skill: `dvcrn/dressup-playable-maker` (Agent Skill, multi-file: 5 files)
- Install (CLI): `npx skillmds@latest add dvcrn/dressup-playable-maker`
- Raw SKILL.md: https://api.skillmd.com/api/skills/dvcrn/dressup-playable-maker/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: dvcrn (https://skillmd.com/u/dvcrn)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/dvcrn/dressup-playable-maker

---


# Dressup Playable Maker

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

## Quick Start

Generate a new playable from template:

```bash
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.