《M8围棋谱》自定义皮肤设计指南
《M8围棋谱》自定义皮肤设计指南
版本:1.0
作者:liigo,2009年10月,于大连。
http://blog.csdn.net/liigo
《M8围棋谱》,专为魅族M8手机开发的围棋打谱软件。此软件是 Google Code 上的开源软件,项目主页为:http://code.google.com/p/m8weiqipu/。
还在开发过程中,目前功能不全,但基本功能可用。其基本功能有:打开并解析SGF棋谱,单步向前向后,落子音效,自动提子,显示棋局信息和解说,支持自定义皮肤。
魅族M8手机官方论坛下载地址:http://bbs.meizu.com/thread-1250668-1-1.html
《M8围棋谱》支持自定义皮肤。通过设计新的皮肤,可以自定义背景图片、棋盘、棋子(黑子/白子/当前子)、落子声音等。本设计指南针对0.8以上版本。
此软件是竖屏全屏显示的,屏幕顶部不显示信号栏。其运行界面,从上到下分为四个部分,依次是:棋局基本信息显示区(在屏幕最上方,大约50个像素高度),棋盘区域(大小由皮肤制作者决定,这是界面的核心区域),解说信息显示区(此区域大小取决于它上面和下面的区域),操作按钮栏(在屏幕最底部,固定高度65个像素)。另可参考本文最后的屏幕截图。
开始制作皮肤时,第一步应先准备一幅 480x720(宽x高)的背景图片(background.png),初步确定棋盘的大小和位置之后,窗口中的四个区域也就大致确定了。
棋盘是画在背景图片上的。确定棋盘的大小和位置是皮肤制作过程中相对比较复杂的一项工作,涉及到一些简单的数学运算。一般来说,我们都希望充分利用屏幕的宽度,尽量把棋盘画的大一些。在计算棋盘中相临两线的间隔时,记得要把线自身的宽度和边线左右两侧的空间(至少要留下半个棋子的宽度,以保证边线上的棋子完整显示)一并考虑进去哦。软件对棋盘位置的要求是:棋盘上方至少要保留大约50像素高度的空间(用于显示棋局基本信息,如对弈双方、赛事名称日期等,通常有两行文字);软件对棋盘大小的要求是:线与线之间必须是等宽的。除此之外,就没有其它的要求了。待一切确定并绘制完毕后,需在皮肤配置文件(skin.ini)中指定以下信息:几路棋盘(19? 13? 9?),棋盘左上角棋子的横坐标和纵坐标(屏幕或图片左上角为坐标原点(0,0)),相临两线之间的间隔(单位为像素),线的宽度(单位为像素)。下文将详细介绍具体的配置细节。
按下来要确定棋子的大小,其直径通常比棋盘相临两线的间隔略小。棋子的大小(横向宽度)也要写进配置文件中去。然后制作黑白两方的棋子图片(black.png,white.png)。棋子的形状通常是圆形的,颜色通常是黑白的,并且周边透明。当然你要设计成其它形状和颜色也无所谓,程序不予限制。如果棋子图片是半透明的,它下方的棋盘将显示出来。
然后在黑白棋子图片的基础上,制作“当前棋子”图片(black_new.png,white_new.png),程序要求它们与普通棋子图片等大。所谓“当前棋子”,是指最新下到棋盘上的那个棋子,通常需要做一些标记,以便打谱者更容易找到它。在程序中,“当前棋子”的图片是叠加在普通棋子图片上方显示的,即,它的正下方是普通棋子图片,如果“当前棋子”图片是部分透明的,下方的图片就会部分显示出来。制作图片时可根据这一特性打造特殊效果。
最后是制作“落子音效”声音文件(luozi.wav)了,即棋子敲击棋盘的声音。程序要求它必须是wav格式,建议简短清脆。
以上文件都制作完成后,把它们放到一个目录内(目录名称可随意,假设为smile),然后把此目录复制到《M8围棋谱》安装目录下的“skins”子目录内,最终的目录结构应该是:DiskProgramsM8WeiqiPuskinssmileskin.ini(这里假设软件安装在DiskProgramsM8WeiqiPu)。提供给别人时,对smile目录压缩打包即可。
如果自己设计了多款皮肤,还可以细分子目录,如在 smiles 下分别放置 smile1, smile2 等,最终的目录结构应该是:DiskProgramsM8WeiqiPuskinssmilessmile1skin.ini, DiskProgramsM8WeiqiPuskinssmilessmile2skin.ini。
以下是一个皮肤需提供的各类文件详单(所有文件均采用固定文件名称):
文件名称 | 详细说明 | 是否必须提供 | 默认皮肤中的实例 (仅供参考) |
skin.ini | 皮肤配置文件。 INI格式的纯文本文件,要求必须是Unicode(UTF16-LE)编码。下文将对其内容作详细说明。 | 必须的 | 内容见下文 |
background.png | 棋盘及其背景图片。宽度为480像素,高度为720像素。 棋盘应在图片的中间偏上位置,上边需留出大约50像素高度的区域用于显示棋局基本信息。 图片最下方65个像素高度会一直被屏幕底部的“操作按钮栏”遮盖,构图和制作图片时请考虑到这一点。 与此相关的一些数据(如棋盘左上棋子角坐标、相临两线间隔、线的宽度等)需写到配置文件中,详见下文。 | 必须的 | 图片见下文 |
black.png | 黑方棋子图片。 要求宽高相同,其图片宽度应写入配置文件(skin.ini)中入。 | 必须的 | |
white.png | 白方棋子图片。 要求与黑方图片(black.png)尺寸相同。 | 必须的 | |
black_new.png | 黑方当前棋子图片,即新下到棋盘上的黑方棋子图片。 要求与黑白棋子图片(black.png, white.png)尺寸相同。 运行时此图片将显示在普通黑方棋子图片(black.png)正上方。 | 可以没有 | |
white_new.pn | 白方当前棋子图片,即新下到棋盘上的白方棋子图片。 其余参见black_new.png的说明。 | 可以没有 | |
luozi.wav | 落子声音文件,即棋子下到棋盘上时敲击棋盘的声音。 要求必须是wav格式,最好简短清脆。 | 可以没有 |
以下是皮肤配置文件(skin.ini)中的各配置项说明:
配置项 | 详细说明 | 默认皮肤中的值(仅供参考) |
Name | 本皮肤的名称,可随意。显示时两端的双引号将被去除。 | "默认标准棋盘" |
Description | 本皮肤的说明信息,可随意。显示时两端的双引号将被去除。 | "the default skin of Weiqipu" |
BoardLineCount | 指定本皮肤使用的棋盘为几路棋盘。其值可为 19、13、9等。 | 19 |
BoardLineInterval | 棋盘上相临两线间间隔,单位为像素。 | 24 |
BoardLineWidth | 棋盘上线的宽度,单位为像素。 | 1 |
BoardTopY | 棋盘顶边纵坐标,单位为像素 | 46 |
BoardBottomY | 棋盘底边纵坐标,单位为像素 | 530 |
StoneWidth | 棋子的宽度,即棋子图片的宽度,单位为像素。(目前要求棋子图片宽高相同) | 21 |
TopLeftStoneX | 棋盘左上角棋子中心点的横坐标,单位为像素。以图片左上角为坐标原点(0,0)。 | 15 |
TopLeftStoneY | 棋盘左上角棋子中心点的纵坐标,单位为像素。以图片左上角为坐标原点(0,0)。 此值应在65左右或更大,以便棋盘上方留出足够的区域显示棋局基本信息。 | 64 |
以下是默认皮肤的配置文件(skin.ini)内容,供参考:
[Settings] Name="默认标准棋盘" Description="the default skin of Weiqipu" BoardLineCount=19 BoardLineInterval=24 BoardLineWidth=1 BoardTopY=46 BoardBottomY=530 StoneWidth=21 TopLeftStoneX=15 TopLeftStoneY=64 |
以下是默认皮肤的背景图片(background.png),供参考: