Тюнинг Canabalt

Original author: Adam Saltsman
  • Translation
Была предпринята попытка сохранить оригинальную орфографию, шутки и пунктуацию. И, да, данный пост — перевод статьи создателя Canabalt, не думайте, что игру создал я.

image

[Эта статья рассматривает технические особенности, соотношения и размеры Flash версии игры Canabalt. Читатель, будь осторожен, статья содержит спойлеры и большое количество цифр!]

Друзья часто спрашивают меня: думал ли я о том, чтобы выложить исходный код моей Flash игры Canabalt в интернет на растерзание и изучение. Они думают, что для людей будет полезно увидеть, как в игре организована физика и другие вещи. Но я отношусь с опасением к этой идее, на это у меня есть несколько причин, например: исходный код игры написанный за 5 дней, представляет из себя кошмарный и отвратительный спагетти-код, который вряд ли поможет кому-нибудь. Поэтому, из чувства гордости по поводу первого дня рождения Cannabalt, я подумал: «почему бы не написать статью, в которой бы рассказывалось о том, как внутри всё устроено?»


Размеры



image

Одной из моих целей при разработке Canabalt было создание игры, которая бы требовала быстрой реакции, острой как лезвие, игры, от которой потеют ладони. Сделать такую игру в 2D не так уж и просто. 3D игры позволяют вам смотреть вдаль, на большие расстояния, в отличие от них, 2D игры, как правило, не дают тех же ощущений. Вы можете «отодвинуть» камеру назад, чтобы игроки могли увидеть больше, но если вы сделаете это, объекты будут двигаться медленнее.

Видимая область игры составляет 480 px в ширину и 160 px в высоту. Обычная web-версия Canabalt отображается в двойном размере (960x320), а МЕГА-сборка имеет разрешение в 3 раза больше. Но внутри игра работает с разрешением 480x160 px, это нужно запомнить, чтобы понимать некоторые нюансы статьи, так как все размеры и скорости описанные, о которых пойдёт речь, будут указываться в px так же.

Почему 480x160? Просто, это помогло нам избежать проблем со скоростью объектов. Такие размеры позволяют игрокам смотреть достаточно далеко вперёд, чтобы была возможность реагировать на возникающие препятствия более эффективно, а так же сохраняет клёвый и компактный размер окна, создающий ощущение скорости. Кстати, о скорости мы ещё поговорим чуть позже!

Видимая область игры может быть 480x160 px, но в ширину мир Canabalt начинается с 0 и длится до бесконечности, сохраняя при этом высоту в 320 px. Я очень хотел оставить небольшой вертикальный скроллинг, чтобы создавался эффект параллакса для зданий на фоне. Вы можете заметить, как как они двигаются вверх и вниз, и это помогает создать ощущение «глубины». Очевидно, что, чем больше существует вертикального пространства для игрока, тем лучше, это позволяет создавать падающие объекты и фасады домов большего размера. Падающие объекты являются одной из наиболее эффектных штук в мире «паркура/свободного бега», поэтому я действительно хотел добавить их в игру.

Бегущий человек является спрайтом с размерами 24x24 px, но его ограничивающие рамки меньше. Все здания, более или менее, вписываются в сетку 16x16 px. Скроллинг фона создан из 3 картинок 480x320 px. Я использовал 2 картинки для ближайшего фонового слоя. Более эффективно делать их 960 px в ширину, для создания дополнительного разнообразия. Для дальнего фона я использовал 1 изображение и медленно передвигал его, так как это менее заметный слой фона.

