134. [game] XProject1. Масштабирование карты

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

Предыстория

В процессе написание игры(кодовое название XProject1, релиз будет скоро) часто возникают сложности, которые приходится решать различными способами. И я решил писать такие небольшие статьи о том, как была решена та или иная проблема в реальном игровом проекте. После релиза игры, вы сможете увидеть результат в готовом проекте. Эта статья будет первой из такой серии, и расскажу я о том, как я реализовал масштабирование “карты” (на самом деле в моем проекте это не карта, но применение очень близко к игровым картам).

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

Реализовать масштабирование можно различными способами, но в моем проекте было четкое разделение между различными визуальными компонентами и связь между ними была минимальная(чтобы не плодить спагетти-код, с кучей взаимосвязей). А если конкретнее, есть компонент mapView которые отображает карту. У него есть один публичный метод:

который собственно масштабирует карту. Есть еще компонент scrollerView который показывает скролер и генерирует событие при таскании бегунка. У scrollerView есть так же один публичный get-метод:

Который вернет процент масштаба от 0 до 1.
Для того чтобы сконцентрироваться на рассматриваемой проблеме, я написал простой проект, чтобы было нагляднее:

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

Итак, имеем две проблемы:

  • Карта не должна уменьшаться до точки(должен быть какой-то минимальный размер)
  • Карта масштабируется относительно левого верхнего угла изображения. Необходимо сделать так, чтобы карта масштабировалась относительно центра экрана(там где красный крест)

Архив с исходниками: mapScaling1.zip. Классы:


Закрыть Главный класс mapScaling.as


Закрыть Карта MapView.as


Закрыть Скролер ScrollerView.as

Ограничение масштабирования

Первая проблема решается очень просто, просто добавляем минимальное и максимальное значение скейла в методе scaling(…) класса MapView:

Масштабирование относительно центра экрана

Реализовать это можно с помощью матриц преобразования(Matrix). Посмотрите на измененную функцию scaling класса MapView:

Результат можно увидеть во флешке:

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


Таскайте мышкой карту и после примените масштабирование, вы увидите что карта всегда скейлится относительно центра экрана. Архив с исходниками: mapScaling2.zip.

Масштабирование относительного произвольной точки

Для наглядности примера, допишем проект так, чтобы можно было скролом мышки масштабировать карту относительно любой точки на карта(относительно точки, на которую указывает курсор мыши в данный момент).
Результат во флешке:

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


(Если скрол браузера вам мешает протестировать, откройте флешку в новом окне mapScaling3.swf)
Архив с исходниками: mapScaling3.zip.


Закрыть Измененный класс MapView.as

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

Игры будут править миром!
Serious Sam

Эту статью прочитали 2229 раз

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

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


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




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




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