CN103870251A - 从psd文件快速生成游戏ui功能面板的方法及装置 - Google Patents
从psd文件快速生成游戏ui功能面板的方法及装置 Download PDFInfo
- Publication number
- CN103870251A CN103870251A CN201210527916.3A CN201210527916A CN103870251A CN 103870251 A CN103870251 A CN 103870251A CN 201210527916 A CN201210527916 A CN 201210527916A CN 103870251 A CN103870251 A CN 103870251A
- Authority
- CN
- China
- Prior art keywords
- file
- panel
- psd
- assembly
- game
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Images
Landscapes
- Stored Programmes (AREA)
Abstract
本发明公开了一种从PSD文件快速生成游戏UI功能面板的方法及装置，包括步骤：S1，创建UI组件库；S2，解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；S3，依照对应关系组合各所述UI组件、所述UI面板布局文件和所述位图文件，生成UI功能面板。使得，UI布局设计完全美工掌控，游戏研发过程中开发人员不需要进行繁琐的UI组件坐标调整，可以提高开发效率。3)方便进行UI功能面板的全局风格更新。
Description
技术领域
本发明涉及网页游戏开发技术领域，尤其涉及一种从PSD文件快速生成游戏UI功能面板的方法及装置。
背景技术
Photoshop是Adobe公司开发的一个位图编辑软件，PSD是Photoshop源文件格式，Flash是Adobe公司开发的一个矢量图形编辑软件，FLA是Flash源文件格式，UI功能面板是指网页游戏中玩家操作、交互的可视化模块，UI组件是指UI功能面板中功能独立、完整的小模块，Flash组件是指Flash软件中自带的组件，SWF是Flash的最终输出文件格式、网页游戏的文件格式。
由于UI功能面板是网页游戏中玩家操作、交互的可视化模块，是游戏中玩法、游戏系统的载体，例如游戏中的物品背包系统；，UI功能面板在网页游戏开发中往往占40％以上的工作量。
UI功能面板制作流程为：策划人员设计游戏玩法，以线框图表示面板简单布局，以流程图表示面板交互方式→美术人员根据游戏和面板布局设计设计面板具体表现，以PSD文件保存→开发人员根据面板PSD文件和交互流程图实现游戏UI功能面板。
现有技术中实现游戏UI功能面板方法是：将面板PSD源文件拆分为一张张小的位图分别保存→将这些小图片导入Flash中，生成SWF文件→开发使用这些小图片作为UI组件的皮肤，并且将这些UI组件按照美术设计的位置摆放，进而制作UI功能面板。
由于Flash组件是通用组件并不是针对网页游戏这个业务领域专门设计的，所以其体系结构比较复杂，学习成本较高。另外，在UI功能面板制作过程中开发人员需要反复调整这些Flash组件的坐标，因而现有的上述方法效率较低。
发明内容
本发明的目的在于提供一种从PSD文件快速生成游戏UI功能面板的方法及装置，从而解决现有技术中存在的前述问题。
为了实现上述目的，本发明采用的技术方案如下：
一种从PSD文件快速生成游戏UI功能面板的方法，包括以下步骤：
S1，创建UI组件库；
S2，解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；
S3，依照对应关系组合各所述UI组件、所述UI面板布局文件和所述位图文件，生成UI功能面板。
优选的，S1具体为：
创建包含有多个用于实现UI功能面板中的特定功能的UI组件的组件集合，形成所述UI组件库。
优选的，所述UI组件库为包含有网页游戏常用UI组件的UI组件集合。
优选的，所述网页游戏常用UI组件包括：功能按钮、滚动条和提示标签。
优选的，S2具体为：
解析由美工依照UI设计要求设计生成的PSD文件，将每一个图层分别保存为独立的位图文件；
将各所述位图文件在所述PSD文件中的坐标位置记录于所述UI面板布局文件中；
依照各位图文件在PSD文件中用于代表的功能，为各位图文件分配UI组件，并将各位图文件所对应的UI组件标识记录于所述UI面板布局文件中，形成所述位图文件与所述UI组件的对应关系。
优选的，S3具体为：
依照所述UI面板布局文件中记录的所述坐标位置将所述各位图文件摆放整齐，并依照所述UI面板布局文件中记录的对应关系将所述UI组件与所述位图文件分别对应组合，再通过编译器编译生成所述游戏UI功能面板。
一种从PSD文件快速生成游戏UI功能面板的装置，包括：
UI组件库；
解析模块，用于解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；
组合模块，用于依照对应关系组合各所述UI组件、所述UI面板布局文件、所述位图文件，生成UI功能面板。
优选的，所述UI组件库为包含有网页游戏常用UI组件的UI组件集合。
优选的，所述网页游戏常用UI组件包括：功能按钮、滚动条和提示标签。
本发明的有益效果是：
1)创建网页游戏专用UI组件库，并使UI组件保持尽量简单，降低学习成本，提高运行效率。
2)UI布局设计完全美工掌控，游戏研发过程中开发人员不需要进行繁琐的UI组件坐标调整，可以提高开发效率。
3)方便进行UI功能面板的全局风格更新。
附图说明
图1是本发明的从PSD文件快速生成游戏UI功能面板的方法的步骤流程图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施方式仅仅用以解释本发明，并不用于限定本发明。
如图1所示，本发明公开了一种从PSD文件快速生成游戏UI功能面板的方法，包括以下步骤：
S1，创建UI组件库；，并使UI组件保持尽量简单，降低学习成本，提高运行效率。
S1具体为：
创建包含有多个用于实现UI功能面板中的特定功能的UI组件的组件集合，形成所述UI组件库。所述UI组件库为包含有网页游戏常用UI组件的UI组件集合。所述网页游戏常用UI组件包括：功能按钮、滚动条和提示标签等常用的UI组件。
S2，解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；
S2具体为：
解析由美工依照UI设计要求设计生成的PSD文件，将每一个图层分别保存为独立的位图文件；
将各所述位图文件在所述PSD文件中的坐标位置记录于所述UI面板布局文件中；
依照各位图文件在PSD文件中用于代表的功能，为各位图文件分配UI组件，并将各位图文件所对应的UI组件标识记录于所述UI面板布局文件中，形成所述位图文件与所述UI组件的对应关系。
S3，依照对应关系组合各所述UI组件、所述UI面板布局文件和所述位图文件，生成UI功能面板。
S3具体为：
依照所述UI面板布局文件中记录的所述坐标位置将所述各位图文件摆放整齐，并依照所述UI面板布局文件中记录的对应关系将所述UI组件与所述位图文件分别对应组合，再通过编译器编译生成所述游戏UI功能面板。
本发明还公开了一种从PSD文件快速生成游戏UI功能面板的装置，包括：
UI组件库；所述UI组件库为包含有网页游戏常用UI组件的UI组件集合。所述网页游戏常用UI组件包括：功能按钮、滚动条和提示标签等常用的UI组件。
解析模块，用于解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；
组合模块，用于依照对应关系组合各所述UI组件、所述UI面板布局文件、所述位图文件，生成UI功能面板。
通过采用本发明公开的上述技术方案，得到了如下有益的效果：
1)创建网页游戏专用UI组件库，并使UI组件保持尽量简单，降低学习成本，提高运行效率。
2)UI布局设计完全美工掌控，游戏研发过程中开发人员不需要进行繁琐的UI组件坐标调整，可以提高开发效率。
3)方便进行UI功能面板的全局风格更新。
以上所述仅是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理的前提下，还可以做出若干改进和润饰，这些改进和润饰也应视本发明的保护范围。
Claims (9)
1.一种从PSD文件快速生成游戏UI功能面板的方法，其特征在于，包括以下步骤：
S1，创建UI组件库；
S2，解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；
S3，依照对应关系组合各所述UI组件、所述UI面板布局文件和所述位图文件，生成UI功能面板。
2.根据权利要求1所述的从PSD文件快速生成游戏UI功能面板的方法，其特征在于，S1具体为：
创建包含有多个用于实现UI功能面板中的特定功能的UI组件的组件集合，形成所述UI组件库。
3.根据权利要求2所述的从PSD文件快速生成游戏UI功能面板的方法，其特征在于，所述UI组件库为包含有网页游戏常用UI组件的UI组件集合。
4.根据权利要求3所述的从PSD文件快速生成游戏UI功能面板的方法，其特征在于，所述网页游戏常用UI组件包括：功能按钮、滚动条和提示标签。
5.根据权利要求1所述的从PSD文件快速生成游戏UI功能面板的方法，其特征在于，S2具体为：
解析由美工依照UI设计要求设计生成的PSD文件，将每一个图层分别保存为独立的位图文件；
将各所述位图文件在所述PSD文件中的坐标位置记录于所述UI面板布局文件中；
依照各位图文件在PSD文件中用于代表的功能，为各位图文件分配UI组件，并将各位图文件所对应的UI组件标识记录于所述UI面板布局文件中，形成所述位图文件与所述UI组件的对应关系。
6.根据权利要求1所述的从PSD文件快速生成游戏UI功能面板的方法，其特征在于，S3具体为：
依照所述UI面板布局文件中记录的所述坐标位置将所述各位图文件摆放整齐，并依照所述UI面板布局文件中记录的对应关系将所述UI组件与所述位图文件分别对应组合，再通过编译器编译生成所述游戏UI功能面板。
7.一种从PSD文件快速生成游戏UI功能面板的装置，其特征在于，包括：
UI组件库；
解析模块，用于解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；
组合模块，用于依照对应关系组合各所述UI组件、所述UI面板布局文件、所述位图文件，生成UI功能面板。
8.根据权利要求7所述的从PSD文件快速生成游戏UI功能面板的装置，其特征在于，所述UI组件库为包含有网页游戏常用UI组件的UI组件集合。
9.根据权利要求8所述的从PSD文件快速生成游戏UI功能面板的装置，其特征在于，所述网页游戏常用UI组件包括：功能按钮、滚动条和提示标签。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210527916.3A CN103870251B (zh) | 2012-12-07 | 2012-12-07 | 从psd文件快速生成游戏ui功能面板的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201210527916.3A CN103870251B (zh) | 2012-12-07 | 2012-12-07 | 从psd文件快速生成游戏ui功能面板的方法及装置 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN103870251A true CN103870251A (zh) | 2014-06-18 |
| CN103870251B CN103870251B (zh) | 2017-06-06 |
Family
ID=50908825
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201210527916.3A Expired - Fee Related CN103870251B (zh) | 2012-12-07 | 2012-12-07 | 从psd文件快速生成游戏ui功能面板的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN103870251B (zh) |
Cited By (11)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104166552A (zh) * | 2014-08-15 | 2014-11-26 | 成都天奥信息科技有限公司 | 一种可移植内存位图图形库使用方法 |
| CN104331915A (zh) * | 2014-10-16 | 2015-02-04 | 厦门美图之家科技有限公司 | 一种利用素材对图像进行处理的方法 |
| CN106354490A (zh) * | 2016-08-19 | 2017-01-25 | 成都卓影科技股份有限公司 | Epg页面动态布局方法 |
| CN106502729A (zh) * | 2016-10-09 | 2017-03-15 | 武汉斗鱼网络科技有限公司 | 一种Flash播放器的资源加载方法及系统 |
| CN106775741A (zh) * | 2016-12-27 | 2017-05-31 | 网易（杭州）网络有限公司 | 图标生成方法及装置 |
| WO2017193574A1 (zh) * | 2016-05-13 | 2017-11-16 | 北京金山安全软件有限公司 | 锁屏界面的开发方法、装置及电子设备 |
| CN110975292A (zh) * | 2019-11-22 | 2020-04-10 | 福建天晴在线互动科技有限公司 | 一种基于psd文件的游戏地图绘制方法及其系统 |
| CN111553131A (zh) * | 2019-01-24 | 2020-08-18 | 北京京东尚科信息技术有限公司 | Psd文件解析方法、装置、设备及可读存储介质 |
| CN112230908A (zh) * | 2019-07-15 | 2021-01-15 | 腾讯科技（深圳）有限公司 | 一种对齐组件的方法、装置、电子设备及存储介质 |
| CN112579086A (zh) * | 2020-12-24 | 2021-03-30 | 四川长虹电器股份有限公司 | 一种适配多平台前端View的模板构建方法 |
| CN114296722A (zh) * | 2021-12-10 | 2022-04-08 | 浙江嘉兴数字城市实验室有限公司 | 一种应用于数字化改革的可视化快速开发方法及系统 |
Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1542699A (zh) * | 2003-04-29 | 2004-11-03 | 联想(北京)有限公司 | 图形用户界面生成方法及系统 |
| CN1987772A (zh) * | 2005-12-23 | 2007-06-27 | 上海全景数字技术有限公司 | 通用界面设计接口系统及使用该系统的界面开发方法 |
| CN101859245A (zh) * | 2009-04-09 | 2010-10-13 | 北大方正集团有限公司 | 一种生成用户界面的方法和装置 |
| CN102436381A (zh) * | 2011-11-15 | 2012-05-02 | 中兴通讯股份有限公司 | 一种界面布局的生成方法及装置 |
| CN102520960A (zh) * | 2011-12-21 | 2012-06-27 | 珠海许继芝电网自动化有限公司 | 一种界面自动生成系统以及方法 |
-
2012
- 2012-12-07 CN CN201210527916.3A patent/CN103870251B/zh not_active Expired - Fee Related
Patent Citations (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN1542699A (zh) * | 2003-04-29 | 2004-11-03 | 联想(北京)有限公司 | 图形用户界面生成方法及系统 |
| CN1987772A (zh) * | 2005-12-23 | 2007-06-27 | 上海全景数字技术有限公司 | 通用界面设计接口系统及使用该系统的界面开发方法 |
| CN101859245A (zh) * | 2009-04-09 | 2010-10-13 | 北大方正集团有限公司 | 一种生成用户界面的方法和装置 |
| CN102436381A (zh) * | 2011-11-15 | 2012-05-02 | 中兴通讯股份有限公司 | 一种界面布局的生成方法及装置 |
| CN102520960A (zh) * | 2011-12-21 | 2012-06-27 | 珠海许继芝电网自动化有限公司 | 一种界面自动生成系统以及方法 |
Non-Patent Citations (1)
| Title |
|---|
| 张丽娜: "PSD文档信息获取与XML表达自动阅卷研究", 《中国优秀硕士学位论文全文数据库 信息科技辑》 * |
Cited By (18)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN104166552A (zh) * | 2014-08-15 | 2014-11-26 | 成都天奥信息科技有限公司 | 一种可移植内存位图图形库使用方法 |
| CN104166552B (zh) * | 2014-08-15 | 2017-10-13 | 成都天奥信息科技有限公司 | 一种可移植内存位图图形库使用方法 |
| CN104331915A (zh) * | 2014-10-16 | 2015-02-04 | 厦门美图之家科技有限公司 | 一种利用素材对图像进行处理的方法 |
| WO2017193574A1 (zh) * | 2016-05-13 | 2017-11-16 | 北京金山安全软件有限公司 | 锁屏界面的开发方法、装置及电子设备 |
| CN106354490B (zh) * | 2016-08-19 | 2019-08-27 | 成都卓影科技股份有限公司 | Epg页面动态布局方法 |
| CN106354490A (zh) * | 2016-08-19 | 2017-01-25 | 成都卓影科技股份有限公司 | Epg页面动态布局方法 |
| CN106502729A (zh) * | 2016-10-09 | 2017-03-15 | 武汉斗鱼网络科技有限公司 | 一种Flash播放器的资源加载方法及系统 |
| CN106502729B (zh) * | 2016-10-09 | 2019-05-17 | 武汉斗鱼网络科技有限公司 | 一种Flash播放器的资源加载方法及系统 |
| CN106775741A (zh) * | 2016-12-27 | 2017-05-31 | 网易（杭州）网络有限公司 | 图标生成方法及装置 |
| CN106775741B (zh) * | 2016-12-27 | 2020-02-04 | 网易（杭州）网络有限公司 | 图标生成方法及装置 |
| CN111553131A (zh) * | 2019-01-24 | 2020-08-18 | 北京京东尚科信息技术有限公司 | Psd文件解析方法、装置、设备及可读存储介质 |
| CN111553131B (zh) * | 2019-01-24 | 2023-12-05 | 北京京东尚科信息技术有限公司 | Psd文件解析方法、装置、设备及可读存储介质 |
| CN112230908A (zh) * | 2019-07-15 | 2021-01-15 | 腾讯科技（深圳）有限公司 | 一种对齐组件的方法、装置、电子设备及存储介质 |
| CN112230908B (zh) * | 2019-07-15 | 2023-05-23 | 腾讯科技（深圳）有限公司 | 一种对齐组件的方法、装置、电子设备及存储介质 |
| CN110975292A (zh) * | 2019-11-22 | 2020-04-10 | 福建天晴在线互动科技有限公司 | 一种基于psd文件的游戏地图绘制方法及其系统 |
| CN112579086A (zh) * | 2020-12-24 | 2021-03-30 | 四川长虹电器股份有限公司 | 一种适配多平台前端View的模板构建方法 |
| CN112579086B (zh) * | 2020-12-24 | 2022-03-15 | 四川长虹电器股份有限公司 | 一种适配多平台前端View的模板构建方法 |
| CN114296722A (zh) * | 2021-12-10 | 2022-04-08 | 浙江嘉兴数字城市实验室有限公司 | 一种应用于数字化改革的可视化快速开发方法及系统 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN103870251B (zh) | 2017-06-06 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN103870251A (zh) | 从psd文件快速生成游戏ui功能面板的方法及装置 | |
| CN105068815B (zh) | 页面编辑器交互装置和方法 | |
| CN102004635B (zh) | 一种支持重用的仿真模型系统及其开发方法 | |
| WO2016054549A1 (en) | Application prototyping tool | |
| CN102981855A (zh) | 基于模板的界面自动生成的方法及系统 | |
| CN109656617A (zh) | 一种Web Service前端部署方法、存储介质、电子设备及系统 | |
| US9817639B2 (en) | Computational design method and interface | |
| CN102096593A (zh) | 基于Flex技术的Web端业务流程图形化编辑框架系统及方法 | |
| CN103793226B (zh) | 一种普适应用代码框架快速生成方法及原型系统 | |
| CN101727327B (zh) | 一种基于gef技术可视化jsp界面的开发方法 | |
| US20110072371A1 (en) | Application programming interface for user interface creation | |
| Brown | Silverlight 5 in action | |
| CN110442344A (zh) | 用于跨平台转换应用的方法、装置、系统及介质 | |
| KR100374296B1 (en) | System for developing application program for mobile terminal and mobile terminal including application program developed by the same | |
| US10664980B2 (en) | Vector graphics handling processes for user applications | |
| CN104899051B (zh) | Flash程序库文件的构建加载方法、系统及装置 | |
| CN106933439B (zh) | 一种基于社交平台的图片处理方法及系统 | |
| CN116360741A (zh) | 小程序开发方法、系统、设备及存储介质 | |
| CN102508648A (zh) | 一种图形引擎实现方法 | |
| US20090265682A1 (en) | Method for transforming data from a model into a secondary model to optimize code generation | |
| CN105183491A (zh) | 跨平台的桌面gis系统及其启动方法 | |
| CN104461905A (zh) | 一种智能卡虚拟机、api库与上层应用同时调试的方法及系统 | |
| Bellis et al. | HEP Software Foundation Community White Paper Working Group---Visualization | |
| Xianhong | Application of WPF to MIS development | |
| Ledermann et al. | Abstraction and implementation strategies for augmented reality authoring |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| C06 | Publication | ||
| PB01 | Publication | ||
| C53 | Correction of patent of invention or patent application | ||
| CB02 | Change of applicant information |
Address after: 56 No. 510665, No. 58, No. 401, and 402A, Jianzhong Road, Guangdong, Guangzhou Applicant after: Guangzhou 4399 Information Technology Co., Ltd. Address before: 1, 16, 1201-1 rooms, 510630 Yun Yun Road, Tianhe District, Guangdong, Guangzhou Applicant before: GUANGZHOU AIYOU INFORMATION TECHNOLOGY CO., LTD. |
|
| COR | Change of bibliographic data |
Free format text: CORRECT: APPLICANT; FROM: GUANGZHOU AIYOU INFORMATION TECHNOLOGY CO., LTD. TO: GUANGZHOU 4399 INFORMATION TECHNOLOGY CO., LTD. |
|
| C10 | Entry into substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| GR01 | Patent grant | ||
| GR01 | Patent grant | ||
| CF01 | Termination of patent right due to non-payment of annual fee |
Granted publication date: 20170606 Termination date: 20191207 |
|
| CF01 | Termination of patent right due to non-payment of annual fee |