CN103870251B - 从psd文件快速生成游戏ui功能面板的方法及装置 - Google Patents

从psd文件快速生成游戏ui功能面板的方法及装置 Download PDF

Info

Publication number
CN103870251B
CN103870251B CN201210527916.3A CN201210527916A CN103870251B CN 103870251 B CN103870251 B CN 103870251B CN 201210527916 A CN201210527916 A CN 201210527916A CN 103870251 B CN103870251 B CN 103870251B
Authority
CN
China
Prior art keywords
file
components
game
bitmap
function
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.)
Expired - Fee Related
Application number
CN201210527916.3A
Other languages
English (en)
Other versions
CN103870251A (zh
Inventor
张俊钦
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Guangzhou Sisanjiujiu Information Technology Co Ltd
Original Assignee
Guangzhou Sisanjiujiu Information Technology Co Ltd
Priority date (The priority date 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 date listed.)
Filing date
Publication date
Application filed by Guangzhou Sisanjiujiu Information Technology Co Ltd filed Critical Guangzhou Sisanjiujiu Information Technology Co Ltd
Priority to CN201210527916.3A priority Critical patent/CN103870251B/zh
Publication of CN103870251A publication Critical patent/CN103870251A/zh
Application granted granted Critical
Publication of CN103870251B publication Critical patent/CN103870251B/zh
Expired - Fee Related legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Landscapes

  • Stored Programmes (AREA)

Abstract

本发明公开了一种从PSD文件快速生成游戏UI功能面板的方法及装置，包括步骤：S1，创建UI组件库；S2，解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；S3，依照对应关系组合各所述UI组件、所述UI面板布局文件和所述位图文件，生成UI功能面板。使得，UI布局设计完全美工掌控，游戏研发过程中开发人员不需要进行繁琐的UI组件坐标调整，可以提高开发效率。3)方便进行UI功能面板的全局风格更新。

Description

从PSD文件快速生成游戏UI功能面板的方法及装置
技术领域
本发明涉及网页游戏开发技术领域，尤其涉及一种从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 (8)

1.一种从PSD文件快速生成游戏UI功能面板的方法，其特征在于，包括以下步骤：
S1，创建UI组件库；
S2，解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；具体为：
解析由美工依照UI设计要求设计生成的PSD文件，将每一个图层分别保存为独立的位图文件；
将各所述位图文件在所述PSD文件中的坐标位置记录于所述UI面板布局文件中；
依照各位图文件在PSD文件中用于代表的功能，为各位图文件分配UI组件，并将各位图文件所对应的UI组件标识记录于所述UI面板布局文件中，形成所述位图文件与所述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功能面板的方法，其特征在于，S3具体为：
依照所述UI面板布局文件中记录的坐标位置将所述各位图文件摆放整齐，并依照所述UI面板布局文件中记录的对应关系将所述UI组件与所述位图文件分别对应组合，再通过编译器编译生成所述游戏UI功能面板。
6.一种从PSD文件快速生成游戏UI功能面板的装置，其特征在于，包括：
UI组件库；
解析模块，用于解析依照UI设计要求设计生成的PSD文件，生成UI面板布局文件和一系列位图文件；具体用于：
解析由美工依照UI设计要求设计生成的PSD文件，将每一个图层分别保存为独立的位图文件；
将各所述位图文件在所述PSD文件中的坐标位置记录于所述UI面板布局文件中；
依照各位图文件在PSD文件中用于代表的功能，为各位图文件分配UI组件，并将各位图文件所对应的UI组件标识记录于所述UI面板布局文件中，形成所述位图文件与所述UI组件的对应关系；
组合模块，用于依照对应关系组合各所述UI组件、所述UI面板布局文件、所述位图文件，生成UI功能面板。
7.根据权利要求6所述的从PSD文件快速生成游戏UI功能面板的装置，其特征在于，所述UI组件库为包含有网页游戏常用UI组件的UI组件集合。
8.根据权利要求7所述的从PSD文件快速生成游戏UI功能面板的装置，其特征在于，所述网页游戏常用UI组件包括：功能按钮、滚动条和提示标签。
CN201210527916.3A 2012-12-07 2012-12-07 从psd文件快速生成游戏ui功能面板的方法及装置 Expired - Fee Related CN103870251B (zh)

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 CN103870251A (zh) 2014-06-18
CN103870251B true 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)

