Tagged

Flutter

A collection of 1 post

前端

手写一个在Flutter里展示”精灵图“的Widget

前言之前用Flutter里的游戏引擎Flare做了一个“是男人就坚持100秒”的游戏,文章请看这里 使用Flare引擎之后,完全没有了Flutter应用特有的代码风格。虽然更适应我这类有过游戏开发经验的开发者,但并不利于我们学习Flutter框架。所以我在那篇文章最后也说了,要抽空用Widget重写一次这个游戏。首要任务,就是得有一个支持”精灵图“的Widget,既然是学习,那就不能用别人开发好的,必须得自己亲手造轮子。 什么是”精灵图“精灵图的英文是spritesheet(精灵表单),就是在一张图上放置多个图形,只需要加载到内存里一次。在展示的时候,仅展示单个图形的区域。一般多个图形多用来放置连续动画的多个关键帧。除了在游戏引擎里很常见以外,为了减少web请求,在前端领域也很常见。 原理拆解加载一张大图,但每次只展示图片的特定区域比如这张飞机的精灵图,尺寸是330x82(像素),横向排布5个画面,那么单个画面的尺寸就是330/5 = 66。我们每次展示的区域为x=66*画面序号,y=0,width=66,height=82。 可以设定横向排布或纵向排布精灵图可以横向或纵向排布,有些游戏引擎的贴图最大尺寸为4096x4096,所以还有些情况是需要我们换行切换的,但原理差异并不大,