开发一款象棋小游戏,素材我只用了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!_天天实时
- 环球动态:天父级 天神级 宇宙级_天父级
- 快播:嫁接月季花的砧木_嫁接月季花用什么树做砧木
- 全球热点!last romeo_last romeo
- 8英寸是多少厘米的盘子_8英寸是多少厘米-世界今日报
- 天天观热点:华龙期货具备行情分析及预测,使客户能够清晰地选择投资交易时机
- 【世界快播报】无缘无故流鼻血是怎么回事_无缘无故流鼻血怎么回事
- 抽屉滑轨怎么安装?抽屉滑轨安装图解
- 数据智能平台Near Intelligence纳斯达克上市:作价10亿美元
- 世界新动态:今年力争专精特新中小企业超8万家(新数据 新看点)
- 今日播报!当环卫工人在闹市中拉起小提琴丨市井
- 荷花什么时候开花 重点聚焦
- 晨起至参倚斋示子聿_对于晨起至参倚斋示子聿简单介绍|热文
- 蚂蚁庄园支付宝问答:蚂蚁庄园蚊子包上画十字
- 炒虾仁的做法大全家常菜视频(炒虾仁的做法大全家常)
- 世界新动态:“森林眼”观六路|中国电信温州分公司AI赋能守护绿水青山
- 有趣的形声字
- 太美了吧!今晚,被海南的月亮星星浪漫到了
- “李鬼”又设新圈套 “假券商”乱象亟待整治
- 最近爆火的 ChatGPT 究竟是什么?会给我们的生活、个人发展哪些冲击?一篇看懂
- 个人二手房出售需要缴纳哪些税费
- 每日观察!光谷加快发展新能源智能网联汽车产业
- 拉卡拉考拉手机刷卡器
- 速看:乐安县气象台发布雷电黄色预警信号【III级/较重】
- 每日报道:聚焦行业发展 2023中国医院供应链管理(湘江)峰会在长举行
- 商务部部长王文涛今天会见美中贸易全国委员会会长艾伦
- 花中君子是指什么意思 世界最资讯
- 柳州新目标!打造世界旅游目的地|环球新动态
- 年报速递|金融街物业去年收入约14亿元,同比增长5%
- 计算机工程专业_计算机工程
- 稳小春 抓大春丨“云端”种地:一图一网一链赋能数字农业_世界资讯
- 全球热门:高效便捷!普陀这个街道15个居民区智能印章全覆盖
- 汉字廿表示什么-环球简讯
- 英特尔发布新的蓝牙驱动程序以改善手机和PC之间的连接|即时焦点
- 江中药业3月23日大宗交易成交882.20万元
- 人工智能:工业 4.0 的驱动力
- 【天天报资讯】精进电动:融资净偿还100.14万元,融资余额5663.08万元(03-23)
- 澳洋健康(002172):第八届第七次监事会会议决议,审议2022年度监事会工作报告等议案-全球播资讯
- 全职高手演员表_哪些演员出演了这部剧
- 当前消息!雪中悍刀行演员表
- 私拉线路充电致17辆电动自行车被烧毁:科普飞线充电危害
- 李彦宏创立的百图生科发布AIGP平台 提供多种蛋白质生成能力
- 焦点热议:记一次 .NET 某医疗住院系统 崩溃分析
- 2023郑州高新区公租房199套房源地址+报名方式_全球今热点
- 当前速看:北京市便民商业网点超10万个
- 人民的名义剧情介绍分集 焦点滚动
- 焦点热文:当工作可以网约 数字游民一根网线“闯天下”
- 每日消息!我有一剑什么时候出 公测上线时间预告
- 世界快资讯:风向变了!卷王惊现,淘宝祭出“大杀器”!
- 2023河北公务员考试笔试最低控制分数线_速递
- 全球快播:石油矿场机械教材(石油矿场机械)
- 世界新动态:华晨宇家世如何
- 国家滑板训练基地落户山东 全球热推荐
- 每日热点:手机同时开着wifi和热点_手机wifi和热点同时开
- 【解放思想助推高质量发展】我县各乡镇各部门各单位陆续召开“解放思想、开拓创新、真抓实干”转作风专题教育活动动员会-今热点
- 80多岁老太爬树摘榆钱 喊都喊不下来具体详细内容是什么-全球热资讯
- 环球即时:新水浒传武松谁演的
- 2023山东临沂市郯城人才人力资源服务有限公司招聘食品药品协管员总成绩公告
- 嘉华地产楼盘_嘉华地产_全球球精选
- 银行板块涨0.82% 苏州银行涨2.89%居首
- 【热点】棕榈油价格不断下行 后市还会走低吗? 热消息
- 视讯!阿里M6大模型前带头人杨红霞加盟字节跳动 参与语言生成大模型研发
- HealthPlix获得2200万美元C轮融资
- 立昂微:3月21日融资净买入566.77万元,连续3日累计净买入4433.86万元|环球新动态
- 经常大重量健身的人,可能心脏不好!4个方法帮你保护心脏 焦点精选
- 语义错误在线观看樱花高清_语义错误在线观看樱花|全球新资讯
- 资讯推荐:马龙孙颖莎抵达上海:莎莎身穿绿色轻薄风衣现身机场
- 焦点快报!淘宝账户怎么注销不了_淘宝账户怎么注销
- 哲学三大巨头都有谁_哲学三问题
- 混动汽车省油是真却不省钱,两大优势明显但3大痛点也不可忽视_天天热资讯
- 缅甸被绑定女店员当晚被放回去未交赎金 中国籍女店员缅甸遭绑架哭诉我还有个两个小孩(今日/头条)
- 每日快看:晒坯_对于晒坯简单介绍
- 环球动态:给自己立flag是什么意思_flag是什么意思中文
- 环球今亮点!应力计算公式有限元_应力计算公式
- 焦点快报!分摊面积计算公式excel_分摊面积计算公式
- 测不准原理为什么测不准_测不准原理-微资讯
- 欧洲签证生物识别_欧洲签证
- 2023年3月20日山东省氯化钾价格最新行情预测
- 修复坍塌墙体 消除安全隐患(反馈) 全球即时看
- 科技赋能“菜篮子” 各地品春鲜 尝春意-今亮点
- 【全球新要闻】成大有门选修课需要带面粉,是真的么?
- 天天微资讯!新天龙八部:别离火,拯救你的废9星装备,活动还剩最后几天
- 原油涨也亏,原油跌也亏!为什么中石油和中石化总是哭穷? 天天头条
- 民营企业聚力高质量发展 扩大数字低碳等领域投资-世界热门
- 缅北“马冬梅”变成了网上高价悬赏的通缉犯,缅北地区到底有多乱 环球资讯
- 探戈灵魂崔斯特皮肤多少钱_探戈灵魂崔斯特|环球热推荐
- 全球观天下!安徽金时代科技有限责任公司
- 【全球速看料】电脑系统还原怎么操作_如何还原电脑系统
- 今日视点:汇客厅|朱凌云:矢志创新,勇闯传感器行业崭新赛道
- 名人关于春天的美文摘抄段落_名人写春天的文章 世界即时看
- 菩萨蛮大柏地原文_菩萨蛮大柏地全诗意思-天天快报
- 案子少了 长江美了_聚看点
- 世界即时看!头笼是什么_头笼
- 山东齐鲁味精集团
X 关闭
资讯
X 关闭