2D 游戏中可定制的玩家头像

Question

我怎样才能在我的游戏中拥有这样的功能，玩家可以通过该功能改变他们的发型、外观、衣服风格等，这样每当他们穿着不同的衣服时，他们的头像就会随之更新。

我应该：

• 让我的设计师将盔甲、发型和面孔的所有可能组合创建为精灵（这可能需要大量工作）。

  让我的设计师创建

• 当玩家在游戏介绍中选择他们的外观时，我的代码将自动创建这个精灵，以及头饰/盔甲与该精灵的所有可能组合。 然后，每次他们选择一些不同的盔甲时，就会加载该盔甲/外观组合的精灵。

• 是否可以将角色的精灵分为多个组件，例如脸部、衬衫、牛仔裤、鞋子，并具有每个组件的像素尺寸。 例如，每当玩家更换头盔时，我们都会使用像素尺寸将头盔图像放置在其面部图像通常所在的位置。 （我正在使用 Java 来构建这个游戏）

• 这在 2D 中不可能，我应该使用 3D 吗？

• 还有其他方法吗？

请指教。

Answer 1

要考虑的一个主要因素是动画。 如果角色的盔甲带有护肩，这些护肩可能需要随着他的躯干移动。 同样，如果他穿着靴子，那么靴子必须遵循与赤脚相同的周期。

本质上，您的设计师需要的是一个 Sprite Sheet让您的艺术家看到基本角色的所有可能的动画帧。 然后你让他们根据这些床单创建定制发型、靴子、盔甲等。 是的，这需要大量工作，但在大多数情况下，元素需要最少的重绘； 靴子是我能看到的唯一需要花费大量工作来重新创建的东西，因为它们会改变多个动画帧。 对你的精灵要无情，尽量减少所需的数量。

积累了元素库后，您就可以开始作弊了。 回收相同的发型并在 Photoshop 中或直接在游戏中使用角色创建器中的滑块调整其颜色。

为了确保游戏中的良好性能，最后一步是将所有不同元素的精灵表展平为单个精灵表，然后将其拆分并存储在精灵缓冲区中。

Answer 2

为此，3D 不是必需的，但恕我直言，3D 世界中常见的画家算法可能会为您节省一些工作：

画家算法的工作原理是首先绘制最远的对象，然后用更靠近相机的对象进行过度绘制。 在你的情况下，它会归结为为你的精灵生成缓冲区，将其绘制到缓冲区上，找到下一个依赖的精灵部分（即装甲或其他），绘制它，找到下一个依赖的精灵部分（即一个特殊的精灵部分）盔甲上的标志），等等。 当没有更多的依赖部分时，您将生成的完整精灵绘制到用户看到的显示器上。

组合的部件应具有 Alpha 通道（RGBA 而不是 RGB），以便您只能组合将 Alpha 值设置为您选择的值的部件。 如果出于某种原因您无法做到这一点，请坚持使用一种您将视为透明的 RGB 组合。

使用 3D 可能会让您更轻松地组合各个部分，您甚至不必使用屏幕外缓冲区或编写像素组合代码。 另一方面是，如果您还不了解 3D，则需要学习一点。 :-)

编辑回答评论：

组合部分的工作方式有点像这样（在 C++ 中，Java 将非常相似 - 请注意，我没有通过编译器运行下面的代码）：

// 
// @param dependant_textures is a vector of textures where 
// texture n+1 depends on texture n. 
// @param combimed_tex is the output of all textures combined
void Sprite::combineTextures (vector<Texture> const& dependant_textures, 
                              Texture& combined_tex) {
   vector< Texture >::iterator iter = dependant_textures.begin();
   combined_tex = *iter;

   if (dependant_textures.size() > 1)
     for (iter++; iter != dependant_textures.end(); iter++) {
        Texture& current_tex = *iter;

        // Go through each pixel, painting:
        for (unsigned char pixel_index = 0; 
             pixel_index < current_tex.numPixels(); pixel_index++) {
           // Assuming that Texture had a method to export the raw pixel data
           // as an array of chars - to illustrate, check Alpha value:
           int const BYTESPERPIXEL = 4; // RGBA
           if (!current_tex.getRawData()[pixel_index * BYTESPERPIXEL + 3]) 
              for (int copied_bytes = 0; copied_bytes < 3; copied_bytes++)
              {
                int index = pixel_index * BYTESPERPIXEL + copied_bytes;
                combined_tex.getRawData()[index] = 
                   current_tex.getRawData()[index];
              }               
        }
     }
}

回答对于 3D 解决方案的问题，您只需在彼此之上绘制具有各自纹理（将具有 Alpha 通道）的矩形。 您可以将系统设置为以正交模式显示（对于 OpenGL：gluOrtho2D()）。

Answer 3

我会选择程序生成解决方案（#2）。 只要生成的精灵数量不受限制，就会导致生成时间过长。 也许在获取每个项目时进行生成，以降低负载。

