• Страница 1 из 1
  • 1
Форум о визуальных новеллах » Для разработчиков » Ren'Py » [ПЕРЕВОД] Настройка текстового поля (Перевод темы "[Tutorial] Customizing the Textbox")
[ПЕРЕВОД] Настройка текстового поля

progxaker
Дата: Понедельник, 07.10.2019, 11:51 | Сообщение # 1
Проверенный
Сообщений: 36
Награды: 2

### Настройка текстового поля(основное GUI руководство)

Содержание:
● Использование рамок
● Использование предварительно установленных изображений
● Создание текстовых полей для персонажей
● Стилизация текста
● Стилизация имён
● Иконка "Click-to-Continue"(нажми, чтобы продолжить)

---

Перед тем, как мы сможем объяснить, как настраивать диалоговые окна, вам для начала нужно  его нарисовать. Самый простой способ сделать это - сделать макет диалогового окна в вашем фоторедакторе. Сделайте так, чтобы он выглядел именно так, как вы хотите, включая текст. Даже если потребуется немного больше работы, можно воссоздать большинство макетов.

Здесь есть два пути, как вы можете сохранить ваш дизайн, который будет включён в Ren'Py:
Рамки: Создайте окно, которая будет нарезана и измерена автоматически;
Предварительно установленные изображения: Просто вставьте изображение, которое вы создали, чтобы уже иметь желаемый размер.

1. Использование рамок

Диалоговое окно, которое использует Frames(Рамки) выглядит, как углы для изображения, и потом растягивает всё, что находится между ними, чтобы соответствовать пропорциям, которые вы даете в коде.


### Чуточку знания HTML и умением пользоваться Google - даёт нам посмотреть перенесённые изображения.
### Перевод фраз и надписей: "Size of corners" - "Размер углов", "Appearance in Ren'Py(not to scale)" - "Вид в Ren'Py(не масштабируется)", "You've created a new Ren'Py game." - "Вы создали новую Ren'Py игру."

Код
style.window.background = Frame("PinkBox.png", 25, 25)


Данная строчка кода уже есть в вашем options.rpy файле, кроме файла. Измените название и размер углов с информацией изображения. Не забудьте раскомментировать код, удалив перед ним знак #.

Конечно, Ren'Py не чинит автоматически мои поля или текст для меня! Прямо из новой игры, ваше новое диалоговое окно в рамке, потребует много доработок. Почти всё, что вам нужно, уже есть для вас, но это закомментировано.

Идём в ваш options.rpy файл. Находим эти строчки кода:
Код
## Поля - это пространство вокруг окна, где фон
    ## не рисуется.

    # style.window.left_margin = 6
    # style.window.right_margin = 6
    # style.window.top_margin = 6
    # style.window.bottom_margin = 6

    ## Отступы - это пространство внутри окна, где рисуется
    ## фон.

    # style.window.left_padding = 6
    # style.window.right_padding = 6
    # style.window.top_padding = 6
    # style.window.bottom_padding = 6

    ## Это минимальная высота окна, включая поля
    ## и отступы.

    # style.window.yminimum = 250


Снова, раскомментируйте то, что будете использовать, удалив знак #.

Поле окна указывает, как далеко диалоговое окно находится от краёв экрана. Вот как выглядит наш PinkBox с большими полями (отступы не тронуты):

### Перенесённое изображение.

Отступы окна показывает, насколько далеко текст находится от краёв диалогового окна. Вот как это выглядит с большим отступом (отступ по умолчанию):

### Перенесённое изображение.

yminimum заставляет окно иметь определенное количество пикселей в высоту. Используйте его, чтобы определить, какой высоты должно быть окно всё время (но он может стать выше, если это нужно). Это важное свойство для предварительно установленных изображений диалоговых окон.

С вашей новой рамкой в Ren'Py, вы можете поиграть с отступами и полями, пока все не будет выглядеть именно так, как вы этого хотите. Метод проб и ошибок, иногда является единственным путем здесь. Чтобы упростить свою жизнь, вы можете воспользоваться функцией обновления, нажав SHIFT + R, чтобы перезагрузить игру и сразу увидеть изменения.
Автор на Lemma Soft: Aleema
Тема на Lemma Soft: тут
Перевёл: progxaker

Продолжение следует...


"Ничто не может оставаться таким же вечно. И вещи, приносящие радость и счастье, тоже. Ничто не остается неизменным." - Фурукава Нагиса, CLANNAD

Сообщение отредактировал progxaker - Понедельник, 07.10.2019, 20:29


progxaker
Дата: Понедельник, 07.10.2019, 21:19 | Сообщение # 2
Проверенный
Сообщений: 36
Награды: 2
2. Использование предварительно установленных изображений

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

