Run a standalone project on debug mode

Help & Support
1

Hi everyone! :wave:

I’m trying to get the Mini Stats working properly in my PlayCanvas project. I came across the example here:

PlayCanvas Examples - Mini Stats

In the code, there’s a comment that says:

Note: for most of these to report values, either debug or profiling engine build needs to be used.

However, I couldn’t find clear instructions on how to enable the debug or profiling engine build for a standalone project. Could anyone guide me on how to do this?

Thanks in advance! :blush:

2

how do you currently add PlayCanvas to your project?

3

I am building a React app with Next.js

This is the Component that I create to initialize PC:

'use client';

import * as pc from 'playcanvas';
import { ReactElement, RefObject, useEffect, useState } from 'react';
import Entity from '../Entity';
import AppContext from './AppContext';
import EntityPoolContext from './EntityPoolContext';
import useTween from './useTween';
import usePostEffectOutline from './usePostEffectOutline';

export default function Canvas(props: {
  parentElement?: RefObject<HTMLElement>;
  children?: ReactElement<typeof Entity> | Array<ReactElement<typeof Entity>>;
}) {
  usePostEffectOutline();
  useTween();

  const [app, setApp] = useState<pc.Application>();
  const [wasAmmoLoaded, setWasAmmoLoaded] = useState<boolean>(false);
  const [entityPoll, setEntityPoll] = useState<Array<pc.Entity>>([]);

  useEffect(function () {
    (async () => {
      pc.WasmModule.setConfig('Ammo', {
        glueUrl: window.location.origin + '/ammo.wasm.js',
        wasmUrl: window.location.origin + '/ammo.wasm.wasm',
        fallbackUrl: window.location.origin + '/ammo.js',
      });

      await new Promise<void>((resolve) => {
        pc.WasmModule.getInstance('Ammo', () => {
          console.log('Ammo.js carregado com sucesso');
          setWasAmmoLoaded(true);
          resolve();
        });
      });
    })();
  }, []);

  useEffect(
    function () {
      if (wasAmmoLoaded) {
        const parentElement = props.parentElement?.current;
        const canvas = document.createElement('canvas');

        if (parentElement) {
          parentElement.appendChild(canvas);
        } else {
          document.body.appendChild(canvas);
        }

        const app = new pc.Application(canvas, {
          graphicsDeviceOptions: {
            // deviceTypes: ['webgpu'],
          },
        });
        app.mouse = new pc.Mouse(canvas);
        app.setCanvasResolution(pc.RESOLUTION_AUTO);

        if (parentElement) {
          app.setCanvasFillMode(pc.FILLMODE_NONE, parentElement.clientWidth, parentElement.clientHeight);
          window.onresize = () => {
            app.setCanvasFillMode(pc.FILLMODE_NONE, parentElement.clientWidth, parentElement.clientHeight);
          };
        } else {
          app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
        }

        setApp(app);

        return () => canvas.remove();
      }
    },
    [wasAmmoLoaded]
  );

  useEffect(
    function () {
      if (app && wasAmmoLoaded) {
        window.addEventListener('resize', () => app.resizeCanvas());

        return () => window.removeEventListener('resize', () => app.resizeCanvas());
      }
    },
    [app, wasAmmoLoaded]
  );

  useEffect(
    function () {
      if (wasAmmoLoaded) {
        [props.children].flat().forEach(function (child) {
          if (child) {
            const childEntity = entityPoll.find(function (entity) {
              return entity.name === child.props.name;
            });
            app?.root?.addChild(childEntity as pc.Entity);
          }
        });
      }
    },
    [entityPoll, wasAmmoLoaded]
  );

  useEffect(
    function () {
      if (app && wasAmmoLoaded) {
        app.start();
      }
    },
    [app, wasAmmoLoaded]
  );

  if (wasAmmoLoaded && app) {
    return (
      <AppContext.Provider value={app}>
        <EntityPoolContext.Provider value={{ entityPoll, setEntityPoll }}>{props.children}</EntityPoolContext.Provider>
      </AppContext.Provider>
    );
  } else {
    <></>;
  }
}
4

@Mark_Lundin might be able to advice here

1 Like
5

Great!

I am still waiting for help :blush:

6

You should just be able to import the debug version of the engine

import * as pc from 'playcanvas/debug';

You’ll probably want some conditional in your build to only use that for local builds and not production, depending on your needs

2 Likes
7

I get it.

Thank you for the support! :smiley:

1 Like