灵感

小时候,我们喜欢各种各样的拼图。我们最喜欢的是Rush Hour,这是一款滑动拼图,玩家需要移动各种汽车,以便让被困住的车辆驶出出口。这就是我们的灵感来源。我们的目标是将我们最喜欢的拼图带到Flutter中;我们希望它能像我们玩它一样,以三维形式呈现。

它的功能

我们的拼图允许玩家玩一个每日的Rush Hour游戏。他们可以拖动和滑动汽车,这些汽车以三维形式投影在一个6×6的棋盘上。棋盘可以被旋转以改变视角,也可以被切换为二维显示。

玩家必须移动汽车来疏通救护车。在玩家玩游戏的过程中,会跟踪移动的车辆数量和时间。一旦完成,拼图会播放动画,并显示玩家的分数。他们可以与朋友分享,展示他们移动的车辆序列(配有相应的车辆表情符号?!)。

https://flutter-rush.web.app/ (#1)

10: ??????????

ZVehicle Example

我们是如何构建的

这款游戏完全是用Flutter构建的!我们的秘诀是ZFlutter,它使我们能够在我们二维的Flutter世界中带来三维的错觉!

我们遇到的挑战

项目经历过的最大突破之一是优化。具体来说,是优化ZFlutter的代码以避免卡顿。该库具有各种简单的向量算术和渲染对象,但对我们来说速度太慢。转向四维变换矩阵使我们能够达到60帧/秒。而且我们谈论的是在200个深度树中同时构建近6000个小部件!

我们引以为豪的成就

我们为完成整个游戏感到自豪!能够在Flutter中体验我们最喜欢的童年拼图是一种令人满意的体验。我们的游戏可以在iOS、Android、Web和Windows上玩,这让我们惊叹不已!

我们也很高兴,这个项目激励我们改进了开源库ZFlutter,我们还将很快贡献新的开源库来支持生态系统。例如,我们将发布一个用于构建文本组件的新库。

ZCubicText Example

我们学到了什么

将三维界面带入Flutter并非易事。在这个过程中,我们学会了如何处理视角问题、绘制三维小部件等等!

这个项目使我们能够深入探索Flutter中的三维可能性。


运行项目

此项目包含 3 种风味

  • 开发
  • 测试
  • 生产

要运行所需的风味,可以使用 VSCode/Android Studio 中的启动配置,或使用以下命令

# Development
$ flutter run --flavor development --target lib/main_development.dart

# Staging
$ flutter run --flavor staging --target lib/main_staging.dart

# Production
$ flutter run --flavor production --target lib/main_production.dart

*Rush Hour Puzzle可在iOS、Android、Web、Windows和MacOs上运行。

GitHub

查看 Github