Pathfinding

[aanfuso]

Hi Collin, I'm trying to figure it how to set up both pathfinders.

I have tried many different ways according to the documentation, but I can not figure out which files need to be added as required, layers to be added. etc.

The player must follow a path, just that.

Great library btw.

[collinhover]

Pathfinding should be enabled by default. You'll want to call the player's moveTo method (inherited from the character class), passing in a position or another entity as the first argument. You can also include an options object as the second argument to customize the pathfinding, just check out the comments / docs on the character's moveTo method for a full listing of options.

[Pattentrick]

@aanfuso

I had some problems with pathfinding too with my first impact++ game. I did a small EGA point and click adventure where pathfinding is very important:

www.shuchu.de/schreibers-quest/

As collinhover stated above, just use the moveTo method like this for example:

javascript /**

• this.player is a reference to your character entity.
• the second parameter are pathfinding settings, described
• in the character.js moveTo-method.

•          */                
          this.player.moveTo({
              x: ig.input.mouse.x + ig.game.screen.x,
              y: ig.input.mouse.y + ig.game.screen.y
          }, {
              avoidEntities: false
          });               

Also you can make a pathfinding map in weltmeister. To do this you add a new layer named "pathfinding" to your level. Then select under "Tileset" the pathfinding tileset that came with impact++. The different colors represent how likely the character will use these tiles (red for instance means that he avoids those tiles ).

Because i also had some issues at the beginning to understand the concept, i posted some questions about pathfinding here, which collinhover cleared up for me. Maybe this could be handy for you as well.

https://github.com/collinhover/impactplusplus/issues/113 https://github.com/collinhover/impactplusplus/issues/102 https://github.com/collinhover/impactplusplus/issues/99

Don't hesitate to ask again, if something troubles you with pathfinding. The more knowledge transfer between impact++ users there is, the better. There is a impact++ thread at the impact js forum, but sometimes there aren't any new posts for weeks.

[aanfuso]

Thank you both, I didn't know that it was enabled by default, great!

I made my player entity inherit/required 'plusplus.abstractities.character' but now the game doesn't start and I'm getting this

Uncaught TypeError: Cannot read property 'collision' of undefined

Maybe I'm missing something.

Any thought?

[Pattentrick]

Could you post your player entity code? I am sure this is just a reference/extending problem ;-)

[collinhover]

Thanks for the input @Pattentrick :-)

@aanfuso what line number/function and file is the error coming from?

[aanfuso]

@Pattentrick Sure https://gist.github.com/aanfuso/b0d768373662f86fd435

@collinhover collision-map.js:25

[collinhover]

Your player is still extending the original ImpactJS entity in your gist. All your entities should either extend ig.EntityExtended, ig.Character, or ig.Creature. The reason you need to at least extend ig.EntityExtended is that Impact++ makes quite a few core changes to ImpactJS. One of those changes is using helper objects to cut down on garbage, which are missing in your case and throwing errors.

[aanfuso]

Oh, how should I extend my entity?

Should i remove the original ImpactJS entity?

[Pattentrick]

@aanfuso

In case you are wondering how to adopt that beatiful explanation from collinhover, i would do it like this:

javascript ig.module( 'game.entities.player' ) .requires( 'plusplus.abstractities.player', ) .defines(function () {

    var _c  = ig.CONFIG;

    /**
     * Entity that represents a playable character
     *
     * @class
     * @extends ig.Player
     * @memeberof ig
     */
    ig.EntityPlayer = ig.global.EntityPlayer = ig.Player.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

        , init: function ( x, y, settings ) {

            this.parent( x, y, settings )

            this.addAnim('idleRight', 0.10, [7])
            this.currentAnim = this.anims.idleRight

        }

        , update: function () {
            switch(true){
                case ig.input.state('test'):
                    var position = {
                        x: ig.input.mouse.x + ig.game.screen.x
                        , y: ig.input.mouse.y + ig.game.screen.y
                    }

                    this.moveTo( position );
                    break
                default:
                    this.currentAnim = this.anims.idleRight
                    break
            }
            this.parent()
        }
    });
})

Note: I am using here the player abstractites, which inherits from the character abstractatie.

[aanfuso]

Now I get

Uncaught TypeError: Cannot call method 'add' of undefined  on entity.js:1578

I'm not getting it but I do not want to bother you guys, don't worry

[collinhover]

Have you followed the getting started instructions at http://collinhover.github.io/impactplusplus/ig.html?

The error you're getting now is due to a missing signal object in the system, which should be there if you required 'plusplus.core.plusplus' in your main and are having your game extend ig.GameExtended.

[aanfuso]

Ohh, I should have deleted it during a sweep! Now it looks like we're getting closer.

on game.js:1110

Uncaught Error: You are trying to spawn an entity that does not inherit or extend ig.EntityExtended. Although it is not recommended (seriously), if you wish to allow this, see ig.CONFIG.FORCE_ENTITY_EXTENDED. 

[Pattentrick]

Do all of your entitys extend from ig.EntityExtended?

The player abstractity for instance inherits from the character abstractity, which inherits everything from ig.EntityExtended. Every entity that you spawn, should inherit in some way from ig.EntityExtended.

