astrion-website/demo/mock/file-pixel_art_research.md

25 KiB
Raw Blame History

像素风格弹幕射击游戏Bullet Hell / STG美术设计调研报告

调研时间2026-08-23 调研范围:玩家自机设计、敌方单位设计、子弹/弹幕像素美术、特效与 UI、免费素材与参考资源 主要信息来源SLYNYRDPixelblog 31/32、Shmups Wiki「Boghog's bullet hell shmup 101」、Touhou Wiki、Sparen's Danmaku Design Studio、itch.io / OpenGameArt 素材库、(注:详见文末「信息来源与可信度」说明)


0. 摘要与总体结论

  • 弹幕游戏Danmaku的美术核心不是"好看",而是"可读性Readability":在屏幕同时存在数百颗子弹、多个敌人、粒子特效与道具时,玩家必须能在一瞬间分辨"哪些是威胁、往哪里躲"。所有美术决策都应服务于这一目标。
  • 色彩价值Value分层是清晰度的关键:背景用低对比中间调,子弹用小面积高亮+暗色描边(亮暗相邻),玩家子弹、敌方子弹、道具、爆炸用不同明度层级区分。
  • 尺寸基准很重要16:9 屏幕下 SLYNYRD 建议 320×180 ~ 640×360 逻辑分辨率;自机相对屏幕的比例决定难度与手感。弹幕游戏常用低分辨率(如 480×270让像素感更强烈、单位像素信息更少、制作更快。
  • 判定框Hitbox视觉提示是东方式弹幕的标配:低速(聚焦)模式下显示一个小点或小圈,明确告诉玩家"真正会中弹的位置",与自机精灵大小形成强烈对比。
  • 免费素材足够支撑原型开发itch.io 与 OpenGameArt 上有大量免费像素 STG 素材自机、敌机、子弹、爆炸、UI落地阶段可先采购/复用,再逐步原创替换。

1. 玩家飞船 / 角色设计

1.1 分辨率与屏幕尺寸基准(先定画布再画图)

  • SLYNYRDRaymond SchlitterThyrian Defenders 作者建议16:9 屏幕下,逻辑分辨率黄金区间为 320×180 ~ 640×360;其教程以 480×270 为目标。
  • 分辨率越低像素越"块",像素味越浓、绘制耗时越少;但分辨率过高会失去像素艺术的"集群可读性reading intention within clusters"。
  • 自机相对屏幕的比例是决定玩法的关键因素:屏幕越大、自机越小 → 适合高速、多元素同屏的弹幕玩法;自机占屏比越大 → 可容纳的物体越少、玩家反应时间越短(难度体验完全不同)。
  • 常见像素倍率:逻辑分辨率 320×180 / 480×270放大 2~4 倍整数倍显示,避免像素走样。

建议(本项目):采用 480×270 或 320×180 逻辑分辨率;自机精灵建议 16×16低配小自机或 24×24 / 32×32更有性格弹幕量较大的话自机宜偏小。

1.2 经典像素 STG 自机设计要点(大小、配色、识别度)

综合 SLYNYRD 教程与 Boghog 指南:

  • 简洁+独特设计越复杂动画越难做。建议在机翼加条纹striping增加性格同时强调滚转roll的深度感。
  • 倾斜/滚转动画:至少 左/右 + 居中 三帧SLYNYRD 推荐每侧 2 帧不同滚转度(共 5 帧),配合侧向光源,左右移动更平滑(支持模拟输入时可分档滚转)。
  • 尾焰/推进器动画thruster animation是必须:让飞船"活着"的关键,通常 2~4 帧。
  • 光源方向全场景统一:所有精灵与背景使用同一方向光源,才能保持"飞行"的立体幻觉。
  • 识别度三要素:① 与背景/敌方单位的明度层级区分;② 自机弹幕流要"厚、快、密"——玩家在紧张的弹幕环境中主要靠弹幕流+轮廓+微光来估算自机位置Boghog③ 判定中心可加视觉强调(见 1.5)。
  • 移动手感与视觉配合滚转动画速度应匹配移动速度无惯性移动Boghog 强烈建议避免移动惯性),若感觉移动"不流畅"多半是视觉问题而非参数问题——加残影afterimage、尾迹trail可显著改善跟手感。

