Código-fonte e cenários no Winter Starfall

Este tutorial contém instruções para baixar e executar o código-fonte do Winter Starfall, além de um passo a passo dos exemplos de código que demonstram as práticas recomendadas para cenários de login e compra.

Download do código-fonte

Pré-requisitos

Instale o Node JS
Instale o Visual Studio Code

Configuração para desenvolvimento local

Baixe o código-fonte do GitHub.
No VS Code, abra a pasta /website e opte por instalar todas as extensões recomendadas.
No diretório /website, execute npm install para instalar todas as dependências.
Use npm run dev para iniciar o site. Selecione o link oferecido para visualizar o site.

Credenciais do Azure

Para atualizar os segredos AZURE_CREDENTIALS, execute este comando no shell do Portal do Azure:

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

O fluxo de autenticação de jogadores no Winter Starfall tem duas etapas: a chamada de login e as funções pós-login, que são usadas para obter as informações do jogador no serviço e carregá-lo no local correto da história.

Autenticação de jogadores

Para a parte de login, o arquivo use-login.ts define uma função wrapper em TypeScript que lida com os vários métodos de autenticação disponíveis para os jogadores. As linhas 144-169 definem a função de retorno de chamada para fazer login com um endereço de email e chamam as funções pós-login se o login for bem-sucedido.

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

O jogo oferece 3 métodos recuperáveis de autenticação de jogadores: email, Google e Facebook, para que as contas dos jogadores nunca sejam perdidas. Para obter mais informações, confira Práticas recomendadas de login. Depois que o token de segurança é obtido, ele é usado para executar as funções pós-login e obter o estado salvo do jogo. As linhas 340-378 definem postLoginFunctions, que chama várias APIs do Economy e do PlayFab Services para carregar o local correto da história, os itens de inventário, a moeda etc. com base no jogador.

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

Primeiro, ClientGetTitleData obtém a chave secreta necessária para todas as chamadas de API
Em seguida, EconomySearchItems pesquisa o catálogo em busca de tipos de moeda e item
O que é usado como entrada para EconomyGetInventoryItems para retornar os itens de inventário do jogador
Depois, ClientGetUserData recupera o valor que armazena o local da história como parte dos dados do jogador.

Fluxo de compra

Em determinados pontos do jogo, o jogador tem a opção de comprar e vender itens de inventário na loja. O fluxo de compra é implementado em outra função wrapper. No arquivo use-store.ts, as linhas 40-69 exibem a loja correta que o jogador encontra em um local específico e preenchem os itens à venda pesquisando o 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 é definido em use-playfab.ts nas linhas 423-446, nas quais a API GetItems do PlayFab Economy é usada para pesquisar o catálogo e retornar itens.

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

Quando uma compra é realizada, é feita uma chamada à API PurchaseInventoryItems. Isso é definido em use-playfab.ts nas linhas 540-565.

Vendendo itens

O fluxo de venda é um exemplo de como usar o CloudScript com Azure Functions para estender a funcionalidade do sistema Economy. SellItem.cs define a função do CloudScript que é executada ao vender um item. As linhas 49-61 são onde a API GetTitleData do PlayFab é usada para retornar o multiplicador da loja e calcular o preço de venda.

 // 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 função do CloudScript é então chamada nas linhas 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 executar o Winter Starfall localmente, você precisará de uma conta do Azure para dar suporte às funções do CloudScript. Você pode se inscrever para uma conta gratuita do Azure e depois seguir as instruções acima para redefinir as credenciais do Azure corretamente.

Confira também

Fluxo de login
- Documentação de login de jogadores
Fluxo de compra
- Documentação do Economy V2
- Outra boa próxima etapa para saber mais sobre o Economy V2 é experimentar o tutorial do jogo de criação, que se concentra na criação de um jogo de exemplo usando as funções de loja e inventário.

XBOX Services

PlayFab

Código-fonte e práticas recomendadas - Winter Starfall

Código-fonte e cenários no Winter Starfall

Download do código-fonte

Pré-requisitos

Configuração para desenvolvimento local

Credenciais do Azure

Autenticação de jogadores

Fluxo de compra

Vendendo itens

Confira também

​Código-fonte e cenários no Winter Starfall

​Download do código-fonte

​Pré-requisitos

​Configuração para desenvolvimento local

​Credenciais do Azure

​Fluxo de login

​Autenticação de jogadores

​Pós-login: obtendo os dados do jogador

​Fluxo de compra

​Vendendo itens

​Confira também

Código-fonte e cenários no Winter Starfall

Download do código-fonte

Pré-requisitos

Configuração para desenvolvimento local

Credenciais do Azure

Fluxo de login

Autenticação de jogadores

Pós-login: obtendo os dados do jogador

Fluxo de compra

Vendendo itens

Confira também