Визуальные новеллы своими руками.

Helen Shwiger · 15 сентября, 2012

Хм. Вот ещё вопросы возникли по этой части кода:

# Сетка, состоящая из кнопок.
   grid 3 3:

       xfill True
       yfill True

       # Вызываем make_button для показа каждой кнопки.
       add g.make_button("dark", "gal-dark.png", xalign=0.5, yalign=0.5)
       add g.make_button("dawn", "gal-dawn.png", xalign=0.5, yalign=0.5)
       add g.make_button("end1", "gal-end1.png", xalign=0.5, yalign=0.5)

       add g.make_button("end2", "gal-end2.png", xalign=0.5, yalign=0.5)
       add g.make_button("end3", "gal-end3.png", xalign=0.5, yalign=0.5)
       add g.make_button("end4", "gal-end4.png", xalign=0.5, yalign=0.5)

       add g.make_button("dark mary", "gal-dark_mary.png", xalign=0.5, yalign=0.5)
       add g.make_button("dawn mary", "gal-dawn_mary.png", xalign=0.5, yalign=0.5)

       # Экран, отвечающий за возврат в главное меню. Также, он может
       # перенаправлять на другой экран галереи.
       textbutton "Return" action Return() xalign 0.5 yalign 0.5

"gal-dark.png" и другие, какой они имею размер в пикселях? Что это вообще за картинки?

Как узнать, какой размер кнопок типа "возврат"?

Где размещать и какое имя давать файлу, который будет вместо закрытых картинок? Какой у него размер в пикселях?

Алекс__ · 15 сентября, 2012

Размеры кнопок могут быть любыми - лишь бы все уместились на экране. Кнопку "возврат" можно сделать при помощи textbutton'а или imagebutton'а (в последнем случае какой размер картинки нарисуете - такая кнопка и будет).

Картинка которая показывает, что кнопка заблокирована, уменьшенная картинка кнопки, активная и неактивная рамки для кнопки - все должны быть одинакового размера для одной кнопки, т.к. все эти картинки накладываются друг на друга. Размер может быть любой - кнопка уменьшится или увеличится автоматически.

Задать какие именно картинки надо использовать можно двумя способами:

1. Для каждой кнопки в отдельности (можно сделать разные рамки, разные размеры кнопок)

make_button(name, unlocked, locked=None, hover_border=None, idle_border=None, **properties)

Когда мы создаем кнопку, то после ее имени и уменьшенной картинки можем указать заблокированную картинку, активную рамку и неактивную рамку (по умолчанию последние три картинки не заданы None).

Пример кнопки, в которой указаны все картинки (background=None - убирает фон кнопки):

add g.make_button("first_button", "thumb_beach", "locked_img", "gallery_hover_img", "gallery_idle_img", xalign=0.5, yalign=0.5, background=None)

2. В случае, если для кнопки не заданы заблокированная картинка и рамки, то используются картинки заданные для всей галереи, т.о. можно задать одинаковые кртинки для всей галереи - для этого надо добавить в блок init python

g.locked_button= "locked_img"    # заблокированная кнопка
g.hover_border = "gallery_hover_img"   # активная рамка
g.idle_border = "gallery_idle_img"   # неактивная рамка

Здесь использованы не имена файлов а названия displayable'ов.

Кнопка галереи сделана таким образом, что для правильного позиционирования рамку необходимо сдвинуть вправо на 12 пикс и вниз на 1 пикс. Объявим эти displayable'ы

image locked_img:
   "gallery_locked.png"

image gallery_hover_img:
   "gallery_hover.png"
   xoffset 12 yoffset 1

image gallery_idle_img:
   "gallery_idle.png"
   xoffset 12 yoffset 1

image thumb_beach:
   "thumb_beach.jpg"

Helen Shwiger · 16 сентября, 2012

Скрытый текст

Размеры кнопок могут быть любыми - лишь бы все уместились на экране. Кнопку "возврат" можно сделать при помощи textbutton'а или imagebutton'а (в последнем случае какой размер картинки нарисуете - такая кнопка и будет).