1.3 东方Project 系列的角色精灵风格

(说明:以下为对 ZUN 官方游戏内精灵风格的既有认知 + 社区资料的归纳,非实时官方文档。)

  • 东方系列正作均为纵轴弹幕射击,自机/敌机使用低分辨率角色小精灵PC-98 时代为 16×16 级Windows 时代精灵更精细但整体仍是"小尺寸、高识别度"路线)。
  • 精灵风格特点:大胆的色块、平涂/少渐变、深色描边;角色通过发型、发色、服装主色快速辨识(如博丽灵梦的红白、雾雨魔理沙的黑白)。
  • 判定点文化:按住 Shift 进入低速模式时,自机身上显示一个小点/小圈标记判定点(见 1.5),这是东方体系对弹幕公平性的核心贡献,被大量同类游戏沿用。
  • 弹幕本体是同人圈大量复刻的视觉语言圆弹tama、椭圆弹、苦无kunai、星弹、音符、护符amulet见第 3 节。
  • 参考手绘同人/教程中常被提到的 ZUN 风格要点面部与发型保持多年一致早期PC-98更简朴色块平涂、用色大胆Windows 期精灵颜色细节更多但仍保持低饱和背景衬托高饱和子弹的做法。

1.4 像素飞船设计要点(落地 Checklist

项目 建议
尺寸 16×16极简/ 24×24 / 32×32推荐起步
帧数 居中 1 帧 + 左右滚转各 1~2 帧 = 3~5 帧;尾焰 2~4 帧
调色板 4~8 色以内/精灵:主色 1~2、辅色/描边 1~2、高光 1、尾焰橙黄 2~3
描边 深色(近黑)描边,与"用白色描边的敌方子弹"形成体系区分
轮廓 剪影可读性优先,避免细节糊成一片;从剪影草图开始
判定中心 建议在自机中心下方(东方系在腰部)标 1~2px 亮点

1.5 判定框Hitbox视觉提示设计

  • 机制背景:东方系列中自机碰撞通常用一个**远小于精灵的小圆(约数像素半径)**判定(源自 Touhou Wiki「Hit box」条目Hitbox 是角色腰部附近的一个小圆,聚焦时可显示)。
  • 视觉提示做法(主流方案)
    1. 低速/聚焦模式才显示:按住 Shift低速时显示一个半透明小圆圈/小点;普通模式不显示(避免干扰)。
    2. 提示图形建议:空心圆 + 中心实点,对比色(如白/亮色配深色描边),随聚焦模式轻微旋转/脉动增加存在感(红魔乡社区的 d3d8.dll hitbox 补丁即模拟这种"旋转+透明度变化"行为)。
    3. 判定圈大小应可配置(不同自机可不同),提示圈与真实判定圈完全同心、直径一致。
  • 视觉之外的判定公平性Boghog 建议——玩家子弹给"大判定"、敌人给"大受击判"(补偿微操作失误);玩家命中应"慷慨"(覆盖贴合情况),才不会有挫败感。

2. 敌方单位设计

2.1 杂兵Enemy Grunts的像素设计

  • 同一阵营视觉统一+个体差异SLYNYRD 强调"一组单位共享视觉一致性(形态语言、配色体系),又通过形状与颜色彼此区分"。
  • 角色定位决定美术:按"速度 / 血量 / 体型 / 几何弹道 / 颜色"五要素设计SLYNYRD
    • Popcorn一发即死的小怪:体积小、快、成群出现,是为了制造"动作感"而非威胁;血量只要够"打完这一局"即可不要虚高Boghog
    • 快怪 ↔ 低血量+弱弹;慢怪 ↔ 高血量+强火力,尺寸跨度要大。
  • 做 hit 反馈:受击要闪烁/粒子/抖动,配轻量音效,否则敌人像"虚影"Boghog
  • 大判定+可预测移动弹幕游戏的挑战来自弹幕而非躲闪敌人本体所以敌人受击判定要大、移动要慢且可预测Boghog
  • 尺寸参考:杂兵 16×16 ~ 24×24中 Bossminiboss32×32~48×48帧数 2~4 帧(多帧震动/开火动画)。

2.2 Boss 的体型与细节层次

  • 体型梯度Boss 应显著大于杂兵(如 48×48、64×64 甚至 96×96"越大杀起来越爽"SLYNYRD但不要大到遮挡弹幕视野。
  • 细节层次Boss 可以有更多层细节(多层装甲、发光炮口、悬浮部件/浮游炮),但核心剪影仍需在弹幕中一眼可读;建议给 Boss 的主炮口、弱点做高亮标记。
  • Boss 血条分段:许多 STG 用可视化的 Boss 血条分段(每段切换一个攻击模式),例如 Gamedeveloper 文章提到"视觉上将 Boss 血条分段以显示本段攻击何时结束"。
  • Boss 出场仪式Boss 出现前要有"警告留白"(玩家无事可做、专注看字幕/警告用于聚集注意力Anatomy of a Shmup
  • Boss 爆炸要"壮观":屏幕级闪光 + 大爆炸动画 + 碎片四散(见 4.1)。

2.3 敌方攻击前的视觉预警Telegraph

  • 蓄力动画:炮口发光→聚集→发射,是通用预警语言;用 2~4 帧"粒子向炮口汇聚/炮口颜色渐亮"表达。
  • 颜色变化:攻击前单位变色(如变红/变亮)提示即将开火。
  • 激光预警:东方系激光常见"先显示一条细亮线(约半秒)再出现命中判定",是纯粹靠视觉(而非判定)预告的典型做法(社区对永夜抄等作品的解读)。
  • 模式分阶段呈现Boss 战先出简单版弹幕→每次重复更快更密更狠Bullet Pattern Design 教程),玩家靠"渐进式预告"进入节奏。
  • 背景预告:关卡背景用"地标/视觉节奏"给玩家读版记忆的锚点SLYNYRD Part 2——背景不只是装饰是记忆关卡的工具。
  • 弹幕扇面/轨迹预告可弯曲、可追踪的弹幕建议加尾迹或拉长精灵让轨迹可读Boghog

3. 子弹 / 弹幕的像素美术

3.1 常见像素子弹样式与尺寸

东方/弹幕体系常用子弹类型命名Touhou Community Jargon、Danmakufu 文档Ball、椭圆弹、苦无Kunai、护符Amulet、星弹Star 大/小、音符Note、米粒/细菌弹、冰锥/碎片Shard/Icicle、箭头Arrow、火球、心形、花瓣、蝴蝶等。

子弹类型 常见尺寸 形态与用途
小圆弹Pellet/Tama 8×8 ~ 12×12 基础弹,最密集,靠数量形成弹幕
中圆弹Ball 16×16 通用主力弹,清晰可读
椭圆弹Oval 16×20 左右 带方向感/旋转感,常用于弯曲弹道
苦无/箭形/导向弹Directed 16×32 左右 方向性最重要图形应随移动方向旋转SLYNYRD Part 2箭头形追踪弹必须朝向运动方向
大弹/特殊弹 24×24 / 32×32 Boss 特殊弹、高伤弹
激光Laser 宽 4~16、长任意 预热细线→粗化→判定

3.2 子弹颜色与类型的对应关系

  • Danmakufu 官方 8 色RED、GREEN、BLUE、YELLOW、PURPLE、AQUA、ORANGE、WHITE——可作为色板起点且激光与子弹共用这 8 色图形。
  • 颜色编码用途Note 上"15 个美丽弹幕"文章 + Boghog
    • 用颜色区分"快弹 / 慢弹 / 装饰弹"等危险等级,玩家读色即知威胁;
    • 颜色同时用于表达"瞄准玩家的弹aimed"与"固定弹static"等行为差异(各 STG 有自己约定,需在游戏内自学);
    • 红/粉/紫系是弹幕圈事实标准与常见特效颜色黄橙爆炸、金色道具冲突最少不易混淆Boghog 明确指出黄/橙传统弹容易与爆炸和金色道具撞色)。
  • 子弹颜色与发射单位颜色匹配SLYNYRD敌方单位与它发射的子弹同色系建立"谁打的"直觉。
  • 我方子弹用另一色系(如青/绿白),与敌方红/粉/紫建立对战双方色系对立。

3.3 子弹的动画帧设计(旋转、闪烁、脉动)

  • 闪烁Flashing:双帧交替即可,对比越强越"危险"但对比过强高速移动时反而难追踪SLYNYRD常用于"即将消失/即将命中"状态。
  • 旋转Rotation:星形、方形、椭圆可用 4~8 帧旋转;椭圆可做 Z 轴"翻转"来模拟 3D 感。
  • 脉动Pulse:轻微膨胀-收缩,任何形状都适用,让子弹"活着"。
  • 波动/涟漪Wobble/RippleCAVE虫姬/怒首领蜂)子弹常用抖动+涟漪动画,作用是抓住眼球并给每颗子弹独特身份Boghog
  • 动画帧数建议2D 旋转 4 帧90°步进起步、精细 8 帧;脉动 2~4 帧;闪烁 2 帧。帧率 12~15 FPS 贴合像素风。
  • 拖尾Trail:轨迹不寻常(弯曲/追踪的子弹加尾迹帮助玩家预判Boghog

3.4 大量弹幕同屏时的视觉清晰度处理(核心)

  • 价值Value分层:将图像转黑白即可检查——子弹应"亮部+暗部紧挨"(发光核心紧贴深色描边/内圈),最大化明度对比;背景用低对比中间调让子弹可以用极值明度自由突出Boghog
  • 描边Outline体系敌方子弹用白色/亮色描边(或亮+暗双描边),其他精灵用深色描边,从体系上把"威胁"和"物体"分开SLYNYRD
  • 分块/分组Chunking:把子弹编成线/环/簇等可读图案,让玩家读"组合"而非单颗;单颗游离子弹最难读,容易显得不公平Boghog
  • 深度排序Depth Sorting:敌方子弹永远绘制在自机、我方子弹、道具、爆炸之上;小且快的子弹绘制在更大更慢的子弹之上;单颗/小组绘制在大块之上Boghog
  • 留隙Design gaps:弹幕模式要"设计缝隙"——玩家能看见逃生路就公平光炫但读不出路就让人感到不公平note 文章)。
  • 限制换色:单屏同时出现的弹色建议控制在 2~3 种Boghog 风格惯例),避免信息过载。
  • 背景配合:背景刻意保持暗/中调+低饱和,就是给子弹让出可读空间。