Families Citing this family (11)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104166552B (zh) * 2014-08-15 2017-10-13 成都天奥信息科技有限公司 一种可移植内存位图图形库使用方法
CN104331915A (zh) * 2014-10-16 2015-02-04 厦门美图之家科技有限公司 一种利用素材对图像进行处理的方法
CN106020808A (zh) * 2016-05-13 2016-10-12 北京金山安全软件有限公司 一种锁屏界面的开发方法、装置及电子设备
CN106354490B (zh) * 2016-08-19 2019-08-27 成都卓影科技股份有限公司 Epg页面动态布局方法
CN106502729B (zh) * 2016-10-09 2019-05-17 武汉斗鱼网络科技有限公司 一种Flash播放器的资源加载方法及系统
CN106775741B (zh) * 2016-12-27 2020-02-04 网易（杭州）网络有限公司 图标生成方法及装置
CN111553131B (zh) * 2019-01-24 2023-12-05 北京京东尚科信息技术有限公司 Psd文件解析方法、装置、设备及可读存储介质
CN112230908B (zh) * 2019-07-15 2023-05-23 腾讯科技（深圳）有限公司 一种对齐组件的方法、装置、电子设备及存储介质
CN110975292A (zh) * 2019-11-22 2020-04-10 福建天晴在线互动科技有限公司 一种基于psd文件的游戏地图绘制方法及其系统
CN112579086B (zh) * 2020-12-24 2022-03-15 四川长虹电器股份有限公司 一种适配多平台前端View的模板构建方法
CN114296722A (zh) * 2021-12-10 2022-04-08 浙江嘉兴数字城市实验室有限公司 一种应用于数字化改革的可视化快速开发方法及系统

Citations (5)

* Cited by examiner, † Cited by third party
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 珠海许继芝电网自动化有限公司 一种界面自动生成系统以及方法

Patent Citations (5)

* Cited by examiner, † Cited by third party
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)

* Cited by examiner, † Cited by third party
Title
PSD文档信息获取与XML表达自动阅卷研究;张丽娜;《中国优秀硕士学位论文全文数据库 信息科技辑》;20100715;I138-658,第27页3-4段，图3-5 *

Also Published As

Publication number Publication date
CN103870251A (zh) 2014-06-18

Similar Documents

Publication Publication Date Title
CN103870251B (zh) 从psd文件快速生成游戏ui功能面板的方法及装置
CN102609991B (zh) 三维实体模型轻量化优化方法
US9619128B2 (en) Dynamic presentation prototyping and generation
CN104007967B (zh) 一种基于可扩展标记语言的用户界面生成方法和装置
CN102880708B (zh) 用于实现html页面的可视化设计的系统和方法
WO2010091623A1 (zh) 应用程序界面动态生成装置及方法
EP1672542A3 (en) System and method for interactively linking data shapes in a diagram
CN102148048A (zh) 歌词显示方法及装置
CN101727327B (zh) 一种基于gef技术可视化jsp界面的开发方法
CN106874494A (zh) 一种应用于游客偏好分析的前端展现方法
CN105468573A (zh) 可配置式图表应用系统
CN106484384A (zh) 一种页面动画展示方法及系统
CN105867911B (zh) 一种Iris 2D图形引擎的实现方法
CN107464465A (zh) 一种主动式应急撤离虚拟训练系统
Li et al. Design and implementation of traditional kite art platform based on human-computer interaction and WebAR technology
CN104407893A (zh) 展示动画的方法及装置
CN104899051B (zh) Flash程序库文件的构建加载方法、系统及装置
CN103824205A (zh) 一种基于Android平台的楼盘展示方法
Lan Analysis on the development strategy of traditional Chinese opera based on digital media technology
KR20100095202A (ko) 게임 시나리오 제작 시스템 및 그 제작 방법
Xianhong Application of WPF to MIS development
Bai A Method of Making Character skeleton Animation Based on DragonBones
CN109558637A (zh) 一种跨平台交互式飞机系统动态原理图设计方法
Giunchi et al. DreamCodeVR: Towards Democratizing Behavior Design in Virtual Reality with Speech-Driven Programming
KR102355597B1 (ko) 인공 지능 기반 가상 현실 유괴범 캐릭터 생성 방법 및 장치

Legal Events

Date Code Title Description
C06 Publication
PB01 Publication
C53 Correction of patent for 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