Картинка которая показывает, что кнопка заблокирована, уменьшенная картинка кнопки, активная и неактивная рамки для кнопки - все должны быть одинакового размера для одной кнопки, т.к. все эти картинки накладываются друг на друга. Размер может быть любой - кнопка уменьшится или увеличится автоматически.
Задать какие именно картинки надо использовать можно двумя способами:
1. Для каждой кнопки в отдельности (можно сделать разные рамки, разные размеры кнопок)
make_button(name, unlocked, locked=None, hover_border=None, idle_border=None, **properties)
Когда мы создаем кнопку, то после ее имени и уменьшенной картинки можем указать заблокированную картинку, активную рамку и неактивную рамку (по умолчанию последние три картинки не заданы None).
Пример кнопки, в которой указаны все картинки (background=None - убирает фон кнопки):
add g.make_button("first_button", "thumb_beach", "locked_img", "gallery_hover_img", "gallery_idle_img", xalign=0.5, yalign=0.5, background=None)
2. В случае, если для кнопки не заданы заблокированная картинка и рамки, то используются картинки заданные для всей галереи, т.о. можно задать одинаковые кртинки для всей галереи - для этого надо добавить в блок init python
g.locked_button= "locked_img"    # заблокированная кнопка
g.hover_border = "gallery_hover_img"   # активная рамка
g.idle_border = "gallery_idle_img"   # неактивная рамка
Здесь использованы не имена файлов а названия displayable'ов.
Кнопка галереи сделана таким образом, что для правильного позиционирования рамку необходимо сдвинуть вправо на 12 пикс и вниз на 1 пикс. Объявим эти displayable'ы
image locked_img:
   "gallery_locked.png"

image gallery_hover_img:
   "gallery_hover.png"
   xoffset 12 yoffset 1

image gallery_idle_img:
   "gallery_idle.png"
   xoffset 12 yoffset 1

image thumb_beach:
   "thumb_beach.jpg"

Кажется получилось создать :3

Сейчас у меня такой тестовый код

init python:

   g = Gallery()


   g.button("logocg")
   g.image("logocg1")
   g.unlock("logocg1")

   g.button("skycg")
   g.unlock_image("skycg1")

   g.transition = dissolve

screen gallery:

   tag menu

   add "images/game_menu_screen.jpg"

   grid 3 3:

       xfill True
       yfill True

       add g.make_button("logocg", "images/old_logo1_thumbnail.png", "images/cg_locked.png", "images/old_logo1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       textbutton "Return" action Return() xalign 0.5 yalign 0.5

Выяснилось, что сетка должна быть заполнена в любом случае, иначе ренпи выдаёт ошибку, что сетка не заполнена. Пустое место можно вставить с помощью background=None, сделав там прозрачный файл и заблокировав кнопку?

С этим кодом выше, у меня галерея 3х3, все картинки закрыты заглушками cg_locked.png, но я в тестовой игре открыла skycg, сохранилась в игре и всё равно в галерее одни заглушки. Что не так? >_<

Изменено 16 сентября, 2012 пользователем Helen Shwiger (смотреть историю редактирования)

Алекс__ · 16 сентября, 2012

Все так.

Сетка должна быть заполнена полностью - это так и задумано в Рен'пи. Если ее заполнить нечем, то заполняют "пустым местом" - null

grid 1 3:

       xfill True
       yfill True

       add g.make_button("logocg", "images/old_logo1_thumbnail.png", "images/cg_locked.png", "images/old_logo1_thumbnailhover.png", xalign=0.5, yalign=0.5)
       null
       null

http://www.renpy.org...reens.html#null

background=None - устанавливает свойство (property) объекта - фон (background) равное пустому месту. В моем примере это было свойство кнопки

add g.make_button("first_button", "thumb_beach", background=None)

все картинки закрыты заглушками cg_locked.png, но я в тестовой игре открыла skycg

В вашем примере "skycg" - это название кнопки, картинка, которую должен увидеть игрок в игре названа "skycg1" (т.е. где-то в игре должно быть <show skycg1> и нужно доиграть до этого места). Тоже самое с "logocg1".

Helen Shwiger · 16 сентября, 2012

В вашем примере "skycg" - это название кнопки, картинка, которую должен увидеть игрок в игре названа "skycg1" (т.е. где-то в игре должно быть <show skycg1> и нужно доиграть до этого места). Тоже самое с "logocg1".

А, теперь понятно)

А если картинка определена вот так?

image bg sky = "images/skycg.jpg"

То надо вот так её определить в галерее?

add g.make_button("bg sky", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)

Или вот так?

add g.make_button("sky", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)

Здесь для этой картинки сделаны ещё превью и превью при наведении мышки (нашла такой вариант на форуме леммасофт).

Но там проблема такая:

По краям отступы не нужные, а при наведении, картинка смещается тоже с отступом -__-'

Изменено 16 сентября, 2012 пользователем Helen Shwiger (смотреть историю редактирования)

Алекс__ · 16 сентября, 2012

make_button(name, unlocked, locked=None, hover_border=None, idle_border=None, **properties)

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

Название картинки "bg sky" должно быть указано при объявлении кнопки.

