Рецепт картинок для Twine 2

Видео от Константина Китманова

Текст на английском

Для простоты пропустим вопрос хостинга. У вас есть HTML, рядом с ним лежит картинка. Название файла картинки нужно будет писать с учётом регистра, потому что иначе оно не запустится онлайн.

Содержание

Подключить файл

Достаточно просто написать: <img src="./logo.png" width="256" height="256"> и у вас вставится картинка logo.png размером 256x256 пикселей.

SugarCube

В SugarCube есть особый тег для картинок: img.

[img[Описание|Файл.png]]
[img[$src]]
[img[Файл.png][Ссылка]]

См. документацию на английском.

Зашить картинку в HTML

Придётся потрудиться, но это всё ещё возможно. Чтобы «зашить» картинку в сам HTML файл, её надо перевести в кодировку base64 и вставить в стили:

:: UserStylesheet[stylesheet]
.base64image {
  width: 256px;
  height: 256px;
  background-image: url('data:image/png;base64…');
}

:: Start
<div class="base64image"></div>

Теперь вместо нескольких файлов у вас есть только один.

Недостаток такого подхода в том, что размер файла быстро растёт. Во-первых, в кодировке base64 файлы «весят» больше, чем исходники. Во-вторых, это напрямую замедляет загрузку: игра не запустится, пока не прогрузится полностью.

Зашить видео в HTML

Приблизительно так же можно делать даже с видео. Не стоит, но мы всё равно вам расскажем, как.

:: Start
<video autoplay controls src="data:video/mp4;base64,…"></video>