Чтобы упростить это для вас, НЕ обрезайте свое изображение до диалогового окна в вашем редакторе. Вместо этого, добавьте отступы по краю (до верхней части окна), чтобы вам не приходилось изменять поля в Ren'Py. Это значит, что полученное изображение должно быть таким же широким, как и ваша игра (по умолчанию: 800 пикселя).

Просто вставьте ваше имя файла в свойство style.window.background, которое уже есть в вашем options.rpy.

Вы должны будете убедиться, что ваш yminimum установлен точно на высоту вашего изображения, и что ваш отступ изменён так, чтобы он вписывался в ваше окно (опять же, метод проб и ошибок может быть единственным способом). Установите все поля на 0. Когда вы начнете игру, вы должны увидеть своё окно! Это было легко, не так ли?


В этом примере, вы можете видеть, что окно уже имеет свои поля в самом изображении. Высота изображения 155 пикселя, поэтому я установлю свой yminimum. Я также хочу убедиться, что текст начинается с 35-го пикселя слева, поэтому значение left_padding будет равно 35, и для симметрии он будет равен значению right_padding, и убедитесь, что текст никогда не выходит из поля, поэтому bottom_padding тоже 35. Если вы хотите. Вы можете просто убедиться, что вы никогда не пишите так много!

Если вам нужно отдельное окно для имён ваших персонажей, вы можете либо сохранить имя в виде отдельного файла (рекомендуется), либо включить его в диалоговое окно как одно большое изображение. Проблема с последним заключается в том, что вам нужно будет сделать две версии одного и того же изображения: одну с рамкой для персонажа, а другую без. Потому что рассказчик (когда ни один персонаж не говорит) будет странно выглядеть с пустым полем имени, лежащим рядом.
Автор на Lemma Soft: Aleema
Тема на Lemma Soft: тут
Перевёл: progxaker

Продолжение следует...

progxaker
Дата: Вторник, 08.10.2019, 08:55 | Сообщение # 3
Проверенный
Сообщений: 36
Награды: 2
3. Создание текстовых полей для персонажей

Чтобы сделать два (или больше) отличающихся версий вашего текстового поля, поставьте тот, который вы собираетесь использовать чаще всего, по умолчанию:

Код
style.window.background = "dialoguebox.png"


А потом, когда персонажи, которых вы хотите, имеют отличное от других поле(в данном случае рассказчик, потому что это не персонаж, у которого есть имя). Вы можете использовать функцию Frame(Рамки) с этим, тоже. просто скопируйте все, что вы сделали с кодом window.background и поместите его после window_background в имени вашего персонажа (изменив имя файла):
Код
$ narrator = Character(None, window_background="dialoguebox_noname.png")


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

Если вы обнаружите, что вам нужно внести определенные корректировки в текст каждого персонажа, вы должны добавить такие свойства в call вашего персонажа:

Код
$ a = Character('Name', window_top_padding=15)
    $ b = Character('Name', what_xpos=50)
    $ c = Character('Name', who_yalign=0.5)


Важная часть этого кода, являются префиксы "window_", "what_" и "who_" . Вы можете использовать любое свойство, которое хотите, но вы должны сообщить персонажу, что вы редактируете. «window_» - это свойство, которое редактирует всё окно, аналогично тому, что вы делали для style.window. what_ редактирует текст (что говорится), а who_ редактирует имя персонажа (кто это говорит).

Чтобы сохранить вас от нажатий клавиш, вы должны отформатировать стиль текста по умолчанию, чтобы вам не приходилось копировать / вставлять свои корректировки для каждого символа.

Автор на Lemma Soft: Aleema
Тема на Lemma Soft: тут
Перевёл: progxaker

Продолжение следует...

progxaker
Дата: Вторник, 08.10.2019, 09:56 | Сообщение # 4
Проверенный
Сообщений: 36
Награды: 2
4. Стилизация текста

Чтобы отредактировать, то как выглядит ваш текст, посмотрите немного ниже в файле options.rpy следующие строки кода:
Код
## Файл содержит обычный шрифт.

    # style.default.font = "DejaVuSans.ttf"

    ## Обычный размер текста.

    # style.default.size = 22


Раскомментируйте эти строки, чтобы изменить шрифт или размер текста. Даже если он не включен в ваш файл, вы также можете изменить любой аспект стилей, который вы хотите. Вы можете изменить цвет, добавить тень или контур, если хотите. Вот пример каждого:
Код
style.default.color = "#000000" #Делает текст чёрным
    style.default.drop_shadow = [(1, 1)] #Добавляет тень на один пиксель вправо и на один пиксель вниз
    style.default.outlines = [(4, "#ff0000", 0, 0), (2, "#fff", 0, 0)] #Добавляет белую окантовку толщиной 4 пикселя, и чёрную с 2-мя
    style.default.xalign = 1.0 #Выровнять текст полностью направо


Кроме того, вы можете использовать все свойства текста, которые вы видите здесь.

Инспектор стиля:

