Алгоритм поширення етикетки візуально привабливим та інтуїтивним способом

Коротка версія

Чи існує модель дизайну для розповсюдження етикеток транспортних засобів без перекриття, розміщуючи їх якомога ближче до транспортного засобу, на який вони посилаються? Якщо ні, чи є метод, який я пропоную, життєздатним? Як би ти це реалізував сам?

Розширена версія

У грі, яку я пишу, у мене спостерігається пташине бачення мого повітряного транспорту. Я також маю поруч із кожним із транспортних засобів невелику етикетку з ключовими даними про транспортний засіб. Це фактичний знімок екрана:

Тепер, оскільки транспортні засоби могли літати на різній висоті, їх значки можуть перекриватися. Однак я хотів би, щоб їх етикетки ніколи не перекривались (або етикетка з транспортного засобу "A" перекривалась значком транспортного засобу "B").

В даний час я можу виявити зіткнення між спрайтами, і я просто відштовхую порушувальну мітку в напрямку, протилежному інакше перекритому спрайту . Це працює в більшості ситуацій, але коли повітряний простір стає переповненим, ярлик може відсунутись дуже далеко від свого транспортного засобу, навіть якщо була б інша «розумніша» альтернатива. Наприклад, я отримую:

  B - label
A -----------label
  C - label

де було б краще (= ярлик ближче до транспортного засобу) дістати:

          B - label
label - A
          C - label

EDIT: Також слід враховувати, що поруч із корпусом транспортних засобів, що перекриваються, можуть бути інші конфігурації, в яких етикетки транспортних засобів можуть перекриватися (приклади мистецтва ASCII показують, наприклад, три дуже близькі транспортні засоби, на яких етикетка Aперекриває піктограму Bі C).

У мене є дві ідеї, як покращити теперішню ситуацію, але, перш ніж витрачати час на їх реалізацію, я подумав звернутися до громади за порадою (адже це здається "достатньо поширеною проблемою", щоб модель дизайну для неї могла існувати).

Для чого це варто, ось дві ідеї, про які я думав:

Слот-ізоляція простору етикетки

У цьому сценарії я б розділив весь екран на "прорізи" для міток. Тоді на кожному транспортному засобі завжди розміщуватиметься ярлик, розміщений у найближчому порожньому (порожній = немає інших спрайтів у цьому місці.

Спіральний пошук

З місця розташування транспортного засобу на екрані я б намагався розміщувати етикетку під збільшенням кутів, а потім при збільшенні радіусів, поки не буде знайдено місце, що не перекривається. Щось внизу:

try 0°, 10px
try 10°, 10px
try 20°, 10px
...
try 350°, 10px
try 0°, 20px
try 10°, 20px
...

По суті це питання подібне до проблеми уникнення зіткнення. Так, літаки можуть літати на різній висоті, але їх мітки знаходяться на одній "висоті".

Існують такі алгоритми, як Неузгоджене запобігання зіткненням , який би став кроком у правильному напрямку для вас. Звичайно для вашої ситуації, мітки "прив'язані" до своїх площин, тому вони мають обмежений діапазон руху.

Якщо ви подивитеся на поведінку Flocking Behavior , ви хочете реалізувати перше "правило" flocking: відштовхування короткого дальності. Однак замість того, щоб "спрямовувати" в напрямку, що знаходиться від найближчих сусідів, ви використовуєте вектор "далеко" як місце розташування для вашої мітки.

Наприклад:

Велике чорне коло представляє вашу область впливу, зелене коло представляє дійсні місця розташування для мітки, центральна зелена крапка - це площина, яку ви зараз розглядаєте, маленька зелена крапка - точка на колі, вибраному для розміщення мітки.

Тепер чорні точки можуть представляти або інші етикетки, або інші площини. Я не впевнений, який із них найкраще працюватиме, ви можете краще уникнути, якби це були інші етикетки, але я не впевнений. Очевидно, що стрілки "сили" - це вектори напрямку між вашою поточною площиною та "об'єктами впливу". Нарешті, коробка - це ярлик.

Тож, використовуючи ваш приклад вище, я думаю, що це призведе до такого типу:

            - label
           / 
          B 
label - A
          C 
           \
            - label

Використовуючи цей метод, у деяких ситуаціях доведеться робити спеціальні випадки, наприклад, три площини, розташовані вертикально:

          - label       label -
          |                   |
          B                   B
  label - A                   A - label
          C                   C
          |                   |
          - label       label -

Усі три мітки можуть перевертати флоп праворуч наліво, залежно від того, як визначені ваші куточки етикетки. В основному, вам потрібно буде стежити за кутами навколо кола, де ваші мітки можуть перемикати, з якого кута вони намальовані: 0, 90, 180, 270.

Я думаю, врешті-решт, це виглядатиме акуратно, спостерігаючи, як етикетки уникають один одного. Якщо це стає занадто відволікаючим, можливо, ви можете закрутити до найближчих 10 градусів для менш частого руху.

Вибачте за дивні деталі, більшість цього матеріалу я думала, коли складала радіальне меню для своєї гри, але я думаю, що в цій "динамічній" формі це буде працювати досить добре.

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

Обґрунтування полягає в тому , що метод Byte56 потребує спеціального лікування для певних умов, тоді як пошук спіралі ні, і він кодує дуже компактно . Крім того, підступний пошук підкреслює пошук більш близького місця до транспортного засобу для розміщення етикетки, що IMO є головним фактором для того, щоб зробити карту читабельною.

Однак, будь ласка, продовжуйте підтримувати його відповідь, оскільки це не тільки корисно, але й дуже добре написано!

Ось скріншот результату, досягнутого за допомогою спірального коду:

І ось код, який, хоча і не є самостійним, - дає уявлення про те, наскільки простою є реалізація:

def place_tags(self):
    for tag in self.tags:
        start_angle = tag.angle
        while not tag.place() or is_colliding(tag):  #See note n.1
            tag.angle = (tag.angle + angle_step) % 360
            if tag.angle == start_angle:
                tag.radius += radius_step
        tag.connector.update()                       #See note n.2

Примітка 1 - tag.place()повертає значення True, якщо тег знаходиться повністю на видимій частині екрана / радара. Отже, цей рядок звучить як "продовжуйте циклічно, якщо тег знаходиться поза радаром або він перекриває щось інше ..."

Примітка 2 - tag.connector.updateце метод, який малює лінію, що з'єднує піктограму літака до мітки / тегу з текстовою інформацією.