搜索
热搜: 活动 交友 discuz
查看: 5935|回复: 26

[PUI界面] 新UI教程,基础入门

[复制链接]

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
发表于 2015-6-20 21:56:32 | 显示全部楼层 |阅读模式

前方高能预警!非战斗人员请尽快登录!

您需要 登录 才可以下载或查看,没有帐号?注册账号

x
本帖最后由 裸奔的代码 于 2015-7-19 20:01 编辑

大家好,又是我超帅的代码君,今天下午1点起床得知panorama可以编译之后,就开始着手研究了,
X大研究了一下午,有些眉目了,但是并非摸得特清楚,VSB还是有的,而且限制还是蛮多的,不过总体感觉基本够用了,
本篇教程提供基础入门,后面就看你的造化了。


那么学习之前你得对JavaScript+html+css有所了解,也需要对第三方库jquery有所了解,如果你制作过网页那就更好了
而新UI的制作方式是XML+JS+CSS,采用XML当然是因为V社是自己弄的一套技术呗


下面提供一些链接
(学习)


V爹)


最后可以参考官方实例overthrow

学前概述
0.新编辑器把contentgame放在dota2的根目录了
1.以下用ADDON_NAME表示地图名
2.我们要编写的文件在content里面,打开编辑器之后会自动编译,编译的文件在game中,编译不是全都编译的,只有使用到的才会编译
3.content/dota_addons/ADDON_NAME中有建立panorama文件夹,panorama之内有imageslayoutscriptsstyles,在这四个文件夹中都创建custom_game文件夹,game中就不用管了,编译了就会自动创建
其中
images放置图片
layout 放置xml
scripts放置js脚本
styles放置css文件
4.测试UI,可以不用关掉游戏,build之后直接改UI文件,会立即生效,除非出现BUG,测试loading图就要不断rebuild

有三个默认的xml文件
custom_game_details.xml(这个貌似填写地图信息啥的)
custom_loading_screen.xml(修改loading图的地方)
custom_ui_manifest.xmlV爹的那些自带UI在这里使用)

现在开始
首先我们来修改一下loading
由于制作动态的loading图比较费力,所以这里就不说了
可以参考overthrow的动态loading,如果你对css的动画编写熟悉也可以自己做

我使用的图片: b5c85f50c2e945ec71390faf3fc15565aa85f1d0711d1-1suEB7_fw658.jpg
把图片放置在panorama/images/custom_game
panorama/layout/custom_game中创建custom_loading_screen.xml文件

代码:
[mw_shl_code=html,true]<root>
        <Panel>
                <!-- loading的图片 png,psd都是可以的 -->
                <Image id="ix" class="imageSize" src="file://{images}/custom_game/jugg.png"/>
        </Panel>
</root>[/mw_shl_code]

效果:
1.png

这图片有点小,我们得让他全屏
所以,我们需要用css对其进行修改
panorama/styles/custom_game中创建custom_loading_screen.css
内容如下:
[mw_shl_code=xml,true].imageSize{
        width: 100%;
        height: 100%;
}[/mw_shl_code]

返回custom_loading_screen.xml,修改代码
[mw_shl_code=html,true]<root>
        <styles>
                <include src="file://{resources}/styles/custom_game/custom_loading_screen.css"/>
        </styles>
        <Panel>
                <!-- loading的图片 png,psd都是可以的 -->
                <Image id="ix" class="imageSize" src="file://{images}/custom_game/jugg.png"/>
        </Panel>
</root>[/mw_shl_code]

效果:
2.png

达到了我们的预期,只可惜这个图片的分辨率不是那么高

Loading图做完就开始游戏内了
第一种是直接使用官方的UI——custom_ui_manifest.xml
这个具体参考overthrow就好了
我就只弄弄GameInfo
GameInfo这个UI在左边,正常状态下是这样的 3.png
打开后是这样的
4.png


里面空白啥也没有
我们添加官方提供的元素瞧瞧是个啥样
具体参考https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Panorama/Panels