g.button("skycg")
g.unlock_image("bg sky")
... ... ...
add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)

Про превью изображений не слышал (если ссылку дадите - почитаю). Возможно, картинки превью нужно объявить также как и рамки - со смещением.

Helen Shwiger · 16 сентября, 2012

make_button(name, unlocked, locked=None, hover_border=None, idle_border=None, **properties)
В функцию, создающую кнопку, первым аргументом указывают название ранее объявленной кнопки (названия картинок, связанных с этой кнопкой здесь не указывают).
Название картинки "bg sky" должно быть указано при объявлении кнопки.
g.button("skycg")
g.unlock_image("bg sky")
... ... ...
add g.make_button("skycg", "images/skycg1_thumbnail.png", "images/cg_locked.png", "images/skycg1_thumbnailhover.png", xalign=0.5, yalign=0.5)
Про превью изображений не слышал (если ссылку дадите - почитаю). Возможно, картинки превью нужно объявить также как и рамки - со смещением.

Вот здесь про превью с наведением.

http://lemmasoft.renai.us/forums/viewtopic.php?f=8&t=16720

Голова взрывается, если так сделать, то не будет смещения этого?

Алекс__ · 16 сентября, 2012

Ммм, давайте определимся с терминологией...))

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

https://www.animeforum.ru/index.php?showtopic=61348&st=620&p=2810174&&do=findComment&comment=2810174

Helen Shwiger · 17 сентября, 2012

Кнопка галереи сделана таким образом, что для правильного позиционирования рамку необходимо сдвинуть вправо на 12 пикс и вниз на 1 пикс. Объявим эти displayable'ы
image locked_img:
   "gallery_locked.png"

image gallery_hover_img:
   "gallery_hover.png"
   xoffset 12 yoffset 1

image gallery_idle_img:
   "gallery_idle.png"
   xoffset 12 yoffset 1

image thumb_beach:
   "thumb_beach.jpg"

Где?) Где их объявлять?) Ничего не получается, они всё равно смещаются. Можно пример с полным кодом?)

Алекс__ · 17 сентября, 2012

Где?) Где их объявлять?)

Как и любые картинки для игры (фоны, персонажи) - в самом начале кода.

Вот пример галереи из одной кнопки...))

image gallery_hover_img:
   "images/hover_border.png" 	# hover_border.png - это рамка с прозрачной серединой; размер такой же как и у "skycg1_thumbnail.png"
   xoffset 12 yoffset 1

image bg sky = "images/sky.png"   # вставьте правильное название файла

init python:

   # Этап 1. Создаем объект галереи.
   g = Gallery()

   # Этап 2. Добавляем в галерею кнопки и изображения.
   g.button("skycg")
   g.unlock_image("bg sky")

   g.transition = dissolve

   g.locked_button= ("images/cg_locked.png")
   g.hover_border = "gallery_hover_img"


screen gallery:
   tag menu

   add "images/game_menu_screen.jpg"

   grid 1 2:
       add g.make_button("skycg", "images/skycg1_thumbnail.png", xalign=0.5, yalign=0.5, background=None)
       null
       
   textbutton "Return" action Return() xalign 0.9 yalign 0.1

label start:
   scene bg sky
   "... ... ..."

В файле "screens.rpy" найдем "screen main_menu:":

screen main_menu:

   # This ensures that any other menu screen is replaced.
   tag menu

   # The background of the main menu.
   window:
       style "mm_root"

   # The main menu buttons.
   frame:
       style_group "mm"
       xalign .98
       yalign .98

       has vbox

       textbutton _("Start Game") action Start()
       textbutton _("Load Game") action ShowMenu("load")
       textbutton _("Preferences") action ShowMenu("preferences")
       textbutton _("CG") action ShowMenu("gallery")
       textbutton _("Help") action Help()
       textbutton _("Quit") action Quit(confirm=False)

Helen Shwiger · 19 сентября, 2012

Это снова я.

В общем я разобралась, как сделать в галерее превью, которое подсвечивается при наведении не рамкой, а более яркой картинкой например)

В gallery.rpy

# Здесь лучше всего заранее объявить превью при наведении курсора для всех картинок галереи
image skycg_hover:
   "back/thumbs/skycg1_thumbnailhover.png" # превью при наведении курсора для кнопки skycg.
   xoffset 12 yoffset 1

init python:

   # Создаем объект галереи.
   g = Gallery()
   
   g.button("skycg")
   g.unlock_image("bg sky")

   g.transition = dissolve
   g.locked_button= ("ui/cg_locked.png")
