Звичайно, у Twine є свої обмеження. Вона створена тільки для текстових ігор, тому до роботи над "серйозними" іграми програма не придатна. Все, що вимагає великих знань в програмуванні, краще створювати в Unity або Construct 2.0.
Intel XDK - це інтегрований набір інструментів для крос-платформної розробки додатків. Ось таке складне опис нам пропонує сам Intel, але для нас, це конвертер (з можливістю модифікації) з html в apk. Він дозволяє швидко конвертувати HTML5-додатки для пристроїв, що працюють під управлінням iOS, Android і Windows. Тут можна знайти докладну документацію по XDK. Так як розробники програми не зробили цього, я сам написав нормальну інструкцію, по завантаженню html файлу в компілятор.
1.Запустіте Intel XDK
2.Войдіте в свій обліковий запис. Якщо у вас ще її немає - зареєструйтеся.
3. На стартовому екрані можна вибрати шаблон для проекту або подивитися приклади додатків. Але це нам особливо і не потрібно!
4. На панелі Створити новий проект (Start A New Project) пройдіть по шляху Templates> Blank
Також у другій частині, я детально розповім про створення гри в Twine, з прикладами і покроковими скринами.
P.S. за традицією, став лайк, якщо вбив дракона голими руками)
Для наших цілей я використовував CLI Cordova
Невелика інструкція від мене:
1. (За потребою) Встановлюємо FAR Manager (з ним зручніше "стрибати по папках")
2. Встановлюємо CLI Cordova (докладна інструкція є в документації). Можна використовувати стандартну командний рядок (для вінди: натискаємо Win + R, у вікні пишемо cmd і буде командний рядок), або використовуємо FAR (найкраще створити окрему папку під додатки, зайти туди через фар. Командний рядок в фарі: Ctrl + O ).
Для початку необхідно завантажити та встановити Node.js. і git клієнт (посилання в документації в параграфі Установка CLI Cordova). Після цього прописуємо в фарі (у своїй новій папці):
npm install -g cordova
3. Встановлюємо Java Development Kit (JDK) і Android SDK (у мене стоїть Android Studio, в принципі нам потім в ній і працювати). Інструкція є в тій же документації в параграфі Керівництво для платформи Android (зліва в каталозі під Develop for platforms вибираємо Android). Також ось ще одна інструкція:
4. Створюємо папку для гри, заходимо в неї через фар і пишемо:
cordova create hello com.example.hello HelloWorld
замість слів hello, example і HelloWorld можна писати свої речі. наприклад
cordova create mygame com.kagasira.mygame MyNewGame
5. У нашій папці повинні створитися файли для Кордови, шукаємо всередині папку www, в якій буде файл index.html. Відкриваємо цей файл через блокнот (краще використовувати notepad ++)
7. Через фар заходимо в папку, яка була створена кордової (це важливо!) І прописуємо в командному рядку:
cordova platform add android
8. Ось тут є вибір. Можна сбілдіть проект, але я не зовсім розумію, як буде робота з сертифікатами. А так як мені вже було лінь розбиратися далі з кордової, то я пішов іншим шляхом:
9. Відкриваємо Android Studio, а там вибираємо File - New - Import Project
У открвшемся вікні шукаємо папку з грою, котороую створила Кордова, а всередині папки заходимо в platforms, вибираємо папку android і натискаємо OK (як я розумію, цю папку взагалі можна скопіпастіть в інше місце і перейменувати).
10. Після імпорту проекту (до речі, після першого імпорту, в наступні раз годі й імпортувати, а відкривати як існуючий проект) можна потестить гру через емулятор Андроїд Студіо. Інструкція по налаштуванню емулятора:
11. Потестів, все добре. потрібно білд APK: Вибираємо в андроїд студіо Build - Generate Signed APK. Тут всередині можна або створити новий сертифікат (просто ввести дані і пароль. Важливо запам'ятати як сам пароль, так і Key alias), або використовувати створений. До речі, саме питання з сертифікацією і став причиною пошуку альтернативи Intel XDK, в першу чергу відключили сервак по створенню сертифікатів.
Це поміщається в stylesheet.
Body - основне вікно в якому гра відбувається.
body <
background-image: url ( "media / img / back1.jpg") - так само як і в попередньому у мене фон бекграундом.
>
Story - тут у мене шматок відповідає за колір тексту самої історії.
#story <
color: white;
>
Теж саме тільки в меню.
# Menu-story li a color: white;
>
Меню знову, колір тексту знову.
#menu li a color: white;
Далі у мене стилі кнопок. Теж поміщати в stylesheet.
shadow text-shadow: 0.08em 0.08em 0.08em #FFF;
>
.emboss text-shadow: 0.08em 0.08em 0em #FFF;
color: black;
>
.blur color: transparent;
text-shadow: 0em 0em 0.08em #FFF;
>
.blurrier color: transparent;
text-shadow: 0em 0em 0.2em #FFF;
>
.blurrier :: selection background-color: transparent;
color: transparent;
>
.blurrier :: - moz-selection background-color: transparent;
color: transparent;
>
.smear color: transparent;
text-shadow:
0em 0em 0.02em rgba (255,255,255,0.75),
-0.2em 0em 0.5em rgba (255,255,255,0.5),
0.2em 0em 0.5em rgba (255,255,255,0.5);
>
.mirror display: inline-block;
transform: scaleX (-1);
-webkit-transform: scaleX (-1);
>
.upside-down display: inline-block;
transform: scaleY (-1);
-webkit-transform: scaleY (-1);
>
@ -webkit-keyframes fade-in-out 0%,
to
50%
>
@keyframes fade-in-out 0%,
to
50%
>
.fade-in-out text-decoration: none;
animation: fade-in-out 2s ease-in-out infinite alternate;
-webkit-animation: fade-in-out 2s ease-in-out infinite alternate;
>
@ -webkit-keyframes rumble 50% -webkit-transform: translateY (-. 2em);
transform: translateY (-. 2em)
>
>
@keyframes rumble 50% -webkit-transform: translateY (-. 2em);
transform: translateY (-. 2em)
>
>
.rumble -webkit-animation: rumble linear 0.1s 0s infinite;
animation: rumble linear 0.1s 0s infinite;
display: inline-block;
>
@ -webkit-keyframes shudder 50% -webkit-transform: translateX (0.2em);
transform: translateX (0.2em)
>
>
@keyframes shudder 50% -webkit-transform: translateX (0.2em);
transform: translateX (0.2em)
>
>
.shudder -webkit-animation: shudder linear 0.1s 0s infinite;
animation: shudder linear 0.1s 0s infinite;
display: inline-block;
>
Тепер обьясняю як викликати ці стилі тексту. У самому вікні історії. Коли пишеш текст, вставляєш потрібний варіант тобі.
@@. Pulse; Текст пульсує один раз @@
@@. Shadow; Текст має тінь @@
Тобто наприклад пишеш:
@@. Fade-in-out; тут твій текст @@
Знову доповнення для stylesheet.
Це додає кнопку. Кнопки можеш сам генерувати наприклад через css3 generator button. На будь-якому сайті.
Або можеш взяти мій код, прописати розміри в пікселях, вставити картинку.
button height: 20px;
Цей шматок відповідає у мене за колір всіх посилань. Оскільки навіть банальні переходи в історії типу [[Піти нафіг -> Нафіг]] вважаються посиланням. Раз у колір для них буде здаватися. Для посилань які ти робиш через <> Тег, треба прописувати окремо колір.
passage .link-internal color: white;
>
Мені лінь кожен раз писати ставити розмір тексту через дві верних ком '' (не плутати зі звичайним знаком ") Тому я просто прописав собі розміри для розміру шрифту. Ти можеш створити купу таких в stylesheet. Наприклад .h1 - розмір. H2 - розмір і тд.
Що б потім вставити в текст.
Залежно від заданого розміру, буде тобі і розмір тексту.
Config.history.controls = false; - відповідає за кнопку перегортання назад і вперед в слайдері. False - відключити. True - включити.
Config.saves.slots = 3; - кількість слотів для збереження гри.
StorySubtitle - підпис в меню.
StoryBanner - можна вставити банер в меню або лого гри
StoryInit - Це специфічне вікно. Потрібно для активації макросів-програм-скриптів, перед початком гри. Тобто як тільки гравець включає гру, всю що прописано в вікні активується. Я нижче поясню.
Всі ці вікна створюються окремо і не з чим не з'єднуються.
StoryMenu - це додаток до основного меню. Якщо у тебе в ролі меню, виступає основною слайдер з двома кнопками від sugarcube, то додавши в це меню розділи, наприклад
Це вікно вже з'єднується зі створюваними пунктами меню.
То вони будуть кнопками відображатися в слайдері бічному.
З приводу StoryInit.
Як я говорив, туди поміщаються скрипти, який активуються перед початком гри. Так само туди можна помістити що завгодно, що буде виконуватися на тлі, і не буде показуватися гравцеві.
У мене наприклад це програвання аудіо + ачівкі.
<
<
<
<
<
<
<
Якщо що знадобиться, звертайся.
Дивись. Твайн сам по собі це, просто середовище для створення + інтерпретатор мови.
І модулі типу цукрового куба так само на старих версіях.
У Твайн 2.х х - то пак нинішня друга версія. Вони змінили все під css3 + html5 + оновлений js і заодно змінили деякі фішки.
Наприклад в першому Твайн у них меню потрібно було створювати окремо. через tw-menu
або для цукру ui.bar.menu
Точно так же стилі і js скрипт потрібно було прописувати окремо, через створені користувачем вікна.
У другому Твайн, вони помістили ці речі всередину самої програми, що б кожному не потрібно було кожен раз створювати по-новому стилі меню і тд.
А самі короткі команди вони спростили.
наприклад замість <
ти тепер у другому Твайн просто прописуєш потрібний тобі фон, колір тексту або взагалі будь-яку іншу команду або скрипт, в стилях css або js скрипті.
А в самій грі викликаєш коммандой @@. Font; текст @@
Що набагато зручніше.