Más
Cómo construir un juego de carrera infinita avanzado utilizando Flutter, el kit de herramientas para juegos casuales y Back4app

50min
Introducción
Los juegos casuales son populares por su simplicidad y jugabilidad atractiva, a menudo cautivando a una amplia audiencia con mecánicas fáciles de aprender. En este tutorial avanzado, desarrollaremos un juego de corredor infinito completamente funcional utilizando el Kit de Herramientas para Juegos Casual de Flutter. Integraremos Back4app para gestionar el backend del juego, almacenando datos de usuario como puntuaciones altas, perfiles de jugadores y logros. También profundizaremos en temas avanzados como la gestión de estado, la optimización del rendimiento y las estrategias de implementación. Al final de este tutorial, tendrás un juego de corredor infinito pulido listo para su implementación en Android e iOS, completo con persistencia de datos y características mejoradas.
Requisitos previos
Antes de comenzar, asegúrate de tener lo siguiente:
Entorno de Desarrollo de Flutter: Instalado y configurado. Sigue la guía de instalación oficial de Flutter si no lo has configurado.
Conocimientos Intermedios de Flutter: Familiaridad con widgets de Flutter, gestión de estado y programación asíncrona.
Cuenta de Back4app: Regístrate para obtener una cuenta gratuita en Back4app.
Comprensión de Back4app: Conocimientos básicos sobre la creación de proyectos y gestión de datos. Consulta la guía de inicio de Back4app.
Cuenta de GitHub: Para clonar repositorios y gestionar el control de versiones.
Experiencia con Bibliotecas de Gestión de Estado: Como Provider o Bloc.
Familiaridad con Pruebas e Implementación: Comprensión básica de cómo escribir pruebas e implementar aplicaciones de Flutter.
﻿
Paso 1 – Configuración del Backend de Back4app
1.1 Crear un Nuevo Proyecto en Back4app
Inicia sesión en tu cuenta de Back4app.
Haz clic en "Crear una nueva aplicación" y nómbrala "Juego de corredor infinito avanzado".
1.2 Configurar clases para datos de usuario
Crearemos clases para Usuario, Puntuación, y Logro.
Clase Usuario
Campos:
nombreDeUsuario (String)
contraseña (String)
correo electrónico (String)
fotoDePerfil (Archivo)
Clase Puntuación
Campos:
usuario (Puntero a Usuario)
puntuaciónAlta (Número)
nivel (Número)
Clase Logro
Campos:
usuario (Puntero a Usuario)
nombreLogro (Cadena)
fechaLograda (Fecha)
1.3 Configurar Seguridad y Permisos
Establecer permisos a nivel de clase para asegurar los datos del usuario.
Asegurarse de que solo los usuarios autenticados puedan leer y escribir sus propios datos.
1.4 Agregar Datos de Ejemplo
Poblar las clases con datos de ejemplo para probar la integración más tarde.
﻿
Paso 2 – Clonando y Configurando la Plantilla de Endless Runner
2.1 Clonar el Repositorio del Toolkit de Juegos Casual de Flutter
Bash
git clone https://github.com/flutter/casual-games.git
git clone https://github.com/flutter/casual-games.git
﻿
2.2 Navegar a la Plantilla de Endless Runner
Bash
cd casual-games/templates/endless_runner
cd casual-games/templates/endless_runner
﻿
2.3 Abrir el Proyecto en tu IDE
Usar Visual Studio Code, Android Studio, o cualquier IDE preferido.
Asegurarse de que los plugins de Flutter y Dart estén instalados.
2.4 Actualizar Dependencias
Abrir pubspec.yaml y actualizar las dependencias a las versiones más recientes.
Ejecutar:
Bash
flutter pub get
flutter pub get
﻿
﻿
Paso 3 – Mejorando el Juego con Características Avanzadas
3.1 Implementar Autenticación de Usuarios
Permitiremos que los jugadores se registren, inicien sesión y gestionen sus perfiles.
3.1.1 Agregar SDK de Parse Server
En pubspec.yaml:
YAML
dependencies:
  parse_server_sdk_flutter: ^3.1.0
dependencies:
  parse_server_sdk_flutter: ^3.1.0
﻿
Ejecutar:
Bash
flutter pub get
flutter pub get
﻿
3.1.2 Configurar Servicio de Autenticación
Crear lib/services/auth_service.dart:
Dart
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

