promogame-react-unity-template/README.md

Zalo Mini App

Development

Using Zalo Mini App Extension

1. Install Visual Studio Code and Zalo Mini App Extension.
2. In the Home tab, process Config App ID and Install Dependencies.
3. Navigate to the Run tab, select the suitable launcher, and click Start.

Using Zalo Mini App CLI

1. Install Node JS.
2. Install Zalo Mini App CLI.
3. Install dependencies:

   npm install
   

4. Start the dev server:

   zmp start
   

5. Open localhost:3000 in your browser.

Deployment

1. Create a mini program. For instructions on how to create a mini program, please refer to the Coffee Shop Tutorial

2. Deploy your mini program to Zalo using the mini app ID created.

   • Using Zalo Mini App Extension: navigate to the Deploy panel > Login > Deploy.
   • Using Zalo Mini App CLI:

     zmp login
     zmp deploy
     

3. Open the mini app in Zalo by scanning the QR code.

Resources

• Zalo Mini App Official Website
• ZaUI Documentation
• ZMP SDK Documentation
• DevTools Documentation
• Ready-made Mini App Templates
• Community Support

Unity Game

Getting started

1. Install dependencies:

   npm install react-unity-webgl
   

   or

   pnpm install react-unity-webgl
   

   or

   yarn install react-unity-webgl
   

2. Create the game component:

   import clsx from 'clsx';
   import { useEffect } from 'react';
   import { Unity, useUnityContext } from 'react-unity-webgl';
   import zmpSdk from 'zmp-sdk'; 
   
   export const UnityGame = () => {
        const gameLink = import.meta.env.VITE_GAME_LINK;
        const { unityProvider, isLoaded, loadingProgression, UNSAFE__unityInstance } = useUnityContext({
            loaderUrl: `${gameLink}/Build/Build.loader.js`,
            dataUrl: `${gameLink}/Build/Build.data.unityweb`,
            frameworkUrl: `${gameLink}/Build/Build.framework.js.unityweb`,
            codeUrl: `${gameLink}/Build/Build.wasm.unityweb`,
        });
   
        useEffect(() => {
            window.ZaloMiniAppSDK = zmpSdk;
            window.unityInstance = UNSAFE__unityInstance;
        }, [UNSAFE__unityInstance]);
   
        return (
            <>
            {!isLoaded && (
                <div className={'h-full w-full items-center justify-center text-center'}>
                    Loading {loadingProgression * 100 + 10}%
                </div>
            )}
                <Unity
                    id='unity-canvas'
                    unityProvider={unityProvider}
                    className={clsx('h-full w-full', !isLoaded && 'hidden')}
                    devicePixelRatio={window.devicePixelRatio}
                />
            </>
        );
    };
   

3. Add game link to env:

    APP_ID=
    ZMP_TOKEN=
    VITE_GAME_LINK=[your game link]
   

4. Import and use it anywhere:

    export default function MainApp() {
        return (
            <div className={'flex h-dvh w-screen flex-col items-center justify-center'}>
                <UnityGame />
            </div>
        );
    }