Answer 4

由于评论中要求我也提供 3D 方式，这里有一些，这是我不久前编写的一些代码的摘录。 它是 OpenGL 和 C++。

每个精灵都会被要求绘制自己。 使用适配器模式，我将组合精灵 - 即，将有一个精灵容纳两个或多个具有 (0,0) 相对位置的精灵，以及一个具有真实位置的精灵，其中包含所有这些“子”精灵。

void Sprite::display (void) const
{
  glBindTexture(GL_TEXTURE_2D, tex_id_);
  Display::drawTranspRect(model_->getPosition().x + draw_dimensions_[0] / 2.0f,
      model_->getPosition().y + draw_dimensions_[1] / 2.0f,
      draw_dimensions_[0] / 2.0f, draw_dimensions_[1] / 2.0f);
}

void Display::drawTranspRect (float x, float y, float x_len, float y_len)
{   
  glPushMatrix();

  glEnable(GL_BLEND);   
  glBlendFunc(GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

  glColor4f(1.0, 1.0, 1.0, 1.0);

  glBegin(GL_QUADS);        
    glTexCoord2f(0.0f, 0.0f); glVertex3f(x - x_len, y - y_len, Z);
    glTexCoord2f(1.0f, 0.0f); glVertex3f(x + x_len, y - y_len, Z);
    glTexCoord2f(1.0f, 1.0f); glVertex3f(x + x_len, y + y_len, Z);
    glTexCoord2f(0.0f, 1.0f); glVertex3f(x - x_len, y + y_len, Z);
  glEnd();

  glDisable(GL_BLEND);  
  glPopMatrix();
}

tex_id_ 是一个整数值，用于标识 OpenGL 使用哪个纹理。 纹理管理器的相关部分是这些。 纹理管理器实际上通过检查读取的颜色是否为纯白色（RGB (ff,ff,ff)）来模拟 Alpha 通道 - loadFile 代码在每像素 24 位 BMP 文件上运行：

TextureManager::texture_id 
TextureManager::createNewTexture (Texture const& tex) {
    texture_id id;
    glGenTextures(1, &id);
    glBindTexture(GL_TEXTURE_2D, id);

    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_REPEAT);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_REPEAT);    
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);   
    glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);       
    glTexImage2D(GL_TEXTURE_2D, 0, 4, tex.width_, tex.height_, 0, 
        GL_BGRA_EXT, GL_UNSIGNED_BYTE, tex.texture_);

    return id;
}

void TextureManager::loadImage (FILE* f, Texture& dest) const {
  fseek(f, 18, SEEK_SET);
  signed int compression_method;
  unsigned int const HEADER_SIZE = 54;

  fread(&dest.width_, sizeof(unsigned int), 1, f);
  fread(&dest.height_, sizeof(unsigned int), 1, f);
  fseek(f, 28, SEEK_SET);
  fread(&dest.bpp_, sizeof (unsigned short), 1, f);
  fseek(f, 30, SEEK_SET);
  fread(&compression_method, sizeof(unsigned int), 1, f);

  // We add 4 channels, because we will manually set an alpha channel
  // for the color white.
  dest.size_ = dest.width_ * dest.height_ * dest.bpp_/8 * 4;
  dest.texture_ = new unsigned char[dest.size_];
  unsigned char* buffer = new unsigned char[3 * dest.size_ / 4];    

  // Slurp in whole file and replace all white colors with green
  // values and an alpha value of 0:
  fseek(f, HEADER_SIZE, SEEK_SET);      
  fread (buffer, sizeof(unsigned char), 3 * dest.size_ / 4, f); 
  for (unsigned int count = 0; count < dest.width_ * dest.height_; count++) {       
    dest.texture_[0+count*4] = buffer[0+count*3];
    dest.texture_[1+count*4] = buffer[1+count*3];
    dest.texture_[2+count*4] = buffer[2+count*3];
    dest.texture_[3+count*4] = 0xff;

    if (dest.texture_[0+count*4] == 0xff &&
        dest.texture_[1+count*4] == 0xff &&
        dest.texture_[2+count*4] == 0xff) {
      dest.texture_[0+count*4] = 0x00;
      dest.texture_[1+count*4] = 0xff;
      dest.texture_[2+count*4] = 0x00;
      dest.texture_[3+count*4] = 0x00;
      dest.uses_alpha_ = true;
    }                   
  }
  delete[] buffer;          
}

这实际上是一个小跳转' nRun是我闲暇时偶尔开发的。 顺便说一句，它也使用 gluOrtho2D() 模式。 如果你离开意味着联系你，如果你想要的话我会把源码发给你。

Answer 5

较旧的 2D 游戏（例如《暗黑破坏神》和《网络创世纪》）使用精灵合成技术来实现此目的。 您可以从那些较旧的 2D 等距游戏中搜索艺术，看看他们是如何做到的。