Знания в формате 4 и 5

Информация о пользователе

Привет, Гость! Войдите или зарегистрируйтесь.


Вы здесь » Знания в формате 4 и 5 » Clickteam Fusion 2.5 » CTF - Scrolling / Скроллинг


CTF - Scrolling / Скроллинг

Сообщений 1 страница 8 из 8

1

Скроллинг

В этом уроке вы узнаете, как сделать скроллинг/прокрутку в играх Clickteam Fusion 2.5. Вы также увидите некоторые различные примеры о том, как это делается.

Для эффективной работы, вам требуется знание основ интерфейса CF 2.5. А также очень полезны будут навыки работы в редакторе кадров и редакторе событий для управления объектами.

Что же такое скроллинг?

Википедия говорит: Скроллинг - это прокрутка игрового поля в видео играх, которая позволяет игроку контролировать игрового персонажа в большой области.

http://informat45.ucoz.ru/practica/ClickTeam/0050.gif
Прокрутка позволяет игроку двигаться дальше, чем размер окна. Например, прокрутка может позволить игроку ходить в гораздо большей игровой области, такая компоновка позволяет больше сосредоточиться на окружении, и значительно разнообразить геймплей. Также вы можете использовать мышь, скажем чтобы перемещаться по карте. Другими словами, есть неограниченное множество вариантов использования данной прокрутки.
CF 2.5 позволяет легко добавить прокрутку к вашей игре. На самом деле все, что нам нужно, это создать событие в редакторе событий. И не поверите, вся тяжелая работа уже сделана за вас.

Рассмотрим такую ситуация, вы разработали уровень:

http://informat45.ucoz.ru/practica/ClickTeam/0051.png
Красная рамка показывает, что отображает экран.

http://informat45.ucoz.ru/practica/ClickTeam/0052.png

Экран будет следовать за персонажем, когда тот начинает движение. Это потому, что мы так запрограммировали событие.

Внимание: Что бы прокрутка работала, игровая зона должна быть больше, чем текущее окно. Как вы можете видеть на картинке выше, игровая зона примерно в 3 раза шире, чем окно.

Центрирование экрана
Самый простой способ сделать прокрутку в CF 2.5 это позволить экрану следовать за объектом. Убедитесь, что игровая область фрейма больше, чем размер приложения (это очень важно, если это упустите, то центрирование работать не будет). Затем создайте объект Active и растянутый на весь фрейм объект Quick Backdrop. Для объекта Active в свойствах Movement укажите Eight Direction (движение в 8 направления).

http://informat45.ucoz.ru/practica/ClickTeam/0054.png
Измените размер фрейма на 1200 * 1000 пикселей. Размер приложения 640*480.

Теперь перейдём в Event editor, установите состояние Always(всегда) и добавим действие для Storyboard controls, затем Scrolling > Center window position in frame:

http://informat45.ucoz.ru/practica/ClickTeam/0055.png
Когда появится диалоговое окно, нажмите на флажок Relative to и выберите свой объект Active. Для координат X и Y укажите значение 0. Затем вы увидите квадрат по контуру Active объекта. Если вы переместите данный квадрат, то получите смещение центрирования объекта.Когда вы будете удовлетворены, нажмите кнопку ОК.

http://informat45.ucoz.ru/practica/ClickTeam/0056.png
Если вы сделали всё правильно, то в Event List Editor, вы увидите такую конструкцию:

http://informat45.ucoz.ru/practica/ClickTeam/0057.png
Протестируйте игру (F7). Когда вы будете двигать объект клавиатурой, экран всегда будет следовать за объектом Active.

>>РЕЗУЛЬТАТ РАБОТЫ<<

2

Автоскролл
Можно также задать автоматическое движение скролла в нужном вам направлении. И это также очень просто сделать.

Как и в прошлый раз, создадим состояние always, и добавим действие Scrolling > Central horizontal position of window in frame.

http://informat45.ucoz.ru/practica/ClickTeam/0058.png
Так как размер игрового окна 640 пикселей в ширину, центр экрана левого края окна + 320. Теперь рассмотрим простую механику, нам надо сместить центр на 1 пиксель вправо, причём сделать это в цикле, что бы выполнялось всё на автомате. Для этого нужно изменять координату X в каждую долю времени. Для Storyboard применим функцию Frame > X coordinate of left visible edge. Или же воспользуемся формулой X Left Frame + 321, или нажмите на кнопку Retrieve data from an object и введите +321:

http://informat45.ucoz.ru/practica/ClickTeam/0059.png
Протестируем игру, как видите, игровая зона медленно перемещается вправо.

>>РЕЗУЛЬТАТ РАБОТЫ<<

3

Используем мышь для движения экрана
Есть несколько разных способов управлять экраном с помощью мыши. Я бы хотел рассказать об одном из них. Во первых представим, что у нашей игровой зоны фрейма имеются области, которые при наведении мыши, должны перемещать игровую часть в нужное направление. Схематически, как-то так.

http://informat45.ucoz.ru/practica/ClickTeam/0060.png
Мы должны запрограммировать событие для каждой из 4х зон. Конечно же, нам не обойтись без Event Editor. Все дальнейшие события мы будет обрабатывать на основе двух переменных Compare two general values, где мы будем проверять положение мыши относительно краёв игровой зоны. Сперва проведём тестирование на наличие мыши в правой зоне.

http://informat45.ucoz.ru/practica/ClickTeam/0061.png
Теперь перейдём в Event Editor и запрограммируем создание этой зоны. Как вы заметили, размер нашего игрового поля и в целом приложения составляет 640 пикселей. Для создания области перехода, нам потребуется 50 пикселей. Вот и наше решение, это и есть состояние, которое мы запрограммируем. В Event Editor создадим состояние сравнение двух переменных Compare two general values.