В imageFlixel (Flash библиотека, с использованием которой был разработан Canabalt) объектам может быть назначен «фактор скроллинга» (scrollFactor), который влияет на то, как объекты должны передвигаться в сравнении с другими объектами. Это означает, что если объектам был назначен «фактор скроллинга» с величиной (1,1), и их положение изменилось на 20 px по горизонтали, то на экране их положение так же изменится на 20 px. Если «фактор скроллинга» составляет (0.5, 1), это означает, что при таком изменении положения, визуально объекты сместятся только на 10 px. В Canabalt для дальних фоновых слоёв «фактор скроллинга» составляет (0.15, 0.1), а для ближних (0.4, 0.2). Такие «настрйоки» позволяют создать некоторую дистанцию между игроком и космическими захватчиками на фоне, кроме этого, мы можем быть уверен, что здания не будут «пролетать со свистом» мимо нас, если игрок достигнет «сверхзвуковой скорости».

Игрок



image

Одной из моих целей, было создание в Canabalt анимации, схожей с анимацией в играх, на которых я вырос (Flashback и Prince Of Persia). Эти игры использовали реалистичную ротоскопическую анимацию с большим количеством кадров, каждая игра обладала особенным стилем, и анимация в этих играх выглядела клёво. В Canabalt у бегущего человечка есть только 4 вида анимации (бег, скольжение, прыжок и падение), но несмотря на это, анимация состоит из 38 кадров, примерно половина из которых посвящена анимации бега.

Как мы узнали ранее, в Canabalt изображение бегущего человечка имеет размеры 24x24 px. Для сравнения, это немного больше по высоте, чем размеры обычного Mario в Super Mario Bros., но немного меньше, чем размеры «супер» Mario, и немного шире их обоих. Если взглянуть с другой стороны, то высота персонажа составляет примерно 15% высоты видимой части мира. Как вы можете увидеть, персонаж не использует всё пространство прямоугольника 24x24, большая часть этого пространства используется для анимации падения и раскидывания рук во время прыжка. «Hitbox» бегущего человечка («реальные размеры» объекта, с которыми работает движок игры) значительно меньше, и составляют около 12x14 px. На картинке вы можете увидеть, что «реальный размер» не просто расположен в центре персонажа, но сдвинут к нижней его границе и немного влево.

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

Так как большее количество времени в игре тратится на перепрыгивания между крышами и над другими объектами (или по-крайней мере на попытки сделать это), я попытался настроить «hitbox» персонажа таким образом, чтобы эти действия выглядели настолько естественно, насколько это возможно. Из-за того, что «hitbox» не выходит вперёд персонажа, игрок может подойти очень близко к препятствиям, не вызывая столкновения или спотыкания. Благодаря тому, что «hitbox» выходит немного левее персонажа, есть возможность немного «перебежать» здание, но успеть прыгнуть в последний момент. Все эти нюансы немного упрощают игру, требуя меньшей реакции от игроков, что позволило мне добавлять более сложные препятствия, не боясь слишком расстроить игроков.

Ах, да, чуть не забыл, «hitbox'ы» препятствий тоже выглядят забавно, они всего 2 px в высоту! =) Это тоже упрощает игру, и позволяет избежать моментов, когда игроки говорят «Что?! Что за х… я?! Я нормально перепрыгнул это е… ное препятствие! Таворот, ни единого разрыва!».

Движения персонажа



image

Как мы уже говорили ранее, размеры экрана составляют 480x160 px. Самая большая возможная скорость персонажа составляет 800 px в секунде, что в игровых единицах составляет примерно 80 метров в секунду, или около 286 км в час! Это очень быстро. Но несмотря на это, с учётом того, что ширина видимой области составляет 480 px, а персонаж находится у левого его края, у игроков есть больше, чем половина секунды (480/800) на то, чтобы среагировать на возникающие препятствия. На мой взгляд, это хороший размер окна, по-моему, людям для реакции на неожиданные события необходимо примерно 0.3 сек. Поэтому, технически, даже на самой большой сложности, в Canabalt могут играть люди.

