Делаем спрайт разных цветов / forpes.ru

Главная
Делаем спрайт разных цветов

Делаем спрайт разных цветов -3

06.07.2021 18:40

xverizex 12 2000 Источник

Я пробую делать игры. Пишу код, пробую рисовать и хочу научиться делать музыку. Я прорисовал персонажа и мне нужно было сделать так, чтобы ему можно было менять цвет одежды. Решение пришло сначала одно, но потом додумался до более простого.

Первое решение до чего я додумался, это сделать у стен разную прозрачность и тогда можно с помощью шейдера задавать прозрачность. В шейдере уже проверяется прозрачность и указывается заданный цвет. Может вам будет это интересно, но я всё таки приведу код класса спрайта и шейдера. Мне нравиться серый цвет и я как то обычно в его оттенках рисую что-то. Вот нарисовал человечка.

Как можно заметить, вся одежка в оттенках серого цвета. Это оказалось удобным. я выписал числовые коды цветов в отдельный файл.

human colors
-------------------------------------------
body front #6a6a6a 0.41 0.41 0.41
body up #959595 0.58 0.58 0.58
arm #a6a6a6  0.65 0.65 0.65
arm blick  #c1c1c1  0.75 0.75 0.75
arm blacked #8a8a8a  0.23
body down #5b5b5b 0.35 0.35 0.35
left legs blacked #4c4c4c 0.29 0.29 0.29
left legs blick #5c5c5c 0.36 0.36 0.36
right legs blacked #656565 0.39 0.39 0.39
right legs blick #808080 0.50 0.50 0.50

Вот код конструктора.

Sprite::Sprite (int x, int y, int z, const char *path) {
    this->visibility = true;
    this->isAnimate = false;
    this->animator = new Animator ();
    this->check = 0;
    this->commonData = nullptr;
    this->frame = nullptr;
    this->trigger_shadow = 0;
    
    this->z = glm::vec2 ((float) z, 1.0f);
    
    GameObject::ortho = glm::ortho (0.0f, 1.0f, 1.0f, 0.0f, -100.0f, 100.0f);
    
    float xx = ((float) x) / ((float) mea_width);
    float yy = ((float) y) / ((float) mea_height);
    float zz = z;
    GameObject::pos = glm::translate (glm::mat4(1.0f), glm::vec3 (xx, yy, zz));

    GameObject::model = glm::mat4(1.0f);

    this->shader = shaderController->program[SHADERS::SPRITE];
    this->type_shader = SHADERS::SPRITE;

    gl::UseProgram (shaderController->program[SHADERS::SPRITE]);
    this->location_view = gl::GetUniformLocation (shaderController->program[SHADERS::SPRITE], "view");
    this->location_tex = gl::GetUniformLocation (shaderController->program[SHADERS::SPRITE], "tex");
    this->location_pos = gl::GetUniformLocation (shaderController->program[SHADERS::SPRITE], "pos");
    this->location_model = gl::GetUniformLocation (shaderController->program[SHADERS::SPRITE], "model");
    this->location_scale = gl::GetUniformLocation (shaderController->program[SHADERS::SPRITE], "scale");
    this->location_z = gl::GetUniformLocation (shaderController->program[SHADERS::SPRITE], "zCoord");

    

    if (path != nullptr) loadSprite (path);
}

Как я помню, в играх указывают что например 1920x1080 разрешение рекомендуемое и я додумался сделать так - создать переменные mea_width = 1920 и mea_height = 1080. Ortho я выставляю в 1.0f расстояние, но чтобы одинаково везде было, я высчитываю деление на mea_*. То есть для тестирования и удобной работы я использую full hd экран и мне удобней ориентироваться в этих координатах. В игре я также оперирую координатами 1920x1080, но они преобразуются в 1.0f. Это делается очень просто, вот так.

float xx = ((float) x) / ((float) mea_width);
float yy = ((float) y) / ((float) mea_height);

Потом есть загрузка шейдера в спрайт, для спрайта мы просто указываем тип шейдера.

