自适应界面高级方案
不建议全部重置:
虽然新的写法可能更好,但是光阴似箭,时间宝贵。对于小成本、小项目来说,追求完美虽好,但一味推倒重来往往得不偿失。前面的内容即使不尽如人意,只要无伤大雅,就能继续前行。早日上线,快速迭代,才是硬道理。珍惜每一分每一秒,把精力聚焦在核心体验上,让玩家尽早感受你的创意,这比反复回炉更能推动项目成功!
瑕疵: 对比固定数值的居中方案,如果窗口过小,这个方案可能会导致字体失真 。 固定数值写法: https://www.bilibili.com/video/BV1wh4y1g7ET
全屏窗口:
使用w,h作为全屏背景,中间的组件用下面的用法。
定位+非全屏窗口:
测试方案:
team_main2:
bg:
type: texture
path: https://i0.hdslb.com/bfs/article/fbc050ac553ae777f44509af13a49915321787115.png
width: "min(w,h*35/17)*0.7"
height: "min(w*17/35,h)*0.7"
locationX: "(w-min(w,h*35/17)*0.7)/2"
locationY: "(h-min(w*17/35,h)*0.7)/2"
完整方案:
其中 35/17和 17/35 35是背景图的宽度 17是背景图的高度
如果你的背景图是 1800*1000 你就把35/17改成 1800/1000
team_main:
options:
width: "````{{ttw}}````"
height: "````{{tth}}````"
startX: "center"
startY: "center"
startZ: "-500"
variables: |
{
ttw: "min(w,h*35/17)*0.8",
tth: "min(w*17/35,h)*0.8",
team: "Nine9",
name: "Nine9"
}
guide: false
bgc:
type: color
color: 0xAA000000
locationX: "-4444"
locationY: "-4444"
width: "9999"
height: "9999"
bg:
type: texture
path: textures/gui/team/mainbg.png
width: "````{{ttw}}````"
height: "````{{tth}}````"
title:
type: label
texts: [ "````{{team}}````§a的队伍" ]
popTime: 100
locationX: "````{{ttw}}````*0.5"
locationY: "````{{tth}}````*0.02"
scale: "````{{tth}}```` * 0.006"
align: center
color:
type: color
color: 0x9A000000
width: "min(w,h*35/17)*0.78"
height: "min(w*17/35,h)*0.58"
locationX: "````{{ttw}}````*0.013"
locationY: "````{{tth}}````*0.1"
players:
type: scroll
relative: true
width: "min(w,h*35/17)*0.78"
height: "min(w*17/35,h)*0.58"
locationX: "````{{ttw}}````*0.013"
locationY: "````{{tth}}````*0.1"
scrollableV: "1000"
invalidV: false
scrollDraggable: true
layout:
fillX: "````{{ttw}}````*0.034"
fillY: "````{{tth}}````*0.06"
scrollableParts:
entry:
type: canvas
width: (````{{ttw}}````*0.20)
height: "(````{{ttw}}````*0.20)*1.32"
relativeParts:
title:
type: color
color: 0xFF1B727D
width: (````{{ttw}}````*0.20)
height: (````{{ttw}}````*0.025)
name:
type: label
texts: [ "§b````{{name}}````" ]
popTime: 100
align: center
locationX: (````{{ttw}}````*0.20)/2
locationY: (````{{ttw}}````*0.025)/2-4.5
border:
type: texture
path: textures/gui/team/steve.png
width: (````{{ttw}}````*0.20)
height: (````{{ttw}}````*0.20)*1.32
locationY: (````{{ttw}}````*0.025)
color:
type: color
color: 0x3F1B222D
width: (````{{ttw}}````*0.187)
height: (````{{ttw}}````*0.19)*1.32
locationX: (````{{ttw}}````*0.0065)
locationY: (````{{tth}}````*0.065)
scroll:
type: scroll
width: (````{{ttw}}````*0.187)
height: (````{{ttw}}````*0.19)*1.32
locationX: (````{{ttw}}````*0.0065)
locationY: (````{{tth}}````*0.065)
relative: true
scrollableParts:
player:
type: entity
model: self
size: "(````{{ttw}}````*0.1)"
locationY: (````{{ttw}}````*0.24)
locationX: (````{{ttw}}````*0.095)
locationZ: "200"
buttons2:
type: color
color: 0x7A0A0A0A
width: "min(w,h*35/17)*0.78"
height: "min(w*17/35,h)*0.12"
locationX: "````{{ttw}}````*0.013"
locationY: "````{{tth}}````*0.83"
buttons:
type: canvas
width: "min(w,h*35/17)*0.78"
height: "min(w*17/35,h)*0.12"
locationX: "````{{ttw}}````*0.013"
locationY: "````{{tth}}````*0.83"
layout:
fillX: "````{{ttw}}````*0.037"
fillY: "````{{tth}}````*0.025"
relativeParts:
bt1:
type: button
defaultPath: textures/gui/team/bt1.png
hoverColor: 0xFFAAAAAA
width: (````{{ttw}}````*0.15)
height: (````{{ttw}}````*0.15)/3
texts: [ 邀请玩家 ]
textScale: "````{{tth}}```` * 0.006"
clickScript: |
GuiScreen.post('invite',{'null':null});
bt2:
type: button
defaultPath: textures/gui/team/bt2.png
hoverColor: 0xFFAAAAAA
width: (````{{ttw}}````*0.15)
height: (````{{ttw}}````*0.15)/3
texts: [ 申请列表 ]
textScale: "````{{tth}}```` * 0.006"
clickScript: |
GuiScreen.post('apply',{'null':null});
bt3:
type: button
defaultPath: textures/gui/team/bt3.png
hoverColor: 0xFFAAAAAA
width: (````{{ttw}}````*0.15)
height: (````{{ttw}}````*0.15)/3
texts: [ 踢出队员 ]
textScale: "````{{tth}}```` * 0.006"
clickScript: |
GuiScreen.post('kick',{'null':null});
bt4:
type: button
defaultPath: textures/gui/team/bt4.png
hoverColor: 0xFFAAAAAA
width: (````{{ttw}}````*0.15)
height: (````{{ttw}}````*0.15)/3
texts: [ 离开队伍 ]
textScale: "````{{tth}}```` * 0.006"
clickScript: |
GuiScreen.post('quit',{'null':null});
bt5:
type: button
defaultPath: textures/gui/team/bt5.png
hoverColor: 0xFFAAAAAA
width: (````{{ttw}}````*0.15)
height: (````{{ttw}}````*0.15)/3
texts: [ 解散队伍 ]
textScale: "````{{tth}}```` * 0.006"
clickScript: |
GuiScreen.post('dismiss',{'null':null});
效果:

