Forums » Impact Engine » Item pickups question

I'm keen to see how Impact deals with NPC interactions and specifically upgrades through a GUI. How can Impact engine pickups be modified to show within the player's inventory on a separate layer accessed by a toggle key?

I've already written JS classes and prototypes to handle swapping those objects around in principle I just don't know how to have Impact update them in a menu overlay.

Something like this is what I'm driving at..
<code>
function Pickup(){
this.IsDroppable;
this.IsEquippable;
this.itemslot;
this.stacksize;
this.value;
this.bonus;
}
var torch = new Pickup();
Player.addPickup(torch);
</code>

Well, when you draw the inventory, you draw the background then figure out what items to draw and where to draw them... were the engine to be geared around what you're asking, it would end up with a vast amount of code that wouldn't be of any use to anyone else - it's not a generic adventure game system, it's a generic system, period.

Well thank you for that somewhat pretentious and dumbed down response. I disagree what I'm asking for wouldn't bloat the game engine or tailor it to a particular genre. In fact many game genres utilise an upgrades panel or inventory system. My original question wasn't 'how come impact doesn't have this?' but how can I modify it to do what I want? Not an unrealistic expectation on a support form I would have thought..

I would have an array in main.js to hold the inventory objects which are entities in the game. If your character picks up a sword, then do something like

ig.game.playerInventory.push(sword) while making the sword disappear from the game environment (not killed or removed, because it exists with its properties in the inventory).

Later in an inventory menu, if you choose to drop the sword (isDroppable would be defined in EntitySword), then you remove that from your ig.game.playerInventory array and have the sword reappear in the game environment.

Since the inventory array is in main.js, it will be available to your menu layer, even if the player is killed.

Also, the reason for my generic answer was that, in actuality, every single game is going to want to do it differently. Making something suitable for every use case (or even the majority of use cases) does require a lot of code that just isn't necessary for everyone else... (and sorry, it did sound like a 'why doesn't Impact have this' question, just like 'why doesn't Impact have a menu manager')

@StahlmanDesign thank you that's exactly what I needed! It makes a lot of sense that the player inventory exists as a main game object in main.js, Without being concerned what status the player has. I just need to figure out how to toggle visibility on a pickup and whether the item exists in the array and I should be able to do stuff with it.

So I'm trying to create the inventory array and add a gun entity to it in the init function after the level has loaded. With no way to add the inventory array as a property of the game object without it throwing a syntax error I had to set the array after the defines declaration but it throws a type error now.

<pre>
TypeError: ig.game.playerInventory is undefined
ig.game.playerInventory.push(EntityPistol);

