Impact and Node.js Video #3

Impact, Node, Web Sockets, Javascript, HTML5, Mysql, tons of things in this tutorial
Post Reply
User avatar
OoZI
Posts: 109
Joined: Mon Jan 02, 2012 4:22 pm

Re: video 3

Post by OoZI »

Halls, Where do you get your Graphics? You mentioned in your video that you do not make them.
-OoZI

My Blog
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: video 3

Post by hallsofvallhalla »

User avatar
OoZI
Posts: 109
Joined: Mon Jan 02, 2012 4:22 pm

Re: video 3

Post by OoZI »

Thanks!
-OoZI

My Blog
User avatar
hallsofvallhalla
Site Admin
Posts: 12031
Joined: Wed Apr 22, 2009 11:29 pm

Re: video 3

Post by hallsofvallhalla »

1200 views over the weekend!!!!
User avatar
MikeD
Posts: 294
Joined: Thu Sep 08, 2011 4:28 am

Re: video 3

Post by MikeD »

hallsofvallhalla wrote:1200 views over the weekend!!!!
Congrats!

Having a little trouble here...Finally had a little time to actually do the tuts.

The player is moving around, but if you hit right/left then up/down he will move diagonally and the animation isn't working, coming up with no errors so I'm not exactly sure what's wrong with it...

player.png is 4x4 with a size of 32 width and 48 height

Here's player.js

Code: Select all

ig.module(
    'game.entities.player'
)
    .requires(
    'impact.entity'
)
    .defines(function(){
         EntityPlayer = ig.Entity.extend({
            animSheet: new ig.AnimationSheet( 'media/player.png', 32, 48 ),
            size: {x: 32, y: 48},
            type: ig.Entity.TYPE.A,
            checkAgainst: ig.Entity.TYPE.NONE,
            collides: ig.Entity.COLLIDES.PASSIVE,

            speed:100,

            init: function( x, y, settings ) {
                this.parent( x, y, settings );

                this.addAnim( 'up', .21, [12,13,14,15] );
                this.addAnim( 'down', .21, [0,1,2,3] );
                this.addAnim( 'left', .21, [4,5,6,7] );
                this.addAnim( 'right', .21, [8,9,10,11] );

                this.addAnim( 'idleup', .1, [14] );
                this.addAnim( 'idledown', .1, [2] );
                this.addAnim( 'idleleft', .1, [6] );
                this.addAnim( 'idleright', .1, [10] );

                this.currentAnim = this.anims.idledown;
            },

            update: function() {
                //Move Left Or Right

                if ( ig.input.state('left') && ismove != 2 && ismove != 3 && ismove != 4 ) {
                    this.vel.x = -this.speed;
                    var ismove = 1;
                    this.direction = 1;
                    this.currentAnim = this.anims.left;
                }else if ( ig.input.state('right') && ismove != 1 && ismove != 3 && ismove != 4 ) {
                    this.vel.x = +this.speed;
                    var ismove = 2;
                    this.direction = 2;
                    this.currentAnim = this.anims.right;
                }else if ( ig.input.state('up') && ismove != 1 && ismove != 2 && ismove != 4 ){
                    this.vel.y = -this.speed;
                    var ismove = 3;
                    this.direction = 3;
                    this.currentAnim = this.anims.up;
                }else if ( ig.input.state('down') && ismove != 1 && ismove != 2 && ismove != 3 ){
                    this.vel.y = +this.speed;
                    var ismove = 4;
                    this.direction = 4;
                    this.currentAnim = this.anims.down;
                }else{
                    this.vel.x = 0;
                    this.vel.y = 0;
                    var ismove = 0;
                }

                /////

                if ( this.direction == 1 ){
                    this.currentAnim = this.anims.idleleft;
                }else if ( this.direction == 2 ){
                    this.currentAnim = this.anims.idleright;
                }else if ( this.direction == 3 ){
                    this.currentAnim = this.anims.idleup;
                }else{
                    this.currentAnim = this.anims.idledown;
                }

                this.parent();
            }
        });
    });

User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: video 3

Post by Jackolantern »

Wow, very nice on the 1200 views!

I am telling you, Node and Socket.IO are hot but have almost no docs, books or tutorials. I would keep this going and I bet it will continue to get tons of views and bring people into the community! 8-)
The indelible lord of tl;dr
User avatar
MikeD
Posts: 294
Joined: Thu Sep 08, 2011 4:28 am

Re: video 3

Post by MikeD »

MikeD wrote:
hallsofvallhalla wrote:1200 views over the weekend!!!!
Congrats!

Having a little trouble here...Finally had a little time to actually do the tuts.

The player is moving around, but if you hit right/left then up/down he will move diagonally and the animation isn't working, coming up with no errors so I'm not exactly sure what's wrong with it...