首先,在panorama/layout/custom_game中创建game_info.xml
敲入下面的代码
[mw_shl_code=html,true]<root>
        <styles>
                <!-- 导入官方css -->
                <include src="s2r://panorama/styles/dotastyles.vcss_c"/>
                <!-- file://{resources}/就是指你的地图目录下的panorama -->
                <include src="file://{resources}/styles/custom_game/game_info.css"/>
        </styles>

        <!-- 使用脚本 -->
        <script>
                function onBtnClick()
                {
                        $("#btn").SetHasClass("btnClick",false)
                        $("#btn").SetHasClass("btnClick",true)
                        $.Msg("my button");
                }
        </script>

        <Panel>
                <!-- 按钮,按钮效果还要自己实现,汗 -->
                <Button id="btn"><Label text="我是一个按钮"/></Button>

                <!-- 标签 -->
                <Label id="label" text="我是一个标签"/>

                <!-- 图片 -->
                <Image id="image" src="file://{images}/custom_game/jugg.png" />

                <!-- 文本框 -->
                <TextEntry id="entry" maxchars="100" placeholder="输入内容" />

                <DropDown id="drop">
                  <Label text="下拉列表项1" id="entry1"/>
                  <Label text="下拉列表项2" id="entry2"/>
                  <Label text="下拉列表项3" id="entry3"/>
                  <Label text="下拉列表项4" id="entry4"/>
                </DropDown>

                <!-- 多选按钮 -->
                <ToggleButton id="toggleBtn_1" checked="true" text="Checkbox 1" />
                <ToggleButton id="toggleBtn_2" checked="true" text="Checkbox 2" />

        </Panel>
</root>[/mw_shl_code]

panorama/styles/custom_game中创建game_info.css
[mw_shl_code=xml,true]#btn{
        color: #066EFE;
        border: 2px solid #ECC700;
}

#btn:hover{
        color: #ECC700;
        border: 2px solid #066EFE;
}

@keyframes 'btnClickAnim'
{
        0%
        {
                transform: translateZ(-25px);
        }
        100%
        {

        }
}

.btnClick{
        animation-name:btnClickAnim;
        animation-duration:0.5s;
}

#label{
        margin-top: 80px;
}

#image{
        margin-top: 125px;
        width: 200px;
        height: 150px;
}

#entry{
        margin-top: 290px;
}

#drop{
        margin-top: 320px;
}

#toggleBtn_1{
        margin-top: 440px;
}
#toggleBtn_2{
        margin-top: 470px;
}

#RadioBtn{
        margin-top: 500px;
}[/mw_shl_code]

panorama/layout/custom_game中创建custom_ui_manifest.xml
敲入如下代码
[mw_shl_code=html,true]<root>
        <Panel>
                <CustomUIElement type="GameInfo" layoutfile="file://{resources}/layout/custom_game/game_info.xml" />
        </Panel>
</root>[/mw_shl_code]

效果:
5.png

这是在GameInfo中,如果想单独的创建一个界面出来,请用Lua
下面就用Lua调出上面那个界面
首先,我们需要在修改一下game_info.xml
[mw_shl_code=html,true]<root>
        <styles>
                <!-- 导入官方css -->
                <include src="s2r://panorama/styles/dotastyles.vcss_c"/>
                <!-- file://{resources}/就是指你的地图目录下的panorama -->
                <include src="file://{resources}/styles/custom_game/game_info.css"/>
        </styles>

        <!-- 使用脚本 -->
        <script>
                function onBtnClick()
                {
                        $("#btn").SetHasClass("btnClick",false)
                        $("#btn").SetHasClass("btnClick",true)
                        $.Msg("my button");
                }
        </script>

        <Panel>
                <Panel id="mainWin">
                        <Panel id="content">
                                <!-- 按钮,按钮效果还要自己实现,汗 -->
                                <Button id="btn"><Label text="我是一个按钮"/></Button>

                                <!-- 标签 -->
                                <Label id="label" text="我是一个标签"/>

                                <!-- 图片 -->
                                <Image id="image" src="file://{images}/custom_game/jugg.png" />

                                <!-- 文本框 -->
                                <TextEntry id="entry" maxchars="100" placeholder="输入内容" />

                                <DropDown id="drop">
                                  <Label text="下拉列表项1" id="entry1"/>
                                  <Label text="下拉列表项2" id="entry2"/>
                                  <Label text="下拉列表项3" id="entry3"/>
                                  <Label text="下拉列表项4" id="entry4"/>
                                </DropDown>

                                <!-- 多选按钮 -->
                                <ToggleButton id="toggleBtn_1" checked="true" text="Checkbox 1" />
                                <ToggleButton id="toggleBtn_2" checked="true" text="Checkbox 2" />
                        </Panel>
                </Panel>
        </Panel>
