En el tutorial anterior hemos terminado de añadir el contenido del juego en nuestro juego. Ahora, en esta última parte de la serie de tutoriales Pokemon GO, vamos a añadir autenticación de Google y Facebook, para permitir guardar los datos del juego en una base de datos en línea. Vamos a utilizar Firebase como marco para la autenticación y almacenamiento en línea. Los siguientes temas serán cubiertos en este tutorial:


  • Creación de una aplicación Firebase
  • Adición de autenticación de Google
  • Creación de una aplicación como Facebook desarrollador
  • Adición de autenticación de Facebook
  • Añadir almacenamiento en línea

    Para leer este tutorial, es importante que usted está familiarizado con los conceptos siguientes:


    • Javascript y conceptos orientados a objetos.
    • conceptos básicos Phaser, tales como: estados, sprites, los grupos y la física de arcade
    • Creación de mapas con baldosa

      Tabla de contenidos

      convertirse en un desarrollador de juegos mediante la construcción de 15 juegos

      Si usted quiere dominar Phaser y aprender cómo publicar juegos Phaser como juegos nativas para iOS y Android se sienten libres para comprobar Zenva En línea En este supuesto The Complete el juego para móvil Curso de Desarrollo – Construir 15 juegos.

      archivos de código fuente

      Puede descargar los archivos de código fuente tutorial aquí.

      Creación de Firebase aplicación

      Firebase es un marco de Google que ofrece diferentes funcionalidades para web y aplicaciones móviles, como la autenticación, la base de datos en tiempo real, análisis y mensajería en la nube. Vamos a usarlo sólo para la autenticación y de la base de datos en tiempo real, pero se puede comprobar su documentación de ejemplos de otras características.

      Lo primero que tenemos que hacer es crear una cuenta de Firebase y una nueva aplicación Firebase. En la imagen de abajo he creado una aplicación llamada Firebase Phasermon GO. A continuación, haciendo clic en “Añadir Firebase a su aplicación web” de la consola mostrará cómo agregar Firebase a su código de aplicación.

      add_firebase

      En este tutorial, vamos a añadir la etiqueta de script en el archivo index.html, mientras que la variable “config” y la inicialización se añadirán a main.js. Por ahora, puede intentar ejecutar el juego y comprobar si no hay error Firebase.
      var Pokemon = Pokemon || {}; Var config = {apikey: «AIzaSyAx4NNN2oIYxHWS8H4Uhom4EgN0VpugWlc», authDomain: «phasermon-go.firebaseapp.com», databaseURL: «https://phasermon-go.firebaseio.com», storageBucket: «phasermon-go.appspot. com», messagingSenderId: «375905605428»}; firebase.initializeApp (config); juego var = new Phaser.Game (320, 640, Phaser.CANVAS); game.caught_pokemon = this.game.caught_pokemon || []; Game.number_of_pokeballs = this.game.number_of_pokeballs || {Pokeball: 0, greatball: 1, Ultraball: 2}; game.state.add ( «BootState», nuevo Pokemon.BootState ()); game.state.add ( «LoadingState», nuevo Pokemon.LoadingState ()); game.state.add ( «TitleState», nuevo Pokemon.TitleState ()); game.state.add ( «WorldState», nuevo Pokemon.WorldState ()); game.state.add ( «CatchState», nuevo Pokemon.CatchState ()); game.state.start ( «BootState», verdadero, falso, «activos / niveles / title_screen.json», «TitleState»); 12345678910111213141516171819202122varPokemon = Pokemon || {}; varconfig = {apikey: «AIzaSyAx4NNN2oIYxHWS8H4Uhom4EgN0VpugWlc», authDomain: «phasermon-go.firebaseapp.com», databaseURL: «https://phasermon-go.firebaseio.com», storageBucket: «phasermon-go.appspot.com», messagingSenderId: «375905605428»}; firebase.initializeApp (config); vargame = newPhaser.Game (320640, Phaser.CANVAS); game.caught_pokemon = this.game.caught_pokemon || []; game.number_of_pokeballs = this.game.number_of_pokeballs || {pokeball: 0, greatball: 1 , Ultraball: 2}; game.state.add ( «BootState», newPokemon.BootState ()); game.state.add ( «LoadingState», NEWP okemon.LoadingState ()); game.state.add ( «TitleState», newPokemon.TitleState ()); game.state.add ( «WorldState», newPokemon.WorldState ()); game.state.add ( «CatchState» , newPokemon.CatchState ()); game.state.start ( «BootState», verdadero, falso, «activos / niveles / title_screen.json», «TitleState»);

      exención de responsabilidad: por alguna razón Firebase no está funcionando para google Chrome en mi ordenador. Por lo tanto, si usted experimenta problemas con él, tratando de ejecutarlo en Firefox para ver si se trata de un tema relacionado con el navegador.

      Adición de Google autenticación

      Ahora, vamos a añadir la autenticación de Google para nuestro juego. En primer lugar, hay que activarlo en la consola Firebase, yendo a la sección de Autenticación en el menú, y luego el inicio de sesión en la ficha Método. A continuación, hacemos posible que la autenticación de Google. También tenemos que añadir “127.0.0.1” como un dominio de OAuth redirección con el fin de probar nuestro juego.

      google_auth Ahora vamos a cambiar nuestra TitleState para permitir la autenticación. Por ahora vamos a cambiar simplemente el evento de entrada para iniciar el procedimiento de inicio de sesión. Más tarde, cuando añadimos la autenticación de Facebook, vamos a crear botones para los diferentes tipos de inicio de sesión.
      var Pokemon = Pokemon || {}; Pokemon.TitleState = function () { «utilizar estricta»; Pokemon.JSONLevelState.call (this); this.prefab_classes = { «texto»: Pokemon.TextPrefab.prototype.constructor, «login_button»: Pokemon.LoginButton.prototype.constructor};}; Pokemon.TitleState.prototype = Object.create (Pokemon.JSONLevelState.prototype); Pokemon .TitleState.prototype.constructor = Pokemon.TitleState; Pokemon.TitleState.prototype.create = function () { «utilizar estricta»; pokemon_data var; Pokemon.JSONLevelState.prototype.create.call (this); this.game.input.onDown.add (this.login, este);}; Pokemon.TitleState.prototype.login = function (proveedor) { «utilizar estricta»; proveedor var, el usuario; (!. Firebase.auth () CurrentUser) si {proveedor = new firebase.auth.GoogleAuthProvider (); //provider.addScope(‘https://www.googleapis.com/auth/plus.login’); provider.addScope ( «https://www.googleapis.com/auth/userinfo.email»); firebase.auth () signInWithPopup (proveedor) .then (this.start_game.bind (este)) captura (Pokemon.handle_error)..; .} Else {firebase.database () árbitro ( «/ usuarios /» + firebase.auth () currentUser.uid.) .Una vez ( «valor») entonces (this.start_game.bind (este)).; }}; Pokemon.TitleState.prototype.start_game = function () { «utilizar estricta»; this.game.state.start ( «BootState», verdadero, falso, «activos / niveles / world_level.json», «WorldState»);}; 1234567891011121314151617181920212223242526272829303132333435363738394041varPokemon = Pokemon || {}; Pokemon.TitleState = function () {» utilizar estricta «; Pokemon.JSONLevelState.call (this); this.prefab_classes = {» texto «: Pokemon.TextPrefab.prototype.constructor,» login_button «: Pokemon.LoginButton.prototype.constructor};}; Pokemon.TitleState.prototype = Object.create (Pokemon.JSONLevelState.prototype); Pokemon.TitleState.prototype.constructor = Pokemon.TitleState; Pokemon.TitleState.prototype.create = function () { «utilizar estricta»; varpokemon_data; Pokemon.JSONLevelState.prototype.create .call (este); this.game.input.onDown.add (this.login, this);}; Pokemon.TitleState.prototype.login = function (proveedor) { «use strict»; varprovider, el usuario; if (! firebase.auth () .currentUser) {proveedor = newfirebase.auth.GoogleAuthProvider (); // provider.addScope ( ‘https://www.googleapis.com/auth/plus.login’); provider.addScope ( «https : //www.googleapis.com/auth/userinfo. e-mail «); firebase.auth (.) signInWithPopup (proveedor) .then (this.start_game.bind (este)) captura (Pokemon.handle_error);..} else {firebase.database () ref (» / usuarios /» . + firebase.auth () currentUser.uid) .Una vez (. «valor») entonces (this.start_game.bind (este));}}; Pokemon.TitleState.prototype.start_game = function () { «utilizar estricta» ; this.game.state.start ( «BootState», verdadero, falso, «activos / niveles / world_level.json», «WorldState»);};

      El método “entrada” comenzará comprobando si hay una usuario actual autenticado con Firebase. Si es así, simplemente iniciar el juego. Si no es así, se creará un nuevo GoogleAuthProvider para realizar la autenticación. El siguiente paso es añadir un ámbito, que definirá la cantidad de datos de la cuenta de usuario de nuestra aplicación tendrá acceso. En este tutorial nuestra aplicación sólo tendrá acceso a la dirección de correo electrónico del usuario (utilizando el alcance https://www.googleapis.com/auth/userinfo.email). Por último, llamamos al método “signInWithPopup”, que se abrirá una ventana emergente para el usuario que se autentique con su cuenta de Google. El “después” y los métodos de “captura” se suman a las devoluciones de llamada cuando la operación concluye con éxito y cuando falla, respectivamente.

      Cuando se autentica el usuario con éxito, el método “start_game” se llama, que se limitará a iniciar el juego como antes. Por otro lado, si falla la autenticación, tenemos que controlar el error. En este tutorial sólo vamos a añadir una función en Utils.js para imprimir el mensaje de error. En una aplicación real, se puede intentar identificar la causa del error y tratar con ella, cuando sea apropiado.
      Pokemon.handle_error = función (error) { «utilizar estricta»; console.log (error);}; 1234Pokemon.handle_error = function (error) { «use strict»; console.log (error);};

      A estas alturas, ya se puede probar la autenticación de Google tratando de inicio de sesión con su google cuenta.

      Adición de Facebook autenticación

      Antes de almacenar el contenido del juego en la base de datos en línea, vamos a añadir la autenticación de Facebook también. Lo primero que tenemos que hacer es crear una aplicación de Facebook en Facebook para los desarrolladores. Usted necesitará una cuenta de Facebook, y puede que tenga que añadir un número de teléfono o número de tarjeta de crédito con el fin de verificar su cuenta.

      create_facebook_app El siguiente paso es habilitar la autenticación de Facebook en Firebase. Esto es similar a cómo lo hicimos con la autenticación de Google, pero tenemos que añadir nuestro secreto ID de aplicación y aplicación.

      facebook_auth El último paso es habilitar la aplicación de Facebook para ser autenticada por Firebase . Para hacer eso, primero tenemos que copiar la URI de redireccionamiento de OAuth se muestra en la página de autenticación (https://phasermon-go.firebaseapp.com/__/auth/handler). Luego, de vuelta en el Facebook para la consola de desarrolladores, tenemos que añadir un producto Facebook Iniciar sesión (haciendo clic en Agregar producto). En la página del Facebook Login configuración tenemos que añadir la base del fuego OAuth URI de redireccionamiento como válido.

      facebook_login_settings Ahora que hemos habilitado la autenticación de Facebook, tenemos que cambiar nuestra código para permitir al jugador elegir para autenticarse con Google o Facebook.

      Con el fin de hacer eso, vamos a crear un LoginButton prefabricada. La única diferencia entre el código de inicio de sesión con Google o Facebook es el proveedor de autenticación y la cadena de alcance. Así, LoginButton tendrá como propiedades tanto el proveedor y el alcance. Con el fin de seleccionar el objeto de proveedor de forma correcta, tendrá un objeto para asignar cada tipo de inicio de sesión al objeto de proveedor. Al final del constructor añadimos un evento de entrada para llamar al método “login”.
      var Pokemon = Pokemon || {}; Pokemon.LoginButton = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (esto, game_state, nombre, posición, propiedades); this.auth_providers = {Google: firebase.auth.GoogleAuthProvider.prototype.constructor, facebook: firebase.auth.FacebookAuthProvider.prototype.constructor}; this.auth_provider = properties.auth_provider; this.provider_scope = properties.provider_scope; this.inputEnabled = true; this.events.onInputDown.add (this.login, este);}; Pokemon.LoginButton.prototype = Object.create (Pokemon.Prefab.prototype); Pokemon.LoginButton.prototype.constructor = Pokemon.LoginButton; Pokemon.LoginButton. prototype.login = function () { «utilizar estricta»; proveedor var, el usuario; si (firebase.auth () CurrentUser!.) {Provider = nuevos this.auth_providers [this.auth_provider] (); provider.addScope (this.provider_scope); . Firebase.auth () signInWithPopup (proveedor) .then (this.game_state.start_game.bind (this.game_state)) captura (Pokemon.handle_error).; } Else {firebase.database (). Ref ( «/ usuarios /» + firebase.auth (). CurrentUser.uid) .Una vez ( «valor»). Entonces (this.game_state.start_game.bind (this.game_state)) ; }}; 123456789101112131415161718192021222324252627282930313233varPokemon = Pokemon || {}; Pokemon.LoginButton = function (game_state, nombre, posición, propiedades) { «utilizar estricta»; Pokemon.Prefab.call (Esto, game_state, nombre, posición, propiedades); esto. auth_providers = {google: firebase.auth.GoogleAuthProvider.prototype.constructor, facebook: firebase.auth.FacebookAuthProvider.prototype.constructor}; this.auth_provider = properties.auth_provider; this.provider_scope = properties.provider_scope; this.inputEnabled = true; this.events.onInputDown.add (this.login, este);}; Pokemon.LoginButton.prototype = Object.create (Pokemon.Prefab.prototype); Pokemon.LoginButton.prototype.constructor = Pokemon.LoginButton; Pokemon.LoginButton. prototype.login = function () { «utilizar estricta»; varprovider, el usuario, si (firebase.auth () CurrentUser!.) {Provider = newthis.auth_providers [this.auth_provider] (); provider.addScope (this.provider_scope) ; firebase.auth () signInWithPopup (proveedor) .then (this.game_state.start_game.bind (this.game_state)) captura (Pokemon.handle_error);..} else { .. Firebase.database () Ref (. «/ Usuarios /» + firebase.auth () currentUser.uid) .Una vez ( «valor») entonces (this.game_state.start_game.bind (this.game_state));}} ;

      el método “login” es casi la misma que la anterior desde el estado del juego, pero ahora vamos a utilizar el proveedor y el alcance de las propiedades prefabricadas. Si el jugador se autentica correctamente, se llama al método “start_game” de estado del juego como antes.

      Ahora, en el estado de juego que necesita para eliminar el método de “entrada” y dejar sólo el método “start_game”. También vamos a quitar el evento de entrada del juego, ya que ahora la autenticación se realiza a través de los botones de inicio de sesión.
      var Pokemon = Pokemon || {}; Pokemon.TitleState = function () { «utilizar estricta»; Pokemon.JSONLevelState.call (this); this.prefab_classes = { «texto»: Pokemon.TextPrefab.prototype.constructor, «login_button»: Pokemon.LoginButton.prototype.constructor};}; Pokemon.TitleState.prototype = Object.create (Pokemon.JSONLevelState.prototype); Pokemon .TitleState.prototype.constructor = Pokemon.TitleState; Pokemon.TitleState.prototype.start_game = function () { «utilizar estricta»; this.game.state.start ( «BootState», verdadero, falso, «activos / niveles / world_level.json», «WorldState»);}; 12345678910111213141516171819varPokemon = Pokemon || {}; Pokemon.TitleState = function () {» utilizar estricta «; Pokemon.JSONLevelState.call (this); this.prefab_classes = {» texto «: Pokemon.TextPrefab.prototype.constructor,» login_button «: Pokemon.LoginButton.prototype.constructor};}; Pokemon.TitleState.prototype = Object.create (Pokemon.JSONLevelState.prototype); Pokemon.TitleState.prototype.constructor = Pokemon.TitleState; Pokemon.TitleState.prototype.start_game = function () { «utilizar estricta»; this.game.state.start (» BootState», verdadero, falso, ‘activos / niveles / world_level.json’, ‘WorldState’);};

      Además, recuerde agregar el botón de inicio de sesión en el archivo de objetos JSON nivel de TitleState y el prefabricado en el LoginButton “prefab_classes” objeto de TitleState.
      { «activos»: { «google_login_button_image»: { «type»: «imagen», «fuente»: «assets / images / google_login_button.png»}, «facebook_login_button_image»: { «type»: «imagen», «fuente» : «assets / images / facebook_login_button.png»}}, «grupos»: [ «HUD»], «prefabricados»: { «title»: { «type»: «texto», «posición»: { «x»: 0.5, «y»: 0,5}, «propiedades»: { «ancla»: { «x»: 0,5, «y»: 0,5}, «grupo»: «HUD», «texto»: «Phasermon GO», » estilo «: {» font «: «32px Arial», «relleno»: «#FFF»}}}, «login_with_google_button»: { «type»: «login_button», «posición»: {» x «: 0,5,» y «: 0,7}, «propiedades»: { «ancla»: {» x «: 0,5, «y»: 0,5}, «grupo»: «HUD», «textura»: «google_login_button_image», «auth_provider»:» Google», «provider_scope»: «https://www.googleapis.com/auth/plus.login»}}, «login_with_facebook_button»: { «type»: «login_button», «posición»: { «x»: 0,5 , «y»: 0,9}, «propiedades»: { «ancla»: { «x»: 0,5, «y»: 0,5}, «grupo»: «HUD», «textura»: «facebook_login_button_image», «auth_provider» : «facebook», «provider_scope»: «user_birthday» }}}} {12345678910111213141516171819202122232425262728293031323334353637383940414243 «activos»: { «google_login_button_image»: { «type»: «imagen», «fuente»: «assets / images / google_login_button.png»}, «facebook_login_button_image»: { «type»: «la imagen «, «fuente»: «assets / images / facebook_login_button.png»}} «grupos»: [ «HUD»], «prefabricados»: { «title»: { «type»: «texto», «posición»: { «x»: 0,5, «y»: 0,5}, «propiedades»: { «ancla»: { «x»: 0,5, «y»: 0,5}, «grupo»: «HUD», «texto»:» Phasermon GO » «estilo»: { «fuente»: «32px Arial», «relleno»: «# FFF»}}} » login_with_google_button»: { «type»: «login_button», «posición»: {» x «: 0,5,» y «: 0,7},» propiedades «: {» ancla «: {» x «: 0,5,» y «: 0,5},» grupo «:» HUD», «textura»: «google_login_button_image», «auth_provider»: «google», «provider_scope»: «https://www.googleapis.com/auth/plus.login»}}, «login_with_facebook_button»: { «type»: «login_button», «posición»: { «x»: 0,5, «y»: 0,9}, «propiedades»: { «ancla»: { «x»: 0,5, «y»: 0,5}, «grupo»: «HUD», «textura»: «facebook_login_button_image «, «auth_provider»: «facebook», «provider_scope»: «user_birthday»}}}}

      A estas alturas puede intentar ejecutar el juego y tratar de autenticación con Google y Facebook. Sin embargo, si utiliza el correo electrónico de Google para Facebook, no se puede autenticar con ambos al mismo tiempo. En este caso, tendrá que ir a la configuración de autenticación en Firebase y quitar el usuario de Google con el fin de autenticar con Facebook.

      auth_delete

      Almacenamiento de datos de juegos en línea

      Hasta ahora estamos ahorrando en el juego el número de pokeballs del jugador y pokemon atrapado. Sin embargo, cuando se reinicia el juego que pierden esta información y la necesidad de restablecer a un valor predeterminado. Así que ahora vamos a guardarlo con base de fuego características de almacenamiento en línea. Firebase guarda los datos como objetos JSON, lo que es muy fácil de usar e integrarlo en nuestro código.

      Con el fin de hacer que vamos a agregar el código en TitleState y cambiar LoginButton método de devolución de llamada. Ahora, cuando el jugador se autentica con éxito, nuestro código se va a llamar a un “on_login” método de TitleState. Este método recuperará los datos de los jugadores actuales antes de comenzar el juego.
      Pokemon.LoginButton.prototype.login = function () { «utilizar estricta»; proveedor var, el usuario; si (firebase.auth () CurrentUser!.) {Provider = nuevos this.auth_providers [this.auth_provider] (); provider.addScope (this.provider_scope); . Firebase.auth () signInWithPopup (proveedor) .then (this.game_state.on_login.bind (this.game_state)) captura (Pokemon.handle_error).; } Else {firebase.database (). Ref ( «/ usuarios /» + firebase.auth (). CurrentUser.uid) .Una vez ( «valor»). Entonces (this.game_state.start_game.bind (this.game_state)) ; }}; 123456789101112Pokemon.LoginButton.prototype.login = function () { «use strict»; varprovider, el usuario; si (firebase.auth () CurrentUser!.) {Provider = newthis.auth_providers [this.auth_provider] (); proveedor .addScope (this.provider_scope);. firebase.auth () signInWithPopup (proveedor) .then (this.game_state.on_login.bind (this.game_state)) captura (Pokemon.handle_error);.} else {firebase.database () .REF ( «/ usuarios /» + firebase.auth () currentUser.uid.) .Una vez ( «valor») entonces (this.game_state.start_game.bind (this.game_state));.}};

      puede navegar a través de datos de base de fuego utilizando el método “ref” y el símbolo “barra” a propiedades de los objetos de acceso. Nuestra aplicación tendrá un objeto raíz llamada “usuarios”. Este objeto tendrá una propiedad (llamado niño en Firebase) para cada jugador. Este niño tendrá los datos para que el jugador específico. Por lo tanto, en el método “on_login” navegamos al objeto de usuario actual y recuperar sus datos. Firebase asíncrona manipula los datos, por lo que tenemos que añadir una devolución de llamada a un evento. En este caso vamos a utilizar el “once” evento con el parámetro “valor”, que llama al método de devolución de llamada sólo la primera vez estos datos cambia en la base de datos (se puede obtener más información sobre la documentación Firebase). Vamos a utilizarlo para recuperar los datos iniciales de este jugador en la base de datos.
      Pokemon.TitleState.prototype.on_login = función (resultado) { «utilizar estricta»; .. Firebase.database () ref ( «/ usuarios /» + result.user.uid) .Una vez ( «valor») entonces (this.start_game.bind (este));}; 1234Pokemon.TitleState.prototype.on_login = función (resultado) { «utilizar estricta»;.. firebase.database () ref ( «/ usuarios /» + result.user.uid) .Una vez ( «valor») entonces (this.start_game.bind (este)); };

      la llamada de retorno para la operación de base de datos es “start_game”. También vamos a cambiar este método para guardar los datos de los jugadores antes de comenzar el juego. El método “val” recupera los datos como un objeto JSON. Hay dos posibilidades de estos datos: si es la primera vez que este jugador autentica, los datos serán nulos, y tenemos que inicializar con los valores por defecto. De lo contrario, simplemente guardar los datos de la base de datos. Al final, se comienza el juego como antes.
      Pokemon.TitleState.prototype.start_game = función (snapshot) { «utilizar estricta»; user_data var; user_data = snapshot.val (); Si {this.game.caught_pokemon = [] (user_data!); this.number_of_pokeballs = {pokeball: 0, greatball: 1, Ultraball: 2}; } Else {this.game.caught_pokemon = user_data.caught_pokemon || []; this.game.number_of_pokeballs = user_data.number_of_pokeballs || {Pokeball: 0, greatball: 1, Ultraball: 2}; } This.game.state.start ( «BootState», verdadero, falso, «activos / niveles / world_level.json», «WorldState»);}; 12345678910111213Pokemon.TitleState.prototype.start_game = función (snapshot) { «utilizar estricta «; varuser_data; user_data = snapshot.val (), si (user_data!) {this.game.caught_pokemon = []; this.number_of_pokeballs = {Pokeball: 0, greatball: 1, Ultraball: 2}} else {esto. game.caught_pokemon = user_data.caught_pokemon || []; this.game.number_of_pokeballs = user_data.number_of_pokeballs || {pokeball: 0, greatball: 1, Ultraball: 2};} this.game.state.start ( «BootState», verdadero, falso, «activos / niveles / world_level.json», «WorldState»);};

      La última cosa que tenemos que hacer es actualizar Firebase cada vez que esta información cambia. Esto se hace en las casas prefabricadas Pokeball y Pokemon.

      En el método de “tirar” de la Pokeball prefabricadas que necesitamos para actualizar el objeto “number_of_pokeballs” en la base de datos cada vez que se utiliza un Pokeball. Hacemos esto mediante la navegación a este objeto y llamar al método “set”, que sustituye al objeto en la base de datos con una nueva.
      Pokemon.Pokeball.prototype.throw = function () { «utilizar estricta»; distance_to_initial_position var; // parada draggin la this.dragging pokeball = false; // tirar la pokeball si la distancia a la posición inicial está por encima del umbral distance_to_initial_position = new Phaser.Point (this.x – this.initial_position.x, this.y – this.initial_position.y); si (distance_to_initial_position.getMagnitude ()> this.THROW_THRESHOLD) {this.game_state.game.number_of_pokeballs [this.type] – = 1; . // base de datos de actualización firebase.database () árbitro ( «/ usuarios /» + firebase.auth () + «currentUser.uid /number_of_pokeballs»).set(this.game_state.game.number_of_pokeballs.); this.number_of_pokeballs_text.text = this.game_state.game.number_of_pokeballs [this.type]; distance_to_initial_position.normalize (); // inicializar el this.init_body cuerpo físico pokeball (); this.body.velocity.x = -distance_to_initial_position.x * this.pokeball_speed; this.body.velocity.y = -distance_to_initial_position.y * this.pokeball_speed; } Else {this.reset (this.initial_position.x, this.initial_position.y); }}; 1234567891011121314151617181920212223Pokemon.Pokeball.prototype.throw = function () { «utilizar estricta»; vardistance_to_initial_position; // parada draggin la pokeballthis.dragging = false; // tirar la pokeball si la distancia a la posición inicial está por encima del thresholddistance_to_initial_position = newPhaser.Point (this.x-this.initial_position.x, this.y-this.initial_position.y), si (distance_to_initial_position.getMagnitude ()> this.THROW_THRESHOLD) {this.game_state.game.number_of_pokeballs [this.type] – = 1;. // actualización databasefirebase.database () ref ( «/ usuarios /» + firebase.auth () currentUser.uid + «/» number_of_pokeballs.) conjunto (this.game_state.game.number_of_pokeballs); this.number_of_pokeballs_text. .text = this.game_state.game.number_of_pokeballs [this.type]; distance_to_initial_position.normalize (); // inicializar el bodythis.init_body física pokeball (); this.body.velocity.x = -distance_to_initial_position.x * this.pokeball_speed ; this.body.velocity.y = -distance_to_initial_position.y * this.pokeball_speed;} else {this.reset (esto. initial_position.x, this.initial_position.y);}};

      Del mismo modo, en el método de la “captura” de Pokemon prefabricadas que se actualice el “caught_pokemon” objeto cada vez que un nuevo Pokémon es capturado .
      Pokemon.Pokemon.prototype.catch = function () { «utilizar estricta»; catch_message var; // matar a los pokemon y mostrar el cuadro de mensaje de captura this.kill (); Si this.game_state.game.caught_pokemon.push {({especies: this.species, textura: this.texture_key}) (this.already_caught ()!); . // base de datos de actualización firebase.database () ref ( «/ usuarios /» + firebase.auth () currentUser.uid + «/caught_pokemon»).set(this.game_state.game.caught_pokemon.); } Catch_message = nuevo Pokemon.MessageBox (this.game_state, «catch_message», {x: this.game_state.game.world.centerX, Y: this.game_state.game.world.centerY}, this.MESSAGE_PROPERTIES); catch_message.message_text.text = «Gotcha!»;}; 123456789101112131415Pokemon.Pokemon.prototype.catch = function () { «uso estricto»; varcatch_message; // matar a los pokemon y mostrar el mensaje boxthis.kill captura (), si ( ! this.already_caught ()) {{this.game_state.game.caught_pokemon.push (especies: this.species, textura:. this.texture_key}); // actualizar databasefirebase.database () ref ( «/ usuarios /» + firebase.auth () currentUser.uid + «/ caught_pokemon») conjunto (this.game_state.game.caught_pokemon);} catch_message = newPokemon.MessageBox (this.game_state, «catch_message», {x:.. this.game_state.game. world.centerX, y: this.game_state.game.world.centerY}, this.MESSAGE_PROPERTIES); catch_message.message_text.text = «! Gotcha»;};

      Por último, tenemos que quitar la inicialización de datos por defecto de la principal Js.

      Ahora usted puede intentar jugar el juego con la función de base de datos. Intenta coger un poco de Pokemon y lanzando algunos pokeballs para ver si los datos se actualizan cuando se reinicia el juego.

      Y con esto concluye esta serie de tutoriales. Espero que les haya gustado, y dejar en la sección de comentarios sugerencias para las próximas!

      Mensajes relacionados

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *