Forums » Code » NotificationManager Plugin

Thx once more for quidmonkey for this plugin and for StahlmanDesign for your enhancement.

I added the possibility to define the font alignment:

Notification = ig.Class.extend({
 [...]
    alignment: ig.Font.ALIGN.LEFT,

and

// in Notification class
    draw: function() {
        
        [...]
        
        //draw font
        ig.game.font.draw( this.text, this.pos.x, this.pos.y, this.alignment );
        

Now the alignment can be set as part of the settings parameter, i.e.

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, alignment: ig.Font.ALIGN.CENTER });

Hope someone finds this useful.

Dominique

Hey All

I dropped this plugin into the jumpnrun demo and i can get it working, but not at the players location.

The issue seems to be in here:

 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();
    },

If i change this.pos.x and this.pos.y i can see the text.

What settings do i need to spawn it from the player?

Actually i got it working like this:

 this.pos.x = 40;
  this.pos.y = 30;

not sure thats right though!

Changing those variables then makes the x,y settings in the spawn code totally useless :-)

ig.game.myNoteManager.spawnNote(new ig.Font('media/04b03.font.png'),
			'TEST',
			{vel: { x: 0, y:-30 },  alpha: 0.5, lifetime: 2.2, fadetime: 0.3 });
			
			}

I have add this plugin,but not working....
kindly review my steps, is there any mistake ?

1:
.requires(
'impact.game',
'impact.font',
"game.entities.asteroid",
"game.entities.player",
"game.entities.bullet",
'impact.debug.debug',
'plugins.impact-splash-loader',
'plugins.notification-manager'
)

MyGame = ig.Game.extend({

....
myNoteManager: new ig.NotificationManager(),
)}

2:
update: function() {
//notification note
this.myNoteManager.update();
...}
3:
draw: function() {
// Draw all entities and backgroundMaps
this.parent();
//add draw note notification
this.myNoteManager.draw(0,0);
.......
}
4: in other entity check function:
check:function(other){
ig.game.myNoteManager.spawnNote(new ig.Font('media/font.png'),'my entity message ',this.pos.x, this.pos.y,{vel: { x: 0, y: 0 }, alpha: 0.5, lifetime: 2.2, fadetime: 0.3});
....
}

when the enemy killed by player,I want to to show some test message with NoteManager,but nothing happened..and also there is no any error in browser console.

can any one share one example or screenshot about the NoteManager.?

So I can have overview of this nice plugin.thanks very much.!!!!

v1.1 has been released! Details are in the OP.

tangxuanli, give the new plugin a try.

Hello guys
I've tried the plugin and thanks for the work, but, it seems i can't get it to work...

I don't have any problem with the main, it's only when i try to actually spawn the note on the player that it bugs and the console says :
" ig.game.font is not defined in notification-manager."

You know what this is ?


Here'e my my player code :

init: function( x, y, settings ) {
        this.invincibleTimer = new ig.Timer();
        this.makeInvincible();
        
        
        this.startPosition = { x:x, y:y };
        this.parent( x, y, settings );
        ig.game.MyNoteManager.spawnNote(new ig.Font('media/04b03.font.png'),
            'TEST',
            {vel: { x: 0, y:-30 },  alpha: 0.5, lifetime: 2.2, fadetime: 0.3 });
        
        this.setupAnimation( this.weapon );
        
        
       }, 

Where are you referencing ig.game.font? I don't see it in the code snippet you posted.

Hi !

Where should i be referencing it ? I have some in the main, but none in the player, should i put one there ?

here's my main code :


and here's my player code :

ig.module (
    'game.entities.player'
)

.requires (
    
    'impact.entity',
    'impact.font',
    'impact.sound'
)