4. 特效与 UI

4.1 爆炸特效的像素动画SLYNYRD 方法)

  • 制作流程:先用"圆→扩张变细环"的几何引导确定整体尺寸与扩张速率 → 把圆转成有机火焰团块 → 调团块运动。
  • 物理真实感原则:热气先快后慢(热膨胀快、冷却变慢)→ 爆炸先迅速扩张、后缓慢消散
  • 颜色演变白炽(最亮)→ 暖色(红橙黄)→ 灰烟消散。
  • 形态演变:团块从整体一致→随扩张分裂为多而复杂的小块;暗部逐渐侵入;最大扩张后缓慢上浮并化为烟。
  • 冲击波:把引导环稍作修改即可成冲击波环。
  • Boss 爆炸:屏幕级闪光 + 多层大爆炸 + 碎片残留Anatomy of a Shmup 强调"一切被摧毁的都应爆炸Boss 阵亡必须是一场辉煌的灯光秀")。
  • 尺寸建议:爆炸精灵显著大于被摧毁单位(如单位 16×16 → 爆炸 24~48×24~488 帧左右);碎屑粒子 2~8 帧。

4.2 拾取道具的视觉效果

  • 可读性优先:道具必须一眼区别于"威胁物",形态独特 + 活跃的空闲动画idle animation——旋转、漂浮、脉动、闪光都行SLYNYRD Part 2
  • 经典道具色/形PPower 火力红色系、SSpeed 速度、Bomb全屏雷、1UP 生命、Heart 回血;建议固定配色约定(如红=火力、蓝=速度、金=得分)。
  • 分布与运动:从特定敌人掉落 / 中立单位给予 / 随机入场;下落时做左右漂移、反弹、摇摆等"伸手去接也有意思"的运动。
  • 收集反馈:拾取瞬间应有闪光+粒子+音效+分数飘字(详见 4.3)。
  • 点收集Point of Collection:靠近屏幕顶端的一条"自动收集线"东方系标准道具回收机制线上道具全自动收集——UI/视觉上要有明确标识(例如顶部的装饰发光横线)。

