Forums » Code » NotificationManager Plugin

Sorry ignore the alpha I was just tweaking something. Alpha should be 1.0 actually.

It looks right.

Thanks Ill dig through and see if I can figure it out... ill report back here when done. Would it be possible to see the lines you included in your game.js to make sure mine are matching too?

Here's my notification manager:

/*
 * Impact Plugin
 * NotificationManager
 * Written by Abraham Walters
 * June 2011
 * Jxyzzy Dev Company
 * jxyzzy.com
 *
 * This plugin allows you to pop-up an Impact Font (called 
 * Notifications), move it 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 ig.NotificationManager(),
 *
 * You will then need to add myNoteManager.update() to ig.game.update()
 * and myNoteManager.draw() to ig.game.draw(). From there you can spawn a
 * Notification within any Entity using the following syntax:
 *
 * ig.game.myNoteManager.spawnNote( new Font('media/font.png'), 'string', x, y, settings);
 *
 * Finally, you will need to add the plugin to ig.game.requires, like so:
 *
 * 'plugins.notification-manager',
 *
 * 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 );
        
    },
    
    update: function() {
        
        for( 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: -30 },     //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 =  new ig.Font(font);
        this.text = text;
        this._kill = false;
                
        this.pos.x = x;
        this.pos.y = 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
        ig.game.font.draw( this.text, this.pos.x, 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;
        }
        
    }
    
});

});

and here's how main.js is set up:

ig.game.myNoteManager.spawnNote(new ig.Font('media/font-black.png'), 'my entity message ',this.pos.x, this.pos.y, {vel: { x: 0, y: 0 }, alpha: 0.5, lifetime: 2.2, fadetime: 0.3 });

You are a champion for putting that up for me. THanks for the time you spent putting that together - I truly appreciate it!

The bad news is even matching it up exactly to yours its still not working. :( Im going to try hooking it up to the default jumpnrun to see if maybe there's something in my code causing it to glitch out. One thing i noticed is you're not using commas after you declare the update and draw instances in your main.js.. it makes no diff either way, as it doesnt work with or without for me, but I just wanted to be sure..

Thanks again matey.

Ive been at this for hours and I cant figure out why its not working.. Does the Impact version matter? Im using 1.17.. when the message is supposed to appear, instead Im getting this in the (chrome) dev console:

GET http://localhost/DL/[object%20Object] 404 (Not Found)

Yet i cant figure out what part of the line its talking about. Im only assuming the line in question is the line im calling the function from my entity, but when i look at the line number on the error code, it says this is the line number: [object%20Object]

Im completely bent on why this isnt working... :(

If you post your project for download, I can take a look at it.

Is it possible to get your email address? If you dont want to post it here, you can email it to me at nate@80bit.com - thx!

Big shout out to both stahlmanDesign and 80bit for finding a bug in my plugin: I was taking neither screen.x & y into account, nor accounting for scaling. I updated my OP to reflect changes to the Notification.init() and this.font.draw(). I also updated my gist over @ github.

Thank you both!

Many thanks for your great plugin and what an awesome community that we can be in touch directly to get things done like this!!!

In the spirit of the community I have a couple tricks that I've been working on that may help other people when using this plugin..

MULTI-LINE NOTES

Basically, Im using a javascript timeout to delay multiple notes that spawn out of the players original position.

setTimeout(function(){ig.game.myNoteManager.spawnNote(new ig.Font( 'media/fonts/emo.png' ), 'D',this.pos.x, this.pos.y-15, {vel: { x: 0, y: -10 },  alpha: 0.8, lifetime: 1.0, fadetime: 2.0 })}.bind(this), 1);
setTimeout(function(){ig.game.myNoteManager.spawnNote(new ig.Font( 'media/fonts/emo.png' ), 'D',this.pos.x, this.pos.y-15, {vel: { x: 0, y: -10 },  alpha: 0.8, lifetime: 1.0, fadetime: 2.0 })}.bind(this), 1000);
setTimeout(function(){ig.game.myNoteManager.spawnNote(new ig.Font( 'media/fonts/emo.png' ), 'CD',this.pos.x, this.pos.y-15, {vel: { x: 0, y: -10 },  alpha: 0.8, lifetime: 1.0, fadetime: 2.0 })}.bind(this), 2000);
setTimeout(function(){ig.game.myNoteManager.spawnNote(new ig.Font( 'media/fonts/emo.png' ), 'CD',this.pos.x, this.pos.y-15, {vel: { x: 0, y: -10 },  alpha: 0.8, lifetime: 1.0, fadetime: 2.0 })}.bind(this), 3000);

And it makes it seem like the note is coming out of the players head. As long as i stand in one place..

'SPRITE' FONTS

Another trick is actually just simply treating a FONT file as if it were a sprite sheet. If you look at the font files you'll notice they have the little line underneath each character. I counted the lines and I think there are 95 individual lines, meaning 95 individual character spots, for each possible typed key in your notification. Using this premise, you can essentially create a LONG sprite sheet, 95 sprites long, and just ensure you have that bottom row of pixels breaking up each sprite, leaving 1 pixel in between... Then when you call your font for a note, you can basically call icons, graphics, emoticons, or whatever into the actual note or text draw just by using it's corresponding letter/number on the keyboard.

For example, I have a font called "emo.png" which is a bunch of icons. If I want my dude to be 'happy' when he picks up an item, my note would be "4" which corresponds with a smiley emoticon I drew into the font file. This would then just display the smile instead of any text, just as if it were a sprite.

This is more for 'notification' type stuff, obviously so nothing you can actually interact with, but it adds a whole new level of versatility to using the Notification Plugin in your games.

Really nice plugin, after some struggling I got it to work too.

Another thing to watch out for (if you are a noob like me) , make sure the
this.parent(); in the main.js draw function is THE FIRST LINE of the function.

I had it at the bottom, it didn't cause an error but the text just wouldn't show up :s.

greets,

Sleenee

@ sleenee -- I had that problem too with this.parent() being after the note draw function, which redraws the screen and erases the note.

Another great catch! I added the caveat to my documentation so that future users will know where to place it.

i tried it out, impressive work. The high point was seeing the message float upwards. Definitely a great mechanic.

what I did for Private Joe was different - I used an object as a notification tower. Once the player touches it, the message gets printed. Link http://bit.ly/rhoHkH

I'm still trying to figure out how to make those neat notification boxes that all zynga games employ... anyone have clues?

Screenshot?

(double post, sorry.. itchy trigger finger)