Code source et scénarios dans Winter Starfall

Ce tutoriel contient des instructions pour télécharger et exécuter le code source de Winter Starfall, ainsi qu’une présentation des exemples de code illustrant les bonnes pratiques pour les scénarios de connexion et d’achat.

Téléchargement du code source

Prérequis

Installer Node JS
Installer Visual Studio Code

Configuration pour le développement local

Téléchargez le code source depuis GitHub.
Dans VS Code, ouvrez le dossier /website et choisissez d’installer toutes les extensions recommandées.
Dans le répertoire /website, exécutez npm install pour installer toutes les dépendances.
Utilisez npm run dev pour démarrer le site. Sélectionnez le lien proposé pour afficher le site.

Informations d’identification Azure

Pour mettre à jour les secrets AZURE_CREDENTIALS, exécutez cette commande dans l’interpréteur de commandes du portail Azure :

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

Flux de connexion

Le flux d’authentification des joueurs dans Winter Starfall comporte deux étapes : l’appel de connexion et les fonctions post-connexion, qui servent à obtenir les informations du joueur auprès du service et à le placer au bon endroit de l’histoire.

Authentification des joueurs

Pour la partie connexion, le fichier use-login.ts définit une fonction wrapper TypeScript qui gère les différentes méthodes d’authentification disponibles pour les joueurs. Les lignes 144 à 169 définissent la fonction de rappel pour la connexion avec une adresse e-mail et appellent les fonctions post-connexion si la connexion réussit.

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]);

Le jeu propose 3 méthodes récupérables d’authentification des joueurs : e-mail, Google et Facebook, afin que les comptes des joueurs ne soient jamais perdus. Pour plus d’informations, consultez Bonnes pratiques de connexion.

Après la connexion : obtention des données du joueur

Une fois le jeton de sécurité récupéré, il est utilisé pour exécuter les fonctions post-connexion afin d’obtenir l’état de jeu enregistré. Les lignes 340 à 378 définissent postLoginFunctions, qui appelle diverses API Economy et PlayFab Services pour charger le bon emplacement dans l’histoire, les objets d’inventaire, la monnaie, etc. en fonction du joueur.

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);
        });
});

D’abord, ClientGetTitleData obtient la clé secrète nécessaire à tous les appels d’API
Ensuite, EconomySearchItems recherche dans le catalogue les types monnaie et objet
Ce résultat sert d’entrée à EconomyGetInventoryItems pour renvoyer les objets d’inventaire du joueur
Enfin, ClientGetUserData récupère la valeur qui stocke l’emplacement dans l’histoire dans les données du joueur.

Flux d’achat

À certains moments du jeu, le joueur a la possibilité d’acheter et de vendre des objets d’inventaire dans la boutique. Le flux d’achat est implémenté dans une autre fonction wrapper. Dans le fichier use-store.ts, les lignes 40 à 69 affichent la boutique correspondant à l’emplacement où se trouve le joueur et la remplissent avec les objets à vendre en effectuant une recherche dans le catalogue.

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 est défini dans use-playfab.ts aux lignes 423 à 446, où l’API PlayFab Economy GetItems est utilisée pour effectuer une recherche dans le catalogue et renvoyer des objets.

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]
    );

Lorsqu’un achat est effectué, un appel à l’API PurchaseInventoryItems est réalisé. Celui-ci est défini dans use-playfab.ts aux lignes 540 à 565.

Vente d’objets

Le flux de vente illustre comment utiliser CloudScript basé sur Azure Functions pour étendre les fonctionnalités du système Economy. SellItem.cs définit la fonction CloudScript qui s’exécute lors de la vente d’un objet. Aux lignes 49 à 61, l’API GetTitleData de PlayFab est utilisée pour renvoyer le multiplicateur de la boutique et calculer le prix de vente.

 // 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;

La fonction CloudScript est ensuite appelée aux lignes 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]
    );

Pour exécuter Winter Starfall localement, vous aurez besoin d’un compte Azure pour prendre en charge les fonctions CloudScript. Vous pouvez vous inscrire pour obtenir un compte Azure gratuit, puis suivre les instructions ci-dessus pour réinitialiser correctement les informations d’identification Azure.

Voir aussi

Flux de connexion
- Documentation sur la connexion des joueurs
Flux d’achat
- Documentation d’Economy V2
- Pour en savoir plus sur Economy V2, vous pouvez également essayer le tutoriel du jeu d’artisanat, qui porte sur la création d’un exemple de jeu utilisant les fonctions de boutique et d’inventaire.

XBOX Services

PlayFab

Code source et bonnes pratiques - Winter Starfall

Code source et scénarios dans Winter Starfall

Téléchargement du code source

Prérequis

Configuration pour le développement local

Informations d’identification Azure

Flux de connexion

Authentification des joueurs

Après la connexion : obtention des données du joueur

Flux d’achat

Vente d’objets

Voir aussi

​Code source et scénarios dans Winter Starfall

​Téléchargement du code source

​Prérequis

​Configuration pour le développement local

​Informations d’identification Azure

​Flux de connexion

​Authentification des joueurs

​Après la connexion : obtention des données du joueur

​Flux d’achat

​Vente d’objets

​Voir aussi

Code source et scénarios dans Winter Starfall

Téléchargement du code source

Prérequis

Configuration pour le développement local

Informations d’identification Azure

Flux de connexion

Authentification des joueurs

Après la connexion : obtention des données du joueur

Flux d’achat

Vente d’objets

Voir aussi