4.3 得分 / 连击的视觉反馈

  • 数字飘字:得分/连击数用大号、亮色、带描边的像素数字,从事件点弹出并上浮淡出;字体建议用现成像素字体(如 Press Start 2P、Silkscreen 的开源替代)。
  • 连击Combo/Chain反馈:连击计时条/乘数图标(如"x2.5")靠近 HUD 核心区;连击即将断时闪烁/变红制造紧张感Dodonpachi 式"防御性计分"靠视觉压力驱动玩法)。
  • 擦弹Graze反馈:子弹擦过判定外圈时给火花/星光 + 分数飘字,是东方系核心爽点,视觉上要有专门粒子。
  • 分数增长可视化:让"数字变大"成为本能驱动Boghog大亮数字的成长本身就是激励
  • 层次化强调重要计分元素视觉上加强更大更亮次要元素弱化让玩家一眼抓住当前目标Boghog「Depth vs Clarity」

4.4 血条、Bomb 数量等 HUD 设计

  • HUD 基础要素STG 惯例):得分、连击/擦弹、自机数量残机图标、Bomb 数量B 图标、火力等级、Boss 血条分段、Boss 名/符卡名横幅、暂停/接关菜单。
  • Boss 血条:建议分段色条(每段对应一个攻击阶段),置于屏幕上方通栏;段末闪白提示"即将切换攻击"。
  • Bomb 图标:用典型"B"或者手雷/符卡造型的像素图标,数量用并列小图标表示(东方系风格:一枚 B 一颗星/符卡的排列)。
  • 残机Lives:像素自机小图标排列,比数字更直观。
  • 注意遮挡HUD 元素放在玩法区之外(顶部/底部条或半透明Boghog 提醒玩家主要在屏幕中区活动HUD 不应遮挡弹幕视野。
  • 风格统一HUD 的像素分辨率、色板、字体与游戏本体一致CraftPix 等素材库提供现成 pixel UI可直接适配
  • 像素 UI 素材参考CraftPix.net 的 Pixel Art Game UI 分类(免费/付费都有)。

5. 参考资源搜索汇总

5.1 itch.io 免费/付费像素弹幕素材

资源 内容 链接
Danmaku Sprite PackVoid dancer 模仿东方官方风格的子弹精灵包,免费,需遵守东方二次创作规约,可编辑 https://void-dancer.itch.io/danmaku-sprite
Danmaku Sprite PackBDragon1727 16×16 火/水/魔法子弹、特效精灵表,免费 https://bdragon1727.itch.io/fire-pixel-bullet-16x16https://bdragon1727.itch.io/free-effect-and-bullet-16x16
Pixel SHMUP Ships / Pixel Art Spaceships for SHMUPDyLESTorm 免费 1 自机+2 敌机+2 弹幕+8 帧爆炸+UI付费版 60 艘原创飞船 https://livingtheindie.com/free-pixel-art-smhup-ships-game-assethttps://livingtheindie.itch.io/pixel-art-spaceships-for-shmup
Pixel Nebula Player SpaceShipPixelCarvel 32×32 自机另有玩家僚机Drone、Boss 包、竖向背景包 https://itch.io/game-assets/tag-bullet-hell
TopDown BulletHell Packeinav23 $5.50 俯视角弹幕包(子弹+敌机+特效) https://itch.io/game-assets/tag-bullet-hell
itch.io 筛选页 tag=Bullet Helltag=Shoot 'Em Uptag=Pixel ArtFree 组合筛选 https://itch.io/game-assets/free/tag-pixel-art/tag-shoot-em-uphttps://itch.io/game-assets/free/tag-bullet-hell/tag-spriteshttps://itch.io/game-assets/free/tag-2d/tag-bullet-hell

5.2 OpenGameArt 免费素材CC0/OGA-BY 授权)

