游戏大厅类软件 Demo系列（二）

最新推荐文章于 2021-07-10 15:10:50 发布
最新推荐文章于 2021-07-10 15:10:50 发布
阅读量861 收藏
点赞数
分类专栏： 界面编程 文章标签： 游戏 image tree button xml list
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/uieasy/article/details/6264931
版权

 

游戏大厅类软件  DSkinLite界面库Demo系列（二）

image

游戏大厅类软件是UIEASY开发团队制作的又一个软件demo，此次发布只是一个雏形，我们还将继续完善此Demo，使其各项功能特性更加贴近实 际软件。游戏大厅Demo主要演示DSkinLite界面库对Tree control, list control, radio buttons等控件各项特性的完全支持，同时也展示了DSkinLite界面库对控件透明等特性的支持。

下载示例（安装后 主界面 ->Demos –> Game Demo ）

 

 

> DSkinLite界面库对Tree control 的支持

游戏大厅Demo主要演示DSkinLite界面库对Tree control 树形控件的支持。 DSkinLite界面库从3.0开始加入了对List box, list control, tree control树形控件的item绘制支持，即可以通过在XML中配置Item的样式及相关API函数来绘制Item内容。如下图游戏列表：

 image

  在DSkinlite界面库中，items内容的绘制，以一个item为单位来定义其风格。这种设计比较符合Win32 tree control本身的机制，我们知道如果需要自绘tree control树形控件，须设置tree control的OWN_DRAW属性，然后在DrawItem等消息中绘制绘制的item，即以一个Item为单位绘制。从这种机制得到启 发，DSkinlite界面库对tree control内容的绘制也以item为单位，首先在xml中定义item的风格样式，用户可以定义一个或者多个item样式，也可以通过改变一个样式中 的元素属性来组合不同的item样式。 

    生成多种Item样式的方式一，在xml 的tree control定义中，直接定义多个item样式。如下面代码所示： 

<treectrlinfo  bDrawOver="true" itemheight="24" levelpos="0">
<drawitem id="default" >    
    <image id="collapseicon" picfile="#tree2.collapse" left="14" 
           top="0" width="16" height="16" state="non"/>
    <image id="expandicon"   picfile="#tree2.expand" left="14" 
           top="0" width="16" height="16" state="non"/>        
    <text  content="#default" left="57" top="2" state="normal" 
               textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57"  top="2" state="over" 
              textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57"  top="2" state="checked" 
             textcolor="RGB(0,0,0)" font="#default_bold" />
    <image id="treeitemicon"   picfile="#tree2.alltask" left="32"
                 top="0" width="24" height="24" state="all"/>
</drawitem>
<drawitem id="Parent" >
    <image id="collapseicon" picfile="#tree2.collapse" left="14" 
           top="0" width="16" height="16" state="non"/>
    <image id="expandicon"   picfile="#tree2.expand" left="14" 
           top="0" width="16" height="16" state="non"/>        
    <text  content="#default" left="57" top="2" state="normal" 
               textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57"  top="2" state="over" 
              textcolor="RGB(0,0,0)" font="#default"/>
    <text content="#default" left="57"  top="2" state="checked" 
             textcolor="RGB(0,0,0)" font="#default_bold" />
    <image picfile="#tree2.search" left="136" top="3" state="normal"
           rectinfile="0,0,15,15" width="15" height="15" />        
    <image picfile="#tree2.search" left="136" top="3"  state="over"
           rectinfile="16,0,15,15" width="15" height="15"/>
    <image picfile="#tree2.search" left="136" top="3" state="checked"
           rectinfile="32,0,15,15" width="15" height="15" />
    <image  id="treeitemicon"   picfile="#tree2.alltask" left="32" 
            top="0" width="24" height="24" state="all"/>
</drawitem>
</treectrlinfo>



 

上面的XML代码，我们定义了两个item 风格，一个id为“default”，另一个id为“Parent”。在treectrlinfo，必须有一个id为“default”item风格，此 为item的默认风格。DSkinLite默认使用id为“default”的风格来绘制item，开发人员可以通过函数dsSetItemStyle来 设置item的风格。 

   1:  tvInsert.item.pszText = _T("Downloaded");
   2:  HTREEITEM hDownloaded = pCtrl->InsertItem(&tvInsert);
   3:  dsSetItemStyle( pCtrl->GetSafeHwnd(), 
   4:                  (int)hDownloaded,
   5:                  0, 
   6:                  _T("Parent"),
   7:                  FALSE);

 

