How to target methods of a class?

Post your help queries and engine programming questions here

How to target methods of a class?

Postby RiaanPie » Tue Aug 16, 2016 12:48 pm

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!
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: How to target methods of a class?

Postby rob » Tue Aug 16, 2016 1:49 pm

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"
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm

Re: How to target methods of a class?

Postby RiaanPie » Tue Aug 16, 2016 3:23 pm

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.
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: How to target methods of a class?

Postby RiaanPie » Fri Aug 19, 2016 9:13 am

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; }
RiaanPie
 
Posts: 20
Joined: Fri Jul 22, 2016 2:20 pm

Re: How to target methods of a class?

Postby rob » Fri Aug 19, 2016 9:52 am

Awesome :)
CEO & Lead Developer
Irrelon Software Limited
http://www.isogenicengine.com
User avatar
rob
Site Admin
 
Posts: 316
Joined: Tue Oct 22, 2013 5:08 pm


Return to Help & Questions

Who is online

Users browsing this forum: No registered users and 1 guest
cron