跳转到正文
iPlugin

制作屏幕过场

先做黑边和背景遮罩,再组合图片或完整 Layout

Screen 有两条制作路线:纯黑边和程序化遮罩不需要 PNG;图片或文字图层则需要先准备资产及 Layout。

文件结构

tutorial.yml
tutorial_scene.yml

创建电影黑边与过场

plugins/Xerr/core/display/screens/tutorial.yml
tutorial_movie:
  type: letterbox
  mode: aspect-ratio
  ratio: 2.39
  color: "#000000"
  animation:
    enter:
      duration: 12
      easing: ease-out
    exit:
      duration: 10
      easing: ease-in

tutorial_transition:
  type: scene
  duration: 44
  markers:
    covered: 18
  layers:
    background:
      type: wipe
      pattern: linear
      style: cover
      direction: left-to-right
      angle: -12
      color: "#F7C83E"
      enter:
        duration: 18
        easing: ease-in-out
      hold: 8
      exit:
        duration: 18
        easing: ease-in-out

letterbox 持续显示直到关闭,scene 按时间轴自动结束。Scene 不用加入 HUD。

打包并测试

执行 /xerr pack 并加载新包,再运行:

/xerr screen show tutorial_movie
/xerr screen stop tutorial_movie
/xerr screen show tutorial_transition

给指定玩家:/xerr screen show tutorial_transition Steve。成功播放不发送聊天回执。

配合文字与图标

前提是已完成入门资产:tutorial_font、tutorial/ui/gem。先新建局部 Layout:

plugins/Xerr/core/layout/tutorial_scene.yml
defaults:
  font: tutorial_font
  image:
    namespace: tutorial
    basename: ui

tutorial_scene_content:
  icon:
    x: -70
    image:
      id: gem
  title:
    x: -52
    value: "&f{{ get title }}"

然后在同一个 tutorial.yml 中追加完整 Scene:

追加到 core/display/screens/tutorial.yml
tutorial_scene:
  type: scene
  duration: 44
  layers:
    background:
      type: wipe
      pattern: circle
      style: cover
      color: "#242320"
      enter:
        duration: 12
      hold: 20
      exit:
        duration: 12
    content:
      type: layout
      layout: tutorial_scene_content
      start: 12
      duration: 20
      variables:
        title: "新的旅程"
      enter:
        effect: slide-left
        duration: 6
      exit:
        effect: fade
        duration: 6

重新打包后运行 /xerr screen show tutorial_scene。

直接图片与 Layout 的区别

先登记 PNG,再用 type: image 引用完整图片地址。直接图片支持整体缩放、旋转、弹出和滑动,不需要再为它创建普通 Layout。

Marker 必须先在 Scene 里定义

本页只有 tutorial_transition 定义了 covered:

set transition to screen play "tutorial_transition"
screen wait &transition marker "covered"
screen wait &transition end

Marker 不会自动执行传送,只提供一个可以等待的时间点。所有图层字段见Screen 参考。