马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。
您需要 登录 才可以下载或查看，没有账号？立即注册
×
本帖最后由 BuErShen 于 2019-4-25 16:45 编辑
Ren'Py引擎从入门到放弃(支线1·续)——自定义开场画面
天若有情天亦老，我为长者续……
嗯咳，说错了……世上无难事，只要肯放弃。
上次的支线1里有一小部分，在这篇里补完。内容少篇幅短，两三分钟就看完。
本篇内容将涉及自定义 界面(screen)、可视组件imagemap、变换(transform) 和 热点(hotspot) 等概念。请善用官方文档的搜索功能，能解决大部分疑问。
本篇唯一的问题：如何自定义一个“点击开始”的界面？
答：在显示完 LOGO和开场动画之后，很多游戏或者 VN会出现一个特殊画面，画面上显示 “点击××键开始”。用户使用鼠标获取其他设备点击之后，可能会出现主菜单(main menu)，也可能会进入某个序章剧情。
基本的设计思路有两个：一是自定义一个界面，完成显示和菜单功能；或者修改原来的main_menu界面。这里选用前者，原因是——修改别人的代码比较烦人……
首先是自定义一个界面(screen)：
[RenPy] 纯文本查看 复制代码 # 自定义界面(screen)
screen press_to_start():
# 这里的pass只是占位，后面会修改为其他内容
pass
一般习惯上，会将界面(screen)的定义都放在 screens.rpy文件中，或者新建一个 rpy文件专门写自定义的界面。
接着是在这个界面上添加图像(image)。这里添加的图像有两个，分别是背景图和“点击继续”的文字。背景图当然是需要图片的，“点击继续”可以使用 文本(text) 生成也可以使用图片(此处暂时使用图片)。先在工程目录的 images里新建一个子目录“menu”，然后放入两张图片 background.png 和 press_to_start.png ，并在自定义界面中显示：
[RenPy] 纯文本查看 复制代码 # 自定义[color=Green]界面(screen)[/color]部分
screen press_to_start():
# 这步确保任何其他菜单界面都会被替换
tag menu
add "menu/background.png"
add "menu/press_to_start.png" xalign 0.5 yalign 0.7
背景图的尺寸正好跟窗口尺寸是一样的，所以不需要做调整。“点击继续”的图片放在水平正中垂直方向偏下的地方。
进展很好，只是有个新问题：看不到自定义界面的显示结果……原因是没有入口。解决办法是使用 call语句 进入。上一篇提到过几个特殊脚本标签，这次可以选用“before_main_menu”：
[RenPy] 纯文本查看 复制代码 # scripts.rpy文件中
label before_main_menu:
call screen press_to_start with Dissolve(3)
with fade(3, 3, 3, color="#000")
显示效果大概是这样的(直接用文字图就是这么省事)：
然后是让“点击开始”闪烁起来。新建一个 变换(transform)并应用即可：
[RenPy] 纯文本查看 复制代码 # 自定义的图片闪烁 [color=Green]变换(transform)[/color]
transform transform_blink:
linear 1.0 alpha 0.2
linear 1.0 alpha 1.0
repeat
# 自定义界面(screen)部分
screen press_to_start():
# 这步确保任何其他菜单界面都会被替换
tag menu
add "menu/background.png"
add "menu/press_to_start.png" xalign 0.5 yalign 0.7 at transform_blink
至于“什么是变换”之类的问题，请参考官方文档或者我以后可能会写(也就是实际上还没写)的内容。
之后我们会发现，随便画面已经显示“点击继续”了，但实际上把鼠标点坏了也不会继续……为了实现点了还能继续的功能，需要进入一个全屏的热点(hotspot)：
[RenPy] 纯文本查看 复制代码 # 自定义界面(screen)部分
screen press_to_start():
# 这步确保任何其他菜单界面都会被替换
tag menu
add "menu/background.png"
add "menu/press_to_start.png" xalign 0.5 yalign 0.7 at transform_blink
imagemap:
ground "menu/transparent.png"
hotspot (0, 0, 1280, 720) focus_mask None action(Play("sound", "sound/start.wav"), Return())
这里使用的 transparent.png 是一张1280×720的全透明图片。点击时会按顺序执行一系列 Action函数。为了偷懒，我在最后使用了 Return()函数回到主控流程，也就是自动进入main_menu界面。如果想在这个画面中直接显示自定义菜单的话，可以隐藏“点击继续”的图片并显示菜单；也可以用 Call函数调用一个完整的自定义菜单界面。由于比较复杂，就先不展开了。
最后再加个在“点击开始”界面等待一段时间后播放一段视频或者其他画面的方法。比如，我们想在 press_to_start 界面30秒无点击的情况下播放一段视频，结束之后再回到 press_to_start 界面，可以这样处理：
[RenPy] 纯文本查看 复制代码 # scripts.rpy文件中
label before_main_menu:
$ renpy.movie_cutscene("videos/opening.webm")
call screen press_to_start with Dissolve(3)
with fade(3, 3, 3, color="#000")
[RenPy] 纯文本查看 复制代码 # 自定义界面(screen)部分
screen press_to_start():
# 这步确保任何其他菜单界面都会被替换
tag menu
add "menu/background.png"
add "menu/press_to_start.png" xalign 0.5 yalign 0.7 at transform_blink
imagemap:
ground "menu/transparent.png"
hotspot (0, 0, 1280, 720) focus_mask None action(Play("sound", "sound/start.wav"), Return())
timer 30 action Jump("before_main_menu")
资源部分：声明一下，由于我不会画图，请勿对图片资源有任何期待(正考虑求某些会画图的朋友……或者干脆放弃)。
链接：https://pan.baidu.com/s/1MTEohjGC-8T4YSaYVSca6w
提取码：c5mi
创建的SDK版本为7.1.3。
预告部分：下个支线可能是文本处理方面的……
“Ren'Py引擎从入门到放弃”系列教程 | 
苏公网安备 32092302000068号 )
发表于 2019-4-25 18:27:50
提升卡
置顶卡
变色卡
千斤顶
发表于 2020-1-7 23:00:17