[SOLVED] PlayCanvas integration in an Angular project

Help & Support
1

Hi,

I know there are several threads about this, but they are not in the same context as me.

I have a Playcanvas project, and i tried to integrate it in an Angular project.

The repository is here : https://github.com/vogloblinsky/playcanvas-angular

There are 2 screens : home and game.

When going to game screen, the first time, it works well, but after if i come back to home, and re-open game screen, i got a SIGSEGV error in Chrome

image

Just for information, i loaded the same Playcanvas project in this Vue.js starter with success : https://github.com/isobolewski/playcanvas-vue

1 Like
2

When you change pages, what do you do with the PlayCanvas app? Is it paused, destroyed, canvas removed from view, etc?

It looks like the SIGSEGV may have been caused by the physics system.

3

I destroy the engine when I exit the game page with pc.app.destroy()

4

It looks like the issue is that the WASM module for the physics doesn’t like being loaded twice.

As a quick test, I did the following:

            this.createInputDevices();
            this.pcApplication = new pc.Application(this.canvas, {
                elementInput: this.devices.elementInput,
                keyboard: this.devices.keyboard,
                mouse: this.devices.mouse,
                gamepads: this.devices.gamepads,
                touch: this.devices.touch,
                graphicsDeviceOptions: window['CONTEXT_OPTIONS'],
                assetPrefix: window['ASSET_PREFIX'] || '',
                scriptPrefix: window['SCRIPT_PREFIX'] || '',
                scriptsOrder: window['SCRIPTS'] || [],
            });

            if (window['foo'] !== true && window['PRELOAD_MODULES'].length > 0) {
                this.processModules();
            } else {
                this.configure();
            }
            window['foo'] = true;

Which ensures the modules are only loaded once on the page and seems to work for this example.

5

Yeah it works fine, thanks !

The repository was renamed : https://github.com/vogloblinsky/playcanvas-angular

2 Likes