小游戏的加载速度是非常重要的,如果能把素材压缩至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。喜欢可以关注我噢~我有空了会分享做游戏的相关技术,会在这个专栏里分享:《教你做小游戏》。
标签: