Интерактивное демо PS5.js

Вот демо интерфейса PS5, созданного при помощи анимаций на JavaScript и CSS, которые мы будем писать в этом туториале. Интерактивный пример можно потрогать в оригинале статьи.


Поставьте звёздочку или форкните проект ps5.js 35,9 КБ на GitHub.

Я написал твит о демо PS3, когда создавал на JavaScript базовую версию UI консоли PS3. Пока у меня нет кода, но я планирую его опубликовать. Более того, данный туториал построен на основании знаний, полученных при создании первой работы.

Подготовка

Чтобы не усложнять себе жизнь, мы не будем использовать никаких фреймворков.

Но даже если вы используете фреймворки или библиотеки, то вам всё равно нужно разработать свой паттерн решения задачи. В этом туториале про UI я расскажу о самой концепции, лежащей в основе разработки. Этот подход можно легко адаптировать к React, Vue или Angular.

Я использовал эту заготовку HTML-файла с заранее созданными flex-стилями. Он содержит всё необходимое и общую структуру приложения, позволяющую приступить к работе. Это не React или Vue, но это та минимальная конфигурация, которая необходима для создания приложения. Я использую эту заготовку каждый раз, когда мне нужно начать работу над новым ванильным приложением или сайтом.

HTML и CSS

В этом разделе я объясню некоторые основы заготовки HTML-файла.

Простой самодельный CSS-фреймворк

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

.rel { position: relative }.abs { position: absolute }.top { top: 0 }.left { left: 0 }.right { right: 0 }.bottom { bottom: 0 }/* flex */.f { display: flex; }.v { align-items: center }.vs { align-items: flex-start }.ve { align-items: flex-end }.h { justify-content: center }.hs { justify-content: flex-start }.he { justify-content: flex-end }.r { flex-direction: row }.rr { flex-direction: row-reverse }.c { flex-direction: column }.cr { flex-direction: column-reverse }.s { justify-content: space-around }.zero-padding { padding: 0 }.o { padding: 5px }.p { padding: 10px }.pp { padding: 20px }.ppp { padding: 30px }.pppp { padding: 50px }.ppppp { padding: 100px }.m { margin: 5px }.mm { margin: 10px }.mmm { margin: 20px }.mmmm { margin: 30px }

Эти классы CSS говорят сами за себя.

Наши первые CSS-стили

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

Под множественными меню я подразумеваю, что у каждого меню есть собственный экран, задаваемый отдельным HTML-элементом. При переключении на следующее меню предыдущий контейнер скрывается и отображается новый. Для создания плавных UX-переходов могут также использоваться CSS-переходы, изменяющие непрозрачность, позицию и масштаб.

Все контейнеры с классом .menu по умолчанию будут в состоянии отключен (off) (то есть скрыты). Любой элемент с классами .menu и .current будет находиться в состоянии включен (on) и отображаться на экране.

Другие элементы, например, выбираемые в меню кнопки, сами используют класс .current, но в другом контексте иерархии CSS. Мы изучим их CSS-стили в следующих частях туториала.

#ps5 {   width: 1065px;   height: 600px;   background: url('https://semicolon.dev/static/playstation_5_teaser_v2.jpg');   background-size: cover;}/* default menu container - can be any UI screen */#ps5 section.menu {    display: none;    opacity: 0;    // gives us automatic transitions between opacities    // which will create fade in/fade out effect.    // without writing any additional JavaScript    transition: 400ms;      }#ps5 section.menu.current {    display: flex;    opacity: 1;}

section.menu снова является стандартным родительским контейнером для всех слоёв меню, которые мы создадим. Это может быть экран браузера игр или экран настроек. По умолчанию он невидим, пока мы не применим к свойству classlist элемента класс .current.

А section.menu.current обозначает текущее выбранное меню. Все остальные меню должны быть невидимыми, и класс .current никогда не должен одновременно применяться более чем к одному меню!

HTML

Наш самодельный крошечный CSS-фреймворк сильно упрощает HTML. Вот основной каркас:

<body>    <section id = "ps5" class = "rel">        <section id = "system" class = "menu f v h"></section>        <section id = "main" class = "menu f v h"></section>        <section id = "browser" class = "menu f v h"></section>        <section id = "settings" class = "menu f v h"></section>    </section></body>

Элемент ps5 это основной контейнер приложения.

Основная часть flex это f v h для центрирования элементов, поэтому это сочетание мы будем встречать часто.

Также мы встретим f r вместо flex-direction:row; и f c вместо flex-direction:column;.

Подразделы это отдельные области меню, требующие класса menu. Мы сможем переключаться между ними.

В коде они будут перечисляться замороженным объектом (мы увидим это ниже).

Замена фона

Одна из первых задач, с которой я хотел разобраться это функция смены фона. Если я смогу реализовать её сначала, то просто интегрирую её позже во все будущие функции, которым нужно будет менять фон. Для этого я решил создать два div.

Когда новый фон становится активным, я просто меняю местами два div, заменяя значение свойства style.background на URL нового изображения, и применяю к новому фону класс .fade-in, убирая его у предыдущего.

Я начал со следующего CSS:

#background-1, #background-2 {    position: absolute;    top: 0;    left: 0;    width: inherit;    height: inherit;    background: transparent;    background-position: center center;    background-size: cover;    pointer-events: none;    transition: 300ms;    z-index: 0;    opacity: 0;    transform: scale(0.9)}/* This class will be applied from Background.change() function */.fade-in { opacity: 1 !important; transform: scale(1.0) !important; z-index: 1 }/* set first visible background */#background-2 { background-image: url(http://personeltest.ru/aways/semicolon.dev/static/playstation_5_teaser_v2.jpg); }

Затем я создал вспомогательную статическую функцию .change, берущую начало от класса Background, который заменяет местами два div и выполняет их плавное понижение или повышение яркости (функция получает один аргумент URL следующего изображения):

