Сделана попытка сохранить оригинальную орфографию, шутки и пунктуацию.
И, да, этот пост является переводом статьи создателя Canabalt, не подумайте, что игру создал я.
[Эв этой статье рассматриваются технические характеристики, соотношения и размеры Flash-версии игры.
Читатель, будь осторожен, статья содержит спойлеры и большое количество рисунков!] Друзья часто спрашивают меня, не задумывался ли я о том, чтобы выложить исходный код моей флеш-игры Canabalt в Интернет, чтобы все могли его увидеть и изучить.
Они думают, что людям будет полезно посмотреть, как в игре организована физика и другие вещи.
Но я настороженно отношусь к этой идее, у меня на это есть несколько причин, например: исходный код игры, написанный за 5 дней, представляет собой кошмар и отвратительный спагетти-код, который вряд ли кому-то поможет. Итак, из гордости за первый день рождения Cannabalt, я подумал: «Почему бы не написать статью, в которой рассказывается о том, как все работает под капотомЭ»
Размеры
Одной из моих целей при разработке Canabalt было создание игры, требующей быстрой реакции, острого как бритва и захватывающего ладоней игрового процесса.
Сделать такую игру в 2D не так уж и просто.
3D-игры позволяют вам смотреть вдаль, на большие расстояния, но 2D-игры, как правило, не дают такого же опыта.
Вы можете «отодвинуть» камеру назад, чтобы игроки могли видеть больше, но если вы это сделаете, объекты будут двигаться медленнее.
Видимая область игры имеет ширину 480 пикселей и высоту 160 пикселей.
Обычная веб-версия Canabalt отображается в двойном размере (960x320), а сборка MEGA имеет разрешение в 3 раза выше.
Но внутри игра работает с разрешением 480х160 px, это нужно помнить, чтобы понять некоторые нюансы статьи, так как все описанные размеры и скорости, о которых пойдет речь, там же будут указаны в пикселях.
способ.
Почему 480х160? Просто это помогло нам избежать проблем со скоростью объектов.
Эти размеры позволяют игрокам смотреть достаточно далеко вперед, чтобы более эффективно реагировать на возникающие препятствия, сохраняя при этом компактный размер окна, создающий ощущение скорости.
Кстати, о скорости мы поговорим чуть позже! Видимая область игры может составлять 480x160 пикселей, но ширина мира Canabalt начинается с 0 и продолжается бесконечно, сохраняя высоту 320 пикселей.
Мне очень хотелось оставить некоторую вертикальную прокрутку, чтобы создать эффект параллакса для зданий на заднем плане.
Вы можете видеть, как они движутся вверх и вниз, и это помогает создать ощущение «глубины».
Очевидно, что чем больше вертикального пространства для игрока, тем лучше, это позволяет создавать более крупные падающие объекты и фасады домов.
Падающие предметы — одна из самых зрелищных вещей в мире паркура/фрирана, поэтому мне очень хотелось добавить их в игру.
Бегущий человек представляет собой спрайт размером 24x24 пикселей, но его ограничивающие рамки меньше.
Все здания более-менее укладываются в сетку 16х16 пикселей.
Прокручивающийся фон создан из 3-х картинок 480х320 пикселей.
Я использовал 2 картинки для ближайшего фонового слоя.
Более эффективно сделать их шириной 960 пикселей, чтобы создать дополнительное разнообразие.
В качестве фона я использовал одно изображение и медленно перемещал его, так как это менее заметный фоновый слой.
В
Объектам Flixel (библиотека Flash, с помощью которой был разработан Canabalt) можно назначить «коэффициент прокрутки» ( ScrollFactor ), что влияет на то, как объекты должны двигаться по сравнению с другими объектами.
Это означает, что если объектам был присвоен «коэффициент прокрутки» со значением (1,1), и их положение изменилось на 20 пикселей по горизонтали, то их положение на экране также изменится на 20 пикселей.
Если «коэффициент прокрутки» равен (0,5, 1), это означает, что при таком изменении положения визуально объекты сдвинутся всего на 10 пикселей.
В Canabalt «коэффициент прокрутки» для дальних фоновых слоев равен (0,15, 0,1), а для близлежащих (0,4, 0,2).
Такие «настройки» позволяют нам создать некоторую дистанцию между игроком и космическими захватчиками на заднем плане, кроме того, мы можем быть уверены, что здания не «пролетят со свистом» мимо нас, если игрок достигнет «сверхзвуковой скорости».
Игрок
Одной из моих целей было создать в Canabalt анимацию, похожую на анимацию в играх, на которых я вырос ( Воспоминание И Принц Персии ).
В этих играх использовались реалистичные ротоскоп анимация с большим количеством кадров каждая игра имела свой собственный стиль, и анимация в этих играх выглядела круто.
В Canabalt у бегущего человека всего 4 анимации (бег, скольжение, прыжок и падение), но, несмотря на это, анимация состоит из 38 кадров, около половины из которых посвящено анимации бега.
Как мы узнали ранее, в Canabalt изображение бегущего человека имеет размеры 24х24 пикселей.
Для сравнения: это немного выше габаритов обычного Марио.
, но чуть меньше по размерам, чем «супер» Марио, и чуть шире, чем они оба.
Если посмотреть по-другому, то высота персонажа составляет примерно 15% высоты видимой части мира.
Как видите, персонаж не использует все пространство прямоугольника 24х24, большая часть этого пространства используется для анимации падения и разведения рук во время прыжка.
«Хитбокс» бегущего человека («реальные размеры» объекта, с которым работает игровой движок) гораздо меньше, примерно 12х14 пикселей.
На картинке видно, что «настоящий размер» не просто расположен в центре персонажа, а смещен к его нижней границе и немного влево.
Настройка хитбокса — очень важная часть создания игры, даже если вы используете круги, а не прямоугольные объекты.
Точная настройка хитбокса поможет вам настроить сложность игры, упрощая или усложняя ее прохождение, в зависимости от того, чего вы хотите достичь.
Я хотел сделать игру проще, но нужно понимать, что такая настройка предполагает нечто большее, чем просто уменьшение или увеличение размера.
Поскольку большая часть игрового времени уходит на прыжки между крышами и другими объектами (или хотя бы на попытки это сделать), я постарался настроить хитбокс персонажа так, чтобы эти действия выглядели максимально естественно.
Поскольку хитбокс не простирается перед персонажем, игрок может подойти очень близко к препятствиям, не вызывая столкновения и не спотыкаясь.
Благодаря тому, что «хитбокс» выходит немного левее персонажа, можно немного «пробежаться» по зданию, но успеть прыгнуть в последний момент. Все эти нюансы делают игру немного проще, требуя от игроков меньше реакции, что позволило мне добавлять более сложные препятствия, не боясь слишком сильно расстроить игроков.
Ах да, чуть не забыл, хитбоксы препятствий тоже забавно выглядят, их высота всего 2 пикселя! =) Это также упрощает игру и позволяет избежать моментов, когда игроки говорят «Что?!» Какого черта я?! Я нормально перепрыгнул это чертово препятствие! Таворот, ни одного разрыва!»
Движения персонажей
Как мы уже говорили ранее, размеры экрана составляют 480х160 пикселей.
Максимально возможная скорость персонажа — 800 пикселей в секунду, что в игровых единицах составляет примерно 80 метров в секунду или около 286 км в час! Это очень быстро.
Но несмотря на это, учитывая, что ширина видимой области составляет 480 пикселей, а персонаж находится у ее левого края, у игроков есть более полсекунды (480/800), чтобы среагировать на возникающие препятствия.
На мой взгляд, это хороший размер окна, я думаю, людям нужно около 0,3 секунды, чтобы среагировать на неожиданные события.
Поэтому технически даже на самой высокой сложности люди смогут играть в Канабальт. Но игроки не начинают бежать со скоростью 800 пикселей в секунду.
с самого начала.
В начале игры скорость 100 пикселей/сек.
Также в игре предусмотрена кривая ускорения персонажа на скоростях от 0 до 100 пикселей/сек.
ускорение 50 px/сек, при скорости 100-250 px/сек.
ускорение 30 px/сек, при скорости 250-400 px/сек ускорение 20 px/сек, и при скорости 400-800 px/сек ускорение 10 px/сек.
Проще говоря, чем быстрее вы двигаетесь, тем медленнее вы ускоряетесь.
Это означает, что для достижения максимальной скорости требуется много времени, но после спотыкания можно довольно быстро достичь средней скорости.
В Canabalt препятствия (стулья, ящики и т. д.) снижают скорость игрока на 30%.
Если игрок бежит со скоростью 300 пикселей/сек.
(ускорение 20 px/сек), то после столкновения с препятствием его скорость уменьшится до 210 px/сек, а ускорение увеличится до 30 px/сек.
Кроме того, в Canabalt используются забавные правила прыжков персонажей: чем дольше вы удерживаете кнопку прыжка, тем выше вы прыгнете.
Это реализовано с помощью таймера, который начинает обратный отсчет, когда игрок нажимает кнопку прыжка, и до тех пор, пока таймер не истечет или игрок не отпустит кнопку прыжка, мы устанавливаем вертикальную скорость персонажа на 300 пикселей/сек.
(если быть точным, то скорость выставлена на -300, так как отрицательные значения означают «вверх» в 2D играх, но черт с ним).
Но это еще не все! Таймер будет меняться в зависимости от вашей скорости: чем медленнее вы бежите, тем быстрее истечет таймер, независимо от того, как долго вы нажимаете кнопку прыжка.
Используя это, мы добились того, что чем быстрее бежит персонаж, тем дольше он остается в воздухе.
Максимальное значение таймера может достигать 0,35 секунды.
Также я добавил еще одно небольшое изменение в правила прыжка: если таймер был создан недавно (если с момента нажатия кнопки прошло менее 0,08 секунды), то вертикальная скорость персонажа устанавливается на 200 пикселей/сек, а не на 300 пикселей.
/сек.
Это позволяет игрокам не так сильно прыгать, если они быстро нажимают кнопку прыжка, но в то же время не выглядит странно, если кнопка прыжка нажимается для обычного прыжка.
Крыши
Даже когда прототип игры был еще совсем новым, я был почти уверен, что в игре будут использоваться крыши.
Эта идея идеально вписалась в механику игры.
В самых ранних прототипах игры использовались большие зеленые прямоугольники с пустым пространством между ними, и мне потребовалось совсем немного воображения, чтобы увидеть бегущего парня вместо белого прямоугольника и здания вместо зеленых прямоугольников.
Размер объектов хорошо соответствует этой идее.
На этом этапе я закончил разработку системы крыш, стен и заливок, состоящей из плитка 16x16 пикселей, которые можно перемещать, повторять и комбинировать различными способами в соответствии с графическими требованиями этих настроек.
(Примечание для пользователей Flixel: я создал собственный объект на основе класса FlxTilebock, который предоставил мне случайные плитки для внутренних частей зданий, а также позволил мне настроить определенные плитки для использования на краях каждого блока.
Большинство зданий используйте только 2 пользовательских объекта FlxTileblocks, не считая крыш.
Здания с коридорами, на мой взгляд, состоят из 7 одинаковых объектов).
Как и многие другие важные элементы Canabalt, здания также имеют настройки хитбокса.
Здания представляют собой просто большие прямоугольники, но у них есть небольшое (8 пикселей, если быть точным) пространство, «нависающее» с правой стороны.
Это смещение прибавляется к размерам зданий и формирует «реальный размер» зданий, или, другими словами, размер зданий, которые «видит» игра.
Это еще один способ облегчить игру для тех, кто нажимает кнопку с опозданием на долю секунды, они хотят совершить этот прыжок, но немного опаздывают, поэтому мы «встречаемся с ними» и делаем задачу немного проще для они, они, игра.
Все эти настройки влияют на «удовольствие», которое вы получаете от игры.
Под стражей
Надеюсь, эта статья была вам интересна и полезна! Также хотелось бы добавить, что Canabalt не разрабатывался аналитически, я не измерял идеальную скорость персонажа на основе отношений объектов, когда разрабатывал игру.
Я просто сделал то, что мы обычно делаем: поменял массу параметров, пока не почувствовал, что в игре все круто.
В статье я постарался рассказать хотя бы о некоторых причинах, благодаря которым мне удалось этого добиться.
Я буду очень рад, если мне это удастся.
Теги: #игры #canabalt #flash #разработка #Прототипирование #Разработка методом проб и ошибок #Разработка игр
-
Рейтинги Ноутбуков
19 Oct, 24
