DESIGN.md

Фон, цвет, картинки в Wonder

Не забудьте сначала установить формат Wonder - все правила действуют в нем.

Все задается через CSS (таблицы стилей). В шаблоне Wonder существует три глобальных селектора:

• body - для общего фона всей страницы в браузере и глобальных настроек
• .page - для видимых границ игры
• .text - для оформления текстового блока

Кроме этого, в каждой локации у body ставится id по имени локации в Twine (к примеру, startGame или gameOver или goblinFight). Это позволяет настраивать ВСЕ отдельно под каждую локацию - менять картинки, цвет фона и вообще все, что угодно.

Пример таблицы стилей из формата Castle Template:

 body {
    background: black;
 }

 .text {
    background: beige;
    padding: 12px;
    margin-top: 400px;
 }

.page {
    background: url(img/image-castle-web.jpg) no-repeat;
    background-size: cover; 
 }

Куда вставлять

В Twine кликните на названии игры в её редакторе и выберите "Редактировать таблицу стилей";

И вставляйте туда правила - вроде тех, что описаны ниже.

Рецепты

Как поменять общий цвет фон и шрифта игры - используем правило body:

body{
    background: #e2d29f;  /*  это цвет фона */
    color: #152c3f;       /*  это цвет шрифта */  
}

Как поменять размер шрифта во всей игре - используем селектор body:

body{
    font-size: 32px;  /*  это размер шрифта */
}

Как добавить фоновую картинку для всей игры - используем селектор body:

 body {
     background: url(img/image-castle-web.jpg);
  }

Внимание! Все картинки будут видны только после экспорта (публикации) игры в папку, в которой есть вложенная папка img. В этот img надо складывать все картинки, которые вы хотите использовать в игре.

По умолчанию фоновые картинки повторяются, как обои. Если это не нужно, пишем no-repeat в конце правила:

 body {
     background: url(img/image-castle-web.jpg) no-repeat;
  }

Как добавить общую картинку для всех локаций