# Создаем экран галереи.
screen gallery:
   tag menu
   
   # Добавим фоновую картинку.
   add "back/rainbow.png"

   grid 2 2:

       xfill True
       yfill True

       null # Пустая клетка
       add g.make_button("skycg", "back/thumbs/skycg1_thumbnail.png", "ui/cg_locked.png", "skycg_hover", xalign=0.5, yalign=0.5, background=None)
       null # Пустая клетка
       null # Пустая клетка

   imagebutton: # Кнопощка возврата картинкой
               idle "ui/btn_return_idle.png"
               hover "ui/btn_return_hover.png"
               action Return() xalign 0.9 yalign 0.1

В script.rpy (хотя это можно и в той же gallery.rpy)

# Объявление картинок
image bg sky = "back/skycg1.jpg"

Выглядит вот так

http://img.by/i/eZrA.jpg

Спасибо Алексу за помощь))

---------------------------------------------------------------------

Только вот у меня почему-то появилось сразу 2 проблемы в главном меню хД

http://img.by/i/PHASy.jpg

Зелёными стрелочками показано, что картинка смещена. Фик знает, как так вышло, я никаких параметров не меняла.

И жёлтой показано, что imagemap не полностью захватывает область) А если изменить, то кнопки все съезжают криво и страшно получается)

Код такой:

screen main_menu:

   # This ensures that any other menu screen is replaced.
   tag menu

   # The background of the main menu.
   window:
       style "mm_root"

   # The main menu buttons.
   frame:
       xalign .98
       yalign .98
       imagemap:
           ground "back/main_menu_screen.png"
           hover "back/main_menu_screen_h.png"
           hotspot (614, 184, 111, 48) action Start()
           hotspot (614, 249, 129, 48) action ShowMenu("load")
           hotspot (614, 311, 130, 48) action ShowMenu("preferences")
           hotspot (614, 373, 127, 48) action ShowMenu("gallery")
           hotspot (614, 442, 121, 48) action Help()
           hotspot (614, 502, 131, 48) action Quit(confirm=False)

#init -2 python:

   # Make all the main menu buttons be the same size.
   style.mm_button.size_group = "mm"

Чтожеделать чтожеделать? :0

Изменено 19 сентября, 2012 пользователем Helen Shwiger (смотреть историю редактирования)

Алекс__ · 19 сентября, 2012

Чтожеделать чтожеделать?

"Ждать пока он снова похудеет" (ц)

Активные точки imagemap'а привязаны не к картинке, а к экрану, поэтому смещение картинки приводит к визуальному смещению активных точек.

А вот почему сместилась картинка... Попробуйте убрать frame и оставить только imagemap

screen main_menu:

   # This ensures that any other menu screen is replaced.
   tag menu

   # The background of the main menu.
   window:
       style "mm_root"

   # The main menu buttons.

   imagemap:
           ground "back/main_menu_screen.png"
           hover "back/main_menu_screen_h.png"
           hotspot (614, 184, 111, 48) action Start()
           hotspot (614, 249, 129, 48) action ShowMenu("load")
           hotspot (614, 311, 130, 48) action ShowMenu("preferences")
           hotspot (614, 373, 127, 48) action ShowMenu("gallery")
           hotspot (614, 442, 121, 48) action Help()
           hotspot (614, 502, 131, 48) action Quit(confirm=False)

Helen Shwiger · 19 сентября, 2012

"Ждать пока он снова похудеет" (ц)

Активные точки imagemap'а привязаны не к картинке, а к экрану, поэтому смещение картинки приводит к визуальному смещению активных точек.
А вот почему сместилась картинка... Попробуйте убрать frame и оставить только imagemap

Помогло)

Имиджмапы мне покоя не дают.

С помощью локейшн пикера я обвожу точно вокруг кнопки Старт, но она либо смещается сама, либо не полностью перекрывается при наведении. Либо вообще всё меню вкривь получается.

Алекс__ · 19 сентября, 2012

Дело в том, что вы поместили ваш imagemap внутрь рамки, к которой применен стиль главного меню - там предусмотрены отступы для кнопок от края рамки. Т.о. imagemap был смещен от края рамки (которая оказалась размером во весь экран). Для проверки попробуйте установить отступы в 0 пикс.

screen main_menu:

   # This ensures that any other menu screen is replaced.
   tag menu

   # The background of the main menu.
   window:
       style "mm_root"

   # The main menu buttons.
   frame:
       xalign .98
       yalign .98
       imagemap:
           ground "back/main_menu_screen.png"
           hover "back/main_menu_screen_h.png"
           hotspot (614, 184, 111, 48) action Start()
           hotspot (614, 249, 129, 48) action ShowMenu("load")
           hotspot (614, 311, 130, 48) action ShowMenu("preferences")
           hotspot (614, 373, 127, 48) action ShowMenu("gallery")
           hotspot (614, 442, 121, 48) action Help()
           hotspot (614, 502, 131, 48) action Quit(confirm=False)

