Page 1 of 1

How to target methods of a class?

PostPosted: Tue Aug 16, 2016 12:48 pm
by RiaanPie
Hello

I have created a Class for a popup component that needs to fade some elements within it in and out of view when moused over. The class looks like this:

Code: Select all
// Define our player character container classes
var Popup = IgeEntity.extend({
   classId: 'Popup',

   init: function () {
       IgeEntity.prototype.init.call(this);

       var marker = new IgeEntity()
            .depth(11)
            .texture(textures[4])
            .dimensionsFromCell()
            .translateTo(30, 30, 0)
            .mouseOver(this.over)
           .mount(this);

      var bg = new IgeUiEntity()
         //.id('bg')
         .depth(10)
         .backgroundColor('#006773')
         .left(0)
         .top(0)
         .width(350)
         .height(120)
            .hide()
            .mouseOut(this.out)
            .opacity(0)
         .mount(this);

       var txt = new IgeFontEntity()
                        //.id('txt')
                  .depth(12)
                  .textAlignX(0)
                  .colorOverlay('#ffffff')
                  .nativeFont('20pt Times New Roman')
                  .nativeStroke(1)
                  .nativeStrokeColor('#333333')
                  .textLineSpacing(16)
                  .width(240)
                  .height(60)
                  .translateTo(200, 40, 0)
                  .cache(false)
                        .text('This is some text. It can be quite long, really.')
                        .autoWrap(true)
                        .hide()
                  .mount(this);

       var perc = new IgeFontEntity()
                        //.id('perc')
                  .depth(13)
                  .textAlignX(1)
                  .colorOverlay('#ffffff')
                  .nativeFont('26pt Times New Roman')
                  .nativeStroke(1)
                  .nativeStrokeColor('#333333')
                  .textLineSpacing(16)
                  .width(80)
                  .height(80)
                  .translateTo(40, 40, 0)
                  .cache(false)
                        .text('88%')
                        .autoWrap(false)
                  .mount(this);

       //ige.input.mapAction('mouseX', ige.input.mouse.x);
       //ige.input.mapAction('mouseY', ige.input.mouse.y);
   },
    // mouse over the marker icon
   over: function (event, control) {
       control.stopPropagation();
       console.log(this);
       bg.show();
       bg.tween()
        .properties({
            _opacity: 1
        })
        .duration(500)
        .start()
       txt.show();
       marker.cell(2);
   },
    // mouse out on the entire label
   out: function (event, control) {
       bg.hide()
           .opacity(0);
       txt.hide();
       marker.cell(1);
   },
    // Update the values displayed by the popup
   updateText: function (_perc, _txt) {
       txt.text(_txt);
       perc.text(_perc);
   }
});

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = Popup; }


I add the popups to the game like this:

Code: Select all
function addPopup(data) {
    //console.log(ige.client);
    popups.push(new Popup()
        .depth(100 + popups.length)
        .translateTo(popups.length * 100, popups.length*100,0)
        .mount(ige.client.objectScene)
        );
    popups[popups.length - 1].updateText(data.data_actual + "%", data.val);
}


Now the problem pertains to me calling the updateText() function. Debugger tells me that "txt is not defined".

How do I target the elements inside the Class to get them to appear when moused over? When I remove the call to updateText, the background of the last item added to stage appears but not the one that I am rolling over. I have tried varoius ways of using "this" to try and target those elements...

Thanks for any input!

Re: How to target methods of a class?

PostPosted: Tue Aug 16, 2016 1:49 pm
by rob
Hi ya, the reason is that txt is defined in your class constructor and then will no longer exist as the variable "txt" outside of the class.

Instead all you have to do is change:

var txt = ...

to:

this.txt = ...

Then in your updateText method instead of accessing "txt" you should access "this.txt".

That's it! :)

P.S. this is not really a feature or function of the engine, it is how JavaScript works. When you define variables inside of functions they only exist inside that function, not anywhere else.

A good example is:

Code: Select all
var myObj1 = 1;

var myFunc  = function () {
    var myObj1 = "HELLO";
    var myObj2 = "GOODBYE";
};

myFunc();

console.log(myObj1); // Outputs 1
console.log(myObj2); // Outputs "undefined"

Re: How to target methods of a class?

PostPosted: Tue Aug 16, 2016 3:23 pm
by RiaanPie
After posting it I realised that it's more a js questions than a isogenic one. Apologies!! And thanks for the feedback.
Will try it and let you know what happens.

Re: How to target methods of a class?

PostPosted: Fri Aug 19, 2016 9:13 am
by RiaanPie
I managed to sort this out. It was a scoping issue where "this"was actually referring to the graphic I was mousing over... so I had to target its _parent.
Full code:

Code: Select all
// Define our player character container classes
var Popup = IgeEntity.extend({
   classId: 'Popup',

   init: function () {
       IgeEntity.prototype.init.call(this);

       this.marker = new IgeEntity()
            .depth(11)
            .texture(textures[4])
            .dimensionsFromCell()
            .translateTo(30, 30, 0)
            .mouseOver(this.over)
           .mount(this);

       this.bg = new IgeUiEntity()
         //.id('bg')
         .depth(10)
         .backgroundColor('#006773')
         .left(0)
         .top(0)
         .width(350)
         .height(120)
            .hide()
            .mouseOut(this.out)
            .opacity(0)
         .mount(this);

       this.txt = new IgeFontEntity()
                        //.id('txt')
                  .depth(12)
                  .textAlignX(0)
                  .colorOverlay('#ffffff')
                  .nativeFont('20pt Times New Roman')
                  .nativeStroke(1)
                  .nativeStrokeColor('#333333')
                  .textLineSpacing(16)
                  .width(240)
                  .height(60)
                  .translateTo(200, 40, 0)
                  .cache(false)
                        .text('This is some text. It can be quite long, really.')
                        .autoWrap(true)
                        //.hide()
                  .mount(this);

       this.perc = new IgeFontEntity()
                        //.id('perc')
                  .depth(13)
                  .textAlignX(1)
                  .colorOverlay('#ffffff')
                  .nativeFont('26pt Times New Roman')
                  .nativeStroke(1)
                  .nativeStrokeColor('#333333')
                  .textLineSpacing(16)
                  .width(80)
                  .height(80)
                  .translateTo(40, 40, 0)
                  .cache(false)
                        .text('88%')
                        .autoWrap(false)
                  .mount(this);

       //ige.input.mapAction('mouseX', ige.input.mouse.x);
       //ige.input.mapAction('mouseY', ige.input.mouse.y);
   },
    // mouse over the marker icon
   over: function (event, control) {
       control.stopPropagation();
       console.log(this);
       console.log(event);
       this._parent.bg.show();
       this._parent.bg.tween()
        .properties({
            _opacity: 1
        })
        .duration(500)
        .start()
       this._parent.txt.show();
       this._parent.marker.cell(2);
   },
    // mouse out on the entire label
   out: function (event, control) {
       this._parent.bg.hide()
           .opacity(0);
       this._parent.txt.hide();
       this._parent.marker.cell(1);
   },
    // Update the values displayed by the popup
   updateText: function (_perc, _txt) {
       this.txt.text(_txt);
       this.perc.text(_perc);
   }
});

if (typeof(module) !== 'undefined' && typeof(module.exports) !== 'undefined') { module.exports = Popup; }

Re: How to target methods of a class?

PostPosted: Fri Aug 19, 2016 9:52 am
by rob
Awesome :)