Что означает redux в названии игры
Что такое ремастеры и чем они отличаются от ремейков
Разбираемся, как разработчики возвращают игроков в классические игры.
Иллюстрация: Alex Rodman / Wikimedia Commons / Colowgee для Skillbox Media
11 ноября вышел ремастер Grand Theft Auto: The Trilogy — The Definitive Edition. Сборник включает в себя три классические игры известной серии: GTA III (2001), Vice City (2002) и San Andreas (2004). Обновлённая трилогия Rockstar Games вышла на всех современных платформах, в первой половине 2022 года планируется релиз на устройствах Android и iOS.
Игроки раскритиковали ремастеринг GTA: The Trilogy — в первую неделю с момента релиза у сборника низкие оценки на Metacritic. Skillbox Media разбирается, как устроены ремастеры старых игр, зачем они нужны игрокам и всегда ли разработчики оправдывают ожидания.
Сценарист и копирайтер. Утверждает, что видел все фильмы и прошёл все игры, но редакция отказывается ему верить.
Подход к разработке
Ремастеринг — не создание новой игры, а обновление ранее созданной. Главная цель — портирование на современные платформы в улучшенном качестве.
Как правило, игровые механики, левел-дизайн и нарратив остаются как в первоисточнике. Разработчики переделывают интерфейс и графику, проводят оптимизацию, повышают разрешение и меняют соотношение сторон, адаптируя игру под современные дисплеи.
Игровые студии часто сталкиваются с тем, что ассеты оригинала несовместимы с движком ремастера. Возраст игрового движка, оригинальные модели с текстурами низкого разрешения и простой геометрией вынуждают разработчиков переделывать ассеты.
Rockstar в GTA: The Trilogy — The Definitive Edition использует движок Unreal Engine 4. Студия анонсировала следующие изменения в ремастере:
Технические особенности для отдельных платформ:
Удалось ли разработчикам сдержать обещания? На момент написания статьи у ремастера GTA одни из самых низких оценок среди видеоигр за всю историю Metacritic. Игроки особенно выделяют непропорциональные модели персонажей, баги и плохую оптимизацию, из-за которой FPS просаживается на любой платформе.
Часто издатели и разработчики создают путаницу с названиями обновлённых версий. Названия Metro Redux или NieR Replicant ver.1.22474487139 не сразу дают понять, продолжение, ремейк или ремастер перед нами.
Другие студии облегчают жизнь игрокам, указывая в названии, что это ремастер, — так сделала Naughty Dog в The Last of Us: Remastered, вышедшей на PS4.
«Хотелось бы, чтобы у нас была кнопка „Включить режим PS4“, но нет. Мы заранее знали — впереди сущий ад. Наши инженеры — лучшие в отрасли, они отлично оптимизировали игру специально для архитектуры PS3. The Last of Us уже была оптимизирована в структуре двоичного кода, но, когда мы перенесли её на PS4, пришлось снова возвращаться на более высокие уровни, проверять целостность систем, оптимизировать всё с самого начала».
Нил Дракманн,
креативный директор Naughty Dog
Зачем нужны ремастеры?
Большая аудитория, играющая уже свыше двадцати лет, хочет вернуться в классику. Игроки младше, слышавшие про старый хит, не могут пройти игру из-за технических проблем или несовременной платформы.
«Нашей целью было не переделать или заново осмыслить серию Mass Effect, а модернизировать её, чтобы фанаты и новые игроки могли насладиться оригинальными играми в лучшей форме. Как разработчики, мы всегда надеемся, что наши проекты выйдут за пределы своих оригинальных платформ. Возможность сделать ремастер трилогии означает, что плоды нашей десятилетней работы будут жить дольше и восприниматься лучше, чем когда-либо прежде».
Кейси Хадсон,
руководитель разработки трилогии Mass Effect
С точки зрения бизнеса создание ремастера стоит меньше, чем разработка игры с нуля. У игры уже есть готовая фан-база, издатели охотнее вкладывают средства в уже известные IP.
С другой стороны, сложность заключается в том, чтобы оправдать ожидания фанатов и выполнить заявленные обещания по обновлениям.
Плохие примеры
Главный пример провального ремастеринга — WarCraft 3: Reforged. Новая версия классической RTS от Blizzard побила антирекорд по пользовательскому рейтингу на Metacritic — 0,6 балла.
Сильнее всего игроков возмутило невыполнение обещаний в части нововведений и улучшений. Энтузиаст создал портал с пародирующим Reforged подзаголовком — Warcraft III: Refunded. Слоган главной страницы сайта звучит так: «Сломанный, бесчестный, антипотребительский и раздутый ремастер».
Silent Hill HD Collection — вышедший в 2012 году ремастеринг второй и третьей частей серии японских хорроров. Создатели ремастеринга из Nijinx Studios работали с неполной сборкой исходной игры, потому что Konami не заархивировала код и смогла предоставить студии только нефинальную версию. Это добавило разработчикам технических проблем.
Не все игроки оценили обновлённую графику. Фирменного тумана стало меньше, из-за чего открылись скрытые текстуры и технические ограничения игры. К тому же была потеряна одна из главных фишек визуального стиля. Ремастер также огорчил обилием багов, низким FPS, проблемами синхронизации звука с анимацией персонажей. Разработчикам также пришлось изменить голоса озвучки — всё это сказалось на погружении.
При работе над Crysis Remastered разработчики обещали добавить рейтрейсинг, улучшить физически корректный рендеринг и поднять общий уровень графики. Из-за вылетов, багов и общего технического состояния ремастера на релизе у игры смешанные отзывы в Steam, оценка игроков на Metacritic — 3,6 балла у версии для ПК.
15 октября 2021 года вышла Crysis Remastered Trilogy, объединяющая ремастеры трёх частей франшизы. Оценки стали выше (7,0 балла для ПК), но большинство игроков не увидели серьёзных отличий ремастера от оригинальных Crysis.
Удачные примеры
Разработкой ремастеров Crysis занималась компания Saber Interactive. Она также выпускала ремастеры Halo: Combat Evolved Anniversary, Halo: Master Chief Collection и Ghostbusters.
Важную роль в системе Saber играет подразделение в Санкт-Петербурге. Например, петербургские разработчики были ответственны за ремастер Halo: Combat Evolved, выпущенный в честь десятилетия первой части серии.
«Работа была проведена колоссальная, апгрейд движка — лишь малая её часть. Ремастеринг первой Halo в контексте объёма работы нам не оставил, по сути, ничего, кроме опыта. Он дал нам знание технологии, определённый набор стандартных решений, возможность избежать допущенных в Halo Anniversary ошибок. Если говорить о прямом коде, который был написан тогда, то он никак не поменялся. Затем, работая над Halo 2, мы уже знали, что и как надо делать. Благодаря опыту мы быстрее выполнили ещё больший объём работы».
Андрей Ионес,
один из основателей Saber Interactive
Nintendo регулярно выпускает ремастеры своих классических игр для консоли Switch. The Legend of Zelda: Skyward Sword HD — обновление оригинальной игры для Wii, вышедшей в 2011 году. В последнем финансовом отчёте компании сообщается, что версия игры 2021 года для Nintendo Switch была продана в количестве 3,6 млн копий за первые 77 дней с момента релиза.
10 ноября вышел ремастер Final Fantasy V. Пятая «Финалка» входит в сборник Final Fantasy Pixel Remaster, включающий шесть частей. Обновлённые JRPG пока доступны только в Steam и на мобильных устройствах.
Не все ремастеры — классика индустрии. Разработчики делают обновлённые версии недавних релизов, что особенно актуально с выходом нового поколения консолей. Один из примеров — Marvel’s Spider-Man Remastered, вышедшая на PS5 через два года после релиза на PS4.
Ремастеринг — удобный формат для эпизодических игр, своеобразное переиздание и объединение всех эпизодов. Пример — Life Is Strange Remastered Collection.
В следующих материалах Skillbox Media продолжит разбираться в обновлениях видеоигр. Во второй части мы расскажем про ремейки.
Краткое руководство по Redux для начинающих
Авторизуйтесь
Краткое руководство по Redux для начинающих
Библиотека Redux — это способ управления состоянием приложения. Она основана на нескольких концепциях, изучив которые, можно с лёгкостью решать проблемы с состоянием. Вы узнаете о них далее, в этом руководстве по Redux для начинающих.
Примечание Вы читаете улучшенную версию некогда выпущенной нами статьи.
Содержание:
Когда нужно пользоваться Redux?
Redux идеально использовать в средних и крупных приложениях. Им стоит пользоваться только в случаях, когда невозможно управлять состоянием приложения с помощью стандартного менеджера состояний в React или любой другой библиотеке.
Простым приложениям Redux не нужен.
Использование Redux
Разберём основные концепции библиотеки Redux, которые нужно понимать начинающим.
Неизменяемое дерево состояний
В Redux общее состояние приложения представлено одним объектом JavaScript — state (состояние) или state tree (дерево состояний). Неизменяемое дерево состояний доступно только для чтения, изменить ничего напрямую нельзя. Изменения возможны только при отправке action (действия).
Действия
Действие (action) — это JavaScript-объект, который лаконично описывает суть изменения:
Типы действий должны быть константами
В простом приложении тип действия задаётся строкой. По мере разрастания функциональности приложения лучше переходить на константы:
и выносить действия в отдельные файлы. А затем их импортировать:
Генераторы действий
Генераторы действий (actions creators) — это функции, создающие действия.
Обычно инициируются вместе с функцией отправки действия:
Или при определении этой функции:
Редукторы
При запуске действия обязательно что-то происходит и состояние приложения изменяется. Это работа редукторов.
Что такое редуктор
Редуктор (reducer) — это чистая функция, которая вычисляет следующее состояние дерева на основании его предыдущего состояния и применяемого действия.
Чистая функция работает независимо от состояния программы и выдаёт выходное значение, принимая входное и не меняя ничего в нём и в остальной программе. Получается, что редуктор возвращает совершенно новый объект дерева состояний, которым заменяется предыдущий.
Чего не должен делать редуктор
Редуктор — это всегда чистая функция, поэтому он не должен:
Поскольку состояние в сложных приложениях может сильно разрастаться, к каждому действию применяется не один, а сразу несколько редукторов.
Симулятор редуктора
Упрощённо базовую структуру Redux можно представить так:
Состояние
Список действий
Редуктор для каждой части состояния
Редуктор для общего состояния
Хранилище
Хранилище (store) — это объект, который:
Хранилище в приложении всегда уникально. Так создаётся хранилище для приложения listManager:
Хранилище можно инициировать через серверные данные:
Функции хранилища
Прослушивание изменений состояния:
Поток данных
Поток данных в Redux всегда однонаправлен.
20–22 декабря, Онлайн, Беcплатно
Передача действий с потоками данных происходит через вызов метода dispatch() в хранилище. Само хранилище передаёт действия редуктору и генерирует следующее состояние, а затем обновляет состояние и уведомляет об этом всех слушателей.
Советуем начинающим в Redux прочитать нашу статью о других способах передачи данных.
Что такое Redux простыми словами?
Чтобы понять как работает Redux тебе нужно норм вкуривать React.
Хотя бы для того, чтобы не пугаться props.
Есть у тебя React. Это все просто JS объекты.
— так позволяет писать движок jsx, который и React его использует.
Так как структура компонентная, ты должен думать как обновить компоненты в в другой части страницы.
Что делает Redux:
Он не призывает отказываться от state.
То если mapStateToProps вернет
В данном случае разное мышление (проектирование).
В вашем случае:
Логика идет от компонентов.
Допустим на странице пользователя есть label online/offline
Откуда брать значение, если нужно заблокировать окно чата в тот момент когда пользователь offline?
Что если таких действий не одно, а допустим штук 10?
Что если таких действий не одно, а допустим штук 10 и еще на разных страницах?
Куда вынести функцию, которая проверит статус пользователя?
Как её назвать чтобы не было конфликта имен?
Redux для меня в первую очередь подход.
1. Проектируется состояние (база данных фронта)
2. действие checkUserStatus (ajax/socket)
3. сколько угодно компонентов (которые не знают друг о друге ничего и имеют любое поведение, в зависимости от статуса пользователя)
компоненты могут ничего не уметь кроме как рендерить этот статус (label), или, могут быть более сложными и иметь логику + обработчики (кнопки, пр)
jQuery «видит» весь DOM целиком. И манипулирует DOM-ом, доступ к которому предоставляет браузер. Но можно и по-другому.
Давайте рассмотрим такую архитектуру, в которой все компоненты связаны между собой древовидно. То есть, отдельно взятый компонент может общаться со своими дочерними и со своим родительским. Если нужно, чтобы между собой пообщались два компонента в разных ветках, то в конце концов их общение происходит через общего предка. Такой подход вполне согласуется с древовидной структурой HTML.
Для того, чтобы это всё отобразить, не обязательно в ходе вычисления следующего состояния (или представления) сразу манипулировать DOM-ом. Можно построить из состояния и его представления фрагмент DOM-а, каким он должен получиться. А потом вычислить diff между этим построенным фрагментом (виртуальным DOM-ом) и реальным браузерным. И этот diff применить к реальному DOMу. Один раз. Получится быстро.
Кроме упомянутых особенностей эта архитектура также позволяет выполнять так называемую time-travelling отладку. Поскольку каждое состояние и каждое событие по пути от исходного до текущего можно залогировать и воспроизвести (ведь функция, вычисляющая следующее состояние у нас чистая).
С точки зрения функционального программирования, при таком подходе текущее состояние является результатом функции leftFold, применённой к исходному состоянию, последовательности событий (действий), приводящих к текущему и функции, умеющей вычислять следующее состояние.
Введение в Redux и как обновляется состояние в приложении Redux
Сегодня я собираюсь поделиться несколькими основными концепциями Redux без использования какой-либо библиотеки представлений (React или Angular). Это своего рода личная заметка для дальнейшего использования, но она может помочь и другим.
Что такое Redux?
Когда приложение становится больше, становится сложнее управлять состоянием и отлаживать проблемы. Это становится проблемой, чтобы отследить, когда и где состояние изменяется и где изменения должны быть отражены. Иногда пользовательский ввод вызывает некоторый вызов API, который обновляет некоторую модель. Эта модель, в свою очередь, обновляет некоторое состояние или, может быть, другую модель и так далее.
В такой ситуации становится сложно отслеживать изменения состояния. Это происходит главным образом потому, что не существует определенного правила для обновления состояния, и состояние может быть изменено из любой точки приложения.
Redux пытается решить эту проблему, предоставив несколько простых правил для обновления состояния, чтобы оно было предсказуемым. Эти правила являются строительными блоками Redux.
Redux Store:
Теперь у нас есть только одно основное состояние, которое включает все состояния приложения, расположенного в одном месте. Любые изменения, внесенные в State Tree, отражаются во всем приложении, поскольку это единственный источник данных для приложения. И это первый фундаментальный принцип Redux.
Состояние всего вашего приложения хранится в дереве объектов в одном хранилище.
Способы взаимодействия с State Tree:
Давайте поговорим о методах, которые store дает нам для взаимодействия с state.
Теперь, когда у нас есть хранилище, которое содержит дерево состояний и несколько способов взаимодействия с состоянием, как мы можем обновить состояние приложения?
Обновление состояния в приложении:
Action могут содержать столько информации, сколько вы хотите. Хорошей практикой является предоставление меньшего количества необходимой информации.
Здесь у нас есть action, чтобы добавить книгу в корзину.
Теперь у нас есть store, state и action в нашем приложении для выполнения некоторых задач. Теперь нам нужен способ использовать эти action для обновления. Это можно сделать с помощью чистой функции, и это правило № 3.
Нам нужна простая чистая функция, которая в качестве параметра принимает текущее state приложения и action, которое нужно выполнить с состоянием, а затем возвращает обновленное состояние. Эти функции называются reducer.
Они называются reducer, потому что они принимают коллекцию значений, переводят ее в обновленное состояние и затем возвращают. Поскольку reducer являются чистыми функциями, они не изменяют исходное состояние. Вместо этого они возвращают обновленное состояние в новом объекте. Наше приложение может иметь один или несколько reducer. Каждый reducer может иметь соответствующее action для выполнения определенных задач.
Поскольку reducer являются чистыми функциями, они должны иметь следующие атрибуты:
Процесс.
Что мы тут узнали?
Давайте подведем итог тому, что мы тут узнали, чтобы подвести итоги.
Поскольку Redux является независимой библиотекой, которую можно использовать с React, Angular или любой другой библиотекой, я избегал создания примера приложения с любой из этих библиотек представлений. Вместо этого я сосредоточился только на основных концепциях Redux.
Введение в Redux: основные понятия
Redux – это контейнер с предсказуемым состоянием для приложений JavaScript и очень ценный инструмент для управления состоянием приложения. Также это популярная библиотека для управления состоянием в приложениях React, но ее можно использовать и с Angular, Vue.js и со старым добрым JavaScript.
Главная сложность Redux заключается в том, что многие разработчики не понимают, когда его использовать. Чем больше и сложнее становится приложение, тем выше вероятность того, что Redux будет вам полезен. Если вы начинаете работать над приложением и ожидаете, что в скором будущем оно существенно вырастет, вы можете сразу использовать Redux: так по мере изменения и масштабирования приложения вы сможете легко внедрять все новые функции, избегая рефакторинга большого количества готового кода.
В этом кратком руководстве по Redux мы рассмотрим основные понятия: reducer-ы, action-ы, action creator-ы and store. На первый взгляд это может показаться сложной темой, но на самом деле основные понятия Redux довольно просты.
Что такое reducer?
reducer – это чистая функция, которая принимает в качестве аргументов предыдущее состояние и action и возвращает новое состояние. Action – это объект, задающий тип и (опционально) нагрузку:
function myReducer(previousState, action) => <
// use the action type and payload to create a new state based on
// the previous state.
return newState;
>
Reducer-ы определяют, как изменяется состояние приложения в ответ на action-ы (действия), отправленные в store.
Поскольку reducer-ы являются чистыми функциями, мы не меняем передаваемые им аргументы, не выполняем вызовы API или маршрутизацию и не вызываем нечистые функции, такие как Math.random() или Date.now().
Если ваше приложение имеет несколько частей состояния, вы можете использовать несколько reducer-ов. Например, каждая важная функция в вашем приложении может иметь собственный reducer. Reducer-ы сосредоточены на значении состояния.
Что такое action?
Action-ы – это простые объекты JavaScript, которые представляют полезную нагрузку, отправляющую данные из приложения в store. Action-ы принимают тип и опционально полезную нагрузку (type и payload).
Большинство изменений в приложении, использующем Redux, начинаются с события, которое прямо или косвенно запускается пользователем. События – это, например, нажатие кнопки, выбор элемента из раскрывающегося меню, наведение курсора на определенный элемент или запрос AJAX, который только что вернул какие-то данные. Даже начальная загрузка страницы может быть поводом для отправки action-а. Действия часто отправляются с помощью action creator-а.
Что такое action creator?
В Redux action creator – это функция, которая возвращает объект action. Action creator может показаться лишним компонентом, но он повышает портативность и упрощает тестирование. Объект action, возвращаемый action creator-ом, отправляется всем различным reducer-ам в приложении.
В зависимости от action-а reducer-ы могут выбрать возврат новой версии своего фрагмента состояния. Затем возвращенная часть состояния передается по конвейеру в состояние приложения, которое затем возвращается в приложение React, а затем – вызывает повторный рендеринг всех его компонентов.
Допустим, пользователь нажимает кнопку, после чего мы вызываем action creator, который представляет собой функцию, возвращающую объект action. Этот объект содержит аргумент type, описывающий тип только что запущенного действия.
Вот пример action creator-а:
А вот простой reducer, работающий с action-ом типа ADD_TODO:
export default function(state = initialState, action) <
switch (action.type) <
case ‘ADD_TODO’:
const newState = [. state, action.payload];
return newState;
// Deal with more cases like ‘TOGGLE_TODO’, ‘DELETE_TODO’.
default:
return state;
>
>
Все reducer-ы обработали action. Reducer-ы, которые не заинтересованы в этом конкретном типе действия, просто возвращают то же состояние, а заинтересованные редукторы возвращают новое состояние. После этого все компоненты уведомляются об изменениях состояния. Затем они будут повторно отображаться с новыми свойствами:
Комбинирование reducer-ов
Redux предоставляет функцию под названием combReducers, которая выполняет две задачи:
Что такое store?
Мы уже много раз упоминали store, но еще неговорили о том, что он из себя представляет.
В Redux store – это объект, объединяющий action-ы (которые представляют то, что произошло) и reducer-ы (которые обновляют состояние в соответствии с этими action-ами). В приложении Redux может быть только один store.
У store есть несколько обязанностей:
По сути, все, что нам нужно для создания store, – это reducer-ы. Мы упомянули функцию combReducers, которая может объединить несколько reducer-ов в один. Теперь, чтобы создать store, мы импортируем combReducers и передадим его createStore:
import < createStore >from ‘redux’;
import todoReducer from ‘./reducers’;
const store = createStore(todoReducer);
Затем мы отправляем action-ы приложения, используя метод dispatch:
Поток данных в Redux
Одним из многих преимуществ Redux является то, что все данные в приложении следуют одному и тому же шаблону жизненного цикла. Логика приложения более предсказуема и проста для понимания, поскольку архитектура Redux строго следует однонаправленному потоку данных.
Основные этапы жизненного цикла данных в Redux
export default const currentTask(state = <>, action) <
// deal with this piece of state
return newState;
>;
export default const todos(state = [], action) <
// deal with this piece of state
return newState;
>;
export default const todoApp = combineReducers( <
todos,
currentTask,
>);
При запуске action-а todoApp вызовет оба reducer-а и объединит оба набора результатов в одно дерево состояний:
return <
todos: nextTodos,
currentTask: nextCurrentTask,
>;
Заключение
Redux предлагает очень мощный шаблон управления состоянием приложения. Здесь мы только вкратце затронули очень много важных аспектов работы Redux – не пугайтесь, если вы еще не совсем разобрались, как все части сочетаются друг с другом. Вполне естественно, что вам потребуется немного практики, чтобы привыкнуть к работе с этим инструментом.
Чтобы узнать больше, ознакомьтесь с этими ресурсами:
В будущем мы планируем рассмотреть более сложные темы, такие как обработка асинхронных событий с помощью Redux-Saga или Redux Thunk.