#init -2 python:

   # Make all the main menu buttons be the same size.
   style.mm_button.size_group = "mm"
   style.mm_frame.left_padding = 0
   style.mm_frame.top_padding = 0

По поводу "глюков" отображения imagemap'ов - очистите постоянные данные (delete persistent в модуле запуска).

Изменено 19 сентября, 2012 пользователем Алекс__ (смотреть историю редактирования)

Helen Shwiger · 19 сентября, 2012

Дело в том, что вы поместили ваш imagemap внутрь рамки, к которой применен стиль главного меню - там предусмотрены отступы для кнопок от края рамки. Т.о. imagemap был смещен от края рамки (которая оказалась размером во весь экран). Для проверки попробуйте установить отступы в 0 пикс.
По поводу "глюков" отображения imagemap'ов - очистите постоянные данные (delete persistent в модуле запуска).

Ничего не изменилось)

Если вот здесь:

hotspot (614, 184, 111, 48) action Start()

111 отвечает за правую нижнюю точку прямоугольника, то с ней что-то не так. Потому что если значение поставить выше примерно 124, то всю меню перекорёживает. Там ей что-то мешает видимо)

Может быть в стандартном скрине главного меню, в этом месте какой-то блок/сетка?

Алекс__ · 19 сентября, 2012

По описанию сложно сказать - все должно работать правильно после удаления постоянных данных. Если сделаете дистрибутив игры (из картинок только главное меню оставьте) - можно будет посмотреть.

Helen Shwiger · 20 сентября, 2012

По описанию сложно сказать - все должно работать правильно после удаления постоянных данных. Если сделаете дистрибутив игры (из картинок только главное меню оставьте) - можно будет посмотреть.

Вот

http://www.mediafire.com/?ci538nay3tbcmfy

Алекс__ · 20 сентября, 2012

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

screen main_menu:

   # This ensures that any other menu screen is replaced.
   tag menu

   imagemap:
           ground "back/main_menu_screen.png"
           hover "back/main_menu_screen_h.png"

           hotspot (600, 184, 151, 48) action Start()
           hotspot (600, 249, 151, 48) action ShowMenu("load")
           hotspot (600, 311, 151, 48) action ShowMenu("preferences")
           hotspot (600, 373, 151, 48) action ShowMenu("gallery")
           hotspot (600, 442, 151, 48) action Help()
           hotspot (600, 502, 151, 48) action Quit(confirm=False)

Helen Shwiger · 20 сентября, 2012

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

Ура!

Всё работает наконец-то) Теперь примусь за меню настроек и диалогов да/нет, чувствую там будет бидабида хД

tynmax111 · 22 сентября, 2012

Доброго времени суток кто ни будь сталкивался с проблемой отображения окон жизни в боевой ситуации после выбора одного из вариантов действия персонажа при попытке реализовать такое пишет ошибку указывая на сам скрипт этих оконhttp://www.animespirit.ru/engine/data/emoticons/unknow.gif Изменено 22 сентября, 2012 пользователем tynmax111 (смотреть историю редактирования)

Алекс__ · 22 сентября, 2012

Наверняка проблема в коде, вызывающем эти окна.

Если вам нужен более вразумительный ответ, то приведите текст ошибки и часть кода для окон жизни и их отображения.

tynmax111 · 22 сентября, 2012

http://www.animespirit.ru/engine/data/emoticons/loool.gif ура получилось, после выноса скрипта создающего эти окна на отдельный файл.

Алекс__ · 22 сентября, 2012

http://www.animespirit.ru/engine/data/emoticons/loool.gif ура получилось, после выноса скрипта создающего эти окна на отдельный файл.

(Количество файлов никак не влияет на качество кода. Подозреваю, что проблема была в отступах - когда вы копировали часть кода в новый файл, то исправили отступы.)

Cloudz · 22 сентября, 2012

Not bad.

tynmax111 · 25 сентября, 2012

Интересно можно ли как-то поставить видео перед запуском стартового меню не используя лаунчеры? Изменено 25 сентября, 2012 пользователем tynmax111 (смотреть историю редактирования)

Визуальные новеллы своими руками.

Рекомендуемые сообщения

Топ авторов темы

Популярные дни

Топ авторов темы

Популярные дни

Популярные посты

000

Алекс__

DEMOgoT

Изображения в теме

Присоединяйтесь к обсуждению

Важная информация