Чтобы отредактировать определенный текст, например, имя персонажа, вам необходимо выяснить, как называется стиль этого текста. Простой способ найти стили - запустить игру и навести указатель мыши на текст, который вы хотите изменить. Нажмите клавиши SHIFT + I, и на черном экране появятся все стили и родительские стили, которые использует объект. Тот, который вы хотите, это последний стиль в списке. Если вы видите это:

### Перенесённое изображение.

Тогда вы хотите сказать say_label. Для стилей, на которые вы не можете навести курсор, можете попытаться найти их в Style Hierarchy(иерархии стилей), нажав SHIFT + D.

Теперь, когда у вас есть имя стиля, вы можете подключить его к следующей формуле:
Код
style.STYLE_NAME.PROPERTY = VALUE


STYLE_NAME(имя стиля): это имя, которое вы нашли в инспекторе стиля, например, say_label.
PROPERTY(свойство): Что вы хотите изменить в этом стиле. Опять же, вы можете найти все виды недвижимости здесь.
VALUE(значение): Независимо от того, для чего вы устанавливаете свойство стиля. Числа размеров, строки (то, что в кавычках) для имен файлов, шестнадцатеричные значения для цветов и т. д.

Так что, если мы хотим изменить say_label, чтобы он был другим шрифтом, я поместил бы это в нижней части моего options.rpy:
Код
style.say_label.font = "myfont.tff"


Убедитесь, что мой шрифт находится на верхнем уровне моей папки.

Автор на Lemma Soft: Aleema
Тема на Lemma Soft: тут
Перевёл: progxaker

Продолжение следует...

progxaker
Дата: Вторник, 08.10.2019, 13:53 | Сообщение # 5
Проверенный
Сообщений: 36
Награды: 2
5. Стилизация имён

Используя всё, что мы узнали на этой странице, мы теперь можем поместить каждый из элементов туда, где мы хотим, и заставить их выглядеть так, как мы хотим, с некоторым уважением к ограничениям Ren'Py. Есть два способа показать имена ваших персонажей: встроенные в одно диалоговое окно или иметь имя в отдельном окне от диалогового окна. По умолчанию имя встроено в одно окно. Чтобы изменить это, вам нужно вставить часть кода в текстовое поле для персонажа под названием show_two_window. Установите для него значение True и делайте это для каждого персонажа, для которого вы хотите иметь отдельное окно. По умолчанию он наследует тот же фон, что и ваше диалоговое окно.

Стили для имени и окна:
say_label
say_who_window (только, если show_two_window - True)

Чтобы изменить фон в вашем окне, вы бы сделали это точно так же, как вы делали это для диалогового окна, за исключением того, что вы заменили имя стиля на say_who_window:
Код
style.say_who_window.background = Frame("namebox.png", 15, 15)


Снова, измените размеры углов с вашим изображением, или не используйте Frame(рамку) вообще!

Используйте позиционные свойства, такие как xalign или xpos и xanchor, чтобы поместить имя в поле, которое вы создали.

6. Иконка "Click-to-Continue"(нажми, чтобы продолжить)

Интересная особенность показывать игроку значок, когда ему нужно нажать, чтобы продолжить историю. Чтобы добавить это в ваше окно, вам нужно добавить его к персонажам, которые вы хотите использовать, например, show_two_window.

Просто ссылайте изображение на имя call(вызова) в кавычках. Если вы хотите анимировать его, сначала создайте анимацию, а затем создайте ссылку на имя вызова анимации. Кроме того, в текст можно встроить индикатор CTC, расположенный сразу после последнего слова на экране, или поместить его в определенном месте на экране. Вот пример анимированного значка CTC, который расположен в углу экрана (исправлено):
Код
image ctc_animation = Animation("ctc01.png", 0.2, "ctc02.png", 0.2, xpos=0.99, ypos=0.99, xanchor=1.0, yanchor=1.0)
    $ a = Character('Name', ctc="ctc_animation", ctc_position="fixed")


Вы также можете использовать новый язык ATL для создания анимации CTC. Просто вставьте имя в кавычки. Убедитесь, что вы поместили свойство положения в изображение, если хотите, чтобы оно было зафиксировано на экране.

~~~

Собрав всё это вместе, мы можем создать новое текстовое поле, например:


Чтобы увидеть, как именно я сделал вышеупомянутый экран, вы можете скачать прикрепленный пример проекта. Вы можете использовать графику, кроме BG.
Не мой. ^^;

~~~
Файлы, которые я использовал в этом уроке, а также пример игры в действии для тех, кто изучает это:
### В оригинальной теме.

Автор на Lemma Soft: Aleema
Тема на Lemma Soft: тут
Перевёл: progxaker

Конец.
Форум о визуальных новеллах » Для разработчиков » Ren'Py » [ПЕРЕВОД] Настройка текстового поля (Перевод темы "[Tutorial] Customizing the Textbox")
  • Страница 1 из 1
  • 1
Поиск: