Как создать сюжетную игру с помощью Javascript

Если вы не знаете Javascript или что это такое, не волнуйтесь! Вы сможете учиться по пути или даже обойтись без него вообще. Мы собираемся изучить инструмент с открытым исходным кодом для создания интерактивных историй. Шпагат(или посмотреть его интернет сайт).

Это позволяет нам создавать нелинейные истории. Это могут быть презентации, художественная литература или текстовые приключенческие игры. Короче говоря, Twine создает файл HTML со всем содержимым. Итак, это обычная веб-страница, а инструмент — конструктор. Вы можете загрузить такой «веб-сайт» в Интернете или на мобильных платформах, т. е. в любом месте, которое может анализировать HTML.

Пример нелинейного рассказа (интерактивная фантастика)

Если вас особенно интересуют игры/интерактивная фантастика, см. обширная коллекция их. Итак, какие игры возможны? Все они, поскольку мы можем добавить Javascript. Однако проще всего делать текстовые приключенческие игры. Почему? Вам не нужно ничего или много программировать. Вы добавляете истории и связываете их осмысленным образом, используя ссылки. То есть, если вы выберете «А», будет показана история «АА», если вы выберете «В», будет показана история «ВВ».

Смотрите также что ты можешь создать с инструментом из их документов.

Пример актуальной страницы Twine с историей

Создание такой страницы занимает несколько минут на сайт шпагата(это можно сделать онлайн). Вы можете добавлять Javascript, видео, музыку, изображения, настраивать стили с помощью CSS, связывать и экспериментировать. Это отличный способ начать. Далее я покажу вам другой подход, если вы привыкли программировать в любом редакторе разработчика и хотите контролировать версии.

Сначала попробуйте онлайн, особенно если ваша история/игра невелика и требует лишь небольшой пользовательской функциональности.

Зачем вам может понадобиться Javascript

Вы можете обходиться без него и чувствовать себя прекрасно. Но если у вас есть нестандартные вещи, вы будете использовать некоторые макросы и сценарии. Кто они такие? Представьте себе Twine как ядро, но у него есть разные движки, которые делают разные вещи. Он поддерживает четыре таких движка (форматы историй), чтобы сделать процесс создания более доступным. Каждая из них различается по сложности. В этой статье я буду использовать Кубик сахара.

Этот формат истории имеет много встроенных вещей, которые могут вам понадобиться. Например:

Сохранение игры, возобновление ее с сохранения.
Различные события, на которые нужно реагировать. Например, когда история рендерится, начинается рендеринг и т. д.
Макросы, т.е. полезные встроенные блоки/функции. Например, кнопки, настраиваемые ссылки, условный рендеринг, установка переменных, манипуляции с DOM и т. д.
Обработка звука.
И много других ценных вещей.

Давайте создадим простой проект, в котором мы хотим использовать пользовательские стили Javascript и CSS, но, что более важно, мы хотим иметь контроль версий! Я не использую онлайн-версию или настольную версию инструмента, потому что могу управлять историями только в виде файлов и получать их версии путем фиксации.

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

На момент написания этой статьи последнее обновление Tweego было два года назад.
Таким образом, у вас могут не быть всех функций поддерживаемых форматов историй (например, Sugarcube).

Теперь вам нужно создать папку проекта:

$ mkdir twine-project
$ cd twine-project
$ git init

Вы также можете переместить исполняемый файл Tweego в эту папку и добавить его в .gitignore

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

.gitignore
README.md
bin/
src/
├─ config.tw
├─ styles/
│ ├─ menu.css
│ ├─ main.css
├─ modules/
│ ├─ menu/
│ │ ├─ menu.tw
│ │ ├─ menu.js

в bin У вас есть исполняемый файл Tweego для создания вывода в HTML (мы доберемся до этого). Весь код, связанный с историей (игрой), находится под src папка. Tweego поставит все шпагатом(.tw), стили CSS, скрипты Javascript в один HTML. Поэтому не имеет значения, какая у вас структура проекта.

Формат шпагата

Теперь ближе к кодированию: что такое config.tw? Здесь ваш код будет в формате Twine. Взгляните на Спецификация. Вы можете назвать этот файл как хотите. Он назван config для удобочитаемости. Там указываем настройки для нашей игры:

:: StoryTitle
My first game

:: StoryData
{
  "ifid": <a serial number of your game>,
  "format": "SugarCube",
  "format-version": "2.30.0",
  "start": <a name of the story that will be shown first>
}

:: StoryAuthor
<your name if you want>

<<script>>
// in case you'll need to have 3rd-party scripts
// remove this <<script>> section at all for now
importScripts(
  '
)
<</script>>

Вам нужно сгенерировать серийный номер для вашей игры, т.е. IFID. Подробнее о том, как это сделать здесь. Но пока вы можете использовать 0000A000-A0E0-00C0-00B0-CF000E000D0E чтобы пропустить этот скучный шаг.

