Game in a part of a window?

Help & Support
21

There are a couple of ways you can have ‘both’. For example patching the engine but in the PlayCanvas app, calling preventDefault() on the event only when the user is touching an object.

22

hello,

Tried patching the engine, seems to work fine if I comment directly the “preventDefault()” into the engine.

The problem I have now is that in our react project, seems to have the playcanvas engine code in a different location than the files folder (where the script is). Replacement does work fine on editor generated structure. Is there a way to specify location where to find playcanvas js files? Trying to send images of our react project folder structure if it helps.

Thank you again!

image
image

23

As long as the patch code is after the engine is loaded and before the engine is created, you should be fine.

The file location of the engine shouldn’t matter.

Side question: Is there a playcanvas engine JS file in public/playcanvas folder?

24

No, the playcanvas code is in that node_module folder

image
image
image

25

Okay in which case what I’ve mentioned before should still apply.

26

Not sure I understand, I have that engine-patch script with after engine option selected. So I guess the patch is applied after the engine is loaded? what do you mean by “created”?

I can see the script in the “files” folder, and the reference to it into the generated config.js file. But when I’m debugging, it seems the patch wasnt applied as the preventdefault() are still there.

27

(I’m going to over explain stuff so skip the parts you already know :slight_smile: )

Quick notes on JS ‘monkey patching’. In JS, functions are objects which means they can assigned to a variable or to properties of other objects.

A simplified example is:

// 'Original' code 
var someFunction = function() {
    console.log('Hello World 1');
}

// Let's patch it
someFunction = function() {
   console.log('Hello World 2');
}

// And call it
someFunction();

// Prints out 'Hello World 2'

During debugging, you would still see all of the code but the flow will go through the patched function.

Taking my project example above, the HTML looks like this:

image
image1127×442 40 KB

At 1, the engine script is loaded first and then my engine patch which assigns new functions to the touch input handlers that don’t call preventDefault()

At 2, these scripts load assets and also create an instance of the engine. This is the part of __start__.js that creates that instance

image

28

Thats really helpfull.
start.js do not exist anymore on our side and as been splitted between different files. But we got the idea and did plug it in the code.

Thank you again, should be my last question on this topic :slight_smile: