135. [game] XProject1. Распределение элементов вокруг заданной точки

Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/

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

Содержание:

Суть проблемы

Есть массив визуальных элементов. Необходимо их распределить равномерно около заданной точки. Распределять их случайно через Math.random() не вариант, потому что элементы часто местами кучкуются, а местами образуются пробелы, а хочется что бы элементы распределялись равномерно. И еще важно что бы элементы не пересекались, в случае простого рандома этого добиться будет проблемно.

Вот как выглядит случайно распределение используя Math.random() (Нажмите кнопку allocation для распределения элементов):

Здесь должна быть флешка. Установите Flash Player

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

Меню:








Классы для тестирования алгоритмов :


Закрыть Главный класс приложения allocationAround1.as


Закрыть Класс ElementView.as


Закрыть Класс ContainerView.as

Распределение по квадрату

Первое что пришло в голову, это распределение по квадрату:
allocationAround2-1

Новый метод для распределения в классе ContainerView:

Можно добавить случайны угол поворота:

Здесь должна быть флешка. Установите Flash Player

Архив с исходниками: allocationAround1.zip. Выглядит не очень красиво :( , попробуем распределить по кругу.

Распределение по Кругу

Самый простой способ распределения по кругу оказался более чем не подходящий:
allocationAround3-1

Очевидно, что с увеличением текущего радиуса(radiusCurrent), необходимо увеличивать количество элементов на дуге(countInCircle):

allocationAround3-2

Измененный метод allocationCircle:

Обратите внимание что в конце каждой дуги (дуга у нас начинается справа в середине по вертикали) образуется пробел, это потому что в строке 23 мы получаем дробное количество элементов на дуге(countInCircle), но мы не может отобразить на экране дробное количество. Поэтому надо округлить это значение, и вычислить новый угол(angleDelta), соответственно новому количеству элементов на дуге:

allocationAround3-3

Измененный метод:

Добавим последний штрих, сделаем так, что бы последняя дуга не была обрывистой, из-за нехватки количества оставшихся элементов:

allocationAround3-4

Для этого подправим одну строчку(строка 27) из предыдущего кода:

Вроде получили то, что нужно :) Попробуем ради эксперимента распределить элементы по Спирали.

Распределение по Спирали

Классическая Архимедова спираль дает кучность в центре:

allocationAround4-1

Исходник метода allocationSpirale:

Добавим динамичности коэффициентам в формуле спирали Архимеда:

allocationAround4-2

Измененный исходник метода allocationSpirale:

Исходники

Пришла в голову мысль, а что если сделать равномерное распределение элементов внутри определенной фигуры, заданной каким либо образом? Например так:
aroundMask
Думаю в ближайшее время я напишу статью об этом :)
Game – Серия статей посвященных разработке flash-игр на языке ActionScript. Игры для соц.сетей и мобильных платформ iOS, Android.
http://flashpress.ru/blog/category/game/

Игры будут править миром!
Serious Sam
Эту статью прочитали 2152 раз

Возникли вопросы по статье? Не стесняйтесь спрашивать в комментариях или любым другим способом на странице Контакты .

Присоединяйтесь к нам в социальных сетях: ВКонтакте , Twitter и Facebook
Понравилась статья? Буду благодарен если вы поделитесь ссылкой с друзьями:


Комментарии ВКонтакте:




Комментарии Facebook:




Комментарии WordPress:


  1. Сергей

    Очень круто. Спасибо. А как сделать распределение по спирали чтобы начальные элементы были меньшего размера и увеличивались по мере раскручивания спирали?

    1. Serious Sam Автор записи

      Сделайте начальное значение радиуса, и увеличивайте в каждой итерации цикла на определенное значение) В текущем варианте алгоритма наверно получится нахлест элементов, чтобы этого избежать – надо поэкспериментировать с коэффициентами.