// 一个二维世界可被多个有限视口观察，Scene2D 的对象位置共享，默认 Camera2D 各自独立。
// 内层视口也可作为世界子项；HUD 在外层 Overlay 中，所以不会随世界相机变换。
// 场景保存世界对象，视口负责有限窗口与相机变换。
count = ui.state(0)
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
card.y = 40
card.borderLeft = 2
card.borderColor = "#8CA5B8"

// 有限内层视口看自己的小场景，再以世界坐标放进外层 Scene2D。
inner = CanvasViewport(200, 100, Scene2D(RectBlock(120, 60, 8, "#D4E6D9")))
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)
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"
page = Page()
page.title = "场景与视口"
page.render(Overlay(12, 0, views, hud))