|
Scrolling / Скроллинг
|
|
| EvilAdmin | Дата: Понедельник, 07.12.2015, 19:54 | Сообщение # 1 |
 Учитель
Группа: Администраторы
Сообщений: 310
Репутация: 0
Статус: Offline
| Скроллинг
В этом уроке вы узнаете, как сделать скроллинг/прокрутку в играх Clickteam Fusion 2.5. Вы также увидите некоторые различные примеры о том, как это делается.
Для эффективной работы, вам требуется знание основ интерфейса CF 2.5. А также очень полезны будут навыки работы в редакторе кадров и редакторе событий для управления объектами.
Что же такое скроллинг?
Википедия говорит: Скроллинг - это прокрутка игрового поля в видео играх, которая позволяет игроку контролировать игрового персонажа в большой области.
Прокрутка позволяет игроку двигаться дальше, чем размер окна. Например, прокрутка может позволить игроку ходить в гораздо большей игровой области, такая компоновка позволяет больше сосредоточиться на окружении, и значительно разнообразить геймплей. Также вы можете использовать мышь, скажем чтобы перемещаться по карте. Другими словами, есть неограниченное множество вариантов использования данной прокрутки.
CF 2.5 позволяет легко добавить прокрутку к вашей игре. На самом деле все, что нам нужно, это создать событие в редакторе событий. И не поверите, вся тяжелая работа уже сделана за вас.
Рассмотрим такую ситуация, вы разработали уровень:
Красная рамка показывает, что отображает экран.
Экран будет следовать за персонажем, когда тот начинает движение. Это потому, что мы так запрограммировали событие.
Внимание: Что бы прокрутка работала, игровая зона должна быть больше, чем текущее окно. Как вы можете видеть на картинке выше, игровая зона примерно в 3 раза шире, чем окно.
Центрирование экрана
Самый простой способ сделать прокрутку в CF 2.5 это позволить экрану следовать за объектом. Убедитесь, что игровая область фрейма больше, чем размер приложения (это очень важно, если это упустите, то центрирование работать не будет). Затем создайте объект Active и растянутый на весь фрейм объект Quick Backdrop. Для объекта Active в свойствах Movement укажите Eight Direction (движение в 8 направления).
Измените размер фрейма на 1200 * 1000 пикселей. Размер приложения 640*480.
Теперь перейдём в Event editor, установите состояние Always(всегда) и добавим действие для Storyboard controls, затем Scrolling > Center window position in frame:
Когда появится диалоговое окно, нажмите на флажок Relative to и выберите свой объект Active. Для координат X и Y укажите значение 0. Затем вы увидите квадрат по контуру Active объекта. Если вы переместите данный квадрат, то получите смещение центрирования объекта.Когда вы будете удовлетворены, нажмите кнопку ОК.
Если вы сделали всё правильно, то в Event List Editor, вы увидите такую конструкцию:
Протестируйте игру (F7). Когда вы будете двигать объект клавиатурой, экран всегда будет следовать за объектом Active.
|
| |
| |
| EvilAdmin | Дата: Среда, 09.12.2015, 20:08 | Сообщение # 2 |
|
Учитель
Группа: Администраторы
Сообщений: 310
Репутация: 0
Статус: Offline
| Автоскролл
Можно также задать автоматическое движение скролла в нужном вам направлении. И это также очень просто сделать.
Как и в прошлый раз, создадим состояние always, и добавим действие Scrolling > Central horizontal position of window in frame.
Так как размер игрового окна 640 пикселей в ширину, центр экрана левого края окна + 320. Теперь рассмотрим простую механику, нам надо сместить центр на 1 пиксель вправо, причём сделать это в цикле, что бы выполнялось всё на автомате. Для этого нужно изменять координату X в каждую долю времени. Для Storyboard применим функцию Frame > X coordinate of left visible edge. Или же воспользуемся формулой X Left Frame + 321 или нажмите на кнопку Retrieve data from an object и введите +321:
Протестируем игру, как видите, игровая зона медленно перемещается вправо.
|
| |
| |
| EvilAdmin | Дата: Суббота, 12.12.2015, 18:46 | Сообщение # 3 |
|
Учитель
Группа: Администраторы
Сообщений: 310
Репутация: 0
Статус: Offline
| Используем мышь для движения экрана
Есть несколько разных способов управлять экраном с помощью мыши. Я бы хотел рассказать об одном из них. Во первых представим, что у нашей игровой зоны фрейма имеются области, которые при наведении мыши, должны перемещать игровую часть в нужное направление. Схематически, как-то так.
Мы должны запрограммировать событие для каждой из 4х зон. Конечно же, нам не обойтись без Event Editor. Все дальнейшие события мы будет обрабатывать на основе двух переменных Compare two general values, где мы будем проверять положение мыши относительно краёв игровой зоны. Сперва проведём тестирование на наличие мыши в правой зоне.
Теперь перейдём в Event Editor и запрограммируем создание этой зоны. Как вы заметили, размер нашего игрового поля и в целом приложения составляет 640 пикселей. Для создания области перехода, нам потребуется 50 пикселей. Вот и наше решение, это и есть состояние, которое мы запрограммируем. В Event Editor создадим состояние сравнение двух переменных Compare two general values.
В верхнем диалоговом окне в качестве первой переменной выберем/впишем величину XMouse, или нажмите кнопку Retrieve data from an object и выберите
Current X position of the mouse из раздела the mousepointer and keyboard.
Для сравнения выберем значение больше или равно Greater or equal to.
В качестве второй переменной обозначим X Right Frame - 50, или нажмём кнопку Retrieve data from an object и выберем X coordinate of the right visible edge из категории Frame, раздела Storyboard Controls.
Мы запрограммировали новое состояние, которое проверяет наличие мыши в зоне правой части приложения. Области в 50 пикселей. Теперь же укажем действие движения экрана вправо. Из категории Storyboard Controls выберем Scrolling / Center horizontal position of window in frame.
Если ширина нашего кадра равняется 640 пикселей, то центр экрана относительно левого края окна игры будет равен + 320. Нам нужно переместить центр экрана на 5 пикселей вправо. Таким образом, мы должны получить координату x левого края (X coordinate of left visible edge) и добавить к нему 325. Что будет эквивалентно + 5. Получим формулу, которую нужно ввести X Left Frame + 325, или можно нажать кнопку Retrieve data from an object, как указано на картинке ниже, и дописать +325:
Выражение на данном этапе должно выглядеть так:
Нажмём OK, и можно тестировать приложение. Если всё работает, то вы всё сделали правильно, в ином случае, можете отписаться в данной теме.
Теперь нам следует запрограммировать всё то же самое для других сторон. Не будем описывать каждое действие с самого начала, делается всё для других сторон по аналогии. Я же укажу, что должно быть прописано в событии.
Так будут выглядеть события для левой и правой стороны.
Как видите, теперь мы прописали 315 пикселей для перемещения влево. Это происходит потом, что 315 на 5 пикселей меньше, чем в центр экрана. Аналогично мы программировали такое же действие и для движения вправо, только там мы указывали 325, что на 5 пикселей больше центра. Соответственно вся эта операция двигает центр экрана на 5 пикселей влево.
После тестирования попробуйте отвести экран вправо, а потом влево.
А вот для перемещения экрана вверх и вниз, мы должны будем сравнить величины по координатам оси y.
Высота приложения 480, центр соответственно 240.
|
| |
| |
| EvilAdmin | Дата: Воскресенье, 13.12.2015, 20:18 | Сообщение # 4 |
|
Учитель
Группа: Администраторы
Сообщений: 310
Репутация: 0
Статус: Offline
| Параллакс
Когда дело доходит до создания красивого многослойного фона, то тут вступает в силу такая интересная технология, как параллакс. Clickteam Fusion 2.5 для этого имеет функцию, которая легко позволяет в этом разобраться.
Что такое параллакс? Параллакс - топорно выражаясь, это технология, когда одни части экрана прокручиваются быстрее, чем другие. Представьте, что ваш персонаж двигается в лесу. При движении экран будет следовать за ним, но вы также на фоне увидите деревья, которые прокручиваются с гораздо меньше скоростью, а за деревьями можно увидеть горный ландшафт с еще более медленной скоростью. Такое использование параллакса позволяет сделать игру более глубокой и реально.
Хитрость в создании параллакса, заключается в размещения фонов в разных слоях. Вы можете назначить каждому слою определённую скорость, и все объекты расположенные в этом слое, будут перемещаться соответственно этой скорости.
Если вы активируете для слоя свойство Wrap Horizontally, объекты будут автоматически смещаться согласно введённому показателю коэффициента для оси X и Y (от 1 до 0.1). К тому же помните о том, что для создания параллакса, требуется больше одного слоя во фрейме. А сама панель для создания слоёв находится в правой части программы, по умолчанию оно свёрнуто (Layers Toolbar). Также помните о том, что размер фрейма должен быть больше, чем размер игрового окна.
Чтобы создать новый слой, можно нажать сочетание клавиш Ctrl+К. Вы можете также перемещать объекты между слоями, можно и сами слои перемещать между собой, что бы указать порядок.
|
| |
| |