There is a example folder that came with impact++. Take a look at the jumpnrun demo and how it uses entities, if the link collinhover provided (http://collinhover.github.io/impactplusplus/ig.html) does not help you further.

[collinhover]

@Pattentrick is correct. ig.EntityExtended is a core class of Impact++, itself inheriting from ImpactJS's ig.Entity.

[aanfuso]

It was one of my other entities which threw the error. Now I'm getting:

On player-manager.js:457

Uncaught TypeError: Object #<Class> has no method 'moveToHere' 

But I'm have any call to that method on my player.

[collinhover]

moveToHere is an instance method of the ig.Character class. What class/entity is your player entity extending?

[collinhover]

This may help: https://github.com/collinhover/impactplusplus/blob/master/lib/plusplus/core/player-manager.js#L25-L31. You should also move your input handling code into a handleInput method, as it will automatically be called by the player manager.

[aanfuso]

I understood that my player entity must extend

   Ig.EntityExtended.extend EntityPlayer = ({

but does not seem to work.

I changed it the way @Pattentrick said

    Ig.Player.extend EntityPlayer = ig.global.EntityPlayer = ({

And now it's working, but entities has no image and canvas resizes to smaller sizes.

[Pattentrick]

That makes senese, i overlooked the fact that you dont't use the animation setup in your gist as it works in impact++.

Take this for an example:

https://github.com/collinhover/impactplusplus/blob/master/examples/jumpnrun/lib/game/entities/player.js#L42-L159

[collinhover]

Do you have your sprite sheets in the media folder? Are you getting any loading errors in the console?

Impact++ can resize the game canvas to fit the window / fullscreen and/or scale to fit a certain number of pixels in the screen space. It all depends on your user-config file (https://github.com/collinhover/impactplusplus/blob/master/lib/plusplus/config-user.js), where you can define any property that appears in the config file (https://github.com/collinhover/impactplusplus/blob/master/lib/plusplus/core/config.js). What is in your user-config? Can you post a screenshot of the behavior?

[Pattentrick]

When using impact++, you have to setup up your animation a little bit different.

The vanilla impact way:

javascript this.addAnim('idleRight', 0.10, [7]) this.currentAnim = this.anims.idleRight

The ++ way:

``` javascript```
animInit: 'idleRight',

animSettings: {
    idleRight: {
        frameTime: 0.1,
        sequence: 7
    }
}

[aanfuso]

@collinhover yep the sprite is in the media folder, the example @Pattentrick gave me solves the sprites problems.

Now its just the canvas size

This is the size I defined (800, 600)

This is how it looks after loading the level

[aanfuso]

@collinhover i have default config-user.js

@Pattentrick how did you get your player to move around the map as it didn't have gravity?

[Pattentrick]

Here is the relevant code of my config-user.js:

javascript ig.module( 'plusplus.config-user' ) .defines(function () {

    /**
     * User configuration of Impact++.
     * <span class="alert alert-info"><strong>Tip:</strong> it is recommended to modify this configuration file!</span>
     * @example
     * // in order to add your own custom configuration to Impact++
     * // edit the file defining ig.CONFIG_USER, 'plusplus/config-user.js'
     * // ig.CONFIG_USER is never modified by Impact++ (it is strictly for your use)
     * // ig.CONFIG_USER is automatically merged over Impact++'s config
     * @static
     * @readonly
     * @memberof ig
     * @namespace ig.CONFIG_USER
     * @author Collin Hover - collinhover.com
     **/
    ig.CONFIG_USER = {

        // set to true for a top down game
        TOP_DOWN: true,

        // enable fullscreen
        GAME_WIDTH_PCT: 1,
        GAME_HEIGHT_PCT: 1,

        // start resolution that will be dynamically scaled
        GAME_WIDTH_VIEW: 320,
        GAME_HEIGHT_VIEW: 200,

        // character movement speed
        CHARACTER: {
            MAX_VEL_GROUNDED_Y: 30,
            MAX_VEL_GROUNDED_X: 30
        }

    };

});

Setting `TOP_DOWN` to `true` will enable a top down game, which disables (among other things) the gravity. Apart from that it's just my call to the moveTo-method, which moves my player via pathfinding to the desired location.

Have a closer look at the `GAME_WIDTH_PCT/GAME_HEIGHT_PCT` properties which are responsible for enabling a fullscreen mode (if desired). If not defined, the canvas won't scale and stays at the mentioned 320px \* 200px in my case.

Could it be that the size you defined (800px \* 600px) as seen while loading the game, is higher than the size of your level, and you centered the screen/camera on your player? That would explain the behavior you are describing.

Or is the map at the second screenshot much bigger?

[aanfuso]

@Pattentrick awesome! There is need to use another animSettings for TOP_DOWN ?

[Pattentrick]

You don't need a special animSetting for a top down game, impact++ will take care of that for us.

For example, this is the animSetting of my player, from my point and click adventure:

javascript animSettings: { idleX: { frameTime: 1, sequence: [0] }, idleDown : { frameTime: 1, sequence: [6] }, idleUp: { frameTime: 1, sequence: [12] }, moveX: { frameTime: 0.10, sequence: [0,1,2,3,4,5] }, moveDown: { frameTime: 0.10, sequence: [6,7,8,9,10,11] }, moveUp: { frameTime: 0.10, sequence: [12,13,14,15,16,17] } }

[aanfuso]

Awesome, work really nice, thanks for everything guys especially for the patience. :joy:

I hope I can contribute a little in the future. :smiley:

[collinhover]

Thanks @Pattentrick, and @aanfuso your scaling issue was caused by the GAME_WIDTH_VIEW and GAME_HEIGHT_VIEW settings in the config. Just set them to 800 x 600 in your user config and you should be good to go. Alternatively, set the GAME_WIDTH_PCT and GAME_HEIGHT_PCT to 1 and let Impact++ do the work of keeping the game fullscreen for you =)