Código fuente y escenarios en Winter Starfall

Este tutorial contiene instrucciones para descargar y ejecutar el código fuente de Winter Starfall, y un recorrido por los ejemplos de código que muestran procedimientos recomendados para los escenarios de inicio de sesión y compra.

Descarga del código fuente

Requisitos previos

Instalar Node JS
Instalar Visual Studio Code

Configuración para el desarrollo local

Descargue el código fuente desde GitHub.
En VS Code, abra la carpeta /website y acepte instalar todas las extensiones que recomienda.
En el directorio /website, ejecute npm install para instalar todas las dependencias.
Use npm run dev para iniciar el sitio. Seleccione el vínculo que ofrece para ver el sitio.

Credenciales de Azure

Para actualizar los secretos AZURE_CREDENTIALS, ejecute este comando en el shell de Azure Portal:

az ad sp create-for-rbac --name "VanguardOutrider2" --role contributor --scopes /subscriptions/YOUR_SUBSCRIPTION_ID/resourceGroups/YOUR_RESOURCE_GROUP_NAME --json-auth

Flujo de inicio de sesión

El flujo de autenticación de jugadores en Winter Starfall tiene dos pasos: la llamada de inicio de sesión y las funciones posteriores al inicio de sesión que se usan para obtener la información del jugador desde el servicio y cargarlo en la ubicación correcta de la historia.

Autenticación de jugadores

Para la parte de inicio de sesión, el archivo use-login.ts define una función contenedora de TypeScript que gestiona los múltiples métodos de autenticación disponibles para los jugadores. Las líneas 144-169 definen la función de devolución de llamada para iniciar sesión con una dirección de correo electrónico, y llaman a las funciones posteriores al inicio de sesión si este se realiza correctamente.

