Rotate

Pick a sprite, get all 4/8 directions.

Setting

Choose a sprite to rotate
From My SpritesReuse an existing visual
Choose an imagePNG, JPG or WebP
Directions
Perspective
Canvas size
6 CREDITS
Transparent PNG

See every angle before you rotate

Example
Example adventurer facing south
Direction 1 / 8

What you'll get

Tips for a clean rotation

✓
✕
Show the full body

One character, head to feet. Cropped parts get guessed.

✓
✕
Keep the background clean

Transparent or plain works best. Remove Background →

Match the perspective

Pick the view your sprite was drawn in. Tap a view to see its example above.

设计说明

版本 1.2 · 生成 2026-11-05 · 修改 2026-11-05(4/8 标签选中态改为浅绿;示例角色换为新生成的空手冒险者) · 对话 ID:未知 · 仅为原型,未接入项目

一、和现有两个右侧面板相比,改了什么

问题(现有面板)本次做法
Sprite Generator 只是作品图墙,用户看不出"自己要做什么"首屏直接演示 Rotate 的核心结果:同一个角色转一圈;方向按钮按罗盘位置摆在图的四周,位置本身就在解释"方向"
示例只能看,不能探索案例本身可交互:可切换 8/4 方向、切换视角、点选任一方向、暂停/调速。左侧是设置,右侧是案例,两者不联动,避免用户把案例里的操作当成设置
没回答"下载后拿到什么"What you'll get 展示真实输出:帧数、单帧尺寸、整张 sheet 尺寸、方向顺序(与后端一致)
没有帮助用户做选择画布顶部的 8/4 方向标签带一行适用场景,首屏可见;切换后案例画布与输出立即变化(只影响案例,不改左侧设置)
没有降低失败率的提示Tips 给出 3 条上传建议(全身、干净背景、视角匹配),并导流到 Remove Background

二、显示规则(建议与 Sprite Generator 保持一致)

  • 未登录或没有任何 Rotate 记录:右侧显示本指引,标题 See every angle before you rotate。
  • 有记录或正在生成:右侧切换为 Creation Record。
  • 右侧案例与左侧设置互相独立:案例默认 8 方向、Side view、64×64;用户在右侧的任何操作都不改变左侧设置,反之亦然。视角切换入口在 Tips 的 "Match the perspective" 缩略图上。
  • 进入页面自动慢速旋转;用户点击任意方向即暂停;系统开启"减少动态效果"时不自动播放。键盘左右方向键可逐个转向。

三、图片规格与来源

  • 共 24 张,均为 384×384 透明 PNG:3 种视角 × 8 个方向,命名 adventurer-{side|isometric|top-down}-{s|se|e|ne|n|nw|w|sw}.png,位于本文件同目录 images/。
  • 角色:绿斗篷少年冒险者,双手空着、佩剑始终插在左腰剑鞘、挎包在右腰——从设计上避免"手和武器不协调",转身时左右装备也是判断朝向的线索。
  • 处理:每张九宫格切成 8 格,去除杂点;同一视角 8 张共用一个缩放比例并对齐脚底,转身时不会忽大忽小。
  • 方向顺序与产品实际导出一致:8 方向 S→SE→E→NE→N→NW→W→SW,4 方向 S→E→N→W。

四、补充说明

  • 俯视图里人物头顶占比大、脸几乎看不到,这是俯视镜头的正常效果;如果觉得辨识度偏低,可重出这一组。
  • 指引图是示例,不是用户自己的图;页面右上角已用 Example 标签说明,避免用户误以为已生成。