class AuthService {
  Future<ParseUser> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);
    var response = await user.signUp();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<ParseUser> logIn(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<void> logOut() async {
    var user = await ParseUser.currentUser() as ParseUser;
    await user.logout();
  }
}
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';

class AuthService {
  Future<ParseUser> signUp(String username, String password, String email) async {
    var user = ParseUser(username, password, email);
    var response = await user.signUp();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<ParseUser> logIn(String username, String password) async {
    var user = ParseUser(username, password, null);
    var response = await user.login();
    if (response.success) {
      return response.result;
    } else {
      throw Exception(response.error!.message);
    }
  }

  Future<void> logOut() async {
    var user = await ParseUser.currentUser() as ParseUser;
    await user.logout();
  }
}
﻿
3.1.3 Crear Pantallas de Autenticación
Pantalla de Registro: lib/screens/signup_screen.dart
Pantalla de Inicio de Sesión: lib/screens/login_screen.dart
Usar widgets de Flutter para crear formularios para la entrada del usuario.
3.2 Mejorar UI/UX
Implementar animaciones personalizadas usando AnimationController.
Agregar un tema personalizado en lib/theme.dart.
3.3 Agregar Logros y Tableros de Clasificación
Crear componentes de UI para mostrar logros.
Implementar una pantalla de tablero de clasificación para mostrar las mejores puntuaciones a nivel global.
﻿
Paso 4 – Integrando Back4app con el Juego
4.1 Inicializar Parse en main.dart
Dart
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_APP_ID';
  const keyClientKey = 'YOUR_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
﻿
4.2 Almacenar Credenciales de Forma Segura
Usa flutter_dotenv para gestionar variables de entorno.
En pubspec.yaml:
YAML
dependencies:
  flutter_dotenv: ^5.0.2
dependencies:
  flutter_dotenv: ^5.0.2
﻿
Crea un .env archivo (añádelo a .gitignore):
Text
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
APP_ID=YOUR_APP_ID
CLIENT_KEY=YOUR_CLIENT_KEY
﻿
Actualiza main.dart:
Dart
import 'package:flutter_dotenv/flutter_dotenv.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");

  final keyApplicationId = dotenv.env['APP_ID']!;
  final keyClientKey = dotenv.env['CLIENT_KEY']!;
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
import 'package:flutter_dotenv/flutter_dotenv.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await dotenv.load(fileName: ".env");

  final keyApplicationId = dotenv.env['APP_ID']!;
  final keyClientKey = dotenv.env['CLIENT_KEY']!;
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
  );

  runApp(MyApp());
}
﻿
Paso 5 – Implementación de la Gestión de Estado
5.1 Elegir una solución de gestión de estado
Usaremos Provider por simplicidad.
5.1.1 Agregar dependencia de Provider
En pubspec.yaml:
YAML
dependencies:
  provider: ^6.0.0
dependencies:
  provider: ^6.0.0
﻿
Ejecutar:
Bash
flutter pub get
flutter pub get
﻿
5.2 Crear gestión de estado del juego
5.2.1 Crear clase de estado del juego
lib/models/game_state.dart:
Dart
import 'package:flutter/foundation.dart';

class GameState extends ChangeNotifier {
  int _score = 0;
  int get score => _score;

  void incrementScore() {
    _score++;
    notifyListeners();
  }

  void resetScore() {
    _score = 0;
    notifyListeners();
  }
}
import 'package:flutter/foundation.dart';

class GameState extends ChangeNotifier {
  int _score = 0;
  int get score => _score;

  void incrementScore() {
    _score++;
    notifyListeners();
  }

  void resetScore() {
    _score = 0;
    notifyListeners();
  }
}
﻿
5.2.2 Proveer estado del juego
En main.dart:
Dart
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
import 'package:provider/provider.dart';
import 'models/game_state.dart';