void Sprite::setShader (int shader) {
    this->type_shader = shader;

    switch (shader) {
        case SHADERS::SPRITE:
            this->shader = shaderController->program[SHADERS::SPRITE];
            shader = this->shader;
            gl::UseProgram (shader);
            this->location_view = gl::GetUniformLocation (shader, "view");
            this->location_tex = gl::GetUniformLocation (shader, "tex");
            this->location_pos = gl::GetUniformLocation (shader, "pos");
            this->location_model = gl::GetUniformLocation (shader, "model");
            this->location_scale = gl::GetUniformLocation (shader, "scale");
            this->location_z = gl::GetUniformLocation (shader, "zCoord");
        break;
        case SHADERS::SPRITE_WITH_ALPHA_COLORS:
            this->shader = shaderController->program[SHADERS::SPRITE_WITH_ALPHA_COLORS];
            shader = this->shader;
            gl::UseProgram (shader);
            this->location_view = gl::GetUniformLocation (shader, "view");
            this->location_tex = gl::GetUniformLocation (shader, "tex");
            this->location_pos = gl::GetUniformLocation (shader, "pos");
            this->location_model = gl::GetUniformLocation (shader, "model");
            this->location_scale = gl::GetUniformLocation (shader, "scale");
            this->location_z = gl::GetUniformLocation (shader, "zCoord");
            this->location_one = gl::GetUniformLocation (shader, "color_wall");
            this->location_two = gl::GetUniformLocation (shader, "color_floor");
        break;
        case SHADERS::SPRITE_HUMAN:
            this->shader = shaderController->program[SHADERS::SPRITE_HUMAN];
            shader = this->shader;
            gl::UseProgram (shader);
            this->location_view = gl::GetUniformLocation (shader, "view");
            this->location_tex = gl::GetUniformLocation (shader, "tex");
            this->location_pos = gl::GetUniformLocation (shader, "pos");
            this->location_model = gl::GetUniformLocation (shader, "model");
            this->location_scale = gl::GetUniformLocation (shader, "scale");
            this->location_z = gl::GetUniformLocation (shader, "zCoord");
            this->location_one = gl::GetUniformLocation (shader, "color_up");
            this->location_two = gl::GetUniformLocation (shader, "color_down");
        break;
    }
    
}

Как и объяснялось ранее, я координаты указываю within 1920x1080.

void Sprite::setPos (int x, int y, int z) {
    float xx = ((float) x) / ((float) mea_width);
    float yy = ((float) y) / ((float) mea_height);
    float zz = z;
    GameObject::pos = glm::translate (glm::mat4(1.0f), glm::vec3 (xx, yy, zz));
    this->x = x;
    this->y = y;
}

тот же расчет я использую и для задания размера спрайта, но код наверное не буду здесь приводить.

отрисовка происходит по типу спрайта и вот пример отрисовки с нужным кадром.

void Sprite::draw_frame_with_color (int frame) {

    gl::UseProgram (this->shader);

    gl::Uniform1i (this->location_tex, 0);

    gl::ActiveTexture (gl::TEXTURE0);

    gl::BindTexture (gl::TEXTURE_2D, this->frame[frame]);
   
    gl::Uniform3f (this->location_one, this->color_one.r, this->color_one.g, this->color_one.b);
    gl::Uniform3f (this->location_two, this->color_two.r, this->color_two.g, this->color_two.b);

    gl::UniformMatrix4fv (this->location_view, 1, gl::FALSE_, &GameObject::ortho[0][0]);

    gl::UniformMatrix4fv (this->location_pos, 1, gl::FALSE_, &GameObject::pos[0][0]);

    gl::UniformMatrix4fv (this->location_model, 1, gl::FALSE_, &GameObject::model[0][0]);
    gl::UniformMatrix4fv (this->location_scale, 1, gl::FALSE_, &GameObject::scale[0][0]);

    gl::Uniform2f (this->location_z, this->z[0], this->z[1]);

    gl::BindVertexArray (this->vao);

    gl::EnableVertexAttribArray (0);
    gl::EnableVertexAttribArray (1);

    gl::DrawArrays (gl::TRIANGLES, 0, 6);   
}

