Bitmap Text Positioning Bug After Changing States

[zazou]

Hey!
I am encountering a very strange problem with positioning of bitMapText.  I am using Jquery to register a form submit from HTML form element, and displaying text via bitmapText.  This works fine on the first state that I start. but as soon as I switch states there are problems.

OK so when I move to the next state, the text no longer is printed at character location. Instead, it is added to the same, seemingly random spot on the screen every time i submit the form.  However, if I return back to the first state , it  (strangely) works as it should (printing to the spot where the player is positioned)! 

Here is a simplified version of the code which I am using in each of my states creation function.
 
 

var self=this;    $( document ).ready(function() {            //watching the form element for a submit            $('form').submit(function(e){                //prevents form from refreshing page                e.preventDefault();                gets the 'msg' from my html form (with css ID #m)                var msg = $('#m').val();                // console.log('adding text to ', self.player.x, self.player.y);                var chatText = self.game.add.bitmapText(self.player.x, self.player.y, 'carrier_command',msg, 7);                                // console.log('chat text position',chatText.position.x, chatText.position.y);                                              $('#m').val('');                return false;              });});

The console.log's reveal that in every case the chatText.position.x and chatText.position.y ARE correct, and exactly what I want them to be, even in the secondary states where the problem is happening.

I have the project uploaded on my github. to see full implementation of this see:

Here is the function I am calling  in the 'create' method of every level state.
https://github.com/sdlovecraft/virtual-gallery/blob/master/public/js/chat.js 

Here is the 'entrance' state which you can see where I am instantiating it in create:
https://github.com/sdlovecraft/virtual-gallery/blob/master/public/js/entrance.js


I am presenting this to my class tomorrow I would be deeply appreciate some help if possible!!
Thanks,
Sam

[drhayes]

In line 36, you don't mean "setUpChat.bind(this)(socket);" you mean "setUpChat.call(this, socket);". The first form isn't wrong, it just looks really weird since usually you save bound functions somewhere.

 

When you say "the same, seemingly random spot", what spot is that? Any chance on getting the exact coordinates? The version I'm looking at could have a race condition around the value of "self.textYBuffer". It gets added to and subtracted from an awful lot from different callbacks; I wouldn't be surprised if it those long setTimeout calls are happening much later than you think and, meanwhile, you've switched states. Or something.

 

This is all kind of a guess. ¯\_(ツ)_/¯

[zazou]

thanks for your response!! Oh right, that makes so much sense with the .call rather than bind! Appreciated.

So i've removed the setTimeouts and the textYBuffer, and im still getting the same issue. I have hosted and uploaded the application with these changes (you will notice the text isnt 'stacking' this is because the textYBuffer (which I have removed) was performing this function. 

The problem still remains. I can't figure out how to get exact coordinates, but hopefully when you look at this it will be more clear. Thanks so much for your help!

http://samhains.com:5000/

Sam

[zazou]

OK so i figured it out!!!! It turns out that reinitialising the $('form').on('submit') event listener for every state was causing the buggy behaviour. I needed to add a $('form').off('submit') at every state change, so that there were not problems. 

 

[drhayes]

Ah, cool, that makes sense. I was stumped too, FWIW. Good luck on your project.