Когда люди говорят о «ретро» игры, они , как правило , относятся к большинству игр , сделанных на 1 — го по 4 — е поколение игровых консолей . Отличительной чертой этих игр являются их пиксельные визуальные эффекты и доступная, но сложная игровая механика. Я был большим поклонником этих игр, так что большинство из тех, что я делаю сегодня, подражают визуальному стилю и игровому процессу этой эпохи в истории игр. Я хотел бы выделить некоторые особенности этих игр и рассказать о том, как воссоздать их при создании собственных HTML5-игр для Windows 8. Поскольку canvas идеально подходит для рендеринга 2D-графики, создание игры в стиле ретро легко выполнить и хорошо работает практически на любое оборудование. Во-первых, нам нужно поговорить о выборе стиля искусства.
Выбор стиля Арт
Когда вы начинаете думать о художественном стиле вашей игры, у вас есть несколько вариантов выбора, например, 8-битная, 16-битная и даже некоторые действительно классные 2/4-битные игры в стиле. Вот несколько примеров от Mega Man за эти годы, демонстрирующих каждый стиль по мере развития игры.
8-битный чёрно-белый пример (Mega Man Game Boy)
8-битный пример (Mega Man 2 Nintendo)
16-битный пример (Mega Man X Super Nintendo)
Эти три художественных стиля дают нам много возможностей для игры. Поскольку большинство компьютеров, планшетов и мобильных устройств не ограничены цветовыми ограничениями, которые определяли оборудование, на котором работали эти ранние игры, вам придется приложить немало усилий, чтобы самостоятельно выбрать цветовые палитры. Один из лучших способов сделать это использовать пиксельный редактор или приложение для рисования, разработанное специально для создания пиксельной графики.
Pixel Art Editors
На протяжении многих лет я ходил туда-сюда между различными приложениями для рисования, от Photoshop до Fireworks, но в последнее время я перешел к специализированным приложениям, чтобы сделать свою пиксельную графику. Я настоятельно рекомендую проверить это Aseprite . Это не только бесплатно, это с открытым исходным кодом и кроссплатформенный. Aseprite не только позволяет создавать удивительные пиксельные рисунки, но также обрабатывает создание листов спрайтов и управление цветовой палитрой, которые имеют решающее значение для соответствия этому подлинному ретро-стилю. Я решил выделить некоторые замечательные функции Aseprite и то, для чего я его использую.
Прежде всего, я постоянно работаю над созданием и тестированием анимации. Aseprite имеет функцию, которая позволяет импортировать отдельные изображения и объединять их в одну анимацию, если имена файлов являются последовательными, например sprite_1, sprite_2 и т. Д.
Следующие спрайты были созданы Иньяки Диазом для моей игры Super Resident Raver.
Как только изображение или анимация загружены, вы можете увеличить масштаб для работы с основным холстом, а также увидеть изображение в мини-редакторе. Мини-редактор сохраняет невероятно полезное соотношение 1: 1, чтобы вы могли видеть, как выглядит настоящий спрайт все время. Он также может быть скрыт, если вы не хотите видеть его во время работы.
Когда вы будете готовы настроить анимацию, вы можете просмотреть весь набор кадров в окне анимации, а также изменить временную задержку между каждым кадром.
Когда у вас все будет готово, вы можете экспортировать спрайт-лист напрямую из Aseprite. У вас есть три варианта на выбор: горизонтальный, вертикальный и матричный, который создает сетку на основе значений, которые вы можете настроить.
И вот один из финальных листов спрайтов, которые я создал для своей игры со всеми анимациями и дополнительным пространством с обеих сторон на случай, если мне понадобится добавить больше спрайтов.
Aseprite также импортирует из листа спрайта и превращает его обратно в однокадровую анимацию для вас. Несколько других функций, которые я не продемонстрировал, — это удивительные инструменты рисования, а также возможность видеть цветовую палитру и изменять ее на лету, чтобы быстро менять один цвет на другой. Вы также можете создавать слои, и есть несколько отличных инструментов выбора, которые помогут вам манипулировать изображением. Как видите, Aseprite — это полнофункциональный редактор изображений с низким разрешением, который быстро стал моим инструментом для создания пиксельных изображений и создания спрайтов.
Итак, теперь, когда я немного рассказал об инструментах, которые я использую для работы с пиксельной графикой, давайте перейдем к размерам спрайтов и листов.
Размеры спрайта / плитки
Когда дело доходит до создания спрайтов или плиток для карт, я обычно склоняюсь к тому, чтобы они помещались в графике размером 8 × 8 или 16 × 16 пикселей. Иногда я использую плитки размером 20 × 20, так как я могу легко центрировать спрайт 8 × 8 или 16 × 16 внутри него и получить немного дополнительной детализации карты. Одна из причин, по которой я придерживаюсь этих размеров, заключается в том, что, когда приходит время показывать художественные работы в игре, я всегда преувеличиваю их.
Повышение масштаба позволяет отображать меньшую графику с гораздо большим разрешением. Поскольку я работаю с пиксельной графикой, эффект имеет тенденцию еще больше подчеркивать пиксели, придавая им ретро-вид, с которым знакомы большинство людей. Нет точной науки о том, как масштабироваться, но я склонен делать это кратно двум. Таким образом, если у меня есть спрайт 16 × 16 пикселей, я могу отобразить его с разрешением 24 × 24 пикселей, увеличив масштабный коэффициент на два.
Вот пример того, как это работает:
1x (фактический размер 16 × 16)
2x (новый размер 24 × 24)
4x (новый размер 48 × 48)
Как вы можете видеть, чем выше масштабный коэффициент, тем больше пикселов выглядит у иллюстрации. Это невероятно эффективно, когда у вас есть арт меньшего размера, такие как спрайты 8 × 8 и тайлы карты.
Единственное, в чем вы хотите убедиться, когда дело доходит до масштабирования вашей иллюстрации, это то, что вы не устанавливаете масштаб холста, а вместо этого
повторно делаете выборку на лету или предварительно экспортируете все в нужном масштабе в редакторе изображений. Impact , невероятная игровая среда JS, которую я использую для своих игр на Windows 8, имеет в своем конструкторе опцию для установки масштаба игры. Это выглядит примерно так:
ig.main('#canvas', MyGame, 60, 240, 160, 4);
Как видите, последний параметр — это шкала, которая в этом случае установлена на «4». На самом деле Impact повторно сэмплирует все изображения, рисуя их за пределами экрана и ссылаясь на них вместо реальных изображений. Это удваивает память и замедляет время загрузки ваших игр. Если вы не планируете изменять размер шкалы в вашей игре в зависимости от разрешения, тогда может быть более целесообразно заранее выводить все с правильным коэффициентом масштабирования. Это особенно важно на медленных устройствах. Когда речь идет о высокой производительности игр для Windows 8, вы должны стремиться к наименьшему общему знаменателю. Убедитесь, что ваши игры готовы для планшетов и максимально оптимизированы, особенно когда речь идет о создании высококлассных иллюстраций на лету.
Разрешения экрана
Теперь, когда мы поговорили об увеличении масштабов наших иллюстраций, нам нужно убедиться, что у нас есть правильный размер экрана для наших игр. Приложения для Windows 8 работают с тремя минимальными разрешениями:
- Полноэкранный режим — это разрешение по умолчанию, когда игра работает в полноэкранном режиме. Это может быть где угодно от 1366 × 768 и выше.
- Snapped — это происходит, когда ваша игра закреплена на боковой стороне экрана, а рядом с ней запущено другое приложение Минимальная ширина этого разрешения составляет 320.
- Заполнено — это будет полноэкранное разрешение минус 320 для снимка. Это разрешение возникает, когда на стороне вашей игры закреплено другое приложение с привязкой.
Вы можете легко обнаружить изменения разрешения, добавив прослушиватель событий в окно следующим образом:
window.addEventListener("resize", onViewStateChanged);
И вот пример обработчика для события resize:
function onViewStateChanged(eventArgs) {
var viewStates = Windows.UI.ViewManagement.ApplicationViewState;
var newViewState = Windows.UI.ViewManagement.ApplicationView.value;
if (newViewState === viewStates.snapped) {
// is snapped
}else if (newViewState === viewStates.filled) {
// is filled
} else if (newViewState === viewStates.fullScreenLandscape) {
// is full screen
} else if (newViewState === viewStates.fullScreenPortrait) {
//is portrait
}
}
}
Обратите внимание, как мы можем также обнаружить поворот экрана? Вы можете отключить это для своей игры, но для того, чтобы получить одобрение магазина, вам нужно правильно обработать три других состояния просмотра. Когда дело доходит до определения фактического разрешения, не забудьте разделить разрешение на масштабный коэффициент вашей пиксельной графики. Так что, если я использую масштабный коэффициент четыре, у меня будет только 80 пикселей в ширину для работы в режиме привязки. Для полноэкранного просмотра я бы работал с разрешением около 341 × 192. Помните, что это разрешение широкоформатное, поэтому вам, возможно, придется подумать о наличии черных полос по бокам или сверху / снизу вашей игры в зависимости от того, как ваша графика вписывается в это окно просмотра разрешения.
Чтобы увидеть, как это будет работать в реальной игре, посмотрите Win8GameKit Дэвида Исбицкого на GitHub и просмотрите файл default.js, чтобы понять, как обрабатывать изменения разрешения и другие важные аспекты построения игры HTML5 для Windows 8. Также важно отметить, что не все игры могут быть воспроизведены в привязанном виде, поэтому подумайте, нужно ли вам приостановить экран и показать сообщение, в котором вашим игрокам нужно отсоединить игру, чтобы продолжить.
Генераторы звуковых эффектов
Последнее, о чем я хотел вкратце поговорить, — это создать звуковые эффекты, соответствующие вашей игре в стиле ретро. Одним из инструментов, которые я использую, является Bfxr, который вы можете использовать онлайн здесь или скачать как приложение AIR для автономного использования. Вот как выглядит приложение:
Сначала вы можете быть поражены, но вот несколько советов о том, как использовать приложение. В левом верхнем углу вы увидите различные звуковые «шаблоны» для эффектов, которые вам понадобятся в вашей игре. Простое нажатие на одну из них создаст звук в левом нижнем углу. Когда вы добавляете больше звуков в список, вы можете нажать на них, чтобы просмотреть и изменить их. Когда звук выбран, вы можете использовать центральное окно для управления звуковыми эффектами. Справа внизу вы можете сохранить эффекты по одному или сохранить файл .bfx, который можно загрузить позже, чтобы увидеть все звуки, над которыми вы работали.
Хотя это приложение не поможет вам в создании музыки для ваших игр, оно даст вам преимущество по всем звуковым эффектам, которые понадобятся вам, чтобы сделать вашу игру более приятной и отточенной.
Завершение
Я много рассказывал в этой статье, но есть еще много всего, что нужно рассказать. Я надеюсь сделать еще несколько подобных постов, в которых будут показаны методы, которые я использую при создании ретро-игр для Windows 8. Прежде чем закончить этот пост, я хотел бы выделить несколько ретро-игр, которые мне нравятся, и надеюсь, что они придут на Win8, чтобы вдохновить вас:
Усы Король Приключения
http://jajitsu.com/games-html/mka
Дверной Человек
http://quiteoddgames.blogspot.com.au/2011/12/for-braingale.html
Смертельный спуск Санты
MiniFlake
http://indiegames.com/2012/09/indie_royale_profile_miniflake.html