Как видно из кода, я передаю в шейдер две uniform переменные, color_one и color_two. Они как раз и служат целью задания цвета для одежды персонажа. Шейдер фрагментный получился такой.

#version 330 core

out vec4 fragColor;

in vec2 texCoord;

uniform sampler2D tex;

uniform vec3 color_up;
uniform vec3 color_down;

void main () {
    vec3 color = texture (tex, texCoord).rgb;
    float r = color.r;
    float g = color.g;
    float b = color.b;
    r *= 100;
    g *= 100;
    b *= 100;
    int rr = int(r);
    int gg = int(g);
    int bb = int(b);
    r = rr;
    g = gg;
    b = bb;
    r *= 0.01;
    g *= 0.01;
    b *= 0.01;
    color = vec3 (r, g, b);

    if (color == vec3 (0.41, 0.41, 0.41)) {
        fragColor = vec4 (color_up, 1.0);
    } else if (color == vec3 (0.58, 0.58, 0.58)) {
        vec3 col = color_up + vec3 (0.17, 0.17, 0.17);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.65, 0.65, 0.65)) {
        vec3 col = color_up + vec3 (0.24, 0.24, 0.24);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.75, 0.75, 0.75)) {
        vec3 col = color_up + vec3 (0.34, 0.34, 0.34);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.23, 0.23, 0.23)) {
        vec3 col = color_up - vec3 (0.18, 0.18, 0.18);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.35, 0.35, 0.35)) {
        fragColor = vec4 (color_down, 1.0);
    } else if (color == vec3 (0.29, 0.29, 0.29)) {
        vec3 col = color_down - vec3 (0.06, 0.06, 0.06);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.36, 0.36, 0.36)) {
        vec3 col = color_down + vec3 (0.01, 0.01, 0.01);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.39, 0.39, 0.39)) {
        vec3 col = color_down + vec3 (0.04, 0.04, 0.04);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.50, 0.50, 0.50)) {
        vec3 col = color_down + vec3 (0.15, 0.15, 0.15);
        fragColor = vec4 (col, 1.0);
    } else {
        fragColor = texture (tex, texCoord);
    }
}

Как видно из кода, он просто проверяет на оттенок цвета и плюсует или минусует оттенок, чтобы добиться правильного цвета. Я такой же шейдер подключил и для столов и теперь когда персонаж подходит к столу и исчезает, он передает свои цвета столу и стол по этим оттенкам уже указывает нужный цвет. И начинает казаться, что персонаж действительно тот, который подходил к столу.

Комментарии (12)

Ritan

07.07.2021 22:09

#23232956

    if (color == vec3 (0.41, 0.41, 0.41)) {
        fragColor = vec4 (color_up, 1.0);
    } else if (color == vec3 (0.58, 0.58, 0.58)) {
        vec3 col = color_up + vec3 (0.17, 0.17, 0.17);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.65, 0.65, 0.65)) {
        vec3 col = color_up + vec3 (0.24, 0.24, 0.24);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.75, 0.75, 0.75)) {
        vec3 col = color_up + vec3 (0.34, 0.34, 0.34);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.23, 0.23, 0.23)) {
        vec3 col = color_up - vec3 (0.18, 0.18, 0.18);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.35, 0.35, 0.35)) {
        fragColor = vec4 (color_down, 1.0);
    } else if (color == vec3 (0.29, 0.29, 0.29)) {
        vec3 col = color_down - vec3 (0.06, 0.06, 0.06);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.36, 0.36, 0.36)) {
        vec3 col = color_down + vec3 (0.01, 0.01, 0.01);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.39, 0.39, 0.39)) {
        vec3 col = color_down + vec3 (0.04, 0.04, 0.04);
        fragColor = vec4 (col, 1.0);
    } else if (color == vec3 (0.50, 0.50, 0.50)) {
        vec3 col = color_down + vec3 (0.15, 0.15, 0.15);
        fragColor = vec4 (col, 1.0);
    } else {
        fragColor = texture (tex, texCoord);
    }

