Text Adventure: Perfomance problem

Phaser 3
1

Hi!
I’m new in phaser and my english is bad. I will try to explain my problem:

I made a RPG text adventure. Move around in an office. A click on a character starts a dialog with two answer options (text objects). I stored the dialogs in a json file. The dialogs and the answers work fine. But if you start dialogs several times the browser lags (cpu: 100) and crashes. Every dialog replace an existing text object.


/// code in create()

        this.textElement = this.add.text(10, 780, "Place:");
        this.textElement2 = this.add.text(10, 800, "office");
        this.textElement3 = this.add.text(10, 840, "Use arrow keys to move.");
        this.answer1 = this.add.text(10, 870, "").setStyle({ backgroundColor: '#111' });
        this.answer2 = this.add.text(400, 870, "").setStyle({ backgroundColor: '#111' });

/// click on a character (it is in another scene):

textGame.events.on("textSecurity", function () {

            this.letsGo(this.scenario.one);
            this.linkGo(this.linkAction.one);

        }, this);

/// the json-File:

this.scenario = this.cache.json.get("scenario");

this.letsGo = function(s){

        this.textElement.text = "Security:";
        this.textElement2.text = s.text;
        this.textElement3.text = "What's your answer";
        this.answer1.text = s.ant1;
        this.answer1.setInteractive(); 
        this.answer2.text = s.ant2;
        this.antswer2.setInteractive();
    };

///code in update()

this.linkAction = {
    
            one: {     
                    link1: this.next2,
                    link2: this.next3,
                    next1: this.linkNext2,
                    next2: this.linkNext3
            },

            two: {
                    link1: this.next4,
                    link2: this.next3,
                    next1: this.linkNext4,
                    next2: this.linkNext3
            },

            three: {     
                    link1: this.next4,
                    link2: this.next5,
                    next1: this.linkNext4,
                    next2: this.linkNext5
            }

     /// and so on

        };

        this.linkGo = function(l){
            this.answer1.on("pointerdown", function(pointer){
                this.letsGo(l.link1);
                this.linkGo(l.next1);
            }, this);  
            this.answer2.on("pointerdown", function(pointer){
                this.letsGo(l.link2);
                this.linkGo(l.next2);
            }, this);  
        };
    
    
            this.next1 = this.scenario.one;
            this.next2 = this.scenario.two;
            this.next3 = this.scenario.three;
            this.next4 = this.scenario.four;
            this.next5 = this.scenario.five;
///...

            this.linkNext1 = this.linkAction.one;
            this.linkNext2 = this.linkAction.two;
            this.linkNext3 = this.linkAction.three;
            this.linkNext4 = this.linkAction.four;
            this.linkNext5 = this.linkAction.five;

/// example text in the json-file (shortened):

"one": {    
                        "text": "some text",
                        "ant1": "some text,
                        "ant2": "some text",
                        "link1": "this.next2",
                        "link2": "this.next3"
                    },
    
                "two": {    
                        "text": "some text",
                        "ant1": "some text",
                        "ant2": "some text,
                        "link1": "this.next4",
                        "link2": "this.next3"
                    },

Can anyone help? Thanks alot!

2

:wave:

I can’t tell but probably on('pointerdown', …) shouldn’t be in update().

Try recording runtime performance.

3

Welcome on board!

i dont know how experienced you are with developtment at all, but keep in mind to genereate all objects you need only once, not in each update loop / click event and so on.

It seems like u create a new “on pointer down” event listener each time user clicks a char (more code would be fine here :slight_smile: ).

Try to use class instances for your game objects.

The “update” method is call automatically every XX ms in phaser, so its not a good place for some event-triggers or object declarations. You should do only some “basic visibility logic” here (like players position check, visibility, object movement (or do this in the custom child class with overwriting “update” method of gameobject)…

If you can provide more code (or even a demo-fiddle e.g. on jsfiddle.net or codepen.io ) it would be nice

PS:
here you will find many usefull tutorials / demos / snippets:

4

Thanks for your replies! I tried to put the code of the update-function in the create-function, but it doesn’t work. I get error messages:

TextScene.js:199 Uncaught TypeError: Cannot read properties of undefined (reading ‘text’)
at TextScene.letsGo (TextScene.js:199:1)
at TextScene. (TextScene.js:210:1)
at Text.emit (phaser.js:1909:1)
at InputPlugin.processDownEvents (phaser.js:186075:1)
at InputPlugin.update (phaser.js:185806:1)
at InputManager.updateInputPlugins (phaser.js:93090:1)
at InputManager.onMouseDown (phaser.js:93276:1)
at HTMLCanvasElement.onMouseDown (phaser.js:94478:1)

So I put only this code in the create-function:

   this.linkGo = function(l){
            this.answer1.on("pointerdown", function(pointer){
                this.letsGo(l.link1);
                this.linkGo(l.next1);
            }, this);  
            this.answer2.on("pointerdown", function(pointer){
                this.letsGo(l.link2);
                this.linkGo(l.next2);
            }, this);  
        };

This works but unfortunately the problem still exists. After clicking on an answer it always takes longer until the corresponding text appears, the cpu workload is in this period 100%. The animations of the sprites stop and you can’t control the player. When the text appears, the player can be controlled again and the animations will continue. They appear accelerated for a short time. I took screenshots:

screenshot1
screenshot11281×195 43.5 KB

screenshot2
screenshot21281×195 41.9 KB

screenshot3
screenshot31281×195 36 KB

screenshot4
screenshot41281×195 35.9 KB

It is not my first Phaser-Game but my first Phaser-Game with nodejs, modern javascript and webpack. I don’t know how to copy my setup into fiddle. I could upload the game to my webspace, but I don’t want to crash your systems :wink: Perhaps I should build a version without node.

I will try it with class instances first.

Thanks alot for the support!

5

i also build up my game with nodejs as backend. but node dosnt have to do anything with the cpu load if game is running like this and u dont make any server side requests.

the error:

Cannot read properties of undefined
could be related to some miss-match in your “this” scope and the passed variable in the “function( l )” context.

i prefer “arrow” functions in event-listeners, because they keep the same “this” scope as there surrounding function / class. otherwhise you have to pass the scope each time u call a function.

without more code i cant help u with this :frowning: sorry.

6

I build up a realy simple example with the lines of code u provided here:

I dont realy know what u are doing here:

It seems to me like a object where u try to reference some other objects. maybe this can and up in a circle reference!?
i’ve done this in a different way. in my example u see a variable “currentScenario”. this holds the current scenario from the json and its data.
i also changed the JSON-Data (you cant use “this.next3” inside json => its only text than, no object reference).
Now each scenario holding the next and previous scenario keys to go to on link1 / link2 :slight_smile:

maybe you can use my fiddle and change it to your code example and post back here with this new fiddle?

7

Thanks for your reply and your help. I think your code is clean and great! My code is too complicated. This game may be overkill for me, I am still at a low javascript level. I have a lot to learn. You solved the problem with the navigation to the next text. I put my code in a fiddle. Be careful, there are also perfomance problems:

https://jsfiddle.net/shv507ry/1

8

i see.
The problem is this function:

  this.linkGo = function(l) {

here u create each time a new event.listener for both buttons.

i update your example with a counter-function.
each time u click a button, the counter should be incremented by 1. but as you can see, the “pointerdown” event fires multi times. and after 3 or 4 clicks you allready reach 26 iterations of your code. and if there is much more to do, it will even crash your game logic :slight_smile:

you only need to define a eventlistener once! inside your callback function you have to handle the current situation :wink:

Viel Erfolg!

9

Aaah I see, good idea! Thanks for the great help. I will try it.