《M8围棋谱》自定义皮肤设计指南

《M8围棋谱》自定义皮肤设计指南

  版本：1.0

  地址： http://docs.google.com/View?id=dhmvxcsd_3dxpmm6nz

  作者：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以上版本。

　　 每一款皮肤，都在软件运行目录中“skins”子目录内拥有一个独立子目录，其中包括一系列图片、声音和配置文件（skin.ini）。下文将详细介绍这些文件的作用和制作要求。

　　此软件是竖屏全屏显示的，屏幕顶部不显示信号栏。其运行界面，从上到下分为四个部分，依次是：棋局基本信息显示区（在屏幕最上方，大约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），供参考：

以下是使用了默认皮肤的程序运行界面截图：