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

Я взял на себя смелость и создал локализацию игрового интерфейса движка (файл template\localize.rpy) а также перевёл на русский демонстрацию. Всё это согласованно с создателем движка и включено в распространяемый архив, доступный с [url="http://www.renpy.org/wiki/renpy/rus" target="_blank" rel="nofollow">Русской Странички движка Ren'Py

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

Спойлер

(не ждите ничего сверхъестественного. Сделана на скорую руку, только как пример. Приведённая в игре информация может быть предметом дискуссии. Если считаете, что она неточна -- милости прошу.)

 

От всей души надеюсь, что вас это заинтересует.

И помните, теперь судьба визуальных новелл на русском и в ваших руках!

 

ЗЫ. ОГРОМНАЯ просьба: протестируйте демо и файл локализации на предмет очепяток и отпишитесь сюда. Пожалуйста!

Изменено 3 апреля, 200817 г. пользователем Гость (смотреть историю редактирования)

Размеры кнопок могут быть любыми - лишь бы все уместились на экране. Кнопку "возврат" можно сделать при помощи 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"

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

Размеры кнопок могут быть любыми - лишь бы все уместились на экране. Кнопку "возврат" можно сделать при помощи 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 сентября, 201212 г. пользователем Helen Shwiger (смотреть историю редактирования)

Все так.

Сетка должна быть заполнена полностью - это так и задумано в Рен'пи. Если ее заполнить нечем, то заполняют "пустым местом" - 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".

В вашем примере "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 сентября, 201212 г. пользователем Helen Shwiger (смотреть историю редактирования)

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)

 

 

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

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

 

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

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

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

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

Кнопка галереи сделана таким образом, что для правильного позиционирования рамку необходимо сдвинуть вправо на 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"

 

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

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

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

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

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) 

Это снова я.

 

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

 

В 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 сентября, 201212 г. пользователем Helen Shwiger (смотреть историю редактирования)

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

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

 

Активные точки 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)

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

 

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

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

 

Помогло)

 

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

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

Дело в том, что вы поместили ваш 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 сентября, 201212 г. пользователем Алекс__ (смотреть историю редактирования)

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

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

 

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

 

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

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

 

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

 

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

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

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

 

Вот

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

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

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)

 

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

 

Ура!

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

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

Изменено 22 сентября, 201212 г. пользователем tynmax111 (смотреть историю редактирования)

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

 

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

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

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

 

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

Not bad.

Интересно можно ли как-то поставить видео перед запуском стартового меню не используя лаунчеры?

Изменено 25 сентября, 201212 г. пользователем tynmax111 (смотреть историю редактирования)

Не понял что такое "лаунчеры", но:

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

- можно сделать splashscreen - метка, код в которой запускается перед главным меню при первом запуске игры http://www.renpy.org/wiki/renpy/doc/cookbook/Splashscreen_Effect (код этой метки должен заканчиваться командой return).

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