player.png is 4x4 with a size of 32 width and 48 height

Here's player.js

Code: Select all

ig.module(
    'game.entities.player'
)
    .requires(
    'impact.entity'
)
    .defines(function(){
         EntityPlayer = ig.Entity.extend({
            animSheet: new ig.AnimationSheet( 'media/player.png', 32, 48 ),
            size: {x: 32, y: 48},
            type: ig.Entity.TYPE.A,
            checkAgainst: ig.Entity.TYPE.NONE,
            collides: ig.Entity.COLLIDES.PASSIVE,

            speed:100,

            init: function( x, y, settings ) {
                this.parent( x, y, settings );

                this.addAnim( 'up', .21, [12,13,14,15] );
                this.addAnim( 'down', .21, [0,1,2,3] );
                this.addAnim( 'left', .21, [4,5,6,7] );
                this.addAnim( 'right', .21, [8,9,10,11] );

                this.addAnim( 'idleup', .1, [14] );
                this.addAnim( 'idledown', .1, [2] );
                this.addAnim( 'idleleft', .1, [6] );
                this.addAnim( 'idleright', .1, [10] );

                this.currentAnim = this.anims.idledown;
            },

            update: function() {
                //Move Left Or Right

                if ( ig.input.state('left') && ismove != 2 && ismove != 3 && ismove != 4 ) {
                    this.vel.x = -this.speed;
                    var ismove = 1;
                    this.direction = 1;
                    this.currentAnim = this.anims.left;
                }else if ( ig.input.state('right') && ismove != 1 && ismove != 3 && ismove != 4 ) {
                    this.vel.x = +this.speed;
                    var ismove = 2;
                    this.direction = 2;
                    this.currentAnim = this.anims.right;
                }else if ( ig.input.state('up') && ismove != 1 && ismove != 2 && ismove != 4 ){
                    this.vel.y = -this.speed;
                    var ismove = 3;
                    this.direction = 3;
                    this.currentAnim = this.anims.up;
                }else if ( ig.input.state('down') && ismove != 1 && ismove != 2 && ismove != 3 ){
                    this.vel.y = +this.speed;
                    var ismove = 4;
                    this.direction = 4;
                    this.currentAnim = this.anims.down;
                }else{
                    this.vel.x = 0;
                    this.vel.y = 0;
                    var ismove = 0;
                }

                /////

                if ( this.direction == 1 ){
                    this.currentAnim = this.anims.idleleft;
                }else if ( this.direction == 2 ){
                    this.currentAnim = this.anims.idleright;
                }else if ( this.direction == 3 ){
                    this.currentAnim = this.anims.idleup;
                }else{
                    this.currentAnim = this.anims.idledown;
                }

                this.parent();
            }
        });
    });

Figured out the animation problem. Still having a problem with certain sprites moving diagonally though.
User avatar
Hamilton
Posts: 114
Joined: Tue Sep 11, 2012 7:11 am

Re: Impact and Node.js Video #3

Post by Hamilton »

The following code for player.js is a modification for allowing 8 directional movement with using only the four AWSD keys. For example, pressing W and D will go to the Top Right direction. The code is a bit changed up in the sense of relying on the state of the animation being used and not with the ismove value. However I kept the ismove value for the purpose of preventing a player from using the four opposite direction keys. For example, pressing W and then S, will keep moving the sprite Up and not Down.

Additionally the sprite used had 8 directions (rows) and 10 movement frames (10 columns).

Code: Select all

