41 lines
2.3 KiB
Plaintext
41 lines
2.3 KiB
Plaintext
// 一个二维世界可被多个有限视口观察，Scene2D 的对象位置共享，默认 Camera2D 各自独立。
|
|
// 内层视口也可作为世界子项；HUD 在外层 Overlay 中，所以不会随世界相机变换。
|
|
// 场景保存世界对象，视口负责有限窗口与相机变换。
|
|
count = ui.state(0)
|
|
// 同一按钮随 card 在两个视口各出现一次，但只注册这一份回调，点击任意出现都修改同一个 count。
|
|
increment = Button("共享计数 +1")
|
|
increment.onClick(count.increment)
|
|
// 业务卡片带世界 x/y 和边框，count 文字与按钮共同保留同一 state。
|
|
card = Column(20, 12, TextBlock("世界里的 UI", 2), ui.textOf(count, "value", 3), increment)
|
|
card.boxWidth = 220
|
|
card.x = -60
|
|
// 这些 x/y 是 Scene2D 世界坐标，不是页面 Row 中的像素位置；每个外层相机分别投影它们。
|
|
card.y = 40
|
|
card.borderLeft = 2
|
|
card.borderColor = "#8CA5B8"
|
|
|
|
// 有限内层视口看自己的小场景，再以世界坐标放进外层 Scene2D。
|
|
inner = CanvasViewport(200, 100, Scene2D(RectBlock(120, 60, 8, "#D4E6D9")))
|
|
// inner 自身占外层世界里的有限盒，盒内的小场景另走 inner 的相机和裁剪，输入也需逐层换算。
|
|
inner.x = 260
|
|
inner.y = 40
|
|
// 两个外层视口引用同一 world，卡片/内层视口因此各产生两个出现位置。
|
|
world = Scene2D(card, inner)
|
|
// 左右视口尺寸和相机平移/缩放不同；显式赋同一 camera 才会共享导航状态。
|
|
left = CanvasViewport(460, 320, world)
|
|
left.camera.x = -100
|
|
right = CanvasViewport(320, 320, world)
|
|
// 两次构造视口默认产生不同 Camera2D，改 right.camera 的字段不会修改 left.camera。
|
|
right.camera.x = -80
|
|
right.camera.zoom = 0.65
|
|
// 如需联动，在 Console 将 right.camera 赋为 left.camera；共享场景本身不会自动共享相机。
|
|
|
|
// 先横排两个视图，再把固定 HUD 叠在它们之上，输入命中也使用组合后的几何。
|
|
views = Row(0, 20, left, right)
|
|
hud = Column(16, 8, TextBlock("一个世界，多个视角", 2), TextBlock("滚轮平移 · 空格/中键拖动 · 捏合或 Cmd/Ctrl+滚轮缩放"))
|
|
hud.alignSelf = "end"
|
|
// HUD 是 views 的 Overlay 兄弟，不是 world 的孩子；其位置受普通布局控制，不参与 world 相机平移缩放。
|
|
page = Page()
|
|
page.title = "场景与视口"
|
|
page.render(Overlay(12, 0, views, hud))
|