class Background {constructor() {}}Background.change = url => {    console.log(`Changing background to ${url}`)    let currentBackground = $(`.currentBackground`);    let nextBackground = $(`.nextBackground`);    // set new background to url    nextBackground.style.backgroundImage = `url(${url})`    // fade in and out    currentBackground.classList.remove('fade-in')    nextBackground.classList.add('fade-in')    // swap background identity    currentBackground.classList.remove('currentBackground')    currentBackground.classList.add('nextBackground')    nextBackground.classList.remove('nextBackground')    nextBackground.classList.add('currentBackground')    }

Теперь каждый раз, когда мне понадобится показать новый фон, я просто буду вызывать эту функцию с URL изображения, которое нужно отобразить:

Background.change('https://semicolon.dev/static/background-1.png')

Постепенное увеличение яркости (fade in) будет реализовано автоматически, потому что transform: 300ms уже применено к каждому фону, а класс .fade-in занимается всем остальным.

Создаём основное меню навигации

Теперь, когда базовый каркас готов, мы можем начинать создание остальной части UI. Но нам нужно ещё написать класс для управления UI. Назовём этот класс PS5Menu. Как им пользоваться, объясню ниже.

Экран System

Для создания кнопки Start был использован простой CSS. После нажатия кнопки пользователем мы переходим в основное меню PS5. Поместим кнопку Start в первое меню на экране в меню System:

<section id = "system" class = "menu f v h">    <div id = "start" class = "f v h">Start</div></section>

Аналогично контент всех остальных меню будет располагаться в соответствующих родительских элементах-контейнерах.

До этого мы доберёмся позже. А сейчас нам надо решить, как организовать несколько экранов меню.

На данном этапе нам нужно узнать о концепции постановки в очередь нескольких меню. У PS5 есть несколько слоёв различных навигационных UI. Например, при выборе Settings открывается новое, совершенно другое меню, и управление с клавиатуры переносится в это новое меню.

Нам нужен объект для отслеживания всех этих меню, которые постоянно открываются, закрываются, а затем заменяются новым или предыдущим меню.

Можно воспользоваться встроенным методом push объекта Array в JavaScript, чтобы добавлять в очередь новое меню. А когда нам понадобится вернуться, мы сможем вызвать метод pop массива, чтобы вернуться к предыдущему меню.

Мы перечисляем меню по атрибуту id элемента:

const MENU = Object.freeze({    system: `system`,      main: `main`,   browser: `browser`,  settings: `settings`,/* add more if needed*/});

Я использовал Object.freeze(), чтобы ни одно из свойств после их задания не изменялось. Некоторые типы объектов лучше всего замораживать. Это те объекты, которые точно не должны меняться на протяжении срока жизни приложения.

Здесь каждое значение это имя свойства в строковом формате. Таким образом, мы сможем ссылаться на элементы меню по MENU.system или MENU.settings. В этом подходе нет ничего, кроме синтаксической эстетики, кроме того, это простой способ, позволяющий не хранить все объекты меню в одной корзине.

Класс PS5Menu

Для начала я создал класс PS5Menu. Его конструктор использует свойство this.queue типа Array.

// menu queue object for layered PS5 navigationclass PS5Menu {    constructor() {        this.queue = []    }    set push(elementId) {        // hide previous menu on the queue by removing "current" class        this.queue.length > 0 && this.queue[this.queue.length - 1].classList.remove(`current`)        // get menu container        const menu = $(`#${elementId}`)         // make the new menu appear by applying "current" class        !menu.classList.contains(`current`) && menu.classList.add(`current`)                // push this element onto the menu queue        this.queue.push( menu )         console.log(`Pushed #${elementId} onto the menu queue`)    }    pop() {        // remove current menu from queue        const element = this.queue.pop()        console.log(`Removed #${element.getAttribute('id')} from the menu queue`)    }}

Как использовать класс PS5Menu?

Этот класс имеет два метода, сеттер push(argument) и статическую функцию pop(). Они будут делать практически то же, что и методы массива .push() и .pop делают с нашим массивом this.queue.
Например, чтобы создать экземпляр класса меню и добавить или удалить из его стека меню, мы можем вызывать методы push и pop непосредственно из экземпляра класса.

// instantiate the menu object from classconst menu = new PS5Menu()// add menu to the stackmenu.push = `system`// remove the last menu that was pushed onto the stack from itmenu.pop()

Функции сеттеров классов наподобие set push() нельзя вызывать с (). Они присваивают значение при помощи оператора присваивания =. Функция сеттера класса set push() выполнится с этим параметром.

Давайте объединим всё, что мы уже сделали:

/* Your DOM just loaded */window.addEventListener('DOMContentLoaded', event => {          // Instantiate the queable menu    const menu = new PS5Menu()    // Push system menu onto the menu    menu.push = `system`    // Attach click event to Start button    menu.queue[0].addEventListener(`click`, event => {        console.log(`Start button pressed!`)        // begin the ps5 demo!        menu.push = `main`    });});

Здесь мы создали экземпляр класса PS5Menu и сохранили его экземпляр объекта в переменной menu.

Затем мы поместили в очередь нескольких меню первое меню с id #system.

Далее мы прикрепили к кнопке Start событие click. При нажатии на эту кнопку мы делаем основное меню (с id, равным main) нашим текущим меню. При этом меню системы скроется (меню в данный момент находится в очереди меню) и отобразится контейнер #menu.

Обратите внимание, что поскольку наш класс контейнера меню .menu.current имеет свойство transform: 400ms;, то при простом добавлении или удалении класса .current у элемента только что добавленные или удалённые свойства будут анимироваться в течение 0,4 миллисекунд.

Теперь нужно подумать над тем, как создавать контент для основного меню.

Обратите внимание, что этот шаг выполняется в событии DOM Content Loaded (DOMContentLoaded). Оно должно быть точкой входа для любого приложения с UI. Вторая точка входа это событие window.onload, но в данном демо оно нам не нужно. Оно ожидает завершения скачивания медиа (изображений и т. п.), что может произойти гораздо позже того, как стали доступными элементы DOM.

Экран заставки

Изначально основной UI представляет собой ряд из нескольких элементов. Весь ряд появляется с правого края экрана. При первом появлении он анимируется перемещением влево.

Я встроил эти элементы в контейнер #main следующим образом:

<section id = "main" class = "menu f v h">    <section id = "tab" class = "f">        <div class = "on">Games</div>        <div>Media</div>    </section>    <section id = "primary" class = "f">        <div class = "sel t"></div>        <div class = "sel b current"></div>        <div class = "sel a"></div>        <div class = "sel s"></div>        <div class = "sel d"></div>        <div class = "sel e"></div>        <div class = "sel"></div>        <div class = "sel"></div>        <div class = "sel"></div>        <div class = "sel"></div>        <div class = "sel"></div>    </section></section>

Первое меню PS5 помещается внутри родительского контейнера, стиль которого задаётся следующим образом:

#primary {    position: absolute;    top: 72px;    left: 1200px;    width: 1000px;    height: 64px;    opacity: 0;    /* animate at the rate of 0.4s */    transition: 400ms;}#primary.hidden {    left: 1200px;}

По умолчанию в своём скрытом состоянии (hidden) #primary намеренно не показывается, он и передвинут достаточно далеко вправо (на 1200px).

Нам пришлось двигаться путём проб и ошибок, а также воспользоваться интуицией. Похоже, неплохо подходит значение 1200px. Этот контейнер также наследует opacity:0 от класса .menu.

Поэтому когда #primary появляется в первый раз, он одновременно скользит и увеличивает свою яркость.

Здесь снова использовано значение transform:400ms; (эквивалентное 0.4s), потому что большинство микроанимаций выглядит красиво при 0.4s. Значение 0.3s тоже неплохо подходит, но может быть слишком быстрым, а 0.5s слишком медленным.

Используем CSS-переходы для управления анимациями UI

Вместо того, чтобы манипулировать CSS-стилями вручную каждый раз, когда нам понадобится изменить стиль или положение блока UI, мы можем просто назначать и удалять классы:

// get element:const element = $(`#primary`)// check if element already contains a CSS class:element.style.classList.contains("menu")// add a new class to element's class list:element.style.classList.add("menu")// remove a class from element's class list:element.style.classList.remove("menu")

Это важная стратегия, которая сэкономит кучу времени и сохранит чистоту кода в любом ванильном проекте. Вместо изменения свойства style.left мы просто удалим класс .hidden у элемента #primary. Так как он имеет transform:400ms;, автоматически воспроизведётся анимация.

Мы будем пользоваться этой тактикой для изменения почти каждого состояния элементов UI.

Вторичная анимация Slide-Out

При работе с дизайном UX существуют различные типы анимаций. Некоторые анимации срабатывают при переключении на новое меню. Обычно они начинаются спустя короткий промежуток времени, вскоре после переключения на новый экран.

Также существуют анимации при наведении курсора, срабатывающие, когда мышь или контроллер выбирает новый соседний элемент в текущем меню навигации.

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

Используем функцию setTimeout для управления состояниями анимаций

При выдвижении элементов воспроизводится вторичная небольшая анимация. Для имитации этого двойного эффекта использовалась функция JavaScript setTimeout сразу после полной загрузки дерева DOM.

Так как это первый экран меню, появляющийся вскоре после нажатия на кнопку Start, теперь нам нужно обновить событие click кнопки Start в событии DOMContentLoaded сразу после menu.push = `main`.

Следующий код будет находиться внизу уже существующей функции события DOMContentLoaded (см. показанный выше пример исходного кода):

/* Your DOM just loaded */window.addEventListener('DOMContentLoaded', event => {          /* Initial setup code goes here...see previous source code example */    // Attach click event to Start button    menu.queue[0].addEventListener(`click`, event => {        console.log(`Start button pressed!`)        // begin the ps5 demo!        menu.push = `main`        // new code: animate the main UI screen for the first time        // animate #primary UI block within #main container        primary.classList.remove(`hidden`)        primary.classList.add(`current`)        // animate items up        let T1 = setTimeout(nothing => {                      primary.classList.add('up');            def.classList.add('current');            // destroy this timer            clearInterval(T1)            T1 = null;        }, 500)    });    });

Что из этого вышло

Весь написанный нами код привёл к созданию такой начальной анимации:

Создаём выбираемые элементы

Мы уже создали CSS для выбираемых элементов (класс .sel).

Но он пока выглядит простовато, не так блестящ, как интерфейс PS5.

В следующем разделе мы рассмотрим возможности создания более красивого интерфейса. Мы поднимем уровень UI до профессионального внешнего вида системы навигации PlayStation 5.

Стандартная анимация выбранного или текущего элемента

Три типа анимаций текущего выбранного элемента

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

В этом разделе мы узнаем, как создать классический эффект сияющего контура кнопки PS5 с пятном света на фоне и эффектом световой волны. Ниже представлен анализ каждого типа анимации и CSS-классы, которые нам понадобятся для всех этих типов:

Анимированное гало с градиентом

Этот эффект добавляет анимированную границу, которая вращается вокруг выбранного элемента.

В CSS это можно имитировать вращением конического градиента.

Вот общая схема CSS выбираемого элемента:

.sel {    position: relative;    width: 64px;    height: 64px;    margin: 5px;    border: 2px solid #1f1f1f;    border-radius: 8px;    cursor: pointer;    transition: 400ms;    transform-style: preserve-3d;    z-index: 3;}.sel.current {    width: 100px;    height: 100px;    }.sel .under {    content:'';    position: absolute;    width: calc(100% + 8px);    height: calc(100% + 8px);    margin: -4px -4px;    background: #1f1f1f;    transform: translateZ(-2px);    border-radius: 8px;    z-index: 1;}.sel .lightwave-container {    position: relative;    width: 100%;    height: 100%;    transition: 400ms;    background: black;    transform: translateZ(-1px);    z-index: 2;    overflow: hidden;}.sel .lightwave {    position: absolute;    top: 0;    right: 0;    width: 500%;    height: 500%;        background: radial-gradient(circle at 10% 10%, rgba(72,72,72,1) 0%, rgba(0,0,0,1) 100%);    filter: blur(30px);    transform: translateZ(-1px);    z-index: 2;    overflow: hidden;}

Я пытался использовать псевдоэлементы ::after и ::before, но не смог простыми способами добиться нужных мне результатов, а их поддержка браузерами находится под вопросом; к тому же, в JavaScript нет нативных способов доступа к псевдоэлементам.


Вместо них я решил создать новый элемент .under и уменьшить его позицию по оси Z на -1 при помощи transform: translateZ(-1px); таким образом, мы отодвинули его от камеры, позволив его родительскому элементу отображаться поверх него.

Возможно, также понадобится добавить родительским элементам, идентифицируемым по .sel, свойство transform-style: preserve-3d;, чтобы включить z-order в 3D-пространстве элемента.

В идеале нам бы хотелось сделать слой .under родителем элемента и создать пятно света с самим элементом кнопки внутри него. Но у трюка с translateZ приоритет выше, к тому же, именно так я начал создавать UI. Его можно переработать, но на данном этапе это необязательно.

С HTML всё достаточно просто. Важно здесь то, что теперь у нас есть новый элемент .under. Это элемент, на котором будет рендериться вращающийся конический градиент для создания тонкой сияющей границы.

.lightwave-container поможет нам реализовать эффект перемещения света при помощи overflow: hidden. .lightwave это элемент, на котором будет рендериться сам эффект, он является более крупным div, выходящим за границы кнопки и содержащим смещённый радиальный градиент.

<div id = "o0" data-id = "0" class = "sel b">    <div class = "under"></div>    <div class = "lightwave-container">        <div class = "lightwave"></div>    </div></div>

На начало марта 2021 года CSS-анимация не поддерживает градиентного вращения фона.

Чтобы обойти это затруднение, я воспользовался встроенной функцией JavaScript window.requestAnimationFrame. Она плавно анимирует свойство фона в соответствии с частотой кадров монитора, которая обычно равна 60FPS

// Continuously rotate currently selected item's gradient borderlet rotate = () => {    let currentlySelectedItem = $(`.sel.current .under`)    let lightwave = $(`.sel.current .lightwave`)    if (currentlySelectedItem) {        let deg = parseInt(selectedGradientDegree);        let colors = `#aaaaaa, black, #aaaaaa, black, #aaaaaa`;        // dynamically construct the css style property        let val = `conic-gradient(from ${deg}deg at 50% 50%, ${colors})`;        // rotate the border        currentlySelectedItem.style.background = val        // rotate lightwave        lightwave.style.transform = `rotate(${selectedGradientDegree}deg)`;        // rotate the angle        selectedGradientDegree += 0.8    }    window.requestAnimationFrame(rotate)}window.requestAnimationFrame(rotate)

Эта функция отвечает за анимирование вращающейся границы и более крупного элемента световой волны.

Парадигма Event Listener

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

Каждый экран уникален. Проще всего жёстко прописать события для каждого экрана. Это не хак, а просто код, относящийся к каждой уникальной системе навигации. Для некоторых вещей просто нет удобных решений.

Две следующие функции будут подключать и отключать события от различных экранов.

См. полный исходный код PS5.js, чтобы понять, как всё устроено в целом.

function AttachEventsFor(parentElementId) {    switch (parentElementId) {        case "system":          break;        case "main":          break;        case "browser":          break;        case "settings":          break;    }}function RemoveEventsFrom(parentElementId) {    switch (parentElementId) {        case "system":          break;        case "main":          break;        case "browser":          break;        case "settings":          break;    }}

Благодаря этому мы никогда не будем прослушивать больше событий мыши, чем у нас есть, чтобы код UX оптимально выполнялся для каждого отдельного экрана меню.

Навигация с помощью клавиатуры

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

Нам необходимо перехватывать следующие клавиши:

• Enter или Space выбирают текущий выбранный элемент.
• Left, Right, Up, Down навигация по текущему выбранному меню.
• Escape отменяет текущее меню, находящееся в очереди, и выполняет возврат к предыдущему меню.

Привязать все основные клавиши к переменным можно следующим образом:

// Map variables representing keys to ASCII codesconst [ A,B,C,D,E,F,G,H,I,J,K,L,M,N,O,P,Q,R,S,T,U,V,W,X,Y,Z ] = Array.from({ length: 26 }, (v, i) => 65 + i);const Delete = 46;const Shift = 16;const Ctrl = 17;const Alt = 18;const Left = 37;const Right = 39;const Up = 38;const Down = 40;const Enter = 13;const Return = 13;const Space = 32;const Escape = 27;

А затем создать обработчик событий клавиатуры:

function keyboard_events_main_menu(e) {    let key = e.which || e.keyCode;    if (key == Left) {        if (menu.x > 0) menu.x--    }    if (key == Right) {        if (menu.x < 3) menu.x++    }    if (key == Up) {        if (menu.y > 0) menu.y--    }    if (key == Down) {        if (menu.y < 3) menu.y++    }}

И подключить его к объекту документа:

document.body.addEventListener("keydown", keyboard_events_main_menu);

Звуковой API

Всё ещё работаю над ним

А пока вы можете скачать отсюда простую библиотеку звукового API на ванильном JS.

В детстве у меня была PlayStation 1 (PS1). Одна из первых, если не самая первая моя консоль, сильно повлиявшая на моё будущее.

Я увлёкся компьютерами благодаря тому, что играл в видеоигры и занимался их моддингом. Хотя в детстве я не был достаточно умён, чтобы модифицировать игровые консоли, мой отец с этим неплохо справлялся. Он модифицировал мою PS1, добавив на заднюю панель небольшой переключатель, позволявший запускать записанные на болванки игры. Как говорится, яблоко от яблони недалеко падает.

Перенесёмся в день сегодняшний: у меня уже нет моей первой PS1. Припоминаю, что некоторые игры перестали загружаться и я купил себе PS2. Поэтому зачем хранить старую консоль? Оказалось, это нужно из-за ностальгии и воспоминаний. Мы скучаем о том, чего больше нет.

Недавно друг подарил мне PS1. И так началось моё приключение: как мне модифицировать эту штуку?

DRM консоли Playstation 1

Если упростить, то принципы работы DRM консоли PS1 таковы:

1. Sony запекла в официальные игры PS1 строки (например, SCEA, SCEI, SCEE, или, в редких случаях, SCEW); они находятся на дорожках, которые не может воссоздать обычное устройство считывания. В этом видео и этом посте подробно рассказывается о процессе.
2. Контроллер CD-привода ищет эти строки, чтобы подтвердить официальность диска. Когда контроллер принимает решение о том, является ли диск официальным, основной процессор считывает это решение и действует соответствующим образом.
3. Если строка не найдена или повреждена, то PS1 понимает, что диск не является подлинной игрой для PS1. Однако поскольку PS1 должна учитывать ошибки считывания с диска, есть значительный коридор возможностей для того, чтобы пройти проверку подлинности.
4. Поскольку регион (A Америка, I Япония, E Европа и W комплект разработки Net Yaroze), а также подлинность записаны в одну строку, Sony убила одним выстрелом двух зайцев, реализовав разделение по регионам вместе с защитой от копирования.

Если вам нужно подробное исследование, то можно почитать посты The Old Crow, страницу документации No$PSX или этот Modchip FAQ

Принцип работы модчипов PSX заключается в электрическом препятствовании выходному сигналу, сгенерированному находящимся в приводе CD, и инъекции нового, фальшивого сигнала в микроконтроллер CD. Благодаря этому PS1 начинает верить, что любой вставленный диск является подлинным, и продолжает загрузку.

Позже Sony добавила более сложные проверки, например:

• Проверка магических строк во время самой игры, а не при запуске
• Изменение всего процесса, чтобы его было сложнее обойти простой передачей правильных строк.

Однако современные модчипы способны с этим справляться. Модчипы, работающие в условиях такой обновлённой защиты, называют stealth modchips, потому что консоль вообще не может их обнаружить.

Существующие типы модчипов

Первый модчип, ставший, так сказать, open source, был получен реверс-инжинирингом человеком по имени The Old Crow. Любопытно, что The Old Crow специализируется в электронных музыкальных синтезаторах, а не хакинге видеоигровых консолей. В каком-то смысле, от этого модчипа пошло большинство остальных модчипов. Изначально он выполнил реверс-инжиниринг коммерческого модчипа PS1, спроектированного западным инженером, работавшим в китайской компании.

Сегодня сообщество использует три основных модчипа:

• Multimode 3 (MM3)
• Mayumi v4
• PSNee

Каждый из них имеет свои плюсы и минусы, но в целом их можно описать так:

• MM3 самый распространённый модчип PS1, используемый сегодня. Его единственный недостаток заключается в том, что в нём применён встроенный генератор, который может рассинхронизоваться с генератором колебаний, находящимся в CD-приводе. В таком случае достаточно просто перезагрузить консоль, чтобы попробовать считывание заново.
• Mayumi v4 пытается использовать генератор колебаний самого CD-привода. Это снижает вероятность возникновения рассинхронизации; однако считается, что Mayumi v4 довольно сложно устанавливать.
• PSNee это модчип с открытым исходным кодом, первым автором которого был TheFrietMan. Его разработка позже была продолжена другими людьми. Похоже, он довольно неплохо работает на всех моделях Playstation 1/PSOne. Судя по коду, могу предположить, что он пытается определить, на каком этапе процесса загрузки находится PS1, чтобы начать инъекции фальшивых строк SCEX. К сожалению, PSNee сложен в установке. Схемы его установки ужасны и рядом не стоят со схемами для MM3 и Mayumi. Я создал разводку выводов Attiny45, но в конечном итоге решил работать с MM3 и Mayumi, потому что это проще.

Создание модчипа

[Прим. пер.: здесь в оригинале статьи была ссылка на страницу продажи модчипа автора на Ebay, но торговая площадка, похоже, не любит товаров такого рода, и страница уже закрыта.]

При наличии нужных инструментов создать модчип PS1 довольно просто. В этом туториале мы сосредоточимся на создании модчипов MM3 или Mayumi v4.

Хотя у меня есть Arduino, я предпочитаю использовать чипы MM3 и Mayumi, а не PSNee. Если вы хотите создать модчип PSNee, то можете воспользоваться инструкциями по прошивке файла .ino в Attiny.

Вам потребуются:

• Микрочип PIC12F508
• PICkit 3
  
  • Также скачать и установить MPLAB IPE из пакета MPLAB X IDE.
• Какие-нибудь провода и монтажная плата (breadboard) для соединения PIC с PICkit.
• HEX-коды для выбранного вами модчипа (представлены ниже).

Во многих туториалах рекомендуется PIC12C508. Это старая модель, и если у вас нет её запасов, то продолжать её использовать необязательно. HEX-коды, работающие с 12C, подходят и для 12F.

Для начала можно взглянуть на ИС и определить, какая нога за что отвечает. Нога рядом с вдавленным кружком это Pin 1. Противоположная нога это Pin 8.


Это DIP-чип. Я случайно приобрёл SOIC-8 (т.е. чип с поверхностным монтажом), поэтому мне пришлось припаять его к монтажной плате, но обычно этого можно избежать.

Можно подключить его к монтажной плате, а затем соединить с Pickit в соответствии со схемами ниже. Нужно обеспечить следующее соединение (остальные контакты пока не используются):

• PICKit 1 IC 4 (V_PP)
• PICKit 2 IC 1 (V_DD)
• PICKit 3 IC 8 (V_SS)
• PICKit 4 IC 7 (ICSPDAT)
• PICKit 5 IC 6 (ICSPCLK)

PICKit 3 слева, PIC12F508 справа.

После подсоединения чипа подключите PICKit к компьютеру и запустите MPLAB IPE. В разделе Device выберите PIC12F508.

Перейдите в Settings > Advanced Mode. По умолчанию в Advanced Mode используется пароль microchip. Не рекомендую его менять, даже не знаю, зачем вообще есть такая возможность.

Перейдите во вкладку Power слева и включите Power Target Circuit from Tool.


Вернитесь на вкладку Operate и нажмите Connect.


Скачайте соответствующий HEX-код для вашего чипа и консоли. Для каждого региона консоли он свой.

• MM3 для американских консолей
• MM3 для европейских консолей
• MM3 для японских консолей

Также при желании можно использовать Mayumi v4 на PIC12F508.

• MayumiV4 для американских консолей
• MayumiV4 для европейских консолей
• MayumiV4 для японских консолей

В файле Source выберите своей HEX-код.

Нажмите большую кнопку Program.

Вы должны увидеть нечто подобное:

2018-06-20 20:48:02 -0400 - Loading hex file. Please wait...  Loading code from /Users/kchung/Repositories/PsNeePy.wiki/hexcodes/mm3/MM3USA.HEX...  2018-06-20 20:48:03 -0400 - Hex file loaded successfully.2018-06-20 20:48:20 -0400 - Programming...Device Erased...Programming...The following memory area(s) will be programmed:  program memory: start address = 0x0, end address = 0x1e7  configuration memory  Programming/Verify complete  2018-06-20 20:48:25 -0400 - Programming complete

При желании можно нажать на кнопку Verify, чтобы убедиться в правильности прошивки. Вывод должен выглядеть примерно так:

2018-06-20 20:50:10 -0400 - Verifying...Verifying...The following memory areas(s) will be verified:  program memory: start address = 0x0, end address = 0x1ff  configuration memory  User Id MemoryVerification successful.  2018-06-20 20:50:13 -0400 - Verify complete

Далее можно припаять чип к вашей PSX в соответствии со схемами из Интернета. Лично я пользовался превосходными схемами Уильями Куэда и рекомендую их вам.

Создание нового модчипа PS1

Изучая все эти модчипы, я подумал, что было бы здорово читать код на Python вместо ассемблера и C, поэтому приступил к портированию PSNee на Python.

При помощи MicroPython и ESP8266 мы можем создать модчип, который способен дистанционно обновляться и модифицироваться через WiFi чипа ESP8266.


По сути, это самая первая PS1 с функцией WiFi!

На фотографии выше (SCPH-7501) ESP8266 находится в верхнем левом углу, его разъёмы направлены вверх. Провода подключены к разъёмам и идут под CD-приводом к монтажной плате в нижнем правом углу.

К монтажной плате подключены провода, припаянные к нужным точкам MM3 и помеченные соответствующими номерами контактов. Благодаря использованию этой монтажной платы я могу тестировать создаваемые мной модчипы. Это гораздо быстрее, чем каждый раз припаиваться к плате.

Мой модчип (названный PsNeePy) выложен на Github: https://github.com/ColdHeat/PsNeePy.

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

Чаще всего можно понять, что модчип работает (если не считать функций сокрытия от консоли), если он доходит до чёрного экрана с логотипом Playstation, поскольку это означает, что процессор посчитал игру подлинной.

Однако поскольку код основан на старой версии PSNee, стелс-функции, похоже, не работают на некоторых более новых версиях PS1.

В первую очередь я создал этот модчип как proof of concept и, скорее всего, не буду особо его поддерживать. Хоть я и не рекомендую его использовать, надеюсь, он понравится сообществу, и оно поможет совершенствовать его. Несмотря на то, что PSX уже мертва, её сообщество довольно активно.

С помощью PsNeePy можно удалённо обновлять ESP8266 по WiFi, выполнять удалённую отладку, а также производить сброс чипа. Раньше я много работал с PS1, и такой современный способ оказался довольно удобным.


Удалённое управление модчипом.

Спасибо анонимному другу за мою PS1, Sharan за ремонт моей PS1, Уильяму Куэду за превосходные схемы, AssemblerGames за качественную информацию, хоть они и не приняли меня на свой форум, а также PSXDEV за ответы на мои вопросы.

Спустя 15 лет после того, как в аркадных залах заиграла группа The Offspring, издание Retro Gamer пригласило Кенджи Канно поболтать о создании популярного гоночного франчайза Crazy Taxi (интервью было взято в 2014 году).

---

Уважаемый читатель, позвольте ввести вас в курс дела. Сегодня мы добрались до работы на такси: очень быстро и с ветерком. Благодаря сумасшедшему водителю поездка отняла у нас всего половину обычного времени. Его навыки включали умение со скрежетом просачиваться между машинами и неспособность видеть красный свет. Сильный акцент делал большую часть его болтовни непонятной, но, если честно, нас больше волновало желание не разбиться в поездке. А что мы выкрикивали!.. Таких выражений вы не услышите и в переводах Гоблина. Любой нормальный человек, прокатившийся с этим таксистом, запомнил бы номерной знак и сообщил о лихаче в полицию. Однако редакция Retro Gamer не относит себя к нормальным людям вместо этого мы просто подумали: Это было чертовски похоже на Crazy Taxi.

Для законопослушных граждан опасное вождение просто фантазия, но для Кенджи Канно простаивание в пробках стало источником вдохновения. Я немного увлекаюсь автомобилями, и однажды ездил себе в удовольствие, но застрял в пробке, рассказывает нам Канно. При этом встречная полоса была совершенно свободна! И когда я это увидел, то подумал, что есть сотни других людей, мечтающих об одном: выехать бы на встречку и добраться до места с ветерком! Это желание отбросить все правила дорожного движения стало основой игрового процесса в Crazy Taxi. Однако это был далеко не единственный из источников вдохновения Канно. В то время выходило много гоночных симуляторов. И, честно говоря, я от них устал, говорит Канно. Есть куча фильмов с автомобильными погонями. Вот я и подумал: что, если сделать игру, похожую на них, чтобы люди получали от процесса ещё больше наслаждения?

Учитывая, что гоночные симуляторы доминируют в аркадных залах, эти слова звучат просто удивительно. Погони в фильмах также вдохновили разработчиков серии Driver, которая вместе с Crazy Taxi основала поджанр гоночных игр в открытом мире. Однако Driver создана под впечатлением от классических картин про погони семидесятых годов, тогда как Crazy Taxi присущи более современные мотивы. Дизайн Канно опирался на калифорнийскую панк-рок-сцену. Хотя это и похоже на гонки, я стремился создать игру-экшен, а в них важны ритм и темп, объясняет он. Я уже подобрал музыку, которую хотел включить в свое детище. Проект создавался под неё чтобы геймплей был в одном с ней ритме.

Калифорнийский дух не ограничился саундтреком от групп The Offspring и Bad Religion. Стремление Канно к красочной и холмистой местности привело к созданию города, основанного на Сан-Франциско. Хотя это не было детальным воссозданием города, в игре легко узнать его основные достопримечательности. Я хотел больше реализма, вспоминает Канно. Чтобы это ощущение присутствовало, я решил, что в игре будут популярные места для досуга и развлечений. В Crazy Taxi пассажиры просят игрока отвезти их в такие места, как Tower Records, KFC и Pizza Hut, а также на стадион, к полицейскому участку или торговому центру.

Всё это привело к тому, что после выхода в 1999 году Crazy Taxi стала хитом в аркадных залах. Игроки были очарованы потрясающими визуальными эффектами, трюками и демонстрационной заставкой, которая предвещала, что их ждёт весёлое развлечение. Ещё в игре есть захватывающая игровая механика: опасное вождение не просто поощряется, а вознаграждается, поскольку игрок получает бонусы за уклонения от столкновений, заносы и прыжки. Хотя пункт назначения пассажира неизвестен до тех пор, пока вы его не подберёте, цветной значок над головой вашего потенциального клиента предупреждает о расстоянии и сложности путешествия. И это важно, поскольку быстрая поездка добавляет игроку дополнительное время на таймере.

Добившись успеха в аркадных залах, Sega поспешила выпустить игру на Dreamcast. И хотя аркадные автоматы были построены на базе Sega NAOMI (по сути, аналога Dreamcast), при портировании возникли сложности из-за размера города. В аркадной версии открытый мир не был проблемой, потому что у NAOMI были загрузки с картриджа и вдвое больше оперативной памяти, чем у консоли. Чтобы преодолеть ограничения Dreamcast, команде Канно пришлось запрограммировать метод потоковой передачи данных о городе с диска прямо во время игры. И эти усилия стоили того, поскольку версия для приставки оказалась практически неотличимой от аркадной.

Crazy Taxi для Dreamcast не только считается идеальным портом, но и включает в себя много дополнений. Наиболее заметным их них стал режим Original Mode, который позволяет игрокам наслаждаться новым городом с извилистыми улицами и трамвайными путями. Также имелся Crazy Box Mode набор мини-игр, в которых такси сбивает кегли в боулинге или лопает воздушные шары. Канно поручил команде самостоятельно обдумать концепцию мини-игр в свободное время, чтобы затем собраться в офисе и отобрать лучшие идеи. Мы рассмотрели различные элементы игры, за выполнение которых игрок мог получить оценку. Например, дрифт, вспоминает Канно, подчеркивая роль Crazy Box Mode в обучении геймеров продвинутым техникам. Это режим, в который ты просто играешь и получаешь удовольствие. Но его можно использовать и в качестве практики.

Версия Crazy Taxi для Dreamcast, выпущенная в начале 2000 года, была тепло принята игровыми изданиями, отметившими отличное качества порта. Удивительно, но Канно не был в курсе этих хвалебных отзывов. На самом деле я даже не знал, что к игре так отнеслись, ответил он. Я думаю, что основная причина успеха заключалась в следующем: мы предлагали игрокам то, чего не могли предложить другие проекты того времени. Геймеры с восторгом приняли игру, раскупив более 1 миллиона копий.

Однако финансовые проблемы Sega привели к тому, что всего через год компания ушла с консольного рынка, перестав выпускать игры эксклюзивно для своей провальной консоли. Acclaim лицензировала Craxy Taxi и разработала версии для PlayStation 2 и GameCube. А Sega в это время заключила контракт со студией Strangelite на разработку версии для ПК. Ни один из портов не обрёл такой любви критиков, как Dreamcast-версия, однако версия для PlayStation 2 в конечном итоге превзошла продажи оригинала, хоть и не намного. Закончив работу над портом для Dreamcast, команда Канно из студии Hitmaker переключилась на создание продолжения.

Основная формула вождения без правил, чтобы доставить клиентов к месту назначения, не изменилась, но в Crazy Taxi 2 были представлены четыре новых героя и две новые карты. Эти локации, основанные на Нью-Йорке, представляют собой плотную городскую среду с небоскрёбами, тогда как местность стала менее холмистой. Новый дизайн был частью плана команды, чтобы предоставить игроку новые ощущения от вождения. Первая часть являлась линейной игрой, основанной на движении по полосам, и вы могли избежать столкновения, просто увернувшись влево или вправо. Так что в некоторым смысле это была почти двухмерная игра, объясняет Канно. В Crazy Taxi 2 мы хотели больше трёхмерного дизайна, и Crazy Hop это результат того, чего мы пытались достичь.

Безумный прыжок (Crazy Hop) это новая способность, представленная в Crazy Taxi 2, которая позволяет такси прыгать. Хотя в локациях Around Apple и Small Apple не так много холмов, разработчики восполнили это эстакадами и трамплинами на крышах, что позволило игрокам с быстрой реакцией сократить маршрут. Более того, новые мини-игры в режиме Crazy Pyramid Mode также используют новую механику. Еще в игре появились группы пассажиров. Теперь в ваше такси могут сесть до четырёх человек, каждый из которых направляется в разный пункт назначения. Ограничение по времени при этом довольно жёсткое, но опытные игроки могут заработать сумасшедшие деньги помимо платы за проезд, вы получаете множитель чаевых за каждого пассажира.

Crazy Taxi 2, вышедшая в середине 2001 года, тоже получила хорошие отзывы, но не достигла такого же уровня оценок, как её предшественница. Критики отметили безумный экшен, как в оригинальной игре, и ещё больше треков группы The Offspring, но посчитали, что игра практически идентична оригиналу визуально и совсем незначительно отличается по части геймплея. По факту, самое серьёзное изменение в игровом процессе стало самым спорным. Некоторым игрокам это не понравилось, другие прониклись новой механикой, то есть реакция получилась неоднозначной, объясняет Канно, рассуждая о механике безумного прыжка. Для многих острые ощущения при уклонении от столкновений пропали с появлением возможности перепрыгивать через эти преграды. Несмотря на неоднозначный приём, безумный прыжок остался и в третьей части серии.

Crazy Taxi 3 стала одним из первых эксклюзивов Sega для консоли от Microsoft Xbox. Выбор платформы был довольно странным, ведь Xbox являлась первой приставкой этой корпорации. Более того, Crazy Taxi уже успешно продавалась на PlayStation 2. Канно рассказал нам, что на такое решение повлиял энтузиазм со стороны американской компании: Мы разговаривали с Microsoft о серии Crazy Taxi, и им действительно нравился этот проект!

Ранние планы Crazy Taxi 3 были ещё более амбициозными, чем Crazy Taxi 2. В интервью с Хисао Огучи, который работал продюсером первых двух игр, упоминалось, что команда экспериментировала с мультиплеером, но в конечном итоге от него отказалась. Также планировалась смена дня и ночи, чтобы маршруты пассажиров менялись в течение суток. Команда даже решила изучить местность вживую, съездив в ранее добавленные в игру города такие, как Нью-Йорк. Я не хотел ехать, рассказывает Канно о поездке. Однако наш дизайнер там побывал, и очень здорово, что у него был жёсткий график. Ровно за неделю до терракта 9/11 он находился в одном из этих зданий. Немного жутковато, правда?

К сожалению, большинство задумок так и не попало в игру. Вы и сами знаете, что в процессе разработки приходится отбрасывать желание воплотить все идеи в угоду срокам, которые вам отвели для выполнения этих задач, отвечает Канно, когда его спрашивают о выброшенных наработках. У нас было ограниченное количество времени, это правда: некоторые вещи мы хотели сделать, но просто не успевали. В итоге такой цейтнот сделали Crazy Taxi 3 самой слабой из трилогии с точки зрения игрового дизайна.

Финальная версия игры стала своего рода сборником прошлых частей серии, хоть и со значительными дополнениями. В игре есть локация West Coast из первой части с некоторыми новыми областями, предназначенными для безумного прыжка. Присутствует и Small Apple из сиквела, но в ночном сеттинге. Единственной новой картой Crazy Taxi 3 стала Glitter Oasis тематический район Лас-Вегаса в ночное время, в котором игрок может насладиться яркими огнями города и окраинами Большого каньона. В игру были добавлены четыре новых героя и восемь из прошлых частей. А в режиме Crazy X Mode появились новые мини-игры.

Crazy Taxi 3 вышла в середине 2002 года и получила сдержанные оценки от критиков. Им по-прежнему нравилась основная механика игры, но все издания были едины во мнении, что здесь недостаточно нового контента. Также отмечали плохое техническое исполнение: были проблемы с расстоянием прорисовки и тормозами, особенно на локации Glitter Oasis. ПК-версия вышла в 2004 году за неё вновь отвечала студия Strangelite, и она оказалась лишь немного лучше. Но зато Crazy Taxi 3 удалось вернуть в аркадные залы. Sega выпустила автомат в 2003 году: он был построен на плате Chihiro, которая начинкой походила на Xbox. Канно не усмотрел в этом ничего необычного: Это казалось правильным решением: эй, если мы вернём игру в аркады, наши потребители будут счастливы.

В 2003 году THQ приобрела права и выпустила версию Crazy Taxi для консоли Game Boy Advance. Crazy Taxi: Catch A Ride, разработанная студией Graphic State Games, оказалась неудобной для портативной системы. Как и другие попытки создания трёхмерных гоночных игр на этой консоли, проект ужасно выглядел, страдал от низкой частоты кадров и быстро расходовал заряд батареи. Позже, в том же году, серия попала в новости из-за судебного процесса о нарушении авторских прав Sega подала в суд на Electronic Arts, Fox Interactive и Radical Entertainment. Причиной стала игра 2001 году The Simpsons: Road Rage, которая была очень похожа на Crazy Taxi. Иск был урегулирован во внесудебном порядке за сумму, которая не разглашалась.

В последующие годы франчайз Crazy Taxi стал для Sega способом заработать на ностальгии. Crazy Taxi: Fare Wars 2007 года был сборником первых двух игр для PSP. Несмотря на то, что из игры вырезали большую часть музыки и сетей фастфуда, она выделялась многопользовательским режимом. Оригинальные части Crazy Taxi позже выходили на Xbox 360, PlayStation 3 и PC, но с тем же отсутствием контента. Зато в этих версиях есть возможность слушать собственную музыку, так что вернуть оригинальный саундтрек не будет проблемой. В версиях для iOS и Android имеется оригинальный саундтрек, но нет сетей фастфуда.

Последней игрой в серии (на момент интервью) стала Crazy Taxi: City Rush бесплатная мобильная игра, которая сочетает в себе дух серии с форматом раннера. Хоть Crazy Taxi и казуальная игра, но в ней есть шарм и притягательность, которые делают её захватывающей, говорит Канно о решении развить серию в этом новом направлении. Поскольку мобильные устройства так широко распространены, мы подумали, что они станут идеальной платформой для проекта. Преобразование было выполнено Hardlight британской студией Sega, которая специализируется на играх для мобильных платформ. Это решение Канно объясняет большой популярностью серии на Западе.

Хотя мобильная игра и относится к жанру раннеров, в ней есть некоторые характерные для Crazy Taxi механики. Например, игроки по-прежнему получают бонус Crazy Through за уклонение от другого транспорта. Но аутентичность механики игры не является целью для Канно, который больше стремится сохранить дух серии. По его словам: Дело не в автомобилях, технических деталях или механике, а в том, похоже ли это на Crazy Taxi?. City Rush также привносит новые элементы игрового процесса, такие, как апгрейд такси.

Современный подход совпадает со взглядами Канно на игры, поскольку он ориентирован на будущее. Это стало наиболее очевидно, когда мы спросили его, какими достижениями он гордится. Честно говоря, во всей оригинальной трилогии нет ничего, чем я горжусь, таков его ответ. Вы, вероятно, берёте интервью у многих людей, и для меня похвально, что вы сыграли в нашу игру и она вам настолько понравилась. Однако для меня, как создателя, важнее всего то, что будет с проектом дальше.

Итак, Crazy Taxi оставила значимый след в игровой истории. И спустя два десятка лет франчайз привлекает внимание геймеров. Даже Канно испытал последствия популярности игры на собственном опыте: Однажды я отправился в отпуск, в Лас-Вегас, и мне повезло сесть к таксисту, который ехал на головокружительной скорости, чтобы доставить меня к месту назначения. А потом, когда я выходил из машины, он выдал: Я сумасшедшее такси! Но он даже не знал, кто я такой! Это был просто безумный таксист!

Мы надеемся, что Канно вознаградил его бонусом за скорость, а если хотите больше историй про разные игры, то почитайте другие материалы в профиле.

---

Статью взял из 130 номера журнала Retro Gamer.

Представленная в 1999 году консоль PlayStation 2 была способна воспроизводить практически все игры с PlayStation 1 и даже поддерживала карты памяти и контроллеры первой модели. Но это не первая приставка с поддержкой обратной совместимости. К Sega Genesis выходил адаптер Power Base Converter, позволяющий запускать игры с Master System. А ещё более ранняя Atari 7800 запускала почти все картриджи Atari 2600, и это первая консоль с поддержкой такой функции.

Atari 7800 и Sega Genesis с адаптером

Но вернёмся к PS2.
Процессор ввода-вывода консоли это центральный процессор от PS1. В поздних моделях его заменили чипом с архитектурой PowerPC, а ядро PS1 эмулировалось уже программно. Таким образом некоторые игры с PS1 работают некорректно на поздних моделях PS2, если вообще запустятся.
Одной из аппаратных особенностей Playstation 2 является наличие векторных модулей VU0 и VU1. VU0 используется для трансформации полигонов, физики и других вещей, имеющих отношение к геймплею. Когда консоль работает в режиме PS1, блок реализуют поддержку оригинального контроллера GTE (Geometry Transformation Engine). В PS1 он использовался для работы с трёхмерной графикой и был размещён на одном кристалле с центральным процессором. Модуль VU1 используется для трансформации полигонов, освещения и других вычислений, связанных с визуализацией.

Sony проектировала Playstation 2 не только как эволюцию консоли, но и позаботилась о том, чтобы поддержка PS1 была реализована на уровне железа. Единственное, что эмулировалась программно, стала реализация графического процессора PS1, за которую отвечал процессор PS2 Emotion Engine. Бонусом стали новые опции в старых играх ускоренное чтение с диска и сглаживание текстур. Архитектура PS2 состояла из трёх ключевых частей: центрального процессора Emotion Engine, графического процессора Graphics Synthesizer и оперативной памяти RDRAM. Консоль стала самой продаваемой в истории, и Sony позаботилась об обратной совместимости, продвигая на рынок следующее поколение своих устройств.

Плата оригинальной PlayStation2 SCPH-10000

В 2005 году на выставке E3 компания представила PlayStation 3 и объявила, что та будет совместима с играми PS1 и PS2. Ранние модели содержат чипы от PS2, включая Emotion Engine, Graphics Synthesizer и память RDRAM. Эти микросхемы были припаяны непосредственно к материнской плате, копируя оборудование PS2. Но здесь также использовалась эмуляция. Реализация ввода-вывода и обработка звука не были аппаратными, поэтому эмуляция PS1 производилась программно. За обе функции отвечал процессор Cell.

Благодаря аппаратной эмуляции PS2 на вторичном рынке до сих пор пользуются спросом модели PS3 CECH A и B. Но их трудно найти, поскольку устройства крайне ненадёжны. Можно столкнуться с жёлтым огнём смерти и проблемами перегрева, также привод быстро выходит из строя.

Фотографии платы PS3 и кристалла Cell: Emotion Engine, Graphics Synthesizer и память RDRAM находятся на материнской плате, а вся остальная архитектура эмулируется SPE-ядрами процессора

В 2006 году Sony выпустила прошивку 3.0 для карманной консоли PSP. Это добавило обратную совместимость PS1. И снова эмуляцию реализовали должным образом. Портативная система была построена на процессоре MIPS R4000, прямом наследнике MIPS R3000 с PS1, что позволяло запускать игры от старой консоли с хорошей производительностью. Добавление новых функций стимулировало пользователей обновлять прошивку. Таким образом исправляли дыры в безопасности. Была постоянная борьба между компанией и хакерами. Новая прошивка позволит играть в последние игры и получить доступ к каталогу PS1. А компания избавиться от уязвимости, с помощью которой можно запускать пиратские ромы и ставить свои прошивки. Но хакеры найдут новую брешь и вынудят Sony обновить ПО.

В дальнейшем компания меняет направление, сосредоточившись на текущих и будущих играх.
Причиной высокой стоимости консолей PS3 была, в том числе, аппаратная поддержка PS2. Это означало, что Sony не зарабатывает на продаже консолей. Для экономии архитектуру пересмотрели, убрав Emotion Engine и память RDRAM, но сохранили чип Graphics Synthesizer. Emotion Engine стал эмулироваться программно. Эту задачу повесили на физический ускоритель PS3, а все остальные SPE-ядра будут эмулировать оставшееся оборудование.

В поздних моделях PS3 за эмуляцию отвечал только процессор Cell

В Slim-версии консоли обратную совместимость полностью вырезали, отказавшись от чипа Graphics Synthesizer и программной эмуляции. Это снизило расходы на изготовлении устройств, что было важно для Sony, так как компания проигрывала битву с Microsoft Xbox 360 лидировал на рынке.
Sony вернёт поддержку PS2 на PS3, но уже через цифровой магазин PlayStation Store. Раздел классические хиты предложит около 70 игр. Это полностью программная эмуляция, за неё отвечает центральное и SPE-ядра процессора Cell. Несмотря низкую совместимость, эмулятор работает хорошо и в некоторых случаях предлагает лучшую производительность по сравнению с исходным оборудованием.

Коллекции классических игр в магазине PSN на PS3 и PS4

Последняя портативка Sony PS Vita поддерживает программную эмуляцию PSP с высоким уровнем совместимости. Игры для PSP доступны через магазин PSN.

В 2013 году вышла PlayStation 4 без функции обратной совместимости. Многих оставило в недоумении отсутствие поддержки игр с PS3. Причиной стала сложность архитектуры процессора Cell. Sony не стала пытаться эмулировать её на новых консолях, сосредоточившись на ремастеринге игр.

В 2015 году компания официально подтвердила, что игры для PS2 выйдут на PS4. К сожалению, вы не сможете воспроизвести диск от PS2, вставив его в консоль. В цифровом магазине PSN добавили раздел для покупки игр из специальной коллекции. И многих это разочаровало.

В классику PS2 добавили трофеи, но к старым играм нас тянет из-за ностальгии, и трофихантеры это уже другая прослойка геймеров.

В 2017 году генеральный директор PlayStation Джим Райан заявил, что компания не заинтересована в поддержке классических игр, сказав, что это одна из тех функций, которые очень востребованы, но на самом деле мало кем используются.

В преддверии запуска PS5 Sony заявила об обратной совместимости большинства игр с PS4, включая чтение дисков. На момент написания материала, я не нашёл информации про поддержку более ранних поколений. Понятно, что аппаратное обеспечение на это способно, а с современными технологиями ИИ и нейросетей возможно масштабировать и реконструировать картинку. То есть старые игры могут отлично смотреться даже на 4K-телевизоре.

В ближайший год компания будет занята обратной совместимостью игр с PS4, дабы заполнить окно перед выходом новых игр. С первых поколений будут доступны только классические хиты через магазин PSN.

Вывод

Можно добиться программной эмуляции, но придётся работать с исходным кодом каждой игры. Гораздо проще скопировать оборудование, выпустив новые ревизии старых консолей. Но мало кто станет делать даунгрейд гостиной, возвращая кинескопный телевизор. Большинство хочет играть на 4К-телевизорах с объёмным звуком. Но эти консоли и игры не заточены под 4К и такой звук нельзя просто припаять HDMI и оптический аудиовыход, а доработку игр отдать ИИ и нейросетям. Придётся подключать команду профессионалов. Поэтому единственный способ это ремастеры и ремейки для современного железа.

---

Для написания статьи использовались следующие материалы:

А.А. Ярошевич Процессор Cell от фирмы IBM
Статьи с Википедии: PlayStation 1, PlayStation 2, PlayStation 3, PlayStation Portable, PlayStation Vita.
Видео блогера Modern Vintage Gamer

Под катом представлена сводная таблица по играм, представленным на презентации Sony PlayStation 5 The Future Of Gaming. Таблица пытается ответить на вопросы:

• какие игры стоит ждать на старте продаж новой консоли (в конце 2020 года)
• какие игры подвезут в первые годы эксплуатации (2021, 2022)
• какие из игр будут эксклюзивными

Полный плейлист с презентации: https://www.youtube.com/playlist?list=PLol_ykYs3OQ6wqyFtBZQl3IkPF0jYD4JV

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