ig.module(
'game.main'
)
.requires(
'impact.game',
'impact.font',

'game.entities.player',
'game.entities.pistol',
'game.levels.start'
)
.defines(function(){

var playerInventory = new Array();

MyGame = ig.Game.extend({

gravity: 300, // All entities are affected by this

// Load a font
font: new ig.Font( 'media/04b03.font.png' ),

init: function() {
// Bind keys
ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
ig.input.bind( ig.KEY.X, 'jump' );
ig.input.bind( ig.KEY.C, 'shoot' );

// Load the LevelTest as required above
this.loadLevel( LevelStart );

//Give gun
ig.game.playerInventory.push(EntityPistol);
console.log(ig.game.playerInventory);
},
</pre>

ig.module( 
    'game.main' 
)
.requires(
    'impact.game',
    'impact.font',
    
    'game.entities.player',
    'game.entities.pistol',
    'game.levels.start'
)
.defines(function(){
    
var playerInventory = new Array();
    
MyGame = ig.Game.extend({
    
    gravity: 300, // All entities are affected by this
    
    // Load a font
    font: new ig.Font( 'media/04b03.font.png' ),
    
    init: function() {
        // Bind keys
        ig.input.bind( ig.KEY.LEFT_ARROW, 'left' );
        ig.input.bind( ig.KEY.RIGHT_ARROW, 'right' );
        ig.input.bind( ig.KEY.X, 'jump' );
        ig.input.bind( ig.KEY.C, 'shoot' );
        
        // Load the LevelTest as required above
        this.loadLevel( LevelStart );
        
        //Give gun
        ig.game.playerInventory.push(EntityPistol);
        console.log(ig.game.playerInventory);
    },
    
    update: function() {        
        // Update all entities and BackgroundMaps
        this.parent();
        
        // screen follows the player
        var player = this.getEntitiesByType( EntityPlayer )[0];
        if( player ) {
            this.screen.x = player.pos.x - ig.system.width/2;
            this.screen.y = player.pos.y - ig.system.height/2;
        }
    },
    
    draw: function() {
        // Draw all entities and BackgroundMaps
        this.parent();
        
        this.font.draw( 'Arrow Keys, X, C', 2, 2 );
    }
});

Hi @bitmapshades I'm working on something very similar right now too, I need an inventory system. Thanks for sharing your code, but I'm confused why you've added the gun to the inventory in the init() function, is this intentional? Doesn't the character need to pick this up?

Quote from onion
Hi @bitmapshades I'm working on something very similar right now too, I need an inventory system. Thanks for sharing your code, but I'm confused why you've added the gun to the inventory in the init() function, is this intentional? Doesn't the character need to pick this up?

I've now realised from reading the HTML5 game development book that I need to create a bullet entity to handle weapon damage so I'll be scrapping the way I've done it so far.

I'm actually doing the same thing, an inventory system. What I ended up doing is creating a new Inventory class and defining every item that I'll have in the game in its init function. I have two arrays for current possessions that the player has - a "weapons" array and an "artifacts" array. When a player picks up an artifact, for example (by touching the artifact entity with the player entity), the "addArtifact()" function below runs.

ig.module(
    'game.director.inventory'
)
.requires(
    'impact.impact'
)
.defines(function(){"use strict";

ig.Inventory = ig.Class.extend({


    weaponsArr: new Array(),
    artifactsArr: new Array(),

    artifact64pxImage: new ig.Image( 'media/artifacts/64pxArtifact.png' ), 


    init: function(){
        // FEMALE
        this.coreFemaleWeapon = {name: 'Laser Pellets', damage: 1, speed: 400, entity: EntityLaserpellet};

        // MALE
        this.coreMaleWeapon = {name: 'Laser Orbs', damage: 3, speed: -600};

        // AI
        this.coreAiWeapon = {name: 'Laser Bolts', damage: 2, speed: -600};

        // GENERIC
        this.normalGrenade = {name: 'Grenade', damage: 5, speed: -500};
        this.freezeGrenade = {name: 'Freeze Grenade', damage: 3, speed: -500, condition: 'Freezes Opponent'};
        this.tractorBeam = {name: 'Tractor Beam', damage: 0, speed: 600, condition: 'Collects Artifacts'};

        // ARTIFACTS
        this.artifact64px = {name: 'Tiny Artifact', entity: EntityArtifact64, kind: 'artifact', image: this.artifact64pxImage};

        this.allItems = [this.coreFemaleWeapon, this.coreMaleWeapon, this.coreAiWeapon, this.normalGrenade, this.freezeGrenade, this.tractorBeam, this.artifact64px];
    },

    setupInventory: function(kind) {
        console.log('setting up inventory: ' + kind);
        switch (kind) {
            case 'female':
                this.weaponsArr = [{item: this.coreFemaleWeapon, quantity: 999}, 
                                 {item: this.normalGrenade, quantity: 3}, 
                                 {item: this.freezeGrenade, quantity: 3}, 
                                 {item: this.tractorBeam, quantity: 999}];
                 break;
        }
    },

    addWeapon: function(item) {
        for (var i = 0; i < this.allItems.length; i++) {
            if (this.allItems[i].name == item.name) {
                this.weaponsArr.push({item: this.allItems[i], quantity: 1});
                item.kill();
                console.log(this.weaponsArr);
                break;
            }
        }
    },

    addArtifact: function(item) {
        for (var i = 0; i < this.allItems.length; i++) {
            if (this.allItems[i].name == item.name) {
                this.artifactsArr.push({item: this.allItems[i], quantity: 1});
                item.kill();
                console.log(this.artifactsArr);
                break;
            }
        }
    }

});

});

Not sure if this is the best way of doing this and I'm just now starting to get into the upgrade system for the player character (so that they can upgrade their character based on the objects they've collected), so this may all need to change down the line...

That's very interesting, thanks for sharing that. Definitely something I'll be looking into once I've got the core gameplay and physics worked out for my game.

Well so far I've found weapons can be built more simply as ammo entities by defining them as inner classes of the player class. Simply because I need to spawn them at the player's position, direct them towards enemy targets and handle collisions and explosion fx vs other entities. I may just end up using getEntityByName() to push weapons and useable objects to player inventory on a collision.

That's kind of what I'm doing as well, except all of my weapons are in an "item.js" file. Then when it's time for the player to spawn them, I do this. activeItem is pulled from the array of all weapons (in the Inventory class above):

            if (ig.input.pressed('action')) {
                var trajectory = this.calcAngle();
                ig.game.spawnEntity( this.activeItem.entity, 0,0, {vel: {x: trajectory.sin * (this.activeItem.speed * this.speedModifier), y: -trajectory.cos * (this.activeItem.speed * this.speedModifier)}, damage: this.activeItem.damage, angle: this.angle} );
            }

(The position is then set in the actual entity that is spawned):

        this.pos.x = Math.cos(angle) * radius + CenterX;
        this.pos.y = Math.sin(angle) * radius + CenterY;    

(I'm not including any of the radius calculation stuff here as I'm not sure if you need that, it's basically to shoot in the direciton that the player is pointing).

I'm a bit confused where your code starts the spawnEntity. I think it's because you're passing in what looks two sets of parameters for the settings object?

I'm a bit more direct in how I like to setup my weapon handlers I guess, so I've used code separation to build my bullet entity and have player update() handle whether or not the player can trigger the active weapon within a specified timer. The player fires the weapon and the bullet just needs to copy the player's facing direction when it's spawned.

The code to spawn the bullet item is in the player's update function, so when they press Fire ('action' in my case), it spawns that bullet. It then uses the angle the player is facing to point the bullet and set its trajectory.

My code is still pretty messy with the trajectory calculation side of things so I'll have to clean it up, but the idea is player hits fire, bullet of the player's currently active weapon is spawned and shoots off in the direction the player is facing.

Prior to this the player is able to scroll through weapons that are available to them (from an array) and then shoot using that weapon, hence it spawning "this.activeItem.entity", which is the entity associated with the player's currently selected weapon.

I think we're both actually doing something very similar :)

Yes it does indeed look like it! I've been labouring away to make the most efficient player movement code matched with firing behaviours so I can track what mode the player is in during any update cycle. I'm not keen on my long winded calcAngle() function though. Your version looks better but I'm not sure how to adapt it to eight way movement.

I've changed my code slightly in view of you passing settings in to "this.activeItem.entity"..

update: function() {
        
        if(ig.input.state('stealth') ) {
            this.mode = 'stealth';
        }
        else if(ig.input.state('shoot') ){
            this.mode = 'fire';
        }
        else{
            this.mode = 'move';
        }
//movement code
...

// Shoot active weapon when it's ready to fire
        if( this.mode == 'fire' && this.ammo > 0 && this.bulletcount < this.firingDelay ) {
            this.ammo -= 1;
            this.currentAnim = this.anims.shoot;
            
            //Set facing angle
            this.calcAngle();
            
            //spawn bullet
            ig.game.spawnEntity(this.activeWeapon, this.pos.x, this.pos.y, {dir: this.direction, dx: this.dx, dy: this.dy});
        }
        else{
            this.mode == 'move';    
        }
        
        if(this.invincibleTimer.delta() > this.invincibleDelay){
            this.invincible = false;
            this.currentAnim.alpha = 1;
        }
        
        // move!
        this.parent();
    },
    
    calcAngle: function(){
        if(this.direction == 'upleft' ) {
            this.dx = -1;
            this.dy = -1;
            this.angle = 10;
        }
        else if( this.direction == 'upright' ) {
            this.dx = 1;
            this.dy = -1;
            this.angle = -Math.PI/3;
        }
        else if( this.direction == 'downleft' ) {
            this.dx = -1;
            this.dy = 1;
            this.angle = 40;
        }
        else if( this.direction == 'downright' ) {
            this.dx = 1;
            this.dy = 1;
            this.angle = Math.PI/3;
        }
        else if( this.direction == 'up') {
            this.angle = -Math.PI/2;
            this.dx = 0;
            this.dy = -1;
        }
        else if(this.direction == 'down'){
            this.angle = Math.PI/2;
            this.dx = 0;
            this.dy = 1;
        }
        else if(this.direction == 'left'){
            this.angle = -Math.PI;
            this.dx = -1;
            this.dy = 0;
        }
        else if(this.direction == 'right'){
            this.angle = 0;
            this.dx = 1;
            this.dy = 0;
        }
        else {
            this.angle = 0;
        }
        this.currentAnim.angle = this.angle;
    },