Galaxy108
Back

Pixel Drawing Editor4 min read

Pixel Drawing Editor feature image

title: Development Log - Creature Creation Tool and Pixel Art Consistency date: 2024-05-23 tags: game-development, creature-tool, pixel-art, weapons, UI, design

Development Log: Creature Creation Tool and Pixel Art Consistency

A long time ago, I attempted to create a creature creation tool. The idea was to allow players to draw various body parts—such as limbs, torsos, and heads—using hand-drawn vector lines, with different brush types for fills and strokes. The backend would then calculate the size, proportion, and position of each body part to match predefined spine animation skeletons. I saved both the drawn vector data and the bone binding animation data, which could later be replayed in the game by triggering the corresponding animations.

The Challenge of Pixel Consistency

After deepening my understanding of pixel art, I realized that unifying pixel ratios and densities is a critical factor. A consistent pixel look makes a huge difference in the overall quality and clarity of the visuals. Although redoing the creature creation tool is a significant investment of time, I believe it is both necessary and highly meaningful.

The Problem with Vector Data

Recording vector lines was effective for flexible drawing, but matching the game’s existing pixel assets required a drastic reduction in sprite pixel density. When the precision of the vector lines is reduced too much, the resulting pixel art looks awful. Similar attempts at pixelating high-resolution images have also failed to achieve ideal results—even with modern AI-based image generation, the outcome is not satisfactory.

The New Approach

To overcome these issues, I have redesigned the creature creation tool with the following changes:

  • Pixel-Level Brushes: I now provide brushes that operate at the pixel level, ensuring that the strokes and fills maintain a crisp pixelated style.
  • Pixel Buffer Data: Instead of saving vector data, I now save the image data as a pixel buffer, which aligns perfectly with the game’s assets.
  • Optimized Rendering: I completely reworked the drawing layer rendering system and designed a new interface to improve usability and performance.

Reusable Pixel Editing Framework

In parallel, I have maintained another creative tool for personalizing weapons and props. Since this tool is also based on pixel editing, I extracted the core pixel editing framework into a base library. This library handles input layers and outputs each layer’s pixel buffer, which can then be processed by either the weapon creation tool or the creature creation tool.

weapon tool pixel editor weapon tool pixel editor

Technical Notes

  • The game currently uses mostly 48x48 tile maps.
  • Each 32 pixels represent 1 meter in the game’s physics.
    • For example, a 48-pixel sprite represents an object that is 1.5 meters wide.
    • Two vertically placed tiles form a wall of approximately 3 meters.
  • The creature creation tool is designed using a scale of 32 pixels per meter to calculate the canvas size.
  • For the weapon tool, to capture fine details, I have been using a scale of 96 pixels per meter. I am still considering whether a 48 pixels per meter scale could be acceptable, because a weapon handle that is 4 centimeters thick would only be 2 pixels wide at 48 pixels per meter—a limitation that might hinder creativity for those not experienced in pixel art.

Next Steps

  • User Testing: I plan to gather feedback on the new pixel-level drawing tools and ensure that the user interface is intuitive.
  • Optimization: Further optimizations will be made to the rendering pipeline to improve performance without sacrificing visual quality.
  • Scalability: I will evaluate whether the pixel density scales for weapon creation can be adjusted to balance detail with creative freedom.

This overhaul of the creature creation tool marks a significant step towards achieving a cohesive pixel art style in my game. By ensuring that every element adheres to a unified pixel ratio and density, I aim to deliver a visually striking and consistent game world.

title: 开发日志 - 像素风生物创作工具与像素一致性 date: 2024-05-23 tags: 游戏开发, 生物创作工具, 像素艺术, 武器, UI, 设计

开发日志：像素风生物创作工具与像素一致性

很久之前，我尝试制作一个生物创作工具。想法是让玩家通过手绘矢量线条来绘制角色的四肢、躯干、头部等身体各部分，使用不同的画笔类型进行填充和描边。后台会计算每个身体部分的大小、比例和位置，以匹配预定义的骨骼动画。我保存了创作人物动物的绘画矢量数据和骨骼绑定动画数据，在游戏中通过触发相应的动画进行重放。

像素一致性的挑战

在我对像素艺术的理解不断加深后，我意识到统一的像素比例和像素密度是一个关键因素。统一的像素效果对整体画面质量和清晰度的影响非常大。虽然重新制作这个生物创作工具会耗费大量时间，但我相信这件事必要且意义重大。

矢量数据的问题

记录矢量线条在绘画上确实非常灵活，但要与游戏现有的像素素材保持一致，就需要大幅降低精灵的像素密度。而当矢量线条精度降低太多时，生成的像素风格效果会非常糟糕。类似的，高分辨率图像进行像素化处理也无法达到理想效果，哪怕是现在流行的AI图生图技术，结果同样不尽如人意。

新的解决方案

为了克服这些问题，我重新设计了这个生物创作工具，做出了以下改变：

  • 像素级画笔：现在提供的是操作在像素级别的画笔，确保每一笔描边和填充都能保持清晰的像素风格。
  • 像素缓冲数据：不再保存矢量数据，而是把图像数据保存为像素缓冲区（pixel buffer），与游戏的素材比例完全一致。
  • 优化的渲染：彻底重写了绘画图层的渲染系统，并设计了全新界面，提升了使用体验和性能。

可复用的像素编辑框架

与此同时，我还维护着另一个用于个性化绘制武器和道具的创作工具。由于这个工具同样基于像素编辑，所以我把像素编辑的基本框架提取出来，做成了一个底层库。这个库负责输入图层，并输出每个图层的像素缓冲数据，然后交由武器创作工具或生物创作工具的具体逻辑进行后续处理。

weapon tool pixel editor weapon tool pixel editor

技术细节

  • 游戏目前使用的大多是48x48的瓦片地图。
  • 游戏内物理尺寸的比例是：每32个像素代表1米。
    • 例如，一个48像素精灵代表的是一个1.5米宽的物体。
    • 两个上下放置的瓦片表示一面普通高度的墙，大约3米高。
  • 生物创作工具使用的是32像素/米的比例来计算画布大小。
  • 而在武器创作工具中，为了呈现更多细节，我使用了96像素/米的比例。我仍在考虑是否使用48像素/米也可以接受。因为一个4厘米粗的武器手柄在48像素/米的比例下只有2个像素点宽度，这种限制可能会让没有像素艺术经验的玩家创作受限。

下一步计划

  • 用户测试：计划收集关于新的像素级绘画工具的用户反馈，确保用户界面足够直观。
  • 性能优化：进一步优化渲染管线，在不牺牲视觉质量的情况下提升性能。
  • 比例调整：评估武器创作工具的像素密度比例，在呈现细节和保持创作自由度之间找到最佳平衡。

这次对生物创作工具的彻底重制，是朝着游戏内像素艺术风格统一迈出的重要一步。通过确保游戏中的每一个元素都遵循统一的像素比例和像素密度，我希望能够打造一个视觉震撼且风格一致的像素世界。