void main() async {
  // ... Parse initialization

  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => GameState()),
      ],
      child: MyApp(),
    ),
  );
}
﻿
**5.2.3
Consumir estado del juego en widgets**
En tu pantalla de juego:
Dart
int score = context.watch<GameState>().score;
int score = context.watch<GameState>().score;
﻿
Paso 6 – Optimización del Rendimiento
6.1 Rendimiento del Juego
Gestión de Sprites: Utiliza hojas de sprites para reducir el uso de memoria.
Optimización de la Tasa de Cuadros: Limita la tasa de cuadros para equilibrar el rendimiento y la duración de la batería.
6.2 Optimización de la Red
Caché de Datos: Implementa mecanismos de caché para reducir las llamadas a la red.
Solicitudes por Lotes: Utiliza operaciones por lotes al comunicarte con el backend.
6.3 Perfilado de Código
Utiliza DevTools de Flutter para perfilar la aplicación.
Identifica y corrige cuellos de botella en el rendimiento.
Paso 7 – Manejo de Errores Robusto y Pruebas
7.1 Manejo de Errores
Bloques Try-Catch: Envuelve llamadas asíncronas para manejar excepciones.
Dart
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
try {
  var result = await someAsyncFunction();
} catch (e) {
  // Handle error
}
﻿
Retroalimentación del Usuario: Muestra mensajes amigables para el usuario cuando ocurren errores.
7.2 Registro
Utiliza el logging paquete para registrar errores y eventos importantes.
En pubspec.yaml:
YAML
dependencies:
  logging: ^1.0.2
dependencies:
  logging: ^1.0.2
﻿
7.3 Pruebas
7.3.1 Pruebas Unitarias
Escribe pruebas para tus modelos y servicios.
Ejemplo de prueba en test/game_state_test.dart:
Dart
import 'package:flutter_test/flutter_test.dart';
import 'package:your_app/models/game_state.dart';

void main() {
  test('Score increments correctly', () {
    final gameState = GameState();
    gameState.incrementScore();
    expect(gameState.score, 1);
  });
}
import 'package:flutter_test/flutter_test.dart';
import 'package:your_app/models/game_state.dart';

void main() {
  test('Score increments correctly', () {
    final gameState = GameState();
    gameState.incrementScore();
    expect(gameState.score, 1);
  });
}
﻿
7.3.2 Pruebas de Integración
Prueba la interfaz de usuario y las interacciones de la aplicación.
Utiliza el marco de pruebas de integración de Flutter.
Paso 8 – Desplegando el Juego
8.1 Preparándose para el Despliegue
Iconos de Aplicación y Pantallas de Inicio: Personaliza para la marca.
IDs de Paquete de Aplicación: Establece identificadores únicos para Android e iOS.
8.2 Construir Versiones de Lanzamiento
Android
Actualiza android/app/build.gradle con tus configuraciones de firma.
Ejecuta:
Bash
flutter build apk --release
flutter build apk --release
﻿
iOS
Abre ios/Runner.xcworkspace en Xcode.
Configura la firma y las capacidades.
Ejecuta:
Bash
flutter build ios --release
flutter build ios --release
﻿
8.3 Envío a la App Store
Google Play Store: Sigue la guía oficial.
Apple App Store: Sigue la guía oficial.
Conclusión
En este tutorial avanzado, hemos construido un juego de carrera infinita rico en características utilizando el Toolkit de Juegos Casual de Flutter e integrado Back4app para servicios de backend. Hemos cubierto:
Autenticación de Usuario: Permitir a los jugadores registrarse, iniciar sesión y gestionar perfiles.
Gestión de Estado: Usar Provider para una gestión de estado eficiente.
Optimización del Rendimiento: Mejorar el rendimiento del juego y de la red.
Manejo de Errores y Pruebas: Implementar un manejo de errores robusto y escribir pruebas.
Despliegue: Preparar y enviar la aplicación a las tiendas de aplicaciones.
Este enfoque integral te proporciona las habilidades para desarrollar aplicaciones Flutter de calidad profesional con integraciones de backend confiables. Puedes expandir aún más el juego añadiendo más características, como:
Compartición Social: Permitir a los jugadores compartir logros en redes sociales.
Compras In-App: Monetizar el juego con artículos o mejoras comprables.
Soporte Multijugador: Implementar funcionalidad multijugador en tiempo real o por turnos.
Para más información sobre Flutter y la integración con Back4app, consulta:
﻿Documentación de Flutter﻿
﻿Guía de Flutter de Back4app﻿
﻿Guías de Parse Server﻿
¡Feliz codificación y desarrollo de juegos!
Actualizado 23 Jan 2025
¿Esta página le fue útil?
Construyendo una aplicación Flutter con OverlayPortal e integración de Back4app
Cómo visualizar datos en Flutter con fl_chart y Back4App