Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
Aseprite 像素风格（可作为Unity素材）
·
目录
前言
什么是帧？
我们看到的动画都是由一张张图片连续播放而成的，帧就是影像动画中最小单位的单幅影像画面，相当于电影胶片上的每一格镜头。 一帧就是一幅静止的画面，连续的帧就形成动画。
比如GIF文件的原理就是如此：
每秒钟帧数愈多，所显示的动作就会愈流畅。
什么是Aseprite？
Aseprite诞生于2013年，是一款专业的像素动画制作软件，提供丰富多样的像素绘图工具，用户使用该软件就可以在电脑上制作出各种像素风格的2D动画，还支持将正常的图像转换成像素风格的图片，非常有趣好玩，是最流行的像素画制作软件。
运行环境
Aseprite在Windows和macOS系统中都可以运行，只需要键盘和鼠标即可，当然如果配有专业绘图的数位板就更好了，可以显著提高绘画效率和体验。
正文
切入正题。
示例：绘制人物
首先创建一个32*64的画板：
打开对称模式
我们画一个6*4的矩形，作为人物的面部。（这里用的颜色编码为：f9ae89）
然后添加上一对眉毛和眼睛：
然后为头部绘制一个大概的边框：
然后在额头部用粉色绘制，两侧用肤色补充：
省略其中的绘制部分，我们最终得到了一个人物：
制作多帧动画
在仅完成人物后，“运动的人物”这个工作远没有结束，我们需要制作多帧动画，在第一帧右键新建帧：
选中第二帧，把body除外的部位隐藏，我们要来制作左抬脚帧，在原来基础上修改如下：
（注：为使移动具有震动感，身体部分（除鞋子）选中向下移动1格）
这个没有什么绝对的技巧，需要累积对人物移动的经验。
隐藏身体，显示头发，选中第二帧的头发，因为身体向下移了1格，整个头发也要向下移动1格：
隐藏头发，显示手臂，选中第二帧手臂，如下修改：
隐藏手臂，显示裤子，选中第二帧裤子，如下修改：
此外还包括衣服的调整等，最终得到第二帧：
同理地，接下来重复操作，运用“洋葱皮”功能可以看到邻近的一帧，运用熟练后将很方便。
微调
我们就完成了四帧动画，我们调整一下画布大小（Sprite——画布大小），将其调整到刚刚好能容纳四帧的大小
播放后效果如下：
导出精灵表
接下来导出精灵表。（文件——导出精灵表）
得到如下：
对了，本篇没有演示绘制帽子，如果你画技高超，可以另行绘制。
接下来还可以绘制向右，向左，向上行走的动画，本篇就不一一展示，如有需要，可以自行研究。
总结
近几年如星露谷物语，风之来国、星界边境等一系列优秀游戏的诞生，像素游戏愈发盛行。它们都有不同的绘画风格，也都可以向它们学习。（比如风之来国运用抗锯齿，将绘画风格柔化，更加自然。）
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Unity2D像素游戏开发 - Aseprite教程</title>
<script src="https://cdn.tailwindcss.com"></script>
<link href="https://cdn.bootcdn.net/ajax/libs/daisyui/4.12.10/full.min.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
<style>
.pixel-art {
image-rendering: pixelated;
image-rendering: -moz-crisp-edges;
image-rendering: crisp-edges;
}
.step-card {
transition: transform 0.2s;
}
.step-card:hover {
transform: translateY(-2px);
}
</style>
</head>
<body class="bg-gray-50">
<div class="container mx-auto px-4 py-8 max-w-6xl">
<!-- 标题区域 -->
<div class="text-center mb-8">
<h1 class="text-4xl font-bold text-gray-800 mb-4">
<i class="fas fa-gamepad text-purple-600"></i>
Unity2D像素游戏开发
</h1>
<p class="text-xl text-gray-600">Aseprite简单人物绘画+动画制作导出精灵表示例</p>
<div class="mt-4">
<span class="badge badge-primary">像素艺术</span>
<span class="badge badge-secondary">2D动画</span>
<span class="badge badge-accent">游戏开发</span>
</div>
</div>
<!-- 主要内容区域 -->
<div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
<!-- 左侧：概念介绍 -->
<div class="lg:col-span-1">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg">
<i class="fas fa-lightbulb text-yellow-500"></i>
基础概念
</h2>
<div class="space-y-4">
<div class="alert alert-info">
<div>
<h3 class="font-bold">什么是帧？</h3>
<p class="text-sm">动画由连续播放的图片组成，每幅静止画面就是一帧</p>
</div>
</div>
<div class="alert alert-success">
<div>
<h3 class="font-bold">什么是Aseprite？</h3>
<p class="text-sm">2013年诞生的专业像素动画制作软件，最流行的像素画工具</p>
</div>
</div>
<div class="bg-gray-100 p-3 rounded-lg">
<h4 class="font-semibold mb-2">运行环境</h4>
<ul class="text-sm space-y-1">
<li>• Windows/macOS系统</li>
<li>• 键盘+鼠标操作</li>
<li>• 支持数位板</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 中间：制作流程 -->
<div class="lg:col-span-2">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg mb-4">
<i class="fas fa-paint-brush text-blue-500"></i>
制作流程详解
</h2>
<div class="space-y-6">
<!-- 步骤1 -->
<div class="step-card card bg-gradient-to-r from-purple-50 to-pink-50 border-l-4 border-purple-400">
<div class="card-body p-4">
<h3 class="font-bold text-lg mb-2">1. 创建画板</h3>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div>
<p class="text-sm mb-2">创建32×64像素画板</p>
<ul class="text-xs space-y-1">
<li>• 打开像素网格</li>
<li>• 开启对称模式</li>
<li>• 设置对称轴</li>
</ul>
</div>
<div class="bg-white p-2 rounded border">
<div class="w-8 h-16 bg-gray-200 border mx-auto"></div>
<p class="text-xs text-center mt-1">32×64</p>
</div>
</div>
</div>
</div>
<!-- 步骤2 -->
<div class="step-card card bg-gradient-to-r from-blue-50 to-cyan-50 border-l-4 border-blue-400">
<div class="card-body p-4">
<h3 class="font-bold text-lg mb-2">2. 绘制人物</h3>
<div class="grid grid-cols-2 md:grid-cols-4 gap-2">
<div class="text-center">
<div class="w-6 h-4 bg-orange-300 mx-auto rounded"></div>
<p class="text-xs mt-1">面部</p>
</div>
<div class="text-center">
<div class="w-4 h-2 bg-black mx-auto rounded"></div>
<p class="text-xs mt-1">眉毛</p>
</div>
<div class="text-center">
<div class="w-2 h-2 bg-blue-500 mx-auto rounded-full"></div>
<p class="text-xs mt-1">眼睛</p>
</div>
<div class="text-center">
<div class="w-8 h-12 border-2 border-gray-400 mx-auto"></div>
<p class="text-xs mt-1">头部</p>
</div>
</div>
</div>
</div>
<!-- 步骤3 -->
<div class="step-card card bg-gradient-to-r from-green-50 to-emerald-50 border-l-4 border-green-400">
<div class="card-body p-4">
<h3 class="font-bold text-lg mb-2">3. 制作动画</h3>
<div class="space-y-2">
<div class="flex items-center space-x-2">
<div class="badge badge-primary">1</div>
<span class="text-sm">右键新建帧</span>
</div>
<div class="flex items-center space-x-2">
<div class="badge badge-secondary">2</div>
<span class="text-sm">使用洋葱皮功能</span>
</div>
<div class="flex items-center space-x-2">
<div class="badge badge-accent">3</div>
<span class="text-sm">逐帧调整部位</span>
</div>
</div>
</div>
</div>
<!-- 步骤4 -->
<div class="step-card card bg-gradient-to-r from-yellow-50 to-orange-50 border-l-4 border-yellow-400">
<div class="card-body p-4">
<h3 class="font-bold text-lg mb-2">4. 导出精灵表</h3>
<div class="bg-gray-100 p-3 rounded">
<p class="text-sm mb-2">文件 → 导出精灵表</p>
<div class="grid grid-cols-4 gap-1">
<div class="w-8 h-12 bg-pink-200 border"></div>
<div class="w-8 h-12 bg-pink-300 border"></div>
<div class="w-8 h-12 bg-pink-200 border"></div>
<div class="w-8 h-12 bg-pink-300 border"></div>
</div>
<p class="text-xs mt-2 text-center">4帧动画精灵表</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 技巧总结 -->
<div class="mt-8">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-lg mb-4">
<i class="fas fa-star text-yellow-500"></i>
制作技巧与总结
</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 class="font-bold mb-3">关键技巧</h3>
<ul class="space-y-2">
<li class="flex items-start space-x-2">
<i class="fas fa-check-circle text-green-500 mt-1"></i>
<span class="text-sm">使用对称模式提高绘制效率</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-check-circle text-green-500 mt-1"></i>
<span class="text-sm">洋葱皮功能辅助动画制作</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-check-circle text-green-500 mt-1"></i>
<span class="text-sm">逐帧微调身体各部位位置</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-check-circle text-green-500 mt-1"></i>
<span class="text-sm">注意像素级别的精确调整</span>
</li>
</ul>
</div>
<div>
<h3 class="font-bold mb-3">扩展方向</h3>
<ul class="space-y-2">
<li class="flex items-start space-x-2">
<i class="fas fa-arrow-right text-blue-500 mt-1"></i>
<span class="text-sm">绘制不同方向的行走动画</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-arrow-right text-blue-500 mt-1"></i>
<span class="text-sm">添加帽子等装饰物品</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-arrow-right text-blue-500 mt-1"></i>
<span class="text-sm">学习不同游戏的绘画风格</span>
</li>
<li class="flex items-start space-x-2">
<i class="fas fa-arrow-right text-blue-500 mt-1"></i>
<span class="text-sm">探索更多像素艺术技巧</span>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 资源链接 -->
<div class="mt-8 text-center">
<div class="card bg-base-100 shadow-xl">
<div class="card-body">
<h2 class="card-title text-center justify-center mb-4">
<i class="fas fa-download text-purple-500"></i>
相关资源
</h2>
<div class="space-y-4">
<a href="https://github.com/aseprite/aseprite"
class="btn btn-primary"
target="_blank">
<i class="fab fa-github"></i>
Aseprite官方GitHub
</a>
<p class="text-sm text-gray-600">
本文来源：<a href="https://yf123.blog.csdn.net/article/details/128459997"
class="link link-primary"
target="_blank">
Unity2D像素游戏开发——Aseprite简单人物绘画+动画制作导出精灵表示例
</a>
</p>
</div>
</div>
</div>
</div>
</div>
<script>
// 添加交互效果
document.querySelectorAll('.step-card').forEach(card => {
card.addEventListener('mouseenter', () => {
card.style.transform = 'translateY(-2px)';
});
card.addEventListener('mouseleave', () => {
card.style.transform = 'translateY(0)';
});
});
</script>
</body>
</html>作品欣赏
附一个下载链接：
https://github.com/aseprite/aseprite
https://github.com/aseprite/aseprite
欢迎加入西安开发者社区！我们致力于为西安地区的开发者提供学习、合作和成长的机会。参与我们的活动，与专家分享最新技术趋势，解决挑战，探索创新。加入我们，共同打造技术社区！
更多推荐
207
1- 0
已为社区贡献2条内容
所有评论(0)