ig.module(
    'game.entities.player'
)
    .requires(
    'impact.entity'
)
    .defines(function(){
         EntityPlayer = ig.Entity.extend({
            size: {x: 32, y: 48},
            type: ig.Entity.TYPE.A,
            checkAgainst: ig.Entity.TYPE.NONE,
            collides: ig.Entity.COLLIDES.PASSIVE,

            speed:100,
            animSheet: new ig.AnimationSheet( 'media/player.png', 32, 48 ),

            init: function( x, y, settings ) {
                this.parent( x, y, settings );

                // Add the animations
                this.addAnim( 'up', .1, [40,41,42,43,44,45,46,47,48,49] );
                this.addAnim( 'down', .1, [0,1,2,3,4,5,6,7,8,9] );
                this.addAnim( 'left', .1, [60,61,62,63,64,65,66,67,68,69] );
                this.addAnim( 'right', .1, [20,21,22,23,24,25,26,27,28,29] );
                this.addAnim( 'upleft', .1, [50,51,52,53,54,55,56,57,58,59] );
                this.addAnim( 'upright', .1, [30,31,32,33,34,35,36,37,38,39] );
                this.addAnim( 'downleft', .1, [70,71,72,73,74,75,76,77,78,79] );
                this.addAnim( 'downright', .1, [10,11,12,13,14,15,16,17,18,19] );

                this.addAnim( 'idleup', .1, [40] );
                this.addAnim( 'idledown', .1, [0] );
                this.addAnim( 'idleleft', .1, [60] );
                this.addAnim( 'idleright', .1, [20] );
                this.addAnim( 'idleupleft', .1, [50] );
                this.addAnim( 'idleupright', .1, [30] );
                this.addAnim( 'idledownleft', .1, [70] );
                this.addAnim( 'idledownright', .1, [10] );

                this.currentAnim = this.anims.idleup;
            },

            update: function() {
               
               // Movement
               if( ig.input.state('left') && ismove != 3) {
                    if( ig.input.state('up')) {
                         this.currentAnim = this.anims.upleft;
                    } else if( ig.input.state('down')) {
                         this.currentAnim = this.anims.downleft;
                    } else {
                         this.currentAnim = this.anims.left;
                         ismove = 7;
                    }
               } else if( ig.input.state('right') && ismove != 7) {
                    if( ig.input.state('up')) {
                         this.currentAnim = this.anims.upright;
                    } else if( ig.input.state('down')) {
                         this.currentAnim = this.anims.downright;
                    } else {
                         this.currentAnim = this.anims.right;
                         ismove = 3;
                    }
               } else if( ig.input.state('down') && ismove != 1) {
                    if( ig.input.state('left')) {
                         this.currentAnim = this.anims.downleft;
                    } else if( ig.input.state('right')) {
                         this.currentAnim = this.anims.downright;
                    } else {
                         this.currentAnim = this.anims.down;
                         ismove = 5;
                    }
               } else if( ig.input.state('up') && ismove != 5) {
                    if( ig.input.state('left')) {
                         this.currentAnim = this.anims.upleft;
                    } else if( ig.input.state('right')) {
                         this.currentAnim = this.anims.upright;
                    } else {
                         this.currentAnim = this.anims.up;
                         ismove = 1;
                    }
               } else {
                    this.vel.x = 0;
                    this.vel.y = 0;
                    ismove = 0;
                    if( this.direction == 1 ) {
                         this.currentAnim = this.anims.idleup;
                    }
                    if( this.direction == 2 ) {
                         this.currentAnim = this.anims.idleupright;
                    }
                    if( this.direction == 3 ) {
                        this.currentAnim = this.anims.idleright;
                    }
                    if( this.direction == 4 ) {
                         this.currentAnim = this.anims.idledownright;
                    }
                    if( this.direction == 5 ) {
                         this.currentAnim = this.anims.idledown;
                    }
                    if( this.direction == 6 ) {
                         this.currentAnim = this.anims.idledownleft;
                    }
                    if( this.direction == 7 ) {
                         this.currentAnim = this.anims.idleleft;
                    }
                    if( this.direction == 8 ) {
                         this.currentAnim = this.anims.idleupleft;
                    }
               }
               
               if ( this.currentAnim == this.anims.up) {
                    this.vel.x = 0;
                    this.vel.y = -this.speed;
                    this.direction = 1;
               }
               if ( this.currentAnim == this.anims.upright) {
                    this.vel.x = +this.speed;
                    this.vel.y = -this.speed;
                    this.direction = 2;
               }
               if ( this.currentAnim == this.anims.right) {
                    this.vel.x = +this.speed;
                    this.vel.y = 0;
                    this.direction = 3;
               }
               if ( this.currentAnim == this.anims.downright) {
                    this.vel.x = +this.speed;
                    this.vel.y = +this.speed;
                    this.direction = 4;
               }
               if ( this.currentAnim == this.anims.down) {
                    this.vel.x = 0;
                    this.vel.y = +this.speed;
                    this.direction = 5;
               }
               if ( this.currentAnim == this.anims.downleft) {
                    this.vel.x = -this.speed;
                    this.vel.y = +this.speed;
                    this.direction = 6;
               }
               if ( this.currentAnim == this.anims.left) {
                    this.vel.x = -this.speed;
                    this.vel.y = 0;
                    this.direction = 7;
               }
               if ( this.currentAnim == this.anims.upleft) {
                    this.vel.x = -this.speed;
                    this.vel.y = -this.speed;
                    this.direction = 8;
               }
               
               ////////////////////////////////
               this.parent();
          }
     });
})
Sign off,
Hamilton
User avatar
Jackolantern
Posts: 10893
Joined: Wed Jul 01, 2009 11:00 pm

Re: Impact and Node.js Video #3

Post by Jackolantern »

Very cool! :)
The indelible lord of tl;dr
Post Reply

Return to “Impact and Node/Socket.io”