使用Flutter和Back4app构建跨平台游戏

介绍 flutter是谷歌开发的一个多功能开源框架，允许开发者从单一代码库构建原生编译的移动、网页、桌面和嵌入式设备应用程序。尽管flutter主要以传统应用开发而闻名，但由于其性能、广泛的包生态系统和热重载功能，它在游戏开发中的使用越来越多。 在本指南中，我们将介绍如何使用flutter和flame（一个为flutter设计的2d游戏引擎）开发一个多平台的flappy bird风格游戏。此外，我们将把游戏连接到back4app，一个后端即服务（baas）平台，以存储用户分数并显示排行榜。 在本指南结束时，您将拥有一个可以在移动和网页平台上运行的游戏版本，并且它将从back4app存储和检索高分。 先决条件 要完成本教程，您需要： 一个back4app账户。请在 back4app com https //www back4app com 注册一个免费账户。 在您的本地机器上设置flutter开发环境。如果您尚未设置，请遵循 flutter安装指南 https //flutter dev/docs/get started/install 。 对dart、flutter小部件和游戏开发概念有基本了解。 步骤1 – 设置您的back4app后端 创建一个 back4app 项目 登录到您的 back4app 账户 https //dashboard back4app com/ 并创建一个新项目。 创建 parse 类 在本教程中，我们将设置一个简单的后端来管理与游戏相关的数据。在您的 back4app 项目中，创建两个名为 player 和 gamescore player 存储玩家信息，如用户名、等级和成就。 gamescore 存储游戏的分数和排名。 获取您的 back4app 凭据 导航到您的项目设置以检索您的应用程序 id 和客户端密钥，您需要这些信息将您的 flutter 游戏连接到 back4app。 步骤 2 – 设置您的 flutter 项目 创建一个新的 flutter 项目 打开您的终端或命令提示符并运行 添加依赖项 打开 pubspec yaml 并添加以下依赖项 在您的应用中初始化 parse 在 lib/main dart , 导入 parse sdk 并在 main 函数中初始化它 import 'package\ flutter/material dart'; import 'package\ parse server sdk flutter/parse server sdk flutter dart'; import 'package\ flame/flame dart'; import 'package\ flame/game dart'; void main() async { widgetsflutterbinding ensureinitialized(); const keyapplicationid = 'your back4app app id'; const keyclientkey = 'your back4app client key'; const keyparseserverurl = 'https //parseapi back4app com'; await parse() initialize(keyapplicationid, keyparseserverurl, clientkey keyclientkey, autosendsessionid true); runapp(mygameapp()); } class mygameapp extends statelesswidget { @override widget build(buildcontext context) { return materialapp( home gamescreen(), ); } } 替换 'your back4app app id' 和 'your back4app client key' 为您的实际 back4app 凭据。 步骤 3 – 使用 flame 设置游戏 创建游戏类 flame 是一个基于 flutter 的开源游戏引擎。它提供了构建 2d 游戏的工具和 api。使用 flame 创建一个简单的游戏类： import 'package\ flame/game dart'; import 'package\ flame/components dart'; class mysimplegame extends flamegame { @override future\<void> onload() async { super onload(); add(playercomponent()); } } class playercomponent extends positioncomponent { @override future\<void> onload() async { // load player sprite or set up player visuals here size = vector2(50, 50); // set size of the player position = vector2(100, 100); // set initial position // optionally, add sprite or animations } @override void update(double dt) { // update player state here } @override void render(canvas canvas) { super render(canvas); // draw player visuals final paint = paint() color = colors blue; canvas drawrect(size torect(), paint); } } 2 创建游戏屏幕 更新 gamescreen 小部件以显示游戏 class gamescreen extends statelesswidget { @override widget build(buildcontext context) { return scaffold( body mysimplegame() widget, ); } } 3 运行游戏 现在您可以使用 flutter run 来运行您的应用程序，以查看您的简单游戏的实际效果。您应该会看到一个代表玩家的蓝色方块。 步骤 4 – 使用 back4app 管理游戏数据 保存玩家数据 接下来，让我们创建一个函数，在玩家升级或取得成就时将玩家数据保存到 back4app future\<void> saveplayerdata(string username, int level, list\<string> achievements) async { final player = parseobject('player') set('username', username) set('level', level) set('achievements', achievements); final response = await player save(); if (response success) { print('player data saved successfully'); } else { print('failed to save player data'); } } 2 检索高分 您还可以从 back4app 获取游戏的高分，以在排行榜上显示 future\<list\<parseobject>> fetchhighscores() async { final query = querybuilder\<parseobject>(parseobject('gamescore')) orderbydescending('score') setlimit(10); final response = await query query(); if (response success && response results != null) { return response results as list\<parseobject>; } else { print('failed to fetch high scores'); return \[]; } } 3 显示排行榜 使用 listview\ builder 在 flutter 小部件中显示前 10 名分数 class leaderboardscreen extends statefulwidget { @override leaderboardscreenstate createstate() => leaderboardscreenstate(); } class leaderboardscreenstate extends state\<leaderboardscreen> { list\<parseobject> highscores = \[]; @override void initstate() { super initstate(); fetchhighscores() then((scores) { setstate(() { highscores = scores; }); }); } @override widget build(buildcontext context) { return scaffold( appbar appbar(title text('leaderboard')), body listview\ builder( itemcount highscores length, itembuilder (context, index) { final score = highscores\[index]; return listtile( title text(score get\<string>('playerid') ?? 'unknown player'), subtitle text('score ${score get\<int>('score')}'), ); }, ), ); } } 步骤 5 – 使用 flame 添加高级功能 如果您想添加更复杂的游戏机制、动画或交互，您可以通过引入额外的组件（如精灵、物理和碰撞检测）来扩展对 flame 的使用。flame 还支持与 firebase 集成，启用多人游戏功能、应用内购买等。 结论 在本教程中，您学习了如何使用 flutter 和 flame 构建一个简单的跨平台游戏，以及如何集成 back4app 来管理游戏数据，如玩家档案和高分。flutter 从单一代码库部署到多个平台的能力，加上 back4app 强大的后端服务，使其成为开发和扩展游戏的强大技术栈。 无论是创建简单的休闲游戏还是更复杂的互动体验，flutter 和 back4app 提供了高效构建、部署和管理游戏的工具。 有关更多信息，请查看 flutter 文档 https //flutter dev/docs 和 back4app 文档 https //www back4app com/docs 编程愉快!