SkillHub

dressup-playable-maker

v1.0.0

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

Sourced from ClawHub, Authored by lxnan

Installation

Please help me install the skill `dressup-playable-maker` from SkillHub official store. npx skills add lxnan/dressup-playable-maker

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.