Skip to content

06 · 背景立绘与视觉 ​

本章讲解背景图、立绘、精灵管理等视觉元素的控制。

background 背景 ​

dsl
background "Images/town.jpg"

设置全屏背景图。路径相对于 Media/ 目录。

带过渡的背景切换

background 命令只接受路径参数。如需过渡效果,请使用 bg_switch 或先 transition 再 background:

dsl
transition "fade" duration=1.0
background "Images/forest.jpg"

bg_switch 背景切换 ​

bg_switch 与 background 类似,但更常用于场景内切换:

dsl
scene "town"
  bg_switch "Images/town_day.jpg" transition=fade duration=0.8
  say "白天的小镇。" speaker="旁白"
  bg_switch "Images/town_night.jpg" transition=fade duration=1.5
  say "夜幕降临。" speaker="旁白"

image 场景内图片 ​

image 用于场景定义中的静态图片元素:

dsl
scene "title" type=menu
  image "Images/bg.png" x=0 y=0 width=100% height=100% opacity=0.5
  image "Images/logo.png" x=50% y=20% width=300 height=100 halign=center

sprite 立绘 ​

sprite 命令控制角色立绘的显示、隐藏和切换:

显示立绘 ​

dsl
sprite "hero" src="Images/hero_smile.png" x=30 y=50
say "你好!" speaker="hero"

切换表情 ​

再次调用 sprite 命令即可切换图片:

dsl
sprite "hero" src="Images/hero_smile.png"
say "太好了!" speaker="hero"

sprite "hero" src="Images/hero_sad.png"
say "但是..." speaker="hero"

隐藏立绘 ​

dsl
sprite_hide "hero" fade=0.5

立绘操作命令 ​

命令说明
sprite "id" src="path"显示/切换立绘
sprite_hide "id" [fade=N]隐藏立绘
sprite_move "id" x=N y=N [duration=N]移动立绘
sprite_state "id" emotion="smile"设置表情状态

立绘参数

sprite 命令支持的参数:src(图片路径)、x/y(位置,数字)、fade(淡入时长秒)。

show / hide 显示隐藏 ​

show / hide 控制已存在的 UI 元素的可见性,支持过渡动画:

dsl
show "title_text" with "fade" duration=0.5
hide "title_text" with "dissolve" duration=0.8

show/hide 的 target

show / hide 的第一个参数是元素的 tag(标签名)。在 text / button / image 等元素上用 tag="名称" 指定:

dsl
text "标题" tag="title_text" x=50% y=20%
// 之后可以 show/hide 这个标签

transition 过渡 ​

全局过渡效果:

dsl
transition "fade" duration=1.5
效果说明
fade黑屏淡入淡出
dissolve交叉溶解

zindex 层级 ​

控制元素的 Z 轴层级(显示顺序):

dsl
image "Images/bg.png" x=0 y=0 width=100% height=100% zindex=0
image "Images/overlay.png" x=0 y=0 width=100% height=100% zindex=10
text "标题" x=50% y=10% zindex=20

数字越大越在上层。默认 zindex=0。

opacity 透明度 ​

dsl
image "Images/ghost.png" x=50% y=50% opacity=0.5

0 = 完全透明,1 = 完全不透明。

动手练习 ​

制作一个带立绘和背景切换的场景:

dsl
character "hero" name="勇者" color="#FFD700"

scene "story_scene"
  bg_switch "Images/door_zoom.jpg" transition=fade duration=1.0
  text "第二章 · 相遇" x=50% y=10% size=32 color="#FFD700" halign=center

label scene_start:
  sprite "hero" src="Images/hero.png" x=30 y=60
  say "你终于来了。" speaker="hero"
  sprite "hero" src="Images/hero_smile.png"
  say "我等你好久了。" speaker="hero"
  sprite_hide "hero"
  bg_switch "Images/door_zoom.jpg" transition=fade duration=1.5
  say "勇者消失在光芒中..." speaker="旁白"

下一步 ​

视觉元素掌握了!下一章学习过渡与动画——让画面动起来。

基于 .NET 10 + Avalonia 12 · Apache-2.0 License