生成多种Item样式的方式二，通过修改item风格定义中的元素的属性来组合出不同的item风格。常用的函数有：

 

   1:  BOOL __stdcall dsSetDrawItemVisibleEx2( HWND hwnd, 
   2:                                          int nItem, 
   3:                                          int nSubItem, 
   4:                                          int nMinIndex, 
   5:                                          int nMaxIndex, 
   6:                                          BOOL bVisible , 
   7:                                          BOOL bRedrawItem );
   8:   
   9:  BOOL __stdcall dsSetDrawItemVisibleEx( HWND hwnd, 
  10:                                          int nItem, 
  11:                                          int nSubItem, 
  12:                                          LPCTSTR strID, 
  13:                                          BOOL bVisible,  
  14:                                          BOOL bRedrawItem);
  15:   
  16:  BOOL __stdcall dsSetDrawItemValueEx(  HWND hwnd, 
  17:                                          int nItem, 
  18:                                          int nSubItem,
  19:                                          LPCTSTR strID, 
  20:                                          LPCTSTR strValue, 
  21:                                          BOOL bRedrawItem);

这三个函数主要用来控制item中元素是否显示，及设置某个元素的值。例如：

 

此为游戏大厅示例中游戏列表 tree control的item定义，我们可以看到虽然不同的item风格不一样，但是我们没有定义多个不同的item风格。而是通过对某些元素的显示和隐藏来 配置不同风格的item定义。例如index 100-117 定义了不同游戏的图标，在程序中我们根据程序的逻辑来配置item的此图标。

   1:  <treectrlinfo  bDrawOver="true" itemheight="24" levelpos="0">
   2:  <drawitem id="default" >    
   3:      <image id="collapseicon" picfile="#tree2.collapse" left="14"
   4:             top="0" width="16" height="16" state="non"/>
   5:      <image id="expandicon"   picfile="#tree2.expand" left="14"
   6:             top="0" width="16" height="16" state="non"/>        
   7:      <text  content="#default" left="57" top="2" state="normal"
   8:                 textcolor="RGB(0,0,0)" font="#default"/>
   9:      <text content="#default" left="57"  top="2" state="over"
  10:                textcolor="RGB(0,0,0)" font="#default"/>
  11:      <text content="#default" left="57"  top="2" state="checked"
  12:               textcolor="RGB(0,0,0)" font="#default_bold" />
  13:      <image id="treeitemicon"   picfile="#tree2.alltask" left="32"
  14:                   top="0" width="24" height="24" state="all"/>
  15:  </drawitem>
  16:  <drawitem id="Parent" >
  17:  <image id="collapseicon" picfile="#tree2.collapse" left="14"
  18:         top="0" width="16" height="16" state="non"/>
  19:  <image id="expandicon"   picfile="#tree2.expand" left="14"
  20:         top="0" width="16" height="16" state="non"/>  
  21:  <text  content="#default" left="57" top="2" state="normal"
  22:             textcolor="RGB(0,0,0)" font="#default"/>
  23:  <text content="#default" left="57"  top="2" state="over"
  24:            textcolor="RGB(0,0,0)" font="#default"/>
  25:  <text content="#default" left="57"  top="2" state="checked"
  26:           textcolor="RGB(0,0,0)" font="#default_bold" />
  27:  <image picfile="#tree2.search" left="136" top="3" state="normal"
  28:         rectinfile="0,0,15,15" width="15" height="15" />  
  29:  <image picfile="#tree2.search" left="136" top="3"  state="over"
  30:         rectinfile="16,0,15,15" width="15" height="15"/>
  31:  <image picfile="#tree2.search" left="136" top="3" state="checked"
  32:         rectinfile="32,0,15,15" width="15" height="15" />
  33:  <image  id="treeitemicon"   picfile="#tree2.alltask" left="32"
  34:          top="0" width="24" height="24" state="all"/>
  35:  </drawitem>
  36:  </treectrlinfo>
  37:   
  38:   
  39:  <drawitem id="default" >    
  40:  <image id="collapseicon" picfile="#tree.expand.icon" 
  41:         rectinfile="0,0,14,15" left="12" top="3" width="14"
  42:          height="15" state="non"/>
  43:  <image id="expandicon"   picfile="#tree.expand.icon" 
  44:         rectinfile="14,0,14,15" left="12" top="3" width="14"
  45:         height="15" state="non"/>        
  46:  <text  content="#default" left="54" top="0" state="normal"
  47:      textcolor="RGB(0,0,0)" bsingleline="true" />
  48:  <text content="#default" left="54"  top="0" state="over" 
  49:      textcolor="RGB(0,0,0)" bsingleline="true" />
  50:  <text content="#default" left="54"  top="0" state="checked" 
  51:     textcolor="RGB(198,97,11)" bsingleline="true" />
  52:   
  53:   
  54:  to specify which to be show and which to be hide-->
  55:  <image  index="100" visible="false" picfile="#tree.gametype.icon"
  56:          rectinfile="0,0,18,18" left="32" top="1" width="18" 
  57:          height="18" state="all"/>        
  58:  <image  index="101" visible="false" picfile="#tree.gametype.icon"
  59:          rectinfile="18,0,18,18" left="32" top="1" width="18" 
  60:          height="18" state="all"/>        
  61:  <image  index="102" visible="false" picfile="#tree.gametype.icon"
  62:          rectinfile="36,0,18,18" left="32" top="1" width="18" 
  63:          height="18" state="all"/>        
  64:  <image  index="103" visible="false" picfile="#tree.gametype.icon"
  65:          rectinfile="54,0,18,18" left="32" top="1" width="18" 
  66:          height="18" state="all"/>        
  67:  <image  index="104" visible="false" picfile="#tree.gametype.icon"
  68:          rectinfile="72,0,18,18" left="32" top="1" width="18" 
  69:          height="18" state="all"/>        
  70:  <image  index="105" visible="false" picfile="#tree.gametype.icon"
  71:          rectinfile="90,0,18,18" left="32" top="1" width="18" 
  72:          height="18" state="all"/>        
  73:  <image  index="106" visible="false" picfile="#tree.gametype.icon"
  74:          rectinfile="108,0,18,18" left="32" top="1" width="18" 
  75:          height="18" state="all"/>        
  76:  <image  index="107" visible="false" picfile="#tree.gametype.icon"
  77:          rectinfile="126,0,18,18" left="32" top="1" width="18" 
  78:          height="18" state="all"/>        
  79:  <image  index="108" visible="false" picfile="#tree.gametype.icon"
  80:          rectinfile="144,0,18,18" left="32" top="1" width="18" 
  81:          height="18" state="all"/>        
  82:  <image  index="109" visible="false" picfile="#tree.gametype.icon"
  83:          rectinfile="162,0,18,18" left="32" top="1" width="18" 
  84:          height="18" state="all"/>        
  85:  <image  index="110" visible="false" picfile="#tree.gametype.icon"
  86:          rectinfile="180,0,18,18" left="32" top="1" width="18" 
  87:          height="18" state="all"/>        
  88:  <image  index="111" visible="false" picfile="#tree.gametype.icon"
  89:          rectinfile="198,0,18,18" left="32" top="1" width="18" 
  90:          height="18" state="all"/>        
  91:  <image  index="112" visible="false" picfile="#tree.gametype.icon"
  92:          rectinfile="216,0,18,18" left="32" top="1" width="18" 
  93:          height="18" state="all"/>        
  94:  <image  index="113" visible="false" picfile="#tree.gametype.icon"
  95:          rectinfile="234,0,18,18" left="32" top="1" width="18" 
  96:          height="18" state="all"/>        
  97:  <image  index="114" visible="false" picfile="#tree.gametype.icon"
  98:          rectinfile="252,0,18,18" left="32" top="1" width="18" 
  99:          height="18" state="all"/>        
 100:  <image  index="115" visible="false" picfile="#tree.gametype.icon"
 101:          rectinfile="270,0,18,18" left="32" top="1" width="18" 
 102:          height="18" state="all"/>        
 103:  <image  index="116" visible="false" picfile="#tree.gametype.icon"
 104:          rectinfile="288,0,18,18" left="32" top="1" width="18" 
 105:          height="18" state="all"/>        
 106:  <image  index="117" visible="false" picfile="#tree.gametype.icon"
 107:          rectinfile="306,0,18,18" left="32" top="1" width="18" 
 108:          height="18" state="all"/>        
 109:   
 110:  <image  index="120" visible="false" left="32" top="1" width="18"
 111:          picfile="#tree.unknown" height="18" state="all"/>        
 112:  <image  index="121" visible="false" left="32" top="1" width="18"
 113:          picfile="#tree.unknown.dis" height="18" state="all"/>
 114:   
 115:  <image  index="200" visible="false" picfile="#tree.icon" 
 116:          left="32" top="1" width="18" height="18" state="all" />
 117:   
 118:  <!--Event Item -->
 119:  <eventitem id="EnterQuickly" visible="false" left="168" top="4"
 120:             event="LButtonDown" cursor="#handcur" 
 121:             state="all" sendparent="true">
 122:      <text id="textdefault" content="EnterQuickly" left="0" 
 123:            horzalign="left" top="0" state="all"  
 124:            textcolor="RGB(128,128,128)" 
 125:            font="#default_link"/>
 126:  </eventitem>    
 127:   
 128:  <eventitem id="DownloadNow" visible="false" left="168" top="4"  
 129:             event="LButtonDown" cursor="#handcur" 
 130:             state="all" sendparent="true">
 131:      <text id="textdefault" content="DownloadNow" left="0" 
 132:      horzalign="left" top="0" state="all"  
 133:      textcolor="RGB(128,128,128)" font="#default_link"/>
 134:  </eventitem>                
 135:  </drawitem>

 