Какая жесть. А всего-то нужно было заюзать палитру

Названия переменных в шейдере - отдельный ужас. Через пару дней это станет нечитаемым

armature_current
07.07.2021 23:08
#23233214
Вот это еще хорошо смотрится
```
    r = rr;
    g = gg;
    b = bb;
```
1. Ritan
  07.07.2021 23:29
  #23233324
  Ну я не стал остальное разбирать. Там почти весь код такой, что его на общее обозрение выкладывать не стоит. В том же Sprite::setShader половину кода можно просто выкинуть за switch

anonymous
07.07.2021 00:00
#23233432
теперь когда персонаж подходит к столу и исчезает, он передает свои цвета столу и стол по этим оттенкам уже указывает нужный цвет
Ничего не понял.
1. xverizex Автор
  07.07.2021 00:08
  #23233458
  у меня отдельный спрайт человечка и стола. у стола есть кадры где стол без человечка и с человечком. и когда человечек enter в стол, то он исчезает, а стол меняется на кадр с человечком. и так как спрайт передал свои цвета столу, то за столом человечек такого же цвета.
  1. shaman4d
    07.07.2021 11:31
    #23234850
    А может проще было z-сортировку реализовать?
    
    xverizex Автор
    07.07.2021 11:37
    #23234880
    зачем? даже если это проще, но зачем она нужна?
    
    shaman4d
    07.07.2021 12:34
    #23235240
    https://www.youtube.com/watch?v=yRZlVrinw9I например
    
    xverizex Автор
    07.07.2021 14:16
    #23235760
    ну это понятно. но в моей игре всё правильно рисуется. я не пойму к чему вы написали про сортировку на комментарий про стол? я хотите видеть? стул же вместе со столом идет. проще нарисовать в следующем кадре человечка на кресле и всё, чем подгонять координаты к креслу, чтобы человечек скрылся за кресло.

roswell
07.07.2021 02:14
#23233662
Fenomenon - Lucy Said

KGeist
07.07.2021 11:48
#23234944
Когда в своё время экспериментировал с написанием движка, я убрал понятие "шейдер" из основного кода, тем более прямые вызовы в OpenGL, т.к. получаем сильную связность с деталями реализации, и в случае чего было бы дорого переписывать (напр. если нужно портировать на DirectX/Vulkan или добавлять более сложные типы шейдеров).
В итоге я выделил сущности Material и MaterialState. Material -- здесь лежит основная реализация материала (шейдер и прочее), а MaterialState -- это инстанс материала (через Material::createState), применённый к конкретному объекту (там хранятся uniform-значения, например). Таким образом:
1. детали реализации скрыты, проще портировать и менять/усложнять реализацию (напр., у материала для отрисовки теней может быть ссылка на фреймбуфер)
2. не нужен switch, т.к. инкапсулировано в отдельный класс
3. по материалам можно группировать отрисовку, чтобы не переключать шейдеры слишком часто (не знаю, правда, насколько это актуально на современных картах)
4. впоследствии прекрасно легло на постпроцессинг: напр., были у меня FXAAMaterial и SSAOMaterial (применялось к объекту FrameBuffer)
Такие вот дела.

Druj
07.07.2021 14:10
#23235718
Мне понравилось. Новичку в графике перед которым встала такая задача будет интересно и полезно увидеть максимально простой велосипед другого человека. Да, так делать нельзя, да, есть более простые и более изящные методы покраски по текстуре, но если это проект для обучения то не вижу проблем в использовании такого подхода.
А если автор не бросит а продолжит заниматься всерьёз то я завидую ему в те моменты когда в голове будет происходить: щелк, «Ааа, вот как оказывается можно было!». Так что реквестирую больше таких статей о проблемах новичков, но без тега *nix. ~~Всяко лучше чем переводы новостей от корпблогов.~~

Делаем спрайт разных цветов -3

Комментарии (12)

xverizex Автор

xverizex Автор

xverizex Автор