diff --git a/doc/demo12_gui/gui.md b/doc/demo12_gui/gui.md index b2617c0..ec15fe7 100644 --- a/doc/demo12_gui/gui.md +++ b/doc/demo12_gui/gui.md @@ -1,14 +1,46 @@ -- godot默认不显示中文,需要下载中文的字体 -- 字体,https://github.com/adobe-fonts/source-han-sans/releases +# 1. GUI系统 + +- 图形用户界面(Graphical User Interface,简称 GUI,又称图形用户接口)是指采用图形方式显示的计算机操作用户界面。 + +``` +图形用户界面是一种人与计算机通信的界面显示格式。 +允许用户使用鼠标等输入设备操纵屏幕上的图标或菜单选项,以选择命令、调用文件、启动程序或执行其它一些日常任务。 +与通过键盘输入文本或字符命令来完成例行任务的字符界面相比,图形用户界面有许多优点。 +图形用户界面由窗口、下拉菜单、对话框及其相应的控制机制构成,在各种新式应用程序中都是标准化的,即相同的操作总是以同样的方式来完成, +在图形用户界面,用户看到和操作的都是图形对象,应用的是计算机图形学的技术。 +``` + +![Image text](image/gui1.png) + +- https://docs.godotengine.org/en/3.3/getting_started/step_by_step/ui_game_user_interface.html + +# 2. GUI的字体选择 + +- 由于 Godot 使用 OpenGL 渲染,所以没法直接用系统字体,需要创建字体资源(Resource),而且在 UI 组件中,默认字体没法显示中文。 + +``` +在 Godot 中使用自定义字体的步骤如下: + +复制字体文件(ttf/tts等格式)到游戏目录内 +创建字体资源(DynamicFont) , 并配置对应字体文件 +控件中使用字体资源,配置字体大小,字体颜色 +字体资源复用(Make Unique) +``` + +- godot默认不显示中文,需要下载中文的字体 + +- windows自带的字体,要收费,有版权风险,C:\Windows\Fonts + +- 思源黑体,免费,开源,https://github.com/adobe-fonts/source-han-sans/releases + ``` -思源黑体 由Google和Adobe在2014年7月正式推出的开源字体不仅可以免费商用而且全面支持中文简体、中文繁体(香港)、中文繁体(台湾)、日文和韩文,还有七种字体粗细,整个字形个数接近50万。 免费可商用 ``` -# controller -![Image text](image/gui1.png) +# 3. GUI的锚点Anchor + ![Image text](image/gui2.png) ![Image text](image/gui3.png) ![Image text](image/gui4.png) diff --git a/scene/demo12_gui/Source_Han_Sans.ttf b/scene/demo12_gui/Source_Han_Sans.ttf new file mode 100644 index 0000000..ca36cb6 Binary files /dev/null and b/scene/demo12_gui/Source_Han_Sans.ttf differ diff --git a/scene/demo12_gui/gui.tscn b/scene/demo12_gui/gui.tscn new file mode 100644 index 0000000..7c35b0e --- /dev/null +++ b/scene/demo12_gui/gui.tscn @@ -0,0 +1,56 @@ +[gd_scene load_steps=3 format=2] + +[ext_resource path="res://scene/demo12_gui/Source_Han_Sans.ttf" type="DynamicFontData" id=1] + +[sub_resource type="DynamicFont" id=1] +font_data = ExtResource( 1 ) + +[node name="Node2D" type="Node2D"] + +[node name="Label" type="Label" parent="."] +margin_left = 25.2518 +margin_top = 20.3757 +margin_right = 91.2518 +margin_bottom = 44.3757 +rect_pivot_offset = Vector2( 37.8167, 12 ) +text = "label1" +__meta__ = { +"_edit_use_anchors_": false +} + +[node name="Label2" type="Label" parent="."] +margin_left = 25.6472 +margin_top = 62.6466 +margin_right = 143.647 +margin_bottom = 86.6466 +custom_fonts/font = SubResource( 1 ) +text = "有字体的lable" +__meta__ = { +"_edit_use_anchors_": false +} + +[node name="AcceptDialog" type="AcceptDialog" parent="."] +margin_left = 17.2379 +margin_top = 152.189 +margin_right = 136.238 +margin_bottom = 232.189 +dialog_text = "Are you OK?" + +[node name="Button" type="Button" parent="."] +margin_left = 41.0 +margin_top = 293.0 +margin_right = 105.0 +margin_bottom = 313.0 +text = "cancel" +__meta__ = { +"_edit_use_anchors_": false +} + +[node name="ColorRect" type="ColorRect" parent="."] +margin_left = 515.958 +margin_top = 14.3027 +margin_right = 697.958 +margin_bottom = 123.303 +__meta__ = { +"_edit_use_anchors_": false +}