MyGui心得范文.doc

MyGui心得范文 杂感1.自定义控件（主要是设计skin），注意尽量模仿原myGUI的控件，以避免出错。 2.注意备份你的xml文件，脚本中出错，除了个别错误log可以显示出来，还有一些情况你必须挨个查错。 3.有时候界面的中一角是不规则镂空的，要想使鼠标能透过镂空的地方，点到地形上，这就需要使带镂空背景的界面设置为不需要鼠标，并设置其层级为最低，然后在程序中判断是否点到背景的有像素部分，分情况处理。 而其它在它上的控件的层级必须比它高，否则在同一层级的同一块区域中只有最先创建的控件才有效。 4.使用的图片大小尽量用2的阶乘，可以提高效率。 5.界面使用的图片资源是即时加载的，即需要显示了才加载到内存，程序一开始加载的资源其实是资源的路径名字，这是由ogre的设计模式决定的。 因此要避免在打开一个弹出窗口界面时，弹出窗口中某个需要的图片资源还没有加到内存中，而恰恰这个图片资源是一个比较大的图片的一部分，以至于即时加载它就需要等待 5、6秒，这肯定是不能接受的。 =目录1.theme2.font3.settings4.resource5.wallpaper6.layer7.layout8.CheckBox9.ProgressHealthBar10.在xxx_skin.xml中引用xxx_resource.xml的资源11.在xxx.layout中引用xxx_resource.xml的资源12.Plugin_StrangeButton13.myGUI中xxx_skin.xml中控件小结14.指定StaticImage使用的资源中的图片15.myGUI中活用字符串16.图片按钮和静态图片的组合-选中控件17.对16的改进-8种状态的图片按钮18.ItemBox19.myGUI的layer20.Checkbox21.Tab22.List23.切换焦点24.鼠标键盘事件设置25.VScroll26.鼠标指针27.设置同级窗口位于最上层28.不同层的内部机制不同29.字体大小设置30.MultiList31.ScrollView=注意使用时请参考当前最新版本的myGUI基础1.theme主题。 （与windows主题类似，就是界面样式）用于设置界面使用的主题。 脚本如下=core_theme.xml-core_theme_tag.xml-以上表明当前界面使用主题“core_theme_tag.xml”，当然主题可以有多个，可以持续添加XXX_theme_tag.xml。 =core_theme_tag.xml-core.png#000000#000000-以上表明，当前界面将使用纹理图片“core.png”，当前界面的按钮在正常情况和按下情况的颜色为黑色。 “#000000”是颜色的十六进制表示法，具体什么颜色可看photoshop拾色器。 注意脚本中的名字只是一个代号，你可以使用任意程序可以识别的名字。 即不一定每个脚本都是先添加一个纹理图片，再添加控件颜色。 基本上，可以把此处的设置看做是定义全局变量，其可以在core.xml中排在core_theme.xml之后的所有脚本中使用。 -=新版本3.2.0使用MyGUI_BlueWhiteTheme.xml-新版本似乎偏向于直接使用纹理名和颜色值，未见到以前使用的样式。 -2.font字体。 用于定义界面使用的字体。 可以有多个字体，但默认的只能有一个。 myGUI使用字体的原理是把所有读出的字绘制到一张图片上，然后在需要某个字的时候再使用。 =sample_font.xml新版本3.2.0使用MyGUI_Fonts.xml，内容不变-以上表明，当前界面将使用名字(name)为“font_simhei.14”的字体“simhei.ttf”(Source)，即黑体。 名字中的“14”代表实际字体占14个像素，而整个字体占的大小(Size)为16。 字体的分辨率(Resolution)为50，参考photoshop中新建一个图片的默认分辨率为72。 字体不使用抗锯齿(Antialias)效果。 空格(SpaceWidth)的宽度为6。 tab键(TabWidth)的宽度为8。 光标(CursorWidth)宽度为2。 间距(Distance)为6。 修正高度(OffsetHeight)为0。 中的数字代表汉字的unicode范围，也就是CJK汉字的实际范围。 注意:unicode汉字标点并不是连续的的编码。 虽然使用的是大小为16的字体，但显示会有所不同，实际中显示一个汉字宽度为11左右。 对应的空格宽度也要注意调整，以上是没有加入unicode的中英文空格的(若使用的话，显示的1个空格约1像素)，实际使用的是自定义宽度6。 而我们使用的excel中的空格，其定义的宽度是excel定义的，与myGui不同。 故需要通过调整SpaceWidth的值，来适应作为脚本的excel中空格的大小。 3.settings设置。 用于设置界面默认使用的字体和鼠标指针等。 =sample_settings.xml新版本3.2.0的文件名为MyGUI_Settings.xml，内容一样-以上表明，当前界面将使用“font_simhei.14”为默认字体，使用“arrow”为默认鼠标指针。 4.resource资源。 用于设置界面使用鼠标指针图片和特殊标识图片等。 比如拖拽窗口边缘的图片。 有别于skin设置的控件，此处设置的控件可带有动画，可以在myGUI的图片查看器中查看。 当你有一大张图片，需要从中取出对应的图片时，可以用此处设置的控件定义一个图片控件。 资源脚本可以有多个，可以持续向core.xml添加。 =core_resource.xml-.-以上表明，当前界面拥有一个名为“pic_CorePointerArrow”的指针控件，其图片指针组(Pointer)的纹理“core_pointer.png”，大小为32*32。 .则开始指针的动画设置。 从纹理“core_pointer.png”可以看出，指针图片有4个，对应以上的帧“Frame”，有“1311”、“1352”、“5652”、“9152”。 而且第一帧有一个“count”属性为30，表明这一帧重复30帧，故此动画指针由35帧构成，每帧的速率“rate”为0.15秒，每过5秒左右循环一次。 =新版本3.2.0使用MyGUI_Images.xml，内容中只有名字和图片名有改变-.-5.wallpaper墙纸。 即背景。 =sample_wallpaper.layout-code:-/添加背景MyGUI:ResourceManager:getInstance().load(sample_wallpaper.layout);-以上表明，当前界面判断一个“StaticImage”控件是否是墙纸，是依靠层(layer)定义决定的，而层的定义在core_layer.xml中。 此处只是一个墙纸演示，实际中，还可以继续添加其它控件。 6.layer层。 用于设置界面控件的属性层(layer)的显示模式和鼠标拾取模式。 =core_layer.xml新版本3.2.0的文件名为MyGUI_Layers.xml，内容一样-.-以上表明，当前界面的层类型至少2种共享层(SharedLayer)、重叠层(OverlappedLayer)。 而对应不同名字的层“Wallpaper”、“Back”的区别在于，前者不能被鼠标拾取，后者则可以。 7.layout布局。 用于设置界面控件的位置。 =sample.layout-.-=sample_resource.xml-.-以上表明，当前界面在屏幕正中添加了一个静态图片控件，此控件的图片“sample_resource.xml”，布局脚本“sample.layout”是通过属性“Image_Resource”的值“pic_AountsBack”来获取图片的。 8.CheckBox复选按钮。 =core_skin.xml-以上表明，此复选按钮使用默认字体(FontName)，文本排列(TextAlign)为左靠齐垂直居中，文本颜色(TextColour)为sample_settings.xml中设定的颜色。 然后设置了复选按钮的子皮肤显示状态，共有8个，每个对应一个图片。 最后设置按钮之后的文本区域。 这里要想显示“checked”状态，必须通过程序设置状态。 =sample.layout-.-=code:-/加载层sample.layout MyGUI:LayoutManager:getInstance().load(sample.layout);/复选按钮事件MyGUI:ButtonPtr checkBoxBtn=m_pGUI-findWidget(myCheckBox);checkBoxBtn-eventMouseButtonClick=MyGUI:newDelegate(this,&MyListener:notifyToggleCheck);-void notifyToggleCheck(MyGUI:WidgetPtr_sender)MyGUI:ButtonPtr checkbox=_sender-castType();checkbox-setStateCheck(!checkbox-getStateCheck();-同样，对RadioBox也适用此法。 9.ProgressHealthBar进度条样式的血条。 可扩展到蓝条、经验条等。 此样式没有边框和背景。 其原理是填充事先提供的图片，比如设置图片宽为1，血条总长100，若要显示20长度血条，就要依次填充20个图片。 若设置图片宽度为15，则只需要填充2个图片，第2个填充的图片将半透明显示。 实际使用有很大局限性，而且myGUI的作者也似乎不想做太大改动，故要实现复杂的血条需要自己实现。 =core_skin.xml-以上表明，此种进度条样式的血条的原理是先设置一个图片皮肤Red，然后再应用这个皮肤到进度条上。 尤其要注意“TrackWidth”的大小设置，太大的话，实际中看到的血条占总长度的比例会不同。 为了控制血条的显示比例，需要在程序中设置。 =sample.layout-.-以上的LeftToRight可以替换为BottonToTop，其表示血条的累积方向，这样我们就可以设置不同的血条水平式、垂直式。 =code:-/加载层sample.layout MyGUI:LayoutManager:getInstance().load(sample.layout);/进度条事件myProgress MyGUI:ProgressPtr prog=m_pGUI-findWidget(myProgress);prog-setProgressRange (100);/设置一个范围值作为整个血条的假设长度prog-setProgressPosition (50);/这里的位置是在血条的假设长度下的长度Ogre:Root:getSingleton().renderOneFrame();/需要刷新-10.在xxx_skin.xml中引用xxx_resource.xml的资源=core_skin.xml-.-新版本3.2.0中使用MyGUI_BlueWhiteSkins.png/皮肤资源图片MyGUI_BlueWhiteImages.xml/皮肤图片集(3.2.0中只有MultiList的列标题按钮图片集)MyGUI_BlueWhiteSkins.xml/皮肤资源图片脚本(记录图片中小图片的坐标和大小)MyGUI_BlueWhiteTemplates.xml/皮肤脚本，相当于以前的core_skin.xml MyGUI_CommonSkins.xml/无图片的皮肤新版本与老版本的区别在于，其皮肤脚本完全分离了属于皮肤资源图片的脚本，只引用了对应小图片的的名字。 =MyGUI_BlueWhiteSkins.xml-.-=MyGUI_BlueWhiteTemplates.xml-.-11.在xxx.layout中引用xxx_resource.xml的资源=sample.layout-.-=Login4_resource.xml-.-注意你必须按照按照以上脚本的名字规范(normal,highlighted,pushed,disabled),其分别代表(一般、高亮、按下、失效)的状态(States)。 还有其他的名字，你可以在xxx_skin.xml中找到。 这只是当你用到标准控件的时候使用的命名规范。 12.Plugin_StrangeButton myGUI提供的一种自定义控件演示的插件。 当前演示的是一个按钮控件，当鼠标在按钮上方时，以倒叙的方式显示按钮的标题。 在Demo_PluginStrangeButton中，并没有从脚本添加奇怪按钮，而是直接创建了一个MyGUI:Gui:getInstance().createWidgetT(StrangeButton,Button,MyGUI:IntCoord(),MyGUI:Align:Center,Main);可以看出，其实就是脚本中的type=StrangeButton,其他跟标准按钮一样。 13.myGUI中xxx_skin.xml中控件小结 (1)名字带Empty的带Empty，说明此控件没有背景图片，完全是透明的背景。 比如EditEmpty、ScrollViewEmpty、TabEmpty、PanelEmpty。 还有一个特殊的控件Default，也是如此。 当其type=Widget时，即其相当于cegui的DefaultWindow。 这时如果有非其内部的控件包含在其屏幕范围内，则会失效。 只有其内部控件可以正常应用。 (2)StaticImage自定义时，存在不能添加背景的问题。 (3)控件解析(以下是LayoutEditor.exe中的控件，在core_skin.xml中还有很多其它控件)Button按钮ButtonSmall按钮ButtonMinusPlus减号加号按钮，用于展开面板ButtonX关闭按钮ButtonV对勾按钮ButtonDown向下按钮ButtonUp向上按钮ButtonLeft向左按钮ButtonRight向右按钮ButtonImage图片按钮，可自定义按钮使用的图片ButtonImageText CheckBox复选框RadioBox单选框Canvas ComboBox组合框DDContainer Edit框EditStretch区WordWrap无背景框，也可当区WordWrapSimple无背景框HScroll水平滚动条HSlider水平滑动条，用于调节在一定范围内数值的控件。 比如滑块在中间，范围为0-1，那么当前数值就为0.5。 VScroll垂直滚动条VSlider垂直滑动条ItemBoxV垂直项目盒子，类似于物品栏中拖拽物品的控件。 ItemBoxH水平项目盒子List列表框MenuBar PopupMenuMultList多行列表框，其中的选项内容可以在一行显示不下时移到下一行Progress进度条，滚动条为斑马条纹ProgressFill填充式进度条ProgressHealthBar血条式进度条ScrollView滚动视口区，就是一个有着垂直或水平滚动条的区域，你可以通过拖拉滚动条查看区域的其他地方。 ScrollViewEmpty无背景的滚动视口区RotatingSkin StaticImage静态图片StaticText静态文本Tab选项卡Window对话框式窗口WindowC窗口WindowCS可改变大小的窗口WindowCSX可改变大小、带关闭按钮的窗口Message Panel控制面板PanelSmall控制面板PanelEmpty无背景的控制面板TileClient DefaultClient默认客户区，多作为其他控件的子控件使用，比如窗口除了标题外的部分。 Separator1Separator2Separator3Separator4StackPanel WrapPanelStrangeButton HikariWidgetAwesomiumWidget BerkeliumWidget-新版本3.2.0中，使用了资源图片(皮肤Skin)和控件定义(模板Template)分离的概念，使用了如下3个文件取代了原来的xxx_skin.xml=MyGUI_BlueWhiteSkins.xml-CheckBoxSkin RadioButtonSkinButtonDownSkin ButtonUpSkinButtonLeftSkin ButtonRightSkinSliderTrackVSkin ScrollTrackVSkinSliderTrackHSkin ScrollTrackHSkinButtonSkin ButtonEmptySkinEditBoxSkin MenuBarSkinMenuItemSkin ScrollPanelHSkinScrollPanelVSkin ListBoxItemSkinSepDownHSkin SepUpHSkinSepDownVSkin SepUpVSkinClientDefaultSkin ClientTileSkinPanelSkin WhiteSkinCaptionEmptySkin CaptionSkinCaptionWithButtonSkin WindowFrameSkinWindowResizeLeftDownSkin WindowResizeRightDownSkinTabHeaderButtonSkin TabHeaderEmptySkinTabPanelSkin MenuItemNormalSkinMenuItemPopupButtonSkin MenuItemCheckButtonSkinProgressBarTrackHSkin MultiListButtonSkin-=MyGUI_BlueWhiteTemplates.xml-CheckBox RadioButtonScrollBarH ScrollBarVSliderH SliderVSliderHEmpty SliderVEmptyButton ButtonImageTextBox EditBoxEditBoxStretch EditBoxEmptyWordWrapEmpty ComboBoxWindow WindowCWindowCS WindowCXWindowCSX MenuBarMenuBarButton MenuBarSeparatorPopupMenu PopupMenuSeparatorPopupMenuNormal PopupMenuPopupProgressBar ProgressBarFillListBoxItem ListBoxItemBox ItemBoxEmptyScrollView ScrollViewEmptyTabHeaderButton TabControlMultiListBox MultiListButton-=MyGUI_CommonSkins.xml-/Skin PanelEmptyRotatingSkin TextBoxSkinEditClientSkin-/Template ImageBoxCanvas-14.指定StaticImage使用的资源中的图片=sample.layout-以上表明，此静态图片使用资源pic_MALE的标记为“highlighted”的图片。 也可在程序中设置，对应代码如下=code:-MyGUI:StaticImagePtr image=m_pGUI-findWidget(myStaticImage);image-setItemName(highlighted);-15.myGUI中活用字符串code:-text-setCaption(MyGUI:utility:toString(_info.drop_aept?#00FF00:(_info.drop_refuse?#FF0000:#000000),index:,_info.index,n#000000data:,data,_info.active?n#00FF00focus:n#800000focus,_info.select?n#00FF00select:n#800000select);text1-setCaption(L三国时的魏国，2020年由魏文帝曹n丕始，年魏元帝曹奂时灭亡。 );text2-setCaption(L三国时的魏国，2020年由魏文帝曹丕始，年魏元帝曹奂时灭亡。 );text3-setCaption(L三国时的魏国，2020年由魏文帝曹nL丕始，年魏元帝曹奂时灭亡。 );-说明，text1和text2的差别在于，前者行首比较对齐，后者在前一行最后是标点的情况下，会出现行首错半个字的空格。 text3与text1效果一样，不过其可以多行显示，而不是非用一行。 另外，myGUI使用了其自定义的USting,从所有控件取出的字符都是它，故如果你要定义一个全局字符变量记录控件中的字符内容，最好使用USting定义它。 否则，你会发现没有直接的函数转换string和USting。 16.图片按钮和静态图片的组合-选中控件这里使用创建角色时选择性别作为例子。 code-/创建角色窗口/男m_ManImg=m_pGUI-findWidget(Root/CreateRoleWin/RoleInfo/ManImg);m_ManBtn=m_pGUI-findWidget(Root/CreateRoleWin/RoleInfo/ManBtn);m_ManBtn-eventMouseButtonClick=MyGUI:newDelegate(this,&MyListener:notifyManBtn);m_ManBtn-setStateCheck(true);/默认选中男/创建角色窗口/女m_WomanImg=m_pGUI-findWidget(Root/CreateRoleWin/RoleInfo/WomanImg);m_WomanBtn=m_pGUI-findWidget(Root/CreateRoleWin/RoleInfo/WomanBtn);m_WomanBtn-eventMouseButtonClick=MyGUI:newDelegate(this,&MyListener:notifyWomanBtn);m_WomanBtn-setStateCheck(false);/默认选中男/void notifyManBtn(MyGUI:WidgetPtr_sender)/男女只有一个处于选中状态，未选中的按钮应该还可以被选中m_ManBtn-setVisible(false);m_W