开发一款象棋小游戏,素材我只用了6KB!

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

标签:

最近更新

开发一款象棋小游戏,素材我只用了6KB!
2023-03-26 20:13:38
腿肿是什么原因引起的视频_腿肿是什么原因引起的-当前通讯
2023-03-26 17:45:24
热点聚焦:国脉文化:天翼云游戏业务近期主推多场景 强互动的体感游戏,并已在多省IPTV上线
2023-03-26 15:47:24
全球最新:2020最旺财微信名女生_2020最旺财微信名
2023-03-26 13:12:42
环球观焦点:美议员听证会“搞事” 平台网友发声力挺TikTok
2023-03-26 10:51:51
环球观点:李宇春个人资料简介
2023-03-26 10:22:18
青海52名先心病患儿来宁接受免费救治
2023-03-26 08:44:26
可爱的网名三个字_可爱的网名
2023-03-26 05:05:35
金玟哉:不会介意目前的转会传闻,我专注于帮那不勒斯争冠
2023-03-25 22:58:27
带土字的字 哪些汉字是带土的
2023-03-25 21:12:45
未来之星!崔永熙当选首场CBA星锐赛MVP
2023-03-25 20:14:45
奥迪变更车型命名方式,双数为EV,单数为燃油车-最新快讯
2023-03-25 17:48:17
江西提前入汛:预计今年旱涝并存,形势依然严峻复杂 天天讯息
2023-03-25 15:25:13
云杉简介
2023-03-25 13:45:52
全球热议:斗罗大陆2首位女性角色公布,霍雨浩生母曝光,穿模问题比较严重
2023-03-25 13:07:17
2023款奔驰S级改款车型上市,售价96.26-130.26万元 实时焦点
2023-03-25 11:00:12
环球观热点:海南:在证券交易所成功上市的民营企业,给予500万元奖励
2023-03-25 08:55:58
什么是半导体材料(什么是半导体)
2023-03-25 06:21:39
动态:臣的成语是什么
2023-03-25 06:04:10
第28届伊比利亚美洲国家首脑会议在多米尼加首都召开-世界资讯
2023-03-25 02:04:47
首个国家级预制菜中心落户广州白云区
2023-03-24 22:29:33
德语助手在线翻译英语_德语助手在线翻译-当前速讯
2023-03-24 21:01:15
湖北英山县积极做好农村老年人健康体检工作 热资讯
2023-03-24 19:24:04
天天速递!官司缠身的特朗普呼吁罢免所有调查他的高级官员
2023-03-24 17:39:27
环球快报:北京站坐地铁到去鸟巢怎么走
2023-03-24 17:11:11
赏民族建筑 听风情故事 “北京之声•博物馆”入驻北京中华民族博物院-全球新消息
2023-03-24 16:06:29
天天时讯:司法重新鉴定需要什么条件
2023-03-24 15:24:52
每日简讯:集中“充电”!博爱县孝敬镇开展安全生产教育培训 筑牢安全生产防线
2023-03-24 13:46:55
工业和信息化部:推动新材料产业加快创新发展
2023-03-24 12:09:41
沃尔沃汽车CEO:将从中国出口新款电动汽车
2023-03-24 11:06:07