</root>[/mw_shl_code]

其中mainWin表示整个游戏界面,content这个panel才是主要内容
Lua中调用
[mw_shl_code=golang,true]CustomUI:DynamicHud_Create(-1,"mainWin","file://{resources}/layout/custom_game/game_info.xml",nil)[/mw_shl_code]

这个具体就看你的咯,我是放在DOTA_GAMERULES_STATE_PRE_GAME

效果:
6.png


UI教程就到这了,如果是学过HTML+js+css,很容易懂的,所以也没讲多细致,由于事件部分还没研究清楚,所以我还得继续研究
研究了一天发现新UI由于限制蛮多,也蛮蛋疼的,比如不能自动布局,这是最蛋疼的了
CSS不能使用positionlefttop等一些,改变位置直接用margin还有其余的四个,这个具体需要自己去尝试才知道了,后面有时间整理出来吧
新UI制作起来真的比flash好多了,效率提高很多

文件: panorama.zip (461.19 KB, 下载次数: 83)
回复

使用道具 举报

52

主题

529

帖子

3109

积分

魔导师

UID
2370
金币
3083
精华
0
节操
-358

创世者隐修议员扛把子脑洞大开教程大师开拓者我是鸽手黑科技玩的6平妖侠士

发表于 2015-6-20 22:03:29 | 显示全部楼层
插2楼

评分

参与人数 3节操 -21 收起 理由
白睫哥 -1 你的节操掉了!
kevin -10 呵呵!
裸奔的代码 -10

查看全部评分

回复

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-6-20 22:04:43 | 显示全部楼层

我擦,抢二楼,别怪我到时候修改帖子了
回复 支持 反对

使用道具 举报

14

主题

241

帖子

1705

积分

魔导师

UID
3373
金币
5236
精华
0
节操
-91

黑科技玩的6创世者隐修议员扛把子教程大师开拓者平妖侠士

发表于 2015-6-20 22:24:49 | 显示全部楼层
来晚了。、。。前排占座
回复 支持 反对

使用道具 举报

5

主题

20

帖子

77

积分

Lv:1 隐谧贤者

UID
1466
金币
167
精华
0
节操
0
发表于 2015-6-20 22:33:39 | 显示全部楼层
动态编译只对已添加的文件有效
游戏启动过程中,直接添加文件是加载不到的,应该为了防止外部文件入侵
回复 支持 反对

使用道具 举报

20

主题

171

帖子

690

积分

Lv:4 虚灵先知

UID
2815
金币
765
精华
3
节操
-1

脑洞大开幻想乡

发表于 2015-6-20 23:33:08 | 显示全部楼层
提问!(举手
为什么要有编网页的知识才可以!
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-6-21 16:05:04 | 显示全部楼层
喪冬 发表于 2015-6-20 23:33
提问!(举手
为什么要有编网页的知识才可以!

因为这样就容易理解,如果完全不会,解释起来很费劲
有些接触也好,不需要完全会,只需要有所了解就好了
我和X神都是接触过的,我们一下子就上手了
回复 支持 反对

使用道具 举报

20

主题

171

帖子

690

积分

Lv:4 虚灵先知

UID
2815
金币
765
精华
3
节操
-1

脑洞大开幻想乡

发表于 2015-6-21 18:45:28 | 显示全部楼层
裸奔的代码 发表于 2015-6-21 16:05
因为这样就容易理解,如果完全不会,解释起来很费劲
有些接触也好,不需要完全会,只需要有所了解就好了 ...

这样啊! 懂了!谢谢老师!
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-6-21 20:02:48 | 显示全部楼层
本帖最后由 裸奔的代码 于 2015-6-21 20:03 编辑
aoick 发表于 2015-6-20 22:33
动态编译只对已添加的文件有效
游戏启动过程中,直接添加文件是加载不到的,应该为了防止外部文件入侵

可以编译,我开着游戏,创建js文件都可以编译
只要你的UI有用到就会编译,如果你通过lua调出UI就会编译
你新建一个js不会编译,只有在某个xml中include
然后这个xml使用了就会编译这个新建的js
当然,Lua部分是无法动态编译

回复 支持 反对

使用道具 举报

5

主题

20

帖子

77

积分

Lv:1 隐谧贤者

UID
1466
金币
167
精华
0
节操
0
发表于 2015-6-21 22:15:28 | 显示全部楼层
裸奔的代码 发表于 2015-6-21 20:02
可以编译,我开着游戏,创建js文件都可以编译
只要你的UI有用到就会编译,如果你通过lua调出UI就会编译
...

新建xml和css文件也可以么?
我本机是不行的啊。  要restart才可以加载到
回复 支持 反对

使用道具 举报

73

主题

680

帖子

2920

积分

大摸导师

热爱让我们并肩

UID
4
金币
3009
精华
0
节操
-232

隐修议员

QQ
发表于 2015-6-21 23:45:57 | 显示全部楼层
卧槽 毕码 666
如果一个人尽可能做好能做的事情,那这个世界就一定会因为这件事情而变得更美好一点。
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-6-22 00:33:08 | 显示全部楼层
aoick 发表于 2015-6-21 22:15
新建xml和css文件也可以么?
我本机是不行的啊。  要restart才可以加载到

不晓得咯,我是可以这样,有时候有些延迟的,也许是检索时间慢了点
回复 支持 反对

使用道具 举报

0

主题

4

帖子

4

积分

Lv:0 巫师学徒

UID
4200
金币
73
精华
0
节操
0
发表于 2015-6-22 09:41:14 | 显示全部楼层
6666666
我只学了C/C++/C#,完全不懂网页啊!
回复 支持 反对

使用道具 举报

6

主题

115

帖子

172

积分

Lv:2 长袍法师

UID
2569
金币
753
精华
0
节操
-30

幸运儿!

发表于 2015-6-22 11:01:47 | 显示全部楼层
完全不懂~
回复

使用道具 举报

20

主题

121

帖子

780

积分

魔导师

UID
2311
金币
844
精华
0
节操
-58

隐修议员幸运儿!

发表于 2015-6-22 13:52:40 | 显示全部楼层
好像越来越强大也越来越难的样子
回复 支持 反对

使用道具 举报

9

主题

29

帖子

242

积分

Lv:2 长袍法师

UID
4296
金币
68
精华
0
节操
0
发表于 2015-6-25 09:42:22 | 显示全部楼层
请问如果我要接收UI的事件要怎么办呢,比如html中的onclick这样的
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-6-25 12:50:00 | 显示全部楼层
wurichengn 发表于 2015-6-25 09:42
请问如果我要接收UI的事件要怎么办呢,比如html中的onclick这样的

http://www.dota2rpg.com/forum.ph ... &page=1#pid7477
回复 支持 反对

使用道具 举报

9

主题

29

帖子

242

积分

Lv:2 长袍法师

UID
4296
金币
68
精华
0
节操
0
发表于 2015-6-25 13:40:43 | 显示全部楼层
<Label onactivate="OpenMyUI()"/>
例子里是这样的吗,因为我的
<Label onclick="$.Msg('test');"/>怎么点击都没有控制台输出,有点郁闷,可能是Label没有onclick
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-6-25 14:31:13 | 显示全部楼层
wurichengn 发表于 2015-6-25 13:40
例子里是这样的吗,因为我的
怎么点击都没有控制台输出,有点郁闷,可能是Label没有onclick

这是V爹定义的,并不是原生的HTML
回复 支持 反对

使用道具 举报

9

主题

29

帖子

242

积分

Lv:2 长袍法师

UID
4296
金币
68
精华
0
节操
0
发表于 2015-6-25 17:03:35 | 显示全部楼层
裸奔的代码 发表于 2015-6-25 14:31
这是V爹定义的,并不是原生的HTML

也没办法,只能多翻翻api了
回复 支持 反对

使用道具 举报

23

主题

122

帖子

337

积分

Lv:3 空明术士

UID
3583
金币
235
精华
0
节操
0
发表于 2015-7-23 18:11:07 | 显示全部楼层
HCJ 确实比FLASH轻多了``好用很多.以前的flash还是太大了`主要是IDE太大了```HTML CSS JS 只要记事本就能改了
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-7-24 09:14:20 | 显示全部楼层
laketony 发表于 2015-7-23 18:11
HCJ 确实比FLASH轻多了``好用很多.以前的flash还是太大了`主要是IDE太大了```HTML CSS JS 只要记事本就能改 ...

关键的一点是动态编译,才是亮点,做起来效率极高
回复 支持 反对

使用道具 举报

22

主题

148

帖子

1186

积分

Lv:4 虚灵先知

UID
3367
金币
1125
精华
1
节操
-4
发表于 2015-8-2 16:50:34 | 显示全部楼层
裸奔的代码 发表于 2015-6-25 14:31
这是V爹定义的,并不是原生的HTML

那问题 哪些原生html的css属性有用,哪些没有用
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-8-4 12:32:51 | 显示全部楼层
学习 发表于 2015-8-2 16:50
那问题 哪些原生html的css属性有用,哪些没有用

https://developer.valvesoftware. ... rama/CSS_Properties
回复 支持 反对

使用道具 举报

22

主题

148

帖子

1186

积分

Lv:4 虚灵先知

UID
3367
金币
1125
精华
1
节操
-4
发表于 2015-8-5 16:49:07 | 显示全部楼层
裸奔的代码 发表于 2015-8-4 12:32
https://developer.valvesoftware.com/wiki/Dota_2_Workshop_Tools/Panorama/CSS_Properties

那就是说 现有的html ui 库都没法用了,要重复造个轮子
回复 支持 反对

使用道具 举报

39

主题

429

帖子

2826

积分

大魔导师

UID
1731
金币
3566
精华
5
节操
-40

黑科技玩的6我是鸽手隐修议员扛把子教程大师创世者开拓者

QQ
 楼主| 发表于 2015-8-5 22:59:25 | 显示全部楼层
学习 发表于 2015-8-5 16:49
那就是说 现有的html ui 库都没法用了,要重复造个轮子

当然,这又不是HTML
回复 支持 反对

使用道具 举报

10

主题

33

帖子

705

积分

魔导师

UID
6235
金币
622
精华
0
节操
20
发表于 2015-10-14 15:49:05 | 显示全部楼层
本帖最后由 smith3816 于 2015-10-15 00:55 编辑

怎么使用多语言支持呢?在这里用#貌似没用呢
---------------------------------------------------------------------


哦哦,原来是Localization的文件位置不一样~

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册账号

本版积分规则

QQ|Archiver|手机版|小黑屋|AMHC!dota2rpg~ ( 闽ICP备14009209 )

GMT+8, 2019-9-24 01:22 , Processed in 0.127233 second(s), 31 queries , Gzip On.

Powered by Discuz! X3.4

© 2001-2013 Comsenz Inc. Theme.Yeei

快速回复 返回顶部 返回列表