Офтоп Максим Чингин
821

Как я создавал свою RGG, а получил совсем другое

Логотип специально для DTF
В закладки

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

Вступление

Предупрежу сразу, возможно история получится скомканной и не до конца развёрнутой, но я думаю, что расскажу всё что происходило во время разработки и запуска этого проекта.

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

Я надеюсь вас заинтересует моё испытание. Приятного чтения!

Начало

Пару лет назад, я уже видел и слышал аббревиатуру RGG. Но тогда я как-то не придал её значение. И вот, примерно, месяц назад я снова наткнулся на это название.

Retro Game Gauntlet. Итак, это челлендж, придуманный анонимусами с Форчана, запущенный примерно весной 2013. Суть челленджа в прохождении игр, которые выбирает для тебя генератор рандомных чисел. Для челленджа аноны сделали сайтик с генератором игр, списком игр для различных ретро-платформ и, собственно, список самих платформ для прохождения.

Nuke
Запустил первый русский RGG генератор

Мне понравилась сама идея, но не понравилась реализация. На всех сайтах связанных с RGG был только простой генератор игр, который в случайном порядке выдавал игр из базы. И по большей части, игры были трешовыми. Поэтому, я решил сделать свой генератор, с адекватным интерфейсом и функционалом. На первое время, я поставил для себя такие задачи:

  • Создать генератор
  • Сделать базу данных игр
  • Сделать регистрацию пользователей
  • Отслеживать завершённые игры

Разработка

У меня уже был куплен VDS, также мне удалось купить трёх знаковый домен в зоне .ONE. Весь код на PHP + HTML + JS + CSS. База данных MySQL.

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

База игр

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

Около года назад, я наткнулся на очень любопытный сайт - RetroAchievements. Он позволяет получать достижения в ретро играх! Это очень классно, я даже прошёл парочку старых игр и как-то забросил его. И вот мой мозг почему-то заставил меня загуглить, есть ли у них API. Оказалось, что есть. И он очень и очень удобный. Но главное, можно получить список игр по платформам.

При получении специально ключа, вы можете обращаться к их API.

Параметр: GetGameList( 4 )

Возвращает список игр для определённой платформы:

  1. Mega Drive
  2. Nintendo 64
  3. SNES
  4. Gameboy
  5. Gameboy Advance
  6. NES

Их там намного больше, но для себя я решил взять только это. При обращении по тому параметру, мы получаем JSON ленту со списком игр:

Думаю рассказывать о передаваемых параметрах не стоит

В общем, я создал БД и записал туда все игры, которые только были для этих платформ.

Это была моя первая ошибка, но об этом потом.

Отлично, теперь при нажатии кнопки на форме, из БД случайным образом выбирается игра. ЕХЕЙ! Всё? Пф.

Информация об игре

Ещё есть интересный параметр: GetGameInfo( 504 )

При обращении к нему, мы получаем всю информацию по ID игры. Такую как:

  • Иконка игры
  • Boxart игры
  • Один скриншот с игры и один скриншот главного меню
  • Разработчик и издатель
  • Дата выхода

Поэтому, я сделал вывод этих данных. Это было не сложно.

Достижения

Для меня было приятно неожиданностью, что у них в API есть доступ к достижениям пользователя. И я решил, сделать у себя также! Ведь это очень и очень круто.

Существует параметр: GetUserProgress( 'Scott', '2, 3, 75' );

Если вкратце, то он возвращает статистику пользователя Scott для игр с ID 2,3 и 75. В этой статистике есть информация о том, какие достижения получил пользователь, а какие ещё нет. А ещё иконка достижений, их заголовок и описание. По итогу, я получил всё что мне нужно было, результаты будут дальше в Дизайне.

Регистрация

С регистрацией пользователя я решил не заморачиваться. Стандартные поля, такие как: Email, Логин и пароль.

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

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

По поводу разработки, я думаю всё. Там я могу много что рассказать. Но думаю пользователям это не интересно. Да и место не резиновое.

Дизайн

Тут я буду краток. Изначально, мой дизайн выглядел так:

Первоначальный дизайн страницы

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

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

А ещё, чтобы подстегнуть пользователя играть, я ввёл систему дат. На прохождение игры давалось три дня, если пользователь успевал её пройти за три дня, ему давалось дополнительно 100 очков опыта?

Что за очки опыта?

Хм. В общем, за каждое достижение дают очки опыта. При том, чем сложнее достижение, тем больше опыта дают.

