见微知著,Flutter在游戏开发的表现及跨平台带来的优势

7,862 阅读3分钟

TankCombat系列文章

Flutter&Flame——TankCombat游戏开发(一)

Flutter&Flame——TankCombat游戏开发(二)

Flutter&Flame——TankCombat游戏开发(三)

Flutter&Flame——TankCombat游戏开发(四)

前言

现在的App开发中,为了增加用户粘性,总是会插入一些小游戏,而目前主流的移动端游戏开发引擎有:

cocos2dx (主要用于2d游戏开发)
unity3d   (用于3d游戏开发,AR,VR都可以用到)

但是针对小游戏的开发(如淘宝的抽个奖、钓个鱼、盖个楼什么的),这两者的学习成本明显过大(2dx我没用过,u3d你是需要学习软件的使用和c#的)。

再经过一翻了解后,我发现flutter也有游戏引擎,分别是:Flame和SpriteWidget,两者区别并不大,因为SpriteWidget已经许久没有更新,最终我选择了Flame,下面向大家展示并介绍Flame。

Flame

趁着近些日子比较闲,便学习了flame,同时举一反三写了个坦克大战,令我震惊的是它的表现效果极佳。

坦克大战(TankCombat) 我的练习项目,还有诸多不完善的地方,这里仅做演示

玩家是蓝色坦克

没有处理敌军子弹效果,因为打不过.........

移动端效果

Web端效果

更为让人惊艳的则是,在浏览器模式下,基本不用任何改动就可以正常运行(没有做适配,所以显示比例有些问题)

看过上面的效果,想必你也对Flame感兴趣了,那请接着往下看。

简介

Flame是一款简约的Flutter游戏引擎,是为使用Flutter进行开发的每个游戏都会遇到的常见问题提供一套完整的解决方案。

它的官网:

https://github.com/flame-engine/flame

目前支持的功能:

-	游戏循环(game loop)
-	组件/对象系统
-	内置物理引擎(box2d)
-	音频支持
-	特效与粒子效果
-	手势和输入支持
-	图片, 精灵(sprite)以及精灵组
-	基础Rive支持
-	和一些简化开发的实用工具类

原理

Flame 是纯dart语言写的,所以配上Flutter跨平台效果如虎添翼!

Flame引擎主要是由一个Game loop来驱动的,它的图片如下(摘自官网)

由图可以看到在启动和初始化后,update和render这两个方法(内含一系列指令)会无休止的运行下去。 在update里,我们可以做各种运算,render里则对我们的运算结果进行渲染。

update(double time) 动画持续增加的时间
render(Canvas canvase) 画布,这里你就可以做出各种渲染

学习资料

坦克大战

最近公司新增了直播的需求,教程可能会稍有延后,这里先放一下地址(大家可以先从官方Demo学起,讲的很细致):

https://github.com/bladeofgod/tank_combat

介绍:

玩家坦克为蓝色出生于屏幕中间
绿色和黄色则是敌方坦克,同时出生于屏幕4个角,死后会重生,但总体数量会保持4个。
左侧摇杆可以控制车体转向,右侧摇杆可以控制炮塔转向。
两个小按钮均可以发炮弹

官方Demo

Flame文档是支持中文的,在此非常感谢翻译者,给了我很大的帮助和启发:

https://github.com/flame-engine/flame/blob/master/README-ZH.md

同时官方也提供了入门Demo,墙裂建议可以从这里入手学习

也有中文哦~再次感谢提供翻译的同学

中文版

开发2D休闲游戏:消灭小飞蝇

英文版

2D Casual Mobile Game Tutorial

最后,相信通过上面的学习教程,你也可以开发出自己的游戏,我会尽快补全坦克大战的教程。 :)

TankCombat系列文章

Flutter&Flame——TankCombat游戏开发(一)

Flutter&Flame——TankCombat游戏开发(二)

Flutter&Flame——TankCombat游戏开发(三)

Flutter&Flame——TankCombat游戏开发(四)