Forums » Code » Extending NotificationManager

quidmonkey wrote:

You can easily add the entity functionality to the plugin. I'd extend the Notification class by adding something like this to the plugin:

WordBalloon = Notification.extend({ 
entity: null
init: function( entity, rest of note stuff ) {
this.parent( note stuff );
this.entity = entity;
}
update: function(){
this.vel.x = this.entity.vel.x;
this.vel.y = this.entity.vel.y;
this.parent();
} 
});

You could then add a spawnWordBalloon() to NotificationManager to allow you to spawn these new notes.

I don't understand how to make this work.

I can't even get past syntax errors.

Should this be its own plugin or inside NotificationManager ? You've made it too generic for me to understand when you put "rest of note stuff" and "note stuff".

Sorry I was tired last night when I posted that. I figured it out.

I was trying to make a note stick with the entity who "spoke" it, instead of it just appearing on the screen like reward points for picking up something.

The WordBalloon extension of NotificationManager works, but not quite right.

It moves at the same velocity as the entity, but doesn't stay with the entity when the player moves around and causes the screen to scroll.

I'll work on it some more.

OK, here is the WordBalloon extension that you put in NotificationManager plugin

WordBalloon = Notification.extend({
        
    entity: null,            	//entity that owns 
    font: null,            	//font
    text: '',            	//string to draw
    pos: { x: null, y: null },  //position
    _kill: null,            	//state
    vel: { x: 0, y: -20 },	//velocity - set to 0 if font doesn't move
    alpha: 1,            	//alpha, 0 = translucent, 1 = opaque
        
    lifetime: 1.2,            	//how long notification should last, set to zero to disable fade
    fadetime: 0.4,            	//how long until note fades
        
    init: function( entity, font, text, x, y, settings ) {
        this.parent( font, text, x, y, settings );
        this.entity = entity;
        

    },
    
    update: function() {
             
        this.pos.x = (this.entity.pos.x - ig.game.screen.x);
        this.pos.y = (this.entity.pos.y - ig.game.screen.y);
        
        this.parent();
    }
    
});

Then in the entity you want to say the message you put:

ig.game.myNoteManager.spawnWordBalloon(this, new ig.Font( 'media/font-black.png' ),
                                        'I am a holy man ',this.pos.x,this.pos.y,
                                        {vel: { x: 0, y: -30 },  alpha: 1, lifetime: 3.2, fadetime: 1.0 });

stahlmanDesign, could you post anything you learn? I was trying to get this going too, and im still at the syntax error stage. :P

The only problem is that to make it stay with the entity while the screen scrolls around, you have to have the wordBalloon position = the entity position. This cancels out the upward scrolling effect. If you comment the line

this.pos.y = (this.entity.pos.y - ig.game.screen.y);

it will float up and still follow the entity on the X axis, but not on the Y.

@quidmonkey, do you see the solution?

When i put WordBalloon = Notification.extend ({...}); in my notification manager, it goes after the Notification = ig.Class.extend({...}); correct?

Then I get the error...

Uncaught TypeError: Object [object Object] has no method 'spawnWordBalloon'

...When i call the WordBalloon extension from my entity...

Sorry, you also have to add this near the top after the spawnNote function

 spawnWordBalloon: function ( entity, font, text, x, y, settings){
        
        var wordBalloon = new WordBalloon( entity, font, text, x, y, settings );
        this.notes.push( wordBalloon );
        
    },

Here's the entire NotificationManger with the wordBalloon extension included (but upward scrolling of message doesn't work as was described previously)

/*
 * Impact Plugin
 * NotificationManager
 * Written by Abraham Walters
 * July 2011
 * Jxyzzy Dev Company
 * jxyzzy.com
 *
 * This plugin extends the Font class and allows you to pop-up a
 * text Notification (spawnNote()), move it (this.pos) and have
 * it fade after a specified amount of time (this.lifetime &
 * this.fadetime). The plugin provides a NotificationManager to
 * do all your dirty work and track each Notification for updating
 * and drawing.
 *
 * To use the plugin you will need to create an instance of the
 * NotificationManager in your ig.game instance (MyGame) like so:
 *
 * myNoteManager: new NotificationManager(),
 *
 * You will then need to add myNoteManager.update() to ig.game.update()
 * and myNoteManager.draw() to ig.game.draw().  Make sure you add 
 * myNoteManager.draw() after the this.parent() draw, otherwise your 
 * Notifications will be drawn over. From there you can spawn a
 * Notification within any Entity using the following syntax:
 *
 * ig.game.myNoteManager.spawnNote('media/font.png', 'string', x, y, settings);
 *
 * Enjoy!
 * 
 */

