Panorama

09/19/2019    Dota2 workshop


选择器

//有id的可以直接选取
var dom = $('#myid');
//多个xml中可能有相同的id,避免混淆可以从父获取
dom.FindChild('myid');
//遍历所有子孙获取
dom.FindChildTraverse('myid');
//通过class获取,返回的是数组
dom.FindChildrenWithClassTraverse('myclass');

创建Panel

//一般Panel可以通过API创建
var parent = $('#WhoisYourDaddy');
var dom = $.CreatePanel('Panel/Label/Button', parent, 'myid');
//添加主要的样式
dom.AddClass('someclass'); 
//多类选择器 设为true时xml显示为<Panel class="someclass otherclass"...
dom.SetHasClass('otherclass', true/false); 
//判断是否有这个class
var bool = dom.BHasClass('otherclass'); 

//一般玩法
if(dom.BHasClass('disable')){
    dom.SetHasClass('disable', false);
    dom.SetHasClass('breathtaking', true);
}

//为一些Panel添加属性
var label = $.CreatePanel('Label', parent, id);
label.text = 'DingDingDing mother **';
//手动添加一些style 有些可以直接用
label.color = 'red';
//有些需要通过style属性
label.style['font-size'] = '22px';

//为面板添加事件
var button = $.CreatePanel('button', parent, id);
button.SetPanelEvent('onactivate', function () {
    //...
});

//如果要用到循环变量要注意闭包
for(var i = 0; i < 10; i++) {
    var button = $.CreatePanel('button', parent, id);
    button.SetPanelEvent('onactivate', (function (index) {
        return function() {
            $.Msg(index);
        };
    })(i));
}

//Panorama没有事件冒泡,所以要父子联动触发事件要自己调用

//已知DOTAScenePanel和DOTAHeroImage不能用方法创建
//属性也最好拼在字符串中
var hero = 'npc_dota_hero_juggernaut';
parent.BCreateChildren('<DOTAScenePanel class="myclass" id="myScenePanel" unit="' + hero + '" light="global_light" antialias="true" renderdeferred="false" particleonly="false" drawbackground="false"/>');
// drawbackground="false" 在只有unit时可用于消除台座
// DOTAScenePanel改变unit只能删掉重新创建,但改变class不需要
hero = 'npc_dota_hero_doom';
parent.RemoveAndDeleteChildren($('#MyScenePanel'));
parent.BCreateChildren('<DOTAScenePanel id="myScenePanel" unit="' + hero + '" light="global_light" antialias="true" renderdeferred="false" particleonly="false" drawbackground="false"/>');
$('#MyScenePanel').AddClass('myclass');

//少用RemoveAndDeleteChildren!多用隐藏
.disable{
    visibility: collapse;
}

布局

尽量不要用right-wrap,布局会莫名奇妙的乱掉

fit-children

/* 根据子元素自适应 */
.style{
    width: fit-children;
    height: fit-children;
}

fill-parent-flow

/* 按权重值填充 通常搭配flow-children使用 */
.parent{
    width: 100%;
}
.parent > .child{
    /* 每个子元素权重都是1表示宽度都一样并且自动布局 */
    width: fill-parent-flow(1);
}
.parent > .child{
    /* 占3/4 */
    width: fill-parent-flow(3);
}

width-percentage 和 height-percentage

/* 相对大小 */
.style{
    height: 50%;
    width: height-percentage(100%);
}

实际使用中可以固定Panel的height,并用height-percentage调整width

horizontal-align 和 vertical-align

/* 水平或垂直位置 */
.style{
    horizontal-align : center;
    vertical-align : center;
}

向另一个xml传数据

//通过事件 需要在scripts/custom.gameevents中定义结构
GameEvents.SendEventClientSide('evtname', data);
//另一边获取
GameEvents.Subscribe('evtname', Callback);

//不用事件
var dom = $.CreatePanel('Panel', parent, id);
dom.SetAttributeString("key", value);
dom.BLoadLayout("file://{resources}/layout/custom_game/some.xml", false, false);
//另一边获取
$.GetContextPanel().GetAttributeString('key', 'default');

//保证顺序的情况下可以用全局对象Game或GameUI
Game.someData = someData;
//同理方法也能放到全局
Game.someFunction = function(){...};


按键绑定

1.先要在you_addons/addoninfo.txt下定义按键

"AddonInfo"
{
    ...
    "Default_Keys"
	{
	    "01"
	    {
	        "Key"       "Space"
            "Command"   "+SpacePressed"
            "Name"      "Space Pressed"
	    }
	}

2.在js中添加命令

Game.AddCommand("+SpacePressed", SpacePressedFunction, "", 0);

3.按键具体操作

function SpacePressedFunction() {
    // some impelement
}

Net table

1.在scripts/custom_net_table.txt中定义表名

<!-- kv3 encoding:text:version{e21c7f3c-8a33-41c5-9977-a76d3a32aa0d} format:generic:version{7412167c-06e9-4698-aff2-e63eb59037e7} -->
{
    custom_net_tables =
    [
        "my_table"
    ]
}

2.在js中注册table更改的回调

CustomNetTables.SubscribeNetTableListener('my_table', Callback);

//回调一般会有三个参数: 表名 key名 数据
function Callback(table, key, data){
    $.Msg(table, key, data);
}

//也能直接拿到table中的数据
var data = CustomNetTables.GetTableValue('my_table', 'my_key');

3.Lua中为table赋值

CustomNetTables:SetTableValue("my_table", 'my_key', data)
//只有data中的数据变化才会触发前端的回调,可以在data中加入随机数来强制触发