------

Сейчас я хочу вернутся к базе данных игр. Помните, что я там сделал ошибку? Так вот, не у всех игр есть достижения. Ладно, с этим можно легко справится плашкой - "У этой игры нет достижений". Но проблема ещё была в том, что в базе были игры со странными названиями.

Извиняюсь за качество, фоткал на тапок.

И тогда я решил, нужно оставить только игры с достижениями. Ранее я гнался за мыслю, что ЧЕМ БОЛЬШЕ ТЕМ ЛУЧШЕ. хех.

Ещё я решил полностью сменить дизайн страницы и сделать настройку профиля. Люблю настройки)

По итогу, пользователю можно загружать: Аватарку, Фон для страницы и Фон под аватрку.

В получившимся варианте это выглядит так:

Дизайн главной страницы

Дизайн главной страницы у меня вышел просто отпадным.

Фон плавно двигается
Панель при нажатии кнопки "Ифнформация"

Бета-тест

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

  • В базу иногда добавлялись игры, которые пользователь просто пропустил
  • Ошибки в описании
  • Проблемы с загрузкой файлов
  • Начисление очков опыта
  • и многое другое

Эмуляторы

Я переписал исходники windows эмуляторов и настроил их на работу с моей системой.

На данный момент эмуляторы доступны для платформ: Windows, Lunix, Android, iOS и Raspberry Pi

Итог

По итогу у меня получилось реализовать всё что я хотел и даже больше.

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

Также бета-тестеры попросили реализовать самостоятельный выбор игры. Я его сделал, но с ограничениями. Как только пользователь пройдёт 10 игр, эта функция пропадёт.

Приятная настройка профиля и адекватный список игр.

Надеюсь я вас заинтересовал ивам понравится. Спасибо за внимание!

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Максим Чингин", "author_type": "self", "tags": [], "comments": 13, "likes": 31, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 16594, "is_wide": false, "is_ugc": true, "date": "Wed, 28 Feb 2018 14:22:06 +0300" }
{ "id": 16594, "author_id": 52199, "diff_limit": 1000, "urls": {"diff":"\/comments\/16594\/get","add":"\/comments\/16594\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/16594"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 64955, "possessions": [] }

13 комментариев 13 комм.

Популярные

По порядку

Написать комментарий...
4

Небольшие замечания по сайту:
1. Кнопка "Начать испытание" максимум нечитабельна.
2. При попадании курсора на виджет вк скролл пропадает.
3. Всплывающие на главной "%username" прошёл %game%", имхо, стоило бы оформить ссылкой на саму игру.
4. Все разделы нужно привести к одному виду, желательно с изменением внешнего вида стандартных элементов бутстрапа.
5. Решение со сдвигом интересное, но центрированный блок текста легче воспринимается, да и много места впустую пропадает.
6. contact 404
7. Рега - это отдельный филиал ада. Во-первых, нет авторизации через социалки. Во-вторых, рега на стороннем сайте. Я понимаю, что это вынужденная мера, но в таком виде её оставлять нельзя.
А так, удачи с начинанием.

Ответить
0

Спасибо)

Ответить
3

Прошу особо не пинать. Сайт понравился, редактор удобный, останусь у вас)

Если ссылки разрешены, то вот сайт: http://rgg.one
А тут мой профиль: http://rgg.one/p/UmnikOne

Ответить
0

Боюсь показаться несведущим ламером, но в retroarch банально не нашел вкладки с ачивками и логином)

Ответить
0

Вот где-то на этом моменте все и начнут отваливаться.

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

Ответить
0

Кхм. Поправлю, наверное.
Какой Windows?

Ответить
0

Win7 Pro. Локализация английская.

Ответить
0

Tintin in Tibet (gameboy) играю на medium получил ачивку за hard. На сайте не работает раздел "контакты".

Куда багрепорты слать?

Ответить
0

интересная задумка. боюсь только развивать сайт долго придется.

Ответить
–1

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

А что если ранее у меня был аккаунт на RA, теперь новый регать специально для вашего сервиса?

Ответить
0

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

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fjog" } } }, { "id": 10, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "clmf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-250597-0", "render_to": "inpage_VI-250597-0-1134314964", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=clmf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudo", "p2": "ftjf" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fzvc" } } } ]
Узнавайте новости о мостах
Санкт-Петербурга первыми
Подписаться на push-уведомления