您当前的位置:首页> 行业动态 >正文
开发一款象棋小游戏,素材我只用了6KB!

2023-03-26 08:09:59     来源 : 腾讯云

小游戏的加载速度是非常重要的,如果能把素材压缩至6KB,那么用户体验会非常爽!有助于留存用户。

引言

先给大家看一下6KB实现的象棋棋盘的效果:

再给大家介绍一下,6KB是什么概念?


【资料图】

腾讯云左上角的logo,大小是3KB。6KB相当于两个腾讯云的LOGO!

当然,我做的这个联机对战象棋,目前没有动画和炫酷的特效,没有语音和BGM,其实不算是一款小游戏,更像是一个工具。

下面,给大家分享一下我是如何用6KB素材实现的。

开发前的思考

我希望我的游戏体积是小的,不要安装太多静态资源依赖。我希望游戏画面是可以放大且保真的,即尽量使用矢量图。

因此,我决定采用SVG绘制棋盘,并且使用SVG绘制棋子。而且,棋子上的汉字,就直接用 text文本展示,不再用图片。

用SVG绘制棋子

设计,本来应该交给设计师做,但是我只有自己开发,没有专业的设计师,所以只好硬着头皮上了。

之前开发 五子棋 ,就是我自己不断调参数,修改渐变色的色号,才看起来像棋子。

徒手画一个象棋棋子,亲自调色号,实在是太难了。

所以,我直接借鉴了playok的象棋棋子(我是非商业用途,就直接参考了),有如下特点:

棋子以黑色、红色为背景,双方博弈时,比较容易分清敌我(相比现实中,双方棋子背景颜色都是木头色,是用文字颜色区分敌我)。棋子顶部有光、底部有阴影,比较令人舒适。UI简洁,容易复刻。

图示如下:

我放大分析,每个棋子由4个圆组成:

最内层的圆圈:纯色。往外一层,是一个径向渐变的,从上方的白色,渐变到中部,再渐变到下方的红色/黑色。再外一层,是一个纯色的很窄的圆圈,是棋子边界。最外层,有一个往下方偏移的阴影。

定义阴影

            

定义黑色棋子

                    

定义红色棋子

                    

展示棋子

用ttf定义字体样式

如果直接展示text,就会用系统字体。这没有象棋的味道。象棋,当然要用经典的「隶书」。

使用font face

因为并非所有设备上都有隶书字体,而且不同设备的字体也可能有差异。所以我需要通过font face给用户下载隶书字体(网上找的可以非商用的字体),展示棋子文字。

font face可以定义字体,可以引用本地字体文件或下载字体文件。例如:

@font-face {  font-family: "Open Sans";  src: url("/fonts/OpenSans-Regular-webfont.woff2") format("woff2"), url("/fonts/OpenSans-Regular-webfont.woff")      format("woff");}

压缩字体

但是字体文件ttf比较大,所以我找到了「fontmin」这个工具,可以把字体文件给缩小,使字体文件ttf只保存所需字符。

最终压缩到了5K:

修改字体文件

但是我遇到个问题,使用该字体后,文字位置不在中间了(即使我已经设置了text-anchor="middle"alignment-baseline="central"),所以我需要修改下字体文件。

我找到了可以编辑字体文件的工具:https://font.qqe2.com ,可以直接导入字体文件编辑。如下图:

有一些关键的线:

ascent: 顶部参考线(不推荐字体超出)。capHeight: 大写字母H的高度的参考线。xHeight: 小写字母x的高度的参考线。Baseline: 各位CSS大神应该都知道是啥意思了,文本对齐经常遇到的那个baseline。对标英文字母四线三格的倒数第二条线。descent: 底部参考线(不推荐字体超出)。

只要我把每个字体选中,居中就好了~最后再导出字体文件,文字不居中的问题就解决了!

最终效果

写在最后

我是HullQin,公众号线下聚会游戏的作者(欢迎关注我,交个朋友)。转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》,是个网页,可以很方便的跟朋友联机玩UNO、斗地主、五子棋、飞行棋、一夜狼、象棋、德国心脏病、达芬奇密码等游戏,不收费无广告。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢~我有空了会分享做游戏的相关技术,会在这个专栏里分享:《教你做小游戏》。

标签:

X 关闭