作者为Creative Coding Amsterdam的代码挑战制作了“Space Invader Generator”，旨在娱乐和实现“银河统治”。他通过互动动画展示了生成器的运作过程，并分享了创作背景。作者还提到自己在开发工具时容易陷入无休止的项目中，但已学会适时完成并发布项目，继续前进。

如何绘制太空侵略者：Muffin Man的创作之旅

最近，我为阿姆斯特丹创意编码（Creative Coding Amsterdam）的代码挑战制作了一个太空侵略者生成器。这个项目不仅有趣，还带有一些“银河征服”的野心！在这篇文章中，我将通过互动动画展示它的工作原理。

项目起源

在开发我的3D矢量渲染器Rayven的新版本时，我意识到自己陷入了工具开发的无限循环中。为了避免这种情况，我决定用Rayven做一些实际的创作，而不是无休止地调整渲染器本身。于是，我想到了经典的太空侵略者——它们小巧、易于用3D块渲染，并且是电子游戏历史的标志性元素。

代码挑战

我将这个想法分享给了阿姆斯特丹创意编码社区，并得到了积极的反馈。于是，我们制定了规则，正式启动了太空侵略者代码挑战。虽然挑战仍在进行中，但已经有一些非常酷的作品在制作中，值得期待！

从草图到像素

在开始编码之前，我决定先通过手绘草图来研究如何生成太空侵略者。我使用Aseprite绘制了38个侵略者，它们都位于15x15像素的网格中。虽然比原版稍大，但效果令人满意。通过观察这些草图，我发现了一个基于几何和矢量图形的模式，这让我决定尝试生成矢量侵略者。

构建侵略者

生成侵略者的过程从绘制身体开始。首先，我们确定身体的中心点，然后生成一个低分辨率的矢量多边形。由于网格的低分辨率，矢量图形的瑕疵在像素化后几乎不可见。接着，我们为侵略者添加触角和角，这些部分通过随机生成的点来构建，并通过镜像对称完成。

矢量转像素

将矢量图形转换为像素的过程相对简单：我们检查每个像素的中心是否位于矢量图形内部，如果是，则绘制该像素。对于触角等较细的部分，我们通过增加线段的分割点来提高像素填充的准确性。

添加眼睛和颜色

最后，我们为侵略者添加眼睛，并为其上色。我使用了OKLCH色彩空间来生成颜色，确保所有侵略者的颜色具有相似的亮度。通过CSS变量，我们可以轻松调整颜色的亮度和饱和度。

赋予生命

为了让侵略者动起来，我模仿了原版游戏中的简单两帧动画。通过随机移动触角和角的端点，我们生成了第二帧动画，并让眼睛也稍微移动，增加了侵略者的生动感。

结论

通过这个项目，我成功制作了一个可以生成无限数量彩色太空侵略者的工具。虽然还有很多可以改进的地方，但我已经学会了如何在待办事项未完成的情况下发布项目。希望你喜欢这篇文章，并尝试生成你自己的侵略者舰队！

如果你对这篇文章感兴趣，不妨看看我之前关于使用JavaScript绘制SVG绳索的互动文章。

评论内容总结：

1. 随机头像生成器的潜力

   • 评论1认为该技术可以作为随机头像生成器，具有广泛的应用前景。
   • 引用："This would be awesome as a random avatar generator!"
   • 中文："这将是一个很棒的随机头像生成器！"

2. 技术实现的创新性

   • 评论2和评论7对技术实现表示赞赏，特别是向量生成和栅格化的过程，以及其在动画中的应用。
   • 引用："I’m surprised and impressed that it built a vector that it rasterized."
   • 中文："我对它生成向量并栅格化的过程感到惊讶和印象深刻。"
   • 引用："What you’re doing here with drawing the generated vector onto different sizes of grid is brilliant."
   • 中文："你将生成的向量绘制到不同大小的网格上的做法非常出色。"

3. 用户体验的积极反馈

   • 评论3称赞了移动端的阅读体验，认为这是最佳体验之一。
   • 引用："This is one of the best mobile experiences I’ve had reading an article."
   • 中文："这是我阅读文章时最好的移动端体验之一。"

4. 动态生成的趣味性

   • 评论4和评论6提到页面刷新后生成的入侵者会变化，增加了趣味性，并提到《太空入侵者》由一人开发的历史背景。
   • 引用："If you refresh the page the invader that gets generated as you read changes."
   • 中文："如果你刷新页面，生成的入侵者会随着阅读而变化。"
   • 引用："It’s interesting that space invaders was developed entirely by one person."
   • 中文："有趣的是，《太空入侵者》完全由一个人开发。"

5. 创意与想象力的体现

   • 评论5和评论7强调了该技术需要大量想象力，并对其创意表示赞赏。
   • 引用："Interesting, it takes a lot of imagination to do it."
   • 中文："有趣的是，这需要很多想象力。"
   • 引用："Bravo."
   • 中文："太棒了。"

6. 环保与黑客精神的结合

   • 评论8将技术与环保和黑客精神联系起来，认为这是一种非暴力AI的解决方案。
   • 引用："Ironically, this is much like saving the planet by creating invaders… the hacker way, without using brute force AI."
   • 中文："讽刺的是，这就像通过创建入侵者来拯救地球……黑客的方式，而不使用暴力AI。"

总结：评论普遍对该技术的创新性、趣味性和应用潜力表示赞赏，特别是在随机生成、动画效果和用户体验方面的表现。同时，评论也提到了其背后的创意和环保理念，认为这是一种非暴力AI的解决方案。