Impact

This forum is read only and just serves as an archive. If you have any questions, please post them on github.com/phoboslab/impact

1 decade ago by quidmonkey

v1.1.2 of the NotificationManager has been released!

v1.1.2 Changelog:
- Fixed alpha.

v1.1.1 Changelog:

- Fixed ig.Notification so that the passed-in font can either be an instance of ig.Font or a path to a font image. If the latter, ig.Notification will create an instance of ig.Font automatically.
- Added .follow() method that allows an ig.Notification object to follow an entity.
- Added .setVel() method that sets an ig.Notification vel and will stop it from following an entity if it is.

v1.1 Changelog:

Refactored ig.NotificationManager
- Added .add() - Adds any Notification vs. .spawn(), which instantiates and adds a new Notification
- Added .find() - Finds any Notification by its Text string
- Added .remove() - Removes any note
- Renamed .spawnNote() to .spawn

Refactored ig.Notification
- Added .align property
- Added two optional parameters to .draw(): align - specify an alignment from ig.Font.ALIGN, and text - specify a text string. These can be used if calling the .draw() directly for an ig.Notification vs. from the ig.NotificationManager
- Changed .fadetime from an ig.Timer object to a value
- Renamed class ig.Notification from Notification

v1.1.2 is available here.
v1.0 is available here.

Special thank to both stahlmanDesign and 80bit who helped me track down some bugs in v1.0 and who have extended the plugin to create WordBalloons - Notifications that will follow your Entity. You can find more on WordBalloons in this thread.

1 decade ago by Colin

quidmonkey, this is great! thanks for posting.

I had to make one change to get it to work for me. If you have this on github I can post my change there too.

Basically I had to change the

this.font.draw( this.text, this.pos.x, this.pos.y, ig.Font.ALIGN.LEFT ); 

in the last draw function to

ig.game.font.draw( this.text, this.pos.x, this.pos.y, ig.Font.ALIGN.LEFT );

I also updated the help text for myself to add a "this" in front of myNoteManager.update():

/*
 * You will then need to add this.myNoteManager.update() to ig.game.update()
 * and this.myNoteManager.draw() to ig.game.draw(). 
 */

There may be something I'm doing wrong that necessitated these changes but in case anyone else is having trouble that could be something to try.

Thanks again!

1 decade ago by ape

@quidmonkey - Thanks for making this! I'm using it to replace a much more complicated setup I had. I did find a bug though, and it's the bug that @colin ran into:

In the init function for Notification you need to actually create a new Font object with the passed in font argument:

init: function( font, text, x, y, settings ) {
    this.font =  new ig.Font(font);
   ...
}

@Colin - I suspect the reason your fix is working is because in your main game class you have something like:

MyGame = ig.Game.extend({
    font: new ig.Font('media/foo.png'),
   ...

If you didn't have that defined (like me), you'd run into issues trying to reference ig.game.font (like me).

1 decade ago by ape

Oh, one more issue (though this is with code example in the comments).

Instead of:

myNoteManager: new NotificationManager(),

You'll need to do this:

myNoteManager: new ig.NotificationManager(),

You could also remove the ig. from...

ig.NotificationManager = ig.Class.extend({

...and leave the docs as is.

1 decade ago by quidmonkey

Great, thx for the feedback! I corrected a couple of issues. Typically, it's better to pass in the new Font() object vs. having the NotificationManager initialize it for you. I changed my comments to reflect it as such.

I'll be adding this to Github in the near future.

Best.

1 decade ago by quidmonkey

I finally got around to posting this on github. Thx all.

1 decade ago by fugufish

does this notification support images? Would be awesome if I can insert an image to the text. Makes it a whole lot prettier.

1 decade ago by Ken

This is perfect. I have been wanting a feature like this for a while but I've been a bit busy recently and havent had the time. Thank you! Great stuff!

1 decade ago by quidmonkey

@fugufish

The easiest way to do this is with Entities. Simply add a timer to the Entity and have it lower the currentAnim.alpha. Once the timer hits zero, kill() the Entity.

Of you want to do this with my plugin, then remove the .font property and replace it with an entity. You'll also want to remove the draw() from the plugin and tweak the update().

1 decade ago by 80bit

Has anyone got this going in a demo project yet... Im not sure why but I cant seem to get this working properly. I think it might have something to do with the syntax Im using... I pulled a 'working' call line from another thread, but maybe the syntax is different / has changed?

this.notify.spawnNote(this.font, "tester " , x, y, {lifetime: 3, vel: {x: 0, y: 0} });

1 decade ago by stahlmanDesign

To get it to work in my entity I had to put this :
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 });

1 decade ago by 80bit

Sweet, thanks - I got that put in and Im not getting errors anymore, but im not actually seeing a notification come up anywhere. What should it look like? (screenshot?)

huge thanks!

1 decade ago by stahlmanDesign

Make sure you have the right font. I was using font-black.png -- a custom font you won't have. The message floats up from the entity when I click to make it move.

/>			</div>
		</div>
			<div class=

1 decade ago by 80bit

right yeah i put the same path to the font used for the rest of my game and its not working..... no error or anything, just.. 'nothing'. It's in the 'check' function...

	check: function( other ) {
		
		if ( other.pickup == true && other.gotcrate == false) {
			other.gotcrate = true;
			this.tik.play();
			ig.game.notify.spawnNote(new ig.Font('media/fonts/block.png'),'Got it!',this.pos.x, this.pos.y,{vel: { x: 0, y: 0 },  alpha: 0.0, lifetime: 2.2, fadetime: 0.3 });
			this.kill();
		}
	}

does that look right?

1 decade ago by 80bit

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

1 decade ago by stahlmanDesign

It looks right.

1 decade ago by 80bit

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?

1 decade ago by stahlmanDesign

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:

/><br />
<br />
In player.js or whatever entity, it's just that one line:<br />
<br />
<pre class= 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 });

1 decade ago by 80bit

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.

1 decade ago by 80bit

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... :(

1 decade ago by stahlmanDesign

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

1 decade ago by 80bit

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!

1 decade ago by quidmonkey

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!

1 decade ago by 80bit

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.

1 decade ago by sleenee

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

1 decade ago by stahlmanDesign

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

1 decade ago by quidmonkey

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

1 decade ago by fugufish

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?

1 decade ago by 80bit

Screenshot?

1 decade ago by 80bit

(double post, sorry.. itchy trigger finger)
Page 1 of 2
« first « previous next › last »