Белые вертикальные линии и дрожащие горизонтальные линии в движении тайловой карты

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

Вот видео, показывающее белые вертикальные линии: https://www.youtube.com/watch?v=34V64WacMo4 На одном из них показаны дрожащие горизонтальные линии: https://www.youtube.com/watch?v=LiozBZzxmy0

Для сравнения, вот проект, над которым я работал ранее в этом году без GDX. Вы можете видеть, что тайловая карта перемещается плавно и без каких-либо заметных эффектов: https://www.youtube.com/watch?v=VvdPdA_253k

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

Мой партнер и я оба исследовали причины этого, и хотя мы нашли несколько возможных ответов, ничего не сработало. Решение, которое у нас есть на данный момент, кажется очень неправильным. Я использую Photoshop для создания листа плитки. Я держу его очень организованным, чтобы при импорте в Tiled с ним было удобно работать. Вот тестовый лист, с которым я работал, тот, который использовался для создания приведенных выше примеров:
введите описание изображения здесь

В качестве эксперимента мой друг создал несколько простых тайлов 32x32 и использовал TexturePacker для их упаковки, а затем использовал их в Tiled. Конечным результатом этого был этот файл:

введите здесь описание изображения

Если вы откроете этот файл в графическом редакторе, вы увидите, что это не имеет смысла, плитки даже не однородны. Синие и зеленые плитки имеют размер 34x34, а красные и желтые — 35x34. Он сказал, что в TexturePacker он определил отступы и интервалы как равные 2. Так что, во-первых, я смущен тем, как плитки 32x32 выводятся в разных размерах. Затем он сказал, что импортировал это в Tiled и установил настройки импорта на 33x33 с интервалами и отступами, равными 1. Похоже, что карта, созданная с этими тайлами, работает в нашем движке. Это порождает несколько проблем.

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

Я также обнаружил, что вывод, превращающий плитки 32x32 в плитки 34x34 и 35x34, искажает мою графику. Это не может быть правильным способом сделать это. Как мне создать тайловый лист, который при использовании в тайловой карте и использовании в GDX будет отображаться так же плавно, как тот, который я продемонстрировал во второй ссылке на видео выше?

Если интересно, вот текущая рабочая вилка нашего приложения: https://github.com/vinbreauX/DULES


libgdx tiling graphics sprite
person Vin Breau    schedule 10.12.2014    source источник

Ответы (1)


arrow_upward
13
arrow_downward

У меня была точно такая же проблема: когда я двигался, между плитками появлялись вертикальные линии. Чтобы решить эту проблему, я использовал следующий код:

public static void fixBleeding(TextureRegion[][] region) {
    for (TextureRegion[] array : region) {
        for (TextureRegion texture : array) {
            fixBleeding(texture);
        }
    }
}

public static void fixBleeding(TextureRegion region) {
    float fix = 0.01f;

    float x = region.getRegionX();
    float y = region.getRegionY();
    float width = region.getRegionWidth();
    float height = region.getRegionHeight();
    float invTexWidth = 1f / region.getTexture().getWidth();
    float invTexHeight = 1f / region.getTexture().getHeight();
    region.setRegion((x + fix) * invTexWidth, (y + fix) * invTexHeight, (x + width - fix) * invTexWidth, (y + height - fix) * invTexHeight); // Trims
                                                                                                                                                // region
}

Эти методы (один для массива текстур и один только для одной текстуры) слегка корректируют изображение, чтобы не возникало растекания. Регулировка настолько незначительна (0,01f), что ее почти не видно, но она отлично помогает избавиться от вертикальных линий. Когда вы загружаете свои текстуры, просто пропустите их через метод fixBleeding(), и ваши проблемы должны быть решены.

person matthewtory    schedule 10.12.2014
comment
Это помогло! Фантастика, и спасибо. Это элегантное решение. - person Vin Breau; 11.12.2014
comment
Большое тебе спасибо!! Это работает как шарм. Только что потратил полчаса, пытаясь найти способ применить отступы к моим плиткам, но это намного лучше ‹3 - person Leo Hilbert; 07.03.2017
comment
Единственное решение в Интернете, которое помогло моему делу. Спасибо! - person Peanut Panda; 02.09.2017