const onLogin = useCallback(() => {
    setIsLoading(true);
    setLoginMethodInProgress("email");

    dispatch(siteSlice.actions.loginSteps(loginEventCount));

    ClientLoginWithEmailAddress({ Email: data.email, Password: data.password })
        .then(result => {
            dispatch(siteSlice.actions.login(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
            // Track logins from returning users
            trackEvent({ name: "Returning User", properties: {} });
        })
        .then(() => {
            return postLoginFunctions();
        })
        .then(() => {
            setIsLoading(false);
            navigate(routes.Explore());
        })
        .catch(problem => {
            dispatch(siteSlice.actions.loginStepsReset());
            onError(problem);
        })
        .finally(() => dispatch(siteSlice.actions.loginStepsReset()));
}, [ClientLoginWithEmailAddress, data.email, data.password, dispatch, navigate, onError, postLoginFunctions]);

El juego ofrece 3 métodos recuperables para la autenticación de jugadores: correo electrónico, Google y Facebook, de modo que las cuentas de los jugadores nunca se pierdan. Para obtener más información, consulte Procedimientos recomendados de inicio de sesión.

Después del inicio de sesión: Obtención de los datos del jugador

Una vez recuperado el token de seguridad, se usa para ejecutar las funciones posteriores al inicio de sesión y obtener el estado guardado del juego. Las líneas 340-378 definen postLoginFunctions, que llama a varias API de Economy y de PlayFab Services para cargar la ubicación correcta de la historia, los artículos del inventario, la moneda, etc., en función del jugador.

return new Promise<void>((resolve, reject) => {
    ClientGetTitleData({ Keys: TITLE_DATA_KEYS_ALL })
        .then(result => {
            dispatch(siteSlice.actions.titleData(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
            loadScripts();
        })
        .then(() =>
            EconomySearchItems({
                Count: SEARCH_ITEMS_MAX_COUNT,
                Filter: "type eq 'currency' or type eq 'catalogItem'",
            })
        )
        .then(result => {
            dispatch(siteSlice.actions.catalog(result.Items));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => EconomyGetInventoryItems({ Count: SEARCH_ITEMS_MAX_COUNT }))
        .then(result => {
            dispatch(siteSlice.actions.inventory(result.Items));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => ClientGetUserData({ Keys: USER_DATA_KEYS_PLAYER_ALL }))
        .then(result => {
            dispatch(siteSlice.actions.userDataPlayer(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => ClientGetUserReadOnlyData({ Keys: USER_DATA_KEYS_READONLY_ALL }))
        .then(result => {
            dispatch(siteSlice.actions.userDataReadOnly(result));
            dispatch(siteSlice.actions.loginStepsAdvance());
        })
        .then(() => {
            resolve();
        })
        .catch(problem => {
            dispatch(siteSlice.actions.loginStepsReset());
            reject(problem);
        });
});

Primero, ClientGetTitleData obtiene la clave secreta necesaria para todas las llamadas a la API
Después, EconomySearchItems busca en el catálogo los tipos de moneda y de artículo
Lo que se usa como entrada para EconomyGetInventoryItems para devolver los artículos del inventario del jugador
A continuación, ClientGetUserData recupera el valor que almacena la ubicación de la historia como parte de los datos del jugador.

Flujo de compra

En ciertos puntos del juego, el jugador tiene la opción de comprar y vender artículos del inventario en la tienda. El flujo de compra se implementa en otra función contenedora. En el archivo use-store.ts, las líneas 40-69 muestran la tienda correcta que el jugador encuentra en una ubicación específica y rellenan los artículos a la venta buscando en el catálogo.

export function useEconomyStoreSingle(storeName: string): IEconomyStoreSingleResults {
    const dispatch = useDispatch();
    const store = useSelector((state: AppState) => state.site.stores).find(store =>
        store.AlternateIds?.find(friendlyId => friendlyId.Type === FRIENDLYID && friendlyId.Value === storeName)
    );
    const { isLoading, error, setError, EconomyGetItem } = usePlayFab();

    useEffect(() => {
        if (!is.null(store) || isStoreLoading) {
            return;
        }

        isStoreLoading = true;

        EconomyGetItem({
            AlternateId: { Type: FRIENDLYID, Value: storeName },
        })
            .then(results => {
                dispatch(siteSlice.actions.storeAdd(results.Item as PlayFabEconomyModels.CatalogItem));
            })
            .catch(setError)
            .finally(() => {
                isStoreLoading = false;
            });
    }, [EconomyGetItem, dispatch, setError, store, storeName]);

    return {
        error,
        isLoading,
        store,
    };
}

EconomyGetItem se define en use-playfab.ts en las líneas 423-446, dentro de las cuales se usa la API GetItems de PlayFab Economy para buscar en el catálogo y devolver artículos.

const EconomyGetItems = useCallback(
        (request: PlayFabEconomyModels.GetItemsRequest): Promise<PlayFabEconomyModels.GetItemsResponse> => {
            const date = startRequest("EconomyApi", "GetItems", request);

            return new Promise((resolve, reject) => {
                PlayFab.EconomyApi.GetItems(request, (result, problem) => {
                    endRequest(date, problem, result);

                    if (!is.null(problem)) {
                        return reject(problem);
                    }

                    if (result.code !== 200) {
                        return reject(formatPlayFabNon200Error(result));
                    }

                    return resolve(result.data);
                }).catch(reason => {
                    catchRequest(reject, reason);
                });
            });
        },
        [catchRequest, endRequest, startRequest]
    );

Cuando se realiza una compra, se hace una llamada a la API PurchaseInventoryItems. Esta se define en use-playfab.ts en las líneas 540-565.

Venta de artículos

El flujo de venta es un ejemplo de cómo usar CloudScript basado en Azure Functions para ampliar la funcionalidad del sistema de economía. SellItem.cs define la función de CloudScript que se ejecuta al vender un artículo. Las líneas 49-61 son donde se usa la API GetTitleData de PlayFab para devolver el multiplicador de la tienda y calcular el precio de venta.

 // Get your sell multiplier
var titleData = await PlayFabFunctions.GetTitleDataAsync(player, new List<string> { TitleDataKeys.Multipliers }, log);
var sellMultiplier = JsonConvert.DeserializeObject<Multipliers>(titleData[TitleDataKeys.Multipliers])?.sell ?? 1;

A continuación, la función de CloudScript se llama en las líneas 161-187 de use-store.ts.

export function useEconomyStoreSell(): IEconomyStoreSellItemResults {
    const { isLoading, error, setError, CloudScriptExecuteFunction, EconomyGetInventoryItems } = usePlayFab();
    const dispatch = useDispatch();

    const onSell = useCallback(
        (itemId: string, amount: number) => {
            return new Promise<void>((resolve, reject) => {
                CloudScriptExecuteFunction({
                    FunctionName: "SellItem",
                    FunctionParameter: {
                        ItemId: itemId,
                        Amount: amount,
                    },
                })
                    .then(() => EconomyGetInventoryItems({ Count: SEARCH_ITEMS_MAX_COUNT }))
                    .then(data => {
                        dispatch(siteSlice.actions.inventory(data.Items));
                        resolve();
                    })
                    .catch(issue => {
                        setError(issue);
                        reject(issue);
                    });
            });
        },
        [CloudScriptExecuteFunction, EconomyGetInventoryItems, dispatch, setError]
    );

Para ejecutar Winter Starfall localmente necesitará una cuenta de Azure que admita las funciones de CloudScript. Puede registrarse para obtener una cuenta gratuita de Azure y después seguir las instrucciones anteriores para restablecer correctamente las credenciales de Azure.

Consulte también

Flujo de inicio de sesión
- Documentación de inicio de sesión de jugadores
Flujo de compra
- Documentación de Economy V2
- Otro buen paso siguiente para obtener más información sobre Economy V2 es probar el tutorial del juego de fabricación, que se centra en crear un juego de ejemplo usando las funciones de tienda e inventario.

XBOX Services

PlayFab

Código fuente y procedimientos recomendados - Winter Starfall

Código fuente y escenarios en Winter Starfall

Descarga del código fuente

Requisitos previos

Configuración para el desarrollo local

Credenciales de Azure

Flujo de inicio de sesión

Autenticación de jugadores

Después del inicio de sesión: Obtención de los datos del jugador

Flujo de compra

Venta de artículos

Consulte también

​Código fuente y escenarios en Winter Starfall

​Descarga del código fuente

​Requisitos previos

​Configuración para el desarrollo local

​Credenciales de Azure

​Flujo de inicio de sesión

​Autenticación de jugadores

​Después del inicio de sesión: Obtención de los datos del jugador

​Flujo de compra

​Venta de artículos

​Consulte también

Código fuente y escenarios en Winter Starfall

Descarga del código fuente

Requisitos previos

Configuración para el desarrollo local

Credenciales de Azure

Flujo de inicio de sesión

Autenticación de jugadores

Después del inicio de sesión: Obtención de los datos del jugador

Flujo de compra

Venta de artículos

Consulte también