.defines (function(){
    
    EntityPlayer = ig.Entity.extend({
       
       //AnimSheet
       //animSheet: new ig.AnimationSheet ( 'media/player.png', 16, 16 ),
       animSheet: new ig.AnimationSheet ( 'media/welfring.png', 30, 30 ),
       
       //Sounds
       jumpSFX: new ig.Sound( 'media/sounds/jump.*'),
       shootSFX: new ig.Sound ( 'media/sounds/shoot.*'),
       deathSFX: new ig.Sound( 'media/sounds/death.*' ),
       
       
       //Weapons
       weapon: 0,
       totalWeapons: 2,
       activeWeapon: "EntityBullet",
       
       //RespawnShit
       invincible: true,
       invincibleDelay: 2,
       invincibleTimer: null,
       
       
       //Settings of image
       size: {x: 30, y:30},
       offset: {x: 4, y: 0},
       flip: false,
       
       //Movement
       maxVel:{x:110,y:500},
       friction: {x: 300, y: 10},
       accelGround: 400,
       accelAir:150,
       jump:0,
       jumpTime: 7,
       isJumping: false,
       
       //Collision
       type: ig.Entity.TYPE.A,
       checkAgainst: ig.Entity.TYPE.NONE,
       collides: ig.Entity.COLLIDES.PASSIVE,
       
       startPosition: null,
      
      Action: false,
      
       health: 20,
       
       init: function( x, y, settings ) {
        this.invincibleTimer = new ig.Timer();
        this.makeInvincible();
        
        
        this.startPosition = { x:x, y:y };
        this.parent( x, y, settings );
        
        
        this.setupAnimation( this.weapon );
        
        
       }, 
       
       setupAnimation: function ( offset ){
        
        offset = offset * 10;
        this.addAnim( 'idle', 1, [ 0 + offset]);
        //this.addAnim( 'run',.07, [ 0 + offset, 1 + offset, 2 + offset, 3 + offset, 4 + offset, 5 + offset]);
        this.addAnim( 'run',.2, [ 1 + offset, 2 + offset, 3 + offset, 2 + offset]);
        this.addAnim( 'running',.1, [ 1 + offset, 2 + offset, 3 + offset, 2 + offset]);
        //this.addAnim( 'running',.05, [ 0 + offset, 1 + offset, 2 + offset, 3 + offset, 4 + offset, 5 + offset]);
        //this.addAnim( 'jump', 1, [ 9 + offset ]);
        this.addAnim( 'jump', 1, [ 1 + offset ]);
        //this.addAnim( 'fall', 0.4, [ 6 + offset, 7 + offset]);
        this.addAnim( 'fall', 0.4, [ 1 + offset ]);
        
       },
       
       
       
       update: function(){
        
        //move left or right
        var accel = this.standing ? this.accelGround : this.accelAir;
        
        if( this.invincibleTimer.delta() > this.invincibleDelay ) {
            
            this.invincible = false;
            this.currentAnim.alpha = 1;
            
        }
        
        if( ig.input.state('action')) {
            
            ig.game.Action = true;
            
        } else {
            
            ig.game.Action = false;
            
        }
        
        
        if( ig.input.state('left') && this.vel.x > -70 ) {
            
            this.accel.x = -accel;
            this.flip = true;
            
        }else if( ig.input.state('right') && this.vel.x < 70 ) {
            
            this.accel.x = accel;
            this.flip = false;
            
        } else if ( ig.input.state('right') && ig.input.state('run')) {
            
            this.accel.x = accel;
            this.flip = false;
            
        } else if ( ig.input.state('left') && ig.input.state('run')) {
            
            this.accel.x = -accel;
            this.flip = true;
            
        }else{
            
            this.accel.x = 0;
            
        }
        
        //jump
        if( this.standing && ig.input.pressed('jump') && !this.isJumping ) {
            this.jumpTime = 8;
            this.jump = 10;
            this.vel.y = -this.jump;
            this.isJumping = true;
            /*ig.game.MyNoteManager.spawnNote(new ig.Font('media/04b03.font.png'),
			'my entity message ',this.pos.x, this.pos.y,
			{vel: { x: 0, y: 0 },  alpha: 0.5, lifetime: 2.2, fadetime: 0.3,});*/
         // this.jumpSFX.volume = 0.1;
        //  this.jumpSFX.play();
            
            


            
        } else if ( ig.input.state('jump') && this.jumpTime > 0 && !this.standing && this.isJumping ) {
            this.jumpTime--;
            this.jump += 22;
            this.vel.y = -this.jump;
        } else if ( this.standing ) {
            
            this.jumpTime = 7;
            this.jump = 50;
            this.isJumping = false;
            
        } else {
            
            this.jumpTime = 0;
            
        }
        
        if ( ig.input.pressed( 'shoot' ) ) {
            
            ig.game.spawnEntity ( this.activeWeapon, this.pos.x, this.pos.y, { flip:this.flip } );
            this.shootSFX.volume = 0.1;
            this.shootSFX.play();
        }
        
        if( ig.input.pressed( 'switch' ) ) {
            
            this.weapon++;
            
            if( this.weapon >= this.totalWeapons )
                
                this.weapon = 0;
                
                switch( this.weapon ){
                    
                    case(0): this.activeWeapon = "EntityBullet";
                    break;
                    case(1): this.activeWeapon = "EntityGrenade";
                    break;
                }
                
            this.setupAnimation( this.weapon );
            
        }
        
        if( this.vel.y < 0) {
            
            this.currentAnim = this.anims.jump;
            
        }else if( this.vel.y > 50 ) {
            
            this.currentAnim = this.anims.fall;
            
        }else if( this.vel.x != 0 && !ig.input.state('run') ) {
            
            this.currentAnim = this.anims.run;
            
        }else if( ig.input.state('run') && this.vel.x != 0 ) {
            
            this.currentAnim = this.anims.running;
            
            
        }else{
            
            this.currentAnim = this.anims.idle;
            
        }
        
        this.currentAnim.flip.x = this.flip;
        
        //move !
        this.parent();
        
        
       },
       
       
       kill: function(){
            this.deathSFX.volume = 0.5;
            this.deathSFX.play();
            this.parent();
            ig.game.respawnPosition = this.startPosition;
            ig.game.spawnEntity(EntityDeathExplosion, this.pos.x, this.pos.y, {callBack:this.onDeath} );
        },
       
         onDeath: function(){
            ig.game.stats.deaths ++;
            ig.game.lives --;
            if(ig.game.lives < 0){
                ig.game.gameOver();
            }else{
                ig.game.spawnEntity( EntityPlayer, ig.game.respawnPosition.x, ig.game.respawnPosition.y);
            }
        },
       
       
       makeInvincible: function(){
        
        this.invincible = true;
        this.invincibleTimer.reset();
        
       },
       
       receiveDamage: function(amount, from) {
        
        if ( this.invincible)
            return;
        this.parent( amount, from);
        
       },
       
     
       
       draw: function() {
        
        if(this.invincible)
            this.currentAnim.alpha = this.invincibleTimer.delta()/this.invincibleDelay * 1;
        this.parent();
        
       }
       
       
    });
    
    EntityBullet = ig.Entity.extend({
        
        size: {x: 5, y: 3},
        animSheet: new ig.AnimationSheet( 'media/bullet.png', 5, 3),
        maxVel: {x: 200, y: 0},
        
        type: ig.Entity.TYPE.NONE,
        checkAgainst: ig.Entity.TYPE.B,
        collides: ig.Entity.COLLIDES.PASSIVE,
        
        init: function ( x, y, settings ) {
          
          this.parent( x + (settings.flip ? -4 : 8), y + 8, settings);
          this.vel.x = this.accel.x = ( settings.flip ? -this.maxVel.x : this.maxVel.x );
          this.addAnim( 'idle', 0.2, [0] );
            
        },
        
        handleMovementTrace: function( res ) {
          
          this.parent( res );
          
          if( res.collision.x || res.collision.y ) {
            
            this.kill();
            
          }
          
        },
        
        check: function( other ) {
            
            other.receiveDamage( 3, this );
            this.kill();
            
          }         
        
        
        });
    
    EntityGrenade = ig.Entity.extend({
        
        size: {x: 4, y: 4},
        offset: {x: 2, y: 2},
        animSheet: new ig.AnimationSheet( 'media/grenade.png', 8, 8 ),
        
        type: ig.Entity.TYPE.NONE,
        checkAgainst: ig.Entity.TYPE.BOTH,
        collides: ig.Entity.COLLIDES.PASSIVE,
        
        maxVel: {x: 200, y: 200},
        bounciness: 0.6,
        bounceCounter: 0,
        
        init: function( x, y, settings ){
            
            this.parent( x + ( settings.flip ? -4 : 7), y, settings);
            this.vel.x = ( settings.flip ? -this.maxVel.x : this.maxVel.x );
            this.vel.y = -(50 +(Math.random()*100));
            this.addAnim( 'idle', 0.2, [0,1] );
            
        },
        
         
        
        
        handleMovementTrace: function( res ){
            
          this.parent( res );
          
          if ( res.collision.x || res.collision.y ) {
          //only bounce three times  
            this.bounceCounter++;
            if( this.bounceCounter > 3 ) {
                
                this.kill();
                
            }
            
          }
          
        },
        
        check: function( other ){
            
            other.receiveDamage( 10, this );
            this.kill();
            
        },
        
        kill: function() {
            
            for( var i = 0; i < 20; i++ )
                ig.game.spawnEntity(EntityGrenadeParticle, this.pos.x, this.pos.y);
            this.parent();
            
        }
        
        
     });
    
    
    EntityDeathExplosion = ig.Entity.extend({
        
        lifetime: 1,
        callBack: null,
        particles: 50,
        
        init: function( x, y, settings ) {
            
            this.parent( x, y, settings );
            
            for ( var i = 0; i < this.particles; i++)
                ig.game.spawnEntity( EntityDeathExplosionParticle, x, y, { colorOffset: settings.colorOffset ? settings.colorOffset : 0 });
                this.idleTimer = new ig.Timer();
            
        },
        
        update: function() {
            
            if ( this.idleTimer.delta() > this.lifetime ) {
                
                this.kill();
                if( this.callBack )
                    this.callBack();
                return;
                
            }
            
        }
        
        
    });
    
    
    EntityDeathExplosionParticle = ig.Entity.extend({
        
        size: {x: 2, y:2},
        maxVel: {x: 260, y: 250},
        lifetime: 2,
        fadetime: 1,
        bounciness: 0.3,
        gravityFactor: 0.2,
        vel: { x: 200, y:100},
        friction: { x:10, y:10},
        collides: ig.Entity.COLLIDES.LITE,
        colorOffset: 0,
        totalColors: 7,
        animSheet: new ig.AnimationSheet( 'media/blood.png', 2, 2 ),
        
        init: function( x, y, settings ) {
            
            this.parent( x, y, settings );
            
            var frameID = Math.round( Math.random()*this.totalColors ) + ( this.colorOffset * ( this.totalColors + 1 ));
            
            this.addAnim( 'idle', 0.2, [frameID] );
            this.vel.x = (Math.random() * 2 - 1) * this.vel.x;
            this.vel.y = (Math.random() * 2 - 1) * this.vel.y;
            this.idleTimer = new ig.Timer();
            
        },
        
        update: function() {
            
            if( this.idleTimer.delta() > this.lifetime ) {
                
                this.kill();
                return;
                
            }
            
            this.currentAnim.alpha = this.idleTimer.delta().map( this.lifetime - this.fadetime, this.lifetime, 1, 0 );
            this.parent();
        }
        
     });
    
    EntityGrenadeParticle = ig.Entity.extend({
        
         size: {x: 1, y:1},
        maxVel: {x: 160, y: 200},
        lifetime: 1,
        fadetime: 1,
        bounciness: 0.3,
        vel: { x: 40, y:50},
        friction: { x:20, y:20},
        checkAgainst: ig.Entity.TYPE.B,
        collides: ig.Entity.COLLIDES.LITE,
        animSheet: new ig.AnimationSheet('media/explosion.png', 1, 1 ),
        
        init: function ( x, y, settings) {
            
            this.parent( x, y, settings );
            this.vel.x = (Math.random() * 4 - 1) * this.vel.x;
            this.vel.y = (Math.random() * 10-1) * this.vel.y;
            this.idleTimer = new ig.Timer();
            var frameID = Math.round(Math.random() * 7);
            this.addAnim('idle', 0.2, [frameID] );
            
        },
        
        update: function() {
            
            if( this.idleTimer.delta() > this.lifetime ) {
                
                this.kill();
                return;
                
            }
            this.currentAnim.alpha = this.idleTimer.delta().map( this.lifetime - this.fadetime, this.lifetime, 1, 0);
            this.parent();
            
        }
        
    });
     
    
});

What's wrong ?

Thank you very much !

Are you using v1.0 or v1.1? new ig.NotificationManager() suggests you're using v1.1, but spawnNote() is a method from v1.0. I deprecated spawnNote() - maybe I should document that better.

Yeah, i changed the version, i'm now using V1.1 and i changed the spawnNote to spawn.
Now it said this.font.draw is not a function in notification-manager.

I really don't get it... where does it get the font ?! from the spawn function ?
cause it seems that the problem is in the font.draw or the font i choose ( which is the basic impact font so 04B03.font.png ).

player code :

if( this.standing && ig.input.pressed('jump') && !this.isJumping ) {
            this.jumpTime = 8;
            this.jump = 10;
            this.vel.y = -this.jump;
            this.isJumping = true;
            ig.game.myNoteMgr.spawn('media/04b03.font.png',
			'string',this.pos.x, this.pos.y,
			{vel: { x: 0, y: 0 },  alpha: 0.5, lifetime: 2.2, fadetime: 0.3});

I exactly followed the instructions from you github, i juste can't get the Note to come. When i test, my player go crazy and the screen switch to grey ( and the previous error message )

The first argument of spawn() should be a font object.

ig.game.myNoteMgr.spawn(new ig.Font('media/04b03.font.png'), 'string',this.pos.x, this.pos.y, {vel: { x: 0, y: 0 }, alpha: 0.5, lifetime: 2.2, fadetime: 0.3});

My apologies, this was incorrectly documented. I'll update the plugin soon.

v1.1.1 on the plugin has been released! I fixed the font issue, so that the first parameter of ig.Notification will accept either an instance of ig.Font or create an instance if a font image path is given. I also added the ability for an ig.Notification to follow an entity - very helpful for word balloons! You'll find more details in the OP. Thanks.

Thanks for the fixe !

I have one more problem though, i can't get the message to dissapear with the lifetime and fadetime properties. The message just draw itself and stay where it is...
also th message doesn't follow my player entity.

I'm using the v 1.1 with the new follow().

here's my code :

first the variables

var player = ig.game.getEntitiesByType( EntityPlayer )[0];
		   
		   var fontmgr = 'message de test';

		   var note = new ig.Notification (new ig.Font ('media/04b03.font.png'), fontmgr, player.pos.x - 70, player.pos.y - 70
		   , { lifetime: 1, fadetime: 0.3} );

And then the spawn:

//jump
        if( this.standing && ig.input.pressed('jump') && !this.isJumping ) {
            this.jumpTime = 8;
            this.jump = 10;
            this.vel.y = -this.jump;
            this.isJumping = true;
            ig.game.myNoteMgr.add( note );
            note.follow( player );

I don't have any errors in the console too.

Thank you very much again !

I updated the plugin to v1.1.2 and tested thoroughly this time around. When I rewrote the draw() method, I&039;d forgotten that I was calling the ig.Font.draw() which has its own #.alpha property. I'm now changing this vs. the context's alpha.