Урок 3: Експортиране за уеб

Експортиране за уеб

Следващата стъпка е да запазим нашата история в набор от файлове, които могат да бъдат качени някъде като уеб страница. За да направим това от Inky, изберете File, след това "Export for web...", и изберете името на вашата история. Името, което избирате, ще се използва, както за видимото заглавие на уеб страницата (така че използвайте интервали и правилна главна буква!), така и за името на папката, в която се запазва.



Когато правите промени в историята, и особено ако решите да направите промени във темата, вида и картинките (вижте по-долу), то в бъдеще трябва да избирате опцията "Export story.js only...", като запазите историята в същата папка, която вече сте генерирали, и презаписвате единствено "yourStoryName.js" (където youStoryName е примерно, което сте задали на историята си при първото експортиране в предния параграф). Това е единственият файл, който трябва да бъде актуализиран, докато променяте съдържанието на вашия Ink - останалото е част от уеб шаблона. Така че, ако след време правите промени по вида, стила, цветовете и картинките на шаблона, не искате случайно да го презапишете.



След тази стъпка вече сте готови! Можете да пропуснете всичко и да прескочите директно на Урок 6 - Качване на itch.io (предстоящ), ако желаете.

Обаче ако искате да добавите изображения, да зададете автор, да използвате тъмна тема или да си поиграете с вида и усещането на вашата история, продължете да четете!

Специални функции за уеб

ink е проектиран да бъде възможно най-фокусиран върху една задача: писане на интерактивен текст. Съпротивляваме се на претоварването на езика с допълнителни функции, за да запазим добър баланс между мощност, гъвкавост и простота.

Така че, ink-the-language няма вградени инструменти за неща като вмъкване на изображения, тъй като това зависи напълно от типа история, която правите. Ако пишете диалог за 3D игра, посочването на 2D изображение, което да се показва, вероятно няма да има смисъл.

Въпреки това, Inky предоставя някои допълнителни функции, които могат да се използват специално при запазване за уеб (от версия 0.10.0). Тези допълнителни функции използват системата за тагове на ink, която ви позволява да предоставяте специални текстови анотации за всеки ред, преди него или над него. Таговете са просто текст, който е невидим за читателя, но може да бъде прочетен от игровата система или, както е в нашия случай - от уеб шаблона.

Картинки

Ето как вмъквате изображение:


Файлът с изображението трябва да е в същата папка като останалите ви файлове или ако искате, можете да използвате релативен път като:


Но за целта ще трябва да създадете ръчно нова папка images, в която да слагате картинките си.

Можете също да добавите таг за изображение и в края на реда. Изображението винаги ще се показва над текста в играта.


(Това всъщност е защото всички тагове са свързани с определен ред от текста. Ако имате таг на един празен ред сам по себе си, реално той ще бъде свързан с текста след него.)

Изчистване на екрана

Още една функция, която е специфична за уеб шаблона на Inky, е тагът clear:


Това ще премахне всичкия текст, който е визуализиран до момента, и ще започне отново от началото на страницата. Уверете се, че вмъквате това директно след избор! Ако го вмъкнете по средата на раздел с текст, горната част ще бъде изчистена, преди да бъде видяна.

Глобални тагове: тъмна тема и автор

За да използвате тъмната тема, просто поставете това в самото начало на вашия ink файл:


Уеб шаблонът е в състояние да прочете това като глобален таг и има вграден стил за промяна на темата. (Техническо пояснение - той използва "dark" като клас за цялата страница. Когато видите употреба на селекторав CSS файла, това са специфичните за тъмната тема замествания.)

За да зададете името на автора, поставете това в началото на вашия ink файл:


Това ще бъде намерено от уеб шаблона на inky и използвано, за да вмъкне бележка под самото заглавие.

Персонализирани CSS класове

Можете също така да персонализирате напълно външния вид на отделни редове текст, използвайки CSS класове. Във вашия ink, добавете таг към ред като този:


Можете след това да кажете на браузъра как изглежда класът "опасност", като добавите следното към вашия style.css:


Пример за персонализиран CSS: Край

Шаблонът Inky съдържа вграден стил за клас, наречен .end в случай, че искате да покажете думата Край в центриран / удебелен стил. За да го използвате, поставете следното в края на историята си:


Примерът накратко може да се обясни така:

• Първият ред прилага CSS класа "end" към текста.
• Вторият ред е самият текст.
• Последният ред казва на Ink, че целево сме завършили историята, а не е останал висящ край по погрешка.

За да промените стила на CSS класа end (например искате по-голям шрифт или друг цвят), потърсете .end в долната част на CSS файла.

Рестартиране на историята

Шаблонът за уеб Inky има още една вградена функция. Ако вмъкнете таг # RESTART, той незабавно ще изчисти текущия напредък на историята (включително всичката история на изборите на играча и всички променливи) и ще започне отново от началото. Тъй като е незабавен, вероятно ще искате да го поставите зад избор, като този:


Отклонениетоникога няма да бъде достигнато, но е добра практика да присъства: все пак ще искате да го имате там, за да предотвратите Inky да се оплаква, че имате висящ край.

Превод от официалния tutorial на Ink.

В следващия урок ще разгледаме още начини да придадем уникален вид на уеб страницата ни. За да видите примерите в действие задължително си свалете и отворете в Inky историите публикувани в темата с Материали: knigi-igri.bg/forums/ink-workshop/6297