5.3 经典 STG 精灵分析与弹幕设计参考

5.4 像素艺术风格指南(教程/博客)

5.5 建议搜索关键词(继续深挖用)

pixel art shmup spritesbullet hell pixel art assetsSTG sprite design东方Project 像素风格pixel art explosion animationTouhou danmakufu bullet graphicsdanmaku bullet sheets site:itch.ioshmup hitbox indicatorCAVE 子弹精灵拆解


6. 给本项目落地落实的美术规范建议(可直接执行)

  1. 画布与倍率:逻辑分辨率 480×270推荐或 320×180,整数倍放大 3~4 倍输出;所有精灵按 16 或 8 的倍数取尺寸16×16 自机起步 / 32×32 精细自机;敌弹 8~16×16 系列Boss 64×64
  2. 色板分工(建议)
    • 背景:低饱和中暗调(深蓝紫灰系),价值集中在中间调;
    • 敌方子弹:红/粉/紫系8 色 Danmakufu 色板起步)+ 白/亮描边;
    • 我方子弹:青/绿白系 + 深描边;自机:高对比品牌色(如红白、蓝白);
    • 道具:金/橙(得分)、红(火力 P、蓝速度 S、银灰Bomb——注意与敌弹色彩错开
    • 爆炸:白→橙红黄→灰;
    • 预警:蓄力时变亮/变红,激光先亮细线。
  3. 动画帧数基线:自机滚转 3~5 帧 + 尾焰 2~4 帧;敌机 2~4 帧;子弹旋转 4 帧(或 8 帧)、脉动 2~4 帧、闪烁 2 帧;爆炸 6~10 帧;道具 idle 2~4 帧。统一 12~15 FPS。
  4. 判定与显示:自机真实判定用 2~4px 半径小圆,聚焦时显示同心空心圆 + 中心点(半透明+微旋),判定圈与显示圈完全同心。
  5. 绘制顺序(渲染层):背景 → 道具/粒子 → 我方子弹 → 敌人本体 → 我方自机 → 敌方子弹(最顶层);敌弹内部:小快弹 > 大慢弹。
  6. 工作流建议:先用 itch.io/OpenGameArt 免费包搭出可玩原型(自机 1 + 敌机 3 + 子弹 5 种 + 爆炸 1 + UI 板),再按上述规范逐一套用原创精灵替换;调色与动画用 Aseprite付费推荐或 Piskel免费

7. 信息来源与可信度说明

  • 基于实测/原文提取的内容可信度高可自行核验SLYNYRD Pixelblog 31/32 全文、Boghog's bullet hell shmup 101 全文、void-dancer Danmaku Sprite Pack 页面、LivingTheIndie 免费 SHMUP 素材描述、各 itch.io/OpenGameArt 页面标题与标签。
  • 基于第三方社区/百科归纳Touhou Wiki 判定点机制Hitbox 条目、Maribel Hearn 的 Touhou Jargon、Sparen 弹幕教程、note 上"15 个美丽弹幕"文章、Reddit r/shmupdev 讨论——这些是社区整理,非官方文档,具体数值(如判定点像素大小、各作品子弹尺寸)以实际游戏/官方资料为准。
  • 标注为"既有认知+"的内容(第 1.3 节东方风格总结):来自模型训练知识与社区资料交叉印证,非实时官方文档,未逐一验证,使用前建议对照东方官方立绘/游戏截图复核。
  • 价格为检索时点快照(如 $5.50、$4.99),可能变动,以页面为准。