Но игроки не начинают бежать со скоростью в 800 px/сек. с самого начала. В начале игры скорость составляет 100 px/сек. так же, в игре предусмотрена кривая ускорения персонажа, так на скорости от 0 до 100 px/сек. ускорение составляет 50 px/сек, на скорости 100-250 px/сек. ускорение составляет 30 px/сек., на скорости в 250-400 px/сек, ускорение равно 20 px/сек, и на скорости в 400-800 px/сек, ускорение равно 10 px/сек. Если говорить проще, то чем быстрее ты двигаешься, тем медленнее ты ускоряешься. Это означает, что для достижения наивысшей скорости нужно много времени, но достигнуть средней скорости после спотыкания можно достаточно быстро. В Canabalt препятствия (стулья, коробки и т.п.) уменьшают скорость игрока на 30%. Если игрок бежит со скоростью 300 px/сек. (ускорение 20 px/сек), то после столкновения с препятствием, его скорость уменьшится до 210 px/сек, а ускорение увеличится до 30 px/сек.

Так же, в Canabalt используются забавные правила прыжков персонажа: чем дольше вы удерживаете кнопку прыжка, тем выше вы будете прыгать. Это реализовано с помощью таймера, который начинает отсчёт, когда игрок нажимает на кнопку прыжка, и, пока таймер не истечёт, или пока игрок не отпустит кнопку прыжка, мы устанавливаем персонажу вертикальную скорость в 300 px/сек. (если быть точным, то скоростью устанавливается в -300, так как отрицательные величины означают «верх» в 2D играх, но хрен с ним).

Но это ещё не всё! Время таймера изменятся в зависимости от вашей скорости, чем медленнее вы бежите, тем быстрее таймер истекает, независимо от того, как долго вы нажимаете кнопку прыжка. С помощью этого мы добились того, что чем быстрее персонаж бежит, тем дольше он остаётся в воздухе. Максимальное значение таймера может достигать 0.35 сек. Так же, я добавил ещё одно небольшое изменение к правилам прыжка: если таймер создан недавно (если прошло меньше, чем 0.08 сек. с момента нажатия кнопки), то вертикальная скорость персонажа устанавливается в 200 px/сек, а не в 300 px/сек. Это позволяет игрокам не сильно подпрыгивать, если они быстро нажимают кнопку прыжка, но, в то же время, это не выглядит странным, если кнопка прыжка нажимается для обычного прыжка.

Крыши



image

Даже когда прототип игры был ещё очень новым, я был практически уверен, что в игре будут использоваться крыши. Эта идея отлично вписывалась в механику игры. В самых ранних прототипы игры использовались большие зелёные прямоугольники с пустым пространством между ними, и от меня требовалось совсем немного воображения, чтобы увидеть на месте белого прямоугольника бегущего чувачка, а на месте зелёных прямоугольников — здания. Размеры объектов хорошо вписывались в данную идею. На этом я закончил разработку системы крыш, стен и заливок, состоящих из тайлов размерами 16x16 px, которые могли перемещаться, повторяться и комбинироваться различными способами, чтобы удовлетворить графическим требованиям этих настроек.

(Примечание для пользователей Flixel: я создал кастомный объект, основанный на классе FlxTilebock, который предоставлял мне случайные тайлы интерьерных секций строений, а так же позволял настраивать конкретные тайлы для использования на краях каждого блока. Большинство строений используют всего 2 кастомных объекта FlxTileblocks, без учёта крыш. Здания с коридорами, по-моему, состоят из 7 подобных объектов).

Как и многие другие важные элементы Canabalt, здания так же имеют настройки «hitbox'а». Здания — это просто большие прямоугольники, но у них есть небольшое (8 px, если быть точным) пространство, «свисающее» с правой стороны. Данный отступ добавляется к размерам зданий и формирует «реальный размер» зданий, или, если взглянуть на это с другой стороны, размер зданий, который «видит» игра. Это ещё один способ упростить игру для тех, кто нажимает на кнопку всего на долю-секунды позже, чем нужно, они хотят сделать этот прыжок, но опаздывают совсем на чуть-чуть, поэтому мы «идём им на встречу», и немного упрощаем для них игру. Все эти настройки влияют на «фан» получаемый от игры.