> 使用DSkinLite界面库构建功能强大的TabBar

   游戏大厅Demo需要一个类似TabCtrl的控件来显示当前打开的游戏。显然使用传统的Tab control 有很多地方难以实现，比如不同tab item的风格可能不同，不同的tab item长度可能不同，右端需要一个关闭按钮等。基于这些因素的考虑，uieasy界面顾问建议使用一组Radio butons来实现，这样更加灵活。但同时我们也发现，不能只是简单的将一组radio buttons放置到一起，还需要处理增加button，关闭button等。在此Demo中，CButtonGroup类为管理一组Radio Buttons的容器，可以通过此类来添加，删除button及其他管理。其中右上角的关闭按钮为radio button的子控件。

image

 

uieasy
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
使用Easy UI进行页面的简单布局
XCMercy
12-16 3455
Easy UI进行页面布局有两种方式：标记创建布局和全局布局，标记创建布局是在div标签中设置 class=“easyui-layout”,全局布局是在body标签中设置class=“easyui-layout”。 创建全局布局 在body标签中设置class=“easyui-layout”。对页面进行布局 XXX技术有限公司版
dskinlite(uieasy)破解版dll
03-13
dskinlite交流QQ群138231653.txt
dskinlite(uieasy)使用交流
拥剑的博客
12-26 373
加qq群：138231653
EasyUI(前端框架)
wyy的博客
07-10 1万+
第一节 EasyUI的介绍和常用组件 [1]EasyUI的介绍 介绍: EasyUI是一个前端开发的框架，其将常用的页面开发使用的组件进行了 封装，前端开发人员只需将EasyUI的资源导入项目后使用即可，快速 提升开发效率。 使用： ① 导入EasyUI的资源 ② 查阅API文档使用EasyUI的组件完成页面开发 注意： 使用EasyUI，其实就是在使用别人已经封装好的代码来完成自己的页面开发。 所以必须按照EasyUI的文档说明来使用。所以我们学习EasyUI，其实就是在 学习如何按
Easy UI常用的UI框架
01-26
Easy UI常用的UI框架 拥有它让你的开发速度提高N倍！！内含easy ui教程等
游戏大厅小游戏
01-05
delphi的一个小游戏源码 uses Windows, Messages, SysUtils, Variants, Classes, Graphics, Controls, Forms, Dialogs, StdCtrls,shellapi; type TForm1 = class(TForm) Button1: TButton; Button2: TButton; Button3: TButton; Button4: TButton; Button5: TButton; Button6: TButton; Button7: TButton; Button8: TButton; Button9: TButton; Button10: TButton; procedure Button1Click(Sender: TObject); procedure Button2Click(Sender: TObject); procedure Button3Click(Sender: TObject); procedure Button4Click(Sender: TObject); procedure Button7Click(Sender: TObject); procedure Button8Click(Sender: TObject); procedure Button9Click(Sender: TObject); procedure Button10Click(Sender: TObject); procedure Button6Click(Sender: TObject); procedure Button5Click(Sender: TObject); private { Private declarations } public { Public declarations } end; var Form1: TForm1; implementation {$R *.dfm} procedure TForm1.Button1Click(Sender: TObject); begin shellexecute(handle,'open','project6\p1.exe','-s','',sw_show); end; procedure TForm1.Button2Click(Sender: TObject); begin shellexecute(handle,'open','project10\project1.exe','-s','',sw_show); end; procedure TForm1.Button3Click(Sender: TObject); begin shellexecute(handle,'open','project14\project1.exe','-s','',sw_show); end; procedure TForm1.Button4Click(Sender: TObject); begin shellexecute(handle,'open','project17\project1.exe','-s','',sw_show); end; procedure TForm1.Button5Click(Sender: TObject); begin shellexecute(handle,'open','project16\Project1.exe','-s','',sw_show); end; procedure TForm1.Button7Click(Sender: TObject); begin shellexecute(handle,'open','project12\p1.exe','-s','',sw_show); end; procedure TForm1.Button8Click(Sender: TObject); begin showmessage('作者：金子捷'+#13+'友情帮助：滕一铭、刘鑫浩'); end; procedure TForm1.Button9Click(Sender: TObject); begin shellexecute(handle,'open','关窗户\project1.exe','-s','',sw_show); end; procedure TForm1.Button10Click(Sender: TObject); begin shellexecute(handle,'open','拼图\project1.exe','-s','',sw_show); end; procedure TForm1.Button6Click(Sender: TObject); begin shellexecute(handle,'open','24\24点游戏1.exe','-s','',sw_show); end; end.
cocosCreator大厅子游戏笔记demo
09-03
《CocosCreator大厅子游戏整合与热更新技术详解》 在移动游戏开发领域，CocosCreator作为一款强大的2D和3D游戏开发引擎，被广泛应用于各种类型的游戏制作。本篇将深入探讨如何利用CocosCreator实现大厅系统与多个...
unity小游戏demo（小狐狸）
最新发布
03-03
一个小游戏demo分享。 关于麦扣老师的Unity入门课程，2022年制作的小游戏demo，是我学习游戏制作的开端。 通过这门课程，我初次了解了Unity引擎的基本原理和工作流程。从最开始的场景搭建、物体控制，到后来的脚本...
java游戏demo.zip
12-25
java游戏demojava游戏demojava游戏demojava游戏demo java游戏demojava游戏demojava游戏demojava游戏demo java游戏demojava游戏demojava游戏demojava游戏demo java游戏demojava游戏demojava游戏demojava游戏demo java...
cocosCreator大厅子游戏笔记demo，CocosCreator项目整合大厅和多个子项目
11-24
标题中的"大厅子游戏笔记demo"指的是一个示例项目，它演示了如何在CocosCreator中实现一个游戏大厅，这个大厅可以作为玩家进入各个子游戏的入口。这种设计模式在很多游戏中非常常见，比如在线游戏平台或者包含多个...
游戏大厅客户端源代码
03-23
游戏大厅客户端的源代码，VC++网络编程。
C++界面库
热门推荐
_Witch__的专栏
09-03 6万+
开源C++界面库    1.RingSdk     Ringsdk是CSDN上一个前辈自己写的界面库，这个界面库很轻而易举实现QQ2009的界面效果。链接见    http://blog.csdn.net/ringphone/article/details/2911244   貌似Ringsdk和MFC无法进行交互，但是 RingSdk其中有很多的图形处理的代码都非常有参考价值。
easy-UI的介绍以及使用
weixin_42800427的博客
07-18 3701
官网介绍 asyui是一种基于jQuery、Angular.、Vue和React的用户界面插件集合。 easyui为创建现代化，互动，JavaScript应用程序，提供必要的功能。 使用easyui你不需要写很多代码，你只需要通过编写一些简单HTML标记，就可以定义用户界面。 easyui是个完美支持HTML5网页的完整框架。 easyui节省您网页开发的时间和规模。 easyui很简单但功能强大的。 easyUI使用 easyUI引入 <!--引入jquery的js，EasyUI的执行需要依赖于jQ
【ssm个人博客项目实战02】easy UI搭建后台管理界面
余空啊的博客
04-14 1万+
前面一节我们已经成功搭建ssm项目的环境，接下来我们需要做的就是搭建我们后台管理界面的框架。 这搭建完之后的效果图 基于easy UI搭建后台界面jQuery EasyUI是一组基于jQuery的UI插件集合体，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的JavaScript，也不需要对css样式有深入的了解，开发者需要了
VC++程序员如何做好界面
guoduhua的专栏
03-08 3634
本屌丝在新春放假期间闲来无事，在各大编程论坛溜达了一圈。发现年前的帖子中，有VC++程序员在界面开发方面遇到了很多苦恼，有抱怨界面工作不好做的，有抱怨用错了界面库的，也有紧急求得技术问题帮助的。看到这些，想起了五年前的我。我那时正好在一家互联网公司担任技术总监一职，手下有三个人。那是一家刚创办的公司，老板是我初中同学，他在美国呆了几年拿到EMBA后到国内创业。在一次同学聚会上了解到彼此工作方向。后
写个养成类微信小游戏demo
04-08
好的，我可以为你提供一个简单的养成类微信小游戏demo。你可以使用微信小游戏开发者工具来创建并运行此demo。以下是demo的代码示例： ``` // app.js App({ globalData: { score: 0, level: 1, }, onLaunch: ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值