format сообщает Tweego, какой формат истории использовать. мы будем использовать SugarCube. format-version версия для этого формата истории, в настоящее время поддерживается 2.30.0 Только. Однако есть более новые версии (ограничение Tweego).

start это история, которая будет показана первой. Давайте создадим файл start.tw с этим содержанием:

:: StartOfMyGame

This is the first screen of my game, yay!

[[Start playing]]
[[Read about the author]]

:: здесь указывается ID вашего перехода(т.е. страницы). Это может быть что угодно, например, :: start-of-my-game или :: something like this. Теперь, когда у вас есть идентификатор, измените свой config.tw иметь:

"start": "StartOfMyGame"

После ID прохода(страницы) делайте что хотите. В нашем случае мы написали, «Это первый скрин моей игры, ура!», и он будет отображаться как обычный текст, вот и все! [[Start playing]] вещь связь на другой отрывок (страницу).

Чтобы построить это в HTML, запустите Tweego (он будет следить за изменениями файлов):

$ ./bin/tweego -w src -o ./output/index.html

Здесь мы говорим ему наблюдать за src папку и создайте выходной HTML-код в output папка как index.html. Запустите эту команду, и вы увидите вывод HTML в этой папке. Не забудьте добавить output к .gitignore. Открыть output/index.html в браузере, и вы увидите что-то вроде этого (с более темным цветом фона):

Мы создаем ссылки, но нам также необходимо создать такие страницы. Итак, нам нужно изменить start.tw:

:: StartOfMyGame

This is the first screen of my game, yay!

[[Start playing]]
[[Read about the author]]

:: Start playing
<<back>>
It's another page called "Start playing".

:: Read about the author
<<back>>
I'm the author. This is my page.

Мы добавили еще две страницы, поэтому всякий раз, когда вы нажимаете, например, «Начать воспроизведение», вы будете перенаправлены на отрывок «Начать воспроизведение»:

Здесь мы видим новую ссылку — «Назад»! <<back>> это сахарный куб макрос который перенаправляет пользователя на предыдущий проход(StartOfMyGame). Это более удобный способ сделать это, чем каждый раз сохранять историю навигации.

Мы можем создать эти два новых прохода в других файлах или создать все игровые проходы в одном файле. Это не имеет значения, потому что Tweego объединяет все файлы в один HTML-файл. Вам не нужно заботиться об импорте чего-либо!

Добавление Javascript в истории Twine

Давайте представим, что мы хотим хранить некоторую информацию о выборе игрока. Есть два подхода:

Мы можем использовать <<set>> макрос.
Мы можем использовать Javascript.

Когда используешь <<set>>:

:: StartOfMyGame

This is the first screen of my game, yay!

<<link "Start playing" "StartPlaying">>
  <<set $choice to "StartPlaying">>
<</link>>
<<link "Read about the author" "AboutTheAuthor">>
  <<set $choice to "AboutTheAuthor">>
<</link>>

:: StartPlaying
<<back>>
It's another page called "Start playing".
The choice is <<= $choice>>

:: AboutTheAuthor
<<back>>
I'm the author. This is my page.
The choice is <<= $choice>>

Несколько новых вещей здесь:

<<link>>макрос делает то же самое, что [[]], но это добавляет больше возможностей для настройки. В нашем случае мы сохранили текст ссылки, но указали другой ID перехода(StartPlaying, например). Кроме того, мы можем что-то сделать при нажатии на ссылку, например, <<set>> инструкция ниже.
<<set>> макрос хранит переменную.
<<= $choice>> макрос для оценки выражений. В нашем случае отображается $choice переменная, которую мы установили ранее.

Мы можем добиться того же, используя Javascript (однако в этом примере это кажется излишне сложным):

:: StartOfMyGame

This is the first screen of my game, yay!

<<link "Start playing" "StartPlaying">>
  <<script>>
    State.setVar('$choice', 'StartPlaying (Javascript)')
  <</script>>
<</link>>

:: StartPlaying
<<back>>
It's another page called "Start playing".
The choice is <<= $choice>>

Мы все еще делаем сценарии внутри <<link>> макрос. Но мы используем <<script>> макрос сейчас. Внутри него мы используем глобальный объект Stateметод setVar который делает то же самое, что и <<set>> в предыдущем примере.
Мы по-прежнему отображаем $choice переменная, не использующая Javascript, но мы могли бы найти этот HTML-блок с помощью jQuery (который встроен в скрипты SugarCube), а затем установить для него значение $choiceно это ненужно.

Когда вы используете Javascript, у вас есть доступ к API-интерфейсам формата истории, поэтому он более настраиваемый. Однако вы можете не столкнуться с такой сложностью в своей игре.

Это все на данный момент! Конечно, в игре есть чем заняться. Но у вас есть документация и инструменты, чтобы открывать и изучать больше самостоятельно.

Источник