В заключении



image

Надеюсь, что для вас эта статья оказалась интересной и полезной! Ещё, я хотел бы добавить, что Canabalt не разрабатывался аналитическим путём, я не измерял идеальную скорость персонажа, основываясь на соотношениях объектов, когда я разрабатывал игру. Я просто сделал то, что мы обычно делаем: изменял большое количество параметров, пока не почувствовал, что в игре всё клёво. В статье я старался рассказать хотя бы о некоторых причинах, с помощью которых мне удалось добиться этого. Буду очень рад, если мне удалось это.
Share post
AdBlock has stolen the banner, but banners are not teeth — they will be back

More
Ads

Comments 30

    –7
    Вам есть, к чему стремиться:
      +5
      Что вы имеете ввиду?
        –7
          +9
          Странный вы какой-то.
            –7
            Игры весьма похожи по геймплею. Игра по моей ссылке была весьма популярна, когда появилась, и, что называется, цепляет. Поэтому я решил, что ссылка будет полезна.
            Что тут странного?
              +9
              Просто я не сразу понял ваш 2-й коммент. Да и 1-й не сразу понял, поэтому они мне показались странными.

              По поводу игр, если мне не изменяет память, Canabalt вышла раньше «единорога», собственно после Canabalt и стало появляться много игр такой механики. Поэтому «есть куда стремиться», наверно, не совсем корректный коммент в данном случае.

              Плюс ко всему, игру сделал не я, я просто перевёл статью создателя игры, поэтому ваш коммент, если он был адресован мне (а он выглядит так, как буд-то адресован мне), тоже не корректен.
          –1
          ы?
          +3
          Отличная статья, пишите еще.
            +3
            Это к автору, я — просто переводчик )
              +3
              Хороший перевод — читается как-будто оригинал.
          0
          Спасибо. Игра классная, получил все ачивки на нее как только появилась на Конгрегейте. Очень нравится.
            0
            Побольше бы таких статей — немного про процесс создания, больше про тонкости, влияющие на результат. Пишите еще
              +3
              Спасибо за перевод. Игра отличная, да.
              На работе не так давно появился гг из неё.
              image
              0
              Хотел поиграть, а оказалось, что для айфона.
              Оставлю ссылку для владельцев github.com/ericjohnson/canabalt-ios
              +2
              Статья стоит прочтения и добавления в закладки уже за один ход с +8 пикселей. Простой и невероятно крутой ход.
                0
                О реализациях коллизии можно кучу статей написать. Благо ухищрений и грязных трюков около тонны.
                –5
                > Была предпринята попытка сохранить оригинальную орфографию, шутки и пунктуацию.

                Была предпринята попытка понять зачем писать в пассивном залоге? Вы же в жизни так не говорите :)
                  0
                  Это что-то типо самоиронии, т.е. я честно рассказал о том, что я попытался сделать, но не факт, что у меня это получилось.
                  +1
                  Ну всё, теперь я её точно пройду!) А вообще спасибо за статью.
                    0
                    картинку из заключения на десктоп бы…
                      0
                      «более эффективно их делать..» — может, всё-таки «эффективнее»?
                        0
                        В Канабальт рублюсь раз полгода уже года так два. Огромное спасибо автору за качественный перевод.
                        Автору игры низкий поклон за смелость и впечатления, за красивую пиксельность и щемящее уважение к флешбеку с эназерворлдом.
                        Не знаю как остальные, но я думаю, что Канабальт сделала Канабальтом не механика, а музыка, графика, анимация и баланс.
                          0
                          Механика — это и есть часть баланса? Или нет?
                            0
                            Баланс — часть механики.) Механика — это принцип построения игрового процесса, то есть правила игры. Настраиваемые численные показатели игровой механики — это баланс.
                          0
                          Прекрасная игра. Просто и проработано.

                          Only users with full accounts can post comments. Log in, please.