http://informat45.ucoz.ru/practica/ClickTeam/0062.png
В верхнем диалоговом окне в качестве первой переменной выберем/впишем величину 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.

http://informat45.ucoz.ru/practica/ClickTeam/0063.png
http://informat45.ucoz.ru/practica/ClickTeam/0064.png

Мы запрограммировали новое состояние, которое проверяет наличие мыши в зоне правой части приложения. Области в 50 пикселей. Теперь же укажем действие движения экрана вправо. Из категории Storyboard Controls выберем Scrolling / Center horizontal position of window in frame.

http://informat45.ucoz.ru/practica/ClickTeam/0065.png
Если ширина нашего кадра равняется 640 пикселей, то центр экрана относительно левого края окна игры будет равен + 320. Нам нужно переместить центр экрана на 5 пикселей вправо. Таким образом, мы должны получить координату x левого края (X coordinate of left visible edge) и добавить к нему 325. Что будет эквивалентно + 5. Получим формулу, которую нужно ввести X Left Frame + 325, или можно нажать кнопку Retrieve data from an object, как указано на картинке ниже, и дописать +325:

http://informat45.ucoz.ru/practica/ClickTeam/0066.png
Выражение на данном этапе должно выглядеть так:

http://informat45.ucoz.ru/practica/ClickTeam/0067.png
Нажмём OK, и можно тестировать приложение. Если всё работает, то вы всё сделали правильно, в ином случае, можете отписаться в данной теме.

Теперь нам следует запрограммировать всё то же самое для других сторон. Не будем описывать каждое действие с самого начала, делается всё для других сторон по аналогии. Я же укажу, что должно быть прописано в событии.

Так будут выглядеть события для левой и правой стороны.

http://informat45.ucoz.ru/practica/ClickTeam/0068.png
Как видите, теперь мы прописали 315 пикселей для перемещения влево. Это происходит потом, что 315 на 5 пикселей меньше, чем в центр экрана. Аналогично мы программировали такое же действие и для движения вправо, только там мы указывали 325, что на 5 пикселей больше центра. Соответственно вся эта операция двигает центр экрана на 5 пикселей влево.
После тестирования попробуйте отвести экран вправо, а потом влево.

А вот для перемещения экрана вверх и вниз, мы должны будем сравнить величины по координатам оси y.

http://informat45.ucoz.ru/practica/ClickTeam/0069.png
Высота приложения 480, центр соответственно 240.

>>РЕЗУЛЬТАТ РАБОТЫ<<

4

Параллакс

http://informat45.ucoz.ru/practica/ClickTeam/0070.gif
Источник: http://cubettech.com/blog/parallax-scrolling/

Когда дело доходит до создания красивого многослойного фона, то тут вступает в силу такая интересная технология, как параллакс. Clickteam Fusion 2.5 для этого имеет функцию, которая легко позволяет в этом разобраться.

Что такое параллакс? Параллакс - топорно выражаясь, это технология, когда одни части экрана прокручиваются быстрее, чем другие. Представьте, что ваш персонаж двигается в лесу. При движении экран будет следовать за ним, но вы также на фоне увидите деревья, которые прокручиваются с гораздо меньше скоростью, а за деревьями можно увидеть горный ландшафт с еще более медленной скоростью. Такое использование параллакса позволяет сделать игру более глубокой и реальной.

Хитрость в создании параллакса, заключается в размещения фонов в разных слоях. Вы можете назначить каждому слою определённую скорость, и все объекты расположенные в этом слое, будут перемещаться соответственно этой скорости.

Если вы активируете для слоя свойство Wrap Horizontally, объекты будут автоматически смещаться согласно введённому показателю коэффициента для оси X и Y (от 1 до 0.1). К тому же помните о том, что для создания параллакса, требуется больше одного слоя во фрейме. А сама панель для создания слоёв находится в правой части программы (Layers Toolbar), по умолчанию она свёрнута. Также помните о том, что размер фрейма должен быть больше, чем размер игрового окна.

Чтобы создать новый слой, можно нажать сочетание клавиш Ctrl+К. Вы можете также перемещать объекты между слоями, можно и сами слои перемещать между собой, что бы указать порядок.

>>РЕЗУЛЬТАТ РАБОТЫ<<

5

А как сделать скроллинг камеры как в игре Zelda на денди? Тоесть, когда подходишь к краю экрана слева, то камера плавное смещается влево и остановилась так, чтобы персонаж оказался на её правом крае. Если подходишь справа, то же самое, только камера скролится вправо и т.д. пока камера не упрётся в край карты.

Отредактировано LolBot (2019-09-30 21:43:56)

6

Есть анимация, или видео? Если будет наглядный пример, думаю смогу объяснить.

7

LolBot написал(а):

А как сделать скроллинг камеры как в игре Zelda на денди? Тоесть, когда подходишь к краю экрана слева, то камера плавное смещается влево и остановилась так, чтобы персонаж оказался на её правом крае. Если подходишь справа, то же самое, только камера скролится вправо и т.д. пока камера не упрётся в край карты.

Сделал я свой вариант...но он оказался весьма топорным. Вот тут видео как сделать с плавным переходом:

8

Вот!!! То, что нужно.
Спасибо большое!)) :cool:

Похожие темы


Вы здесь » Знания в формате 4 и 5 » Clickteam Fusion 2.5 » CTF - Scrolling / Скроллинг