ig.module(
    'plugins.notification-manager'
)
.requires(
    'impact.impact'
)
.defines(function(){

ig.NotificationManager = ig.Class.extend({
        
    notes: [],
    
    init: function() {},
    
    draw: function() {
        
        for(var i = 0; i < this.notes.length; i++) {
            this.notes[i].draw();
        }
        
    },
    
    spawnNote: function( font, text, x, y, settings) {
        
        var note = new Notification( font, text, x, y, settings );
        this.notes.push( note );
        
    },
    
    spawnWordBalloon: function ( entity, font, text, x, y, settings){
        
        var wordBalloon = new WordBalloon( entity, font, text, x, y, settings );
        this.notes.push( wordBalloon );
        
    },
    
    update: function() {
        
        for( var i = this.notes.length ; i--; i ) {
            this.notes[i].update();
            
            //if note is dead, erase it
            if( this.notes[i]._kill ) {
                this.notes.splice(i, 1);
            }
        }
    }
    
});


Notification = ig.Class.extend({
        
    font: null,            	//font
    text: '',            	//string to draw
    pos: { x: null, y: null },  //position
    _kill: null,            	//state
    vel: { x: 0, y: -20 },	//velocity - set to 0 if font doesn't move
    alpha: 1,            	//alpha, 0 = translucent, 1 = opaque
        
    lifetime: 1.2,            	//how long notification should last, set to zero to disable fade
    fadetime: 0.4,            	//how long until note fades
        
    init: function( font, text, x, y, settings ) {
        this.font =  font;
        this.text = text;
        this._kill = false;
                
        this.pos.x = x - ig.game.screen.x;
        this.pos.y = y - ig.game.screen.y;

        ig.merge( this, settings );
        
        this.idleTimer = new ig.Timer();
    },
    
    
    update: function() {
            
        //update position
        this.pos.x += (this.vel.x * ig.system.tick);
        this.pos.y += (this.vel.y * ig.system.tick);
        
        //if lifetime = 0, skip fade and kill
        if( !this.lifetime ) {
            return;
        }
        
        //if greater than lifetime, kill note
        if( this.idleTimer.delta() > this.lifetime ) {
            this._kill = true;
            return;
        }
                
        //do fade - slowly dissipate
        this.alpha = this.idleTimer.delta().map(
            this.lifetime - this.fadetime, this.lifetime, 1, 0 );
        
    },
    
    draw: function() {
        
        //set system alpha for fade effect
        if( this.alpha != 1) {
            ig.system.context.globalAlpha = this.alpha;
        }
        
        //draw font
        this.font.draw( this.text,
                       ig.system.getDrawPos(this.pos.x), ig.system.getDrawPos(this.pos.y),
                       ig.Font.ALIGN.LEFT );
        
        //reset system alpha so fade effect doesn't get applied
        //to other objects being drawn
        if( this.alpha != 1) {
            ig.system.context.globalAlpha = 1;
        }
        
    }
    
});

WordBalloon = Notification.extend({
        
    entity: null,            	//entity that owns 
    font: null,            	//font
    text: '',            	//string to draw
    pos: { x: null, y: null },  //position
    _kill: null,            	//state
    vel: { x: 0, y: -20 },	//velocity - set to 0 if font doesn't move
    alpha: 1,            	//alpha, 0 = translucent, 1 = opaque
        
    lifetime: 1.2,            	//how long notification should last, set to zero to disable fade
    fadetime: 0.4,            	//how long until note fades
        
    init: function( entity, font, text, x, y, settings ) {
        this.parent( font, text, x, y, settings );
        this.entity = entity;
        

    },
    
    update: function() {
             
        this.pos.x = (this.entity.pos.x - ig.game.screen.x);
        this.pos.y = (this.entity.pos.y - ig.game.screen.y) - 20;
        
        this.parent();
    }
    
});


});

Sweet, got it working on my end ( Thank you so much for your help and work on this!) - same results (no upward 'slide'). One thing, which is likely also related to the upwards slide is that I can't manually offset the appearance of the note so it always shows at the base level of my sprite even if i try to adjust the this.pos.y to something like this.pos.y-15

This adjustment does work as expected with the normal spawnNote extension of the plugin.

@80bit

I can't manually offset the appearance of the note so it always shows at the base level of my sprite even if i try to adjust the this.pos.y to something like this.pos.y-15

Really? For me the -20 at the end of this line

this.pos.y = (this.entity.pos.y - ig.game.screen.y) - 20;

works to make it appear above the head of the entity. If you change that to -40 it should be even higher.

Jesus.. Hats off to you my friend. I must be high. Thanks again! ;) For those noobs like me, he's talking the "update" aspect of the WordBalloon Extension in notification-manager.js:

WordBalloon = Notification.extend({
        
    entity: null,                //entity that owns 
    font: null,                //font
    text: '',                //string to draw
    pos: { x: null, y: null },  //position
    _kill: null,                //state
    vel: { x: 0, y: -20 },    //velocity - set to 0 if font doesn't move
    alpha: 1,                //alpha, 0 = translucent, 1 = opaque
        
    lifetime: 1.2,                //how long notification should last, set to zero to disable fade
    fadetime: 0.4,                //how long until note fades
        
    init: function( entity, font, text, x, y, settings ) {
        this.parent( font, text, x, y, settings );
        this.entity = entity;
        

    },
    
    update: function() {
             
        this.pos.x = (this.entity.pos.x - ig.game.screen.x);
        this.pos.y = (this.entity.pos.y - ig.game.screen.y)-20;
        
        this.parent();
    }
    
});

Wow. Great work! Just saw this. I linked to this thread in the OP of the NotificationManager thread. You guys rock.

thank YOU quidmonkey. Let us know if you can think of a solution in terms of getting the 'slow rise' back when doing the Word Balloons this way.

Try this. Create a .Yrise property and in the update function, update the y pos:

this.pos.y = (this.entity.pos.y - ig.game.screen.y) - this.Yrise * ig.system.tick;
this.Yrise--;

You'll have to tweak .Yrise to get it right.

I made yRise = 25 (the amount you want it to start to appear over the head) in my WordBalloon init function and then in update

        this.pos.x = (this.entity.pos.x - ig.game.screen.x);
        this.pos.y = (this.entity.pos.y - ig.game.screen.y) - this.yRise;
        this.yRise++;
        this.parent();

That works perfectly