Selecting from multiple ship/character options before each level (more UI stuff)

After a slight (well, slightly more than slight) design change in my current project I had to build a way for players to be able to select a vessel to use before each level. This required a little bit of recoding. The gist is this (as usual, everything is a barebones placeholder at this time):

On the mission brief screen, the player has two clickable elements - Select Character (which will be changed to “Select Vessel”) and Launch. No ship is selected by default. Pressing Launch before a ship is selected does nothing.

Misson brief screen

Clicking on “Select Character” spawns EntityCharselectgui:

EntityCharselectgui

This is that entity (warning: messy and as usual excuse the dodgy indentation if there is any, this code pasting plugin screws it up a bit):

ig.global.EntityCharselectgui = ig.Entity.extend({
    size: {x: 1, y: 1},
    offset: {x: 0, y: 0},
    maxVel: {x: 0, y: 0},
    zIndex: 100,

    selectShipD: new ig.Image('media/gui/selectScreenD.png'),

    type: ig.Entity.TYPE.NONE,
    checkAgainst: ig.Entity.TYPE.NONE,
    collides: ig.Entity.COLLIDES.NEVER,

    init: function( x, y, settings ) {
        console.log('I exist!');
        var selectgui = ig.game.getEntitiesByType(EntityCharselectgui);
        if (selectgui.length > 0) {
            selectgui[0].kill();
        }

        var allTriggers = ig.game.getEntitiesByType(EntityTrigger);
        if (allTriggers.length > 0) {
            for (var i = 0; i < allTriggers.length; i++) {
                if (allTriggers[i].kind in {'selectA':true, 'selectB':true, 'selectC':true, 'aUpgrade': true, 'bUpgrade': true, 'cUpgrade': true, 'closeButton': true}) {
                    console.log('killed ' + allTriggers[i].kind);
                    allTriggers[i].kill();
                }

                else if (allTriggers[i].parentEntity !== this) {
                    allTriggers[i].active = false;
                }
            }
        }

        this.parent( x, y, settings );

        this.shipDrawPosX = 10;
        this.shipDDrawPosX = this.shipDrawPosX + 215 * 3;
        this.drawPosY = ig.system.height / 2 - 200;

        ig.game.spawnEntity( EntityTrigger, 5, 5, {kind: 'closeButton', parentEntity: this, size: {x: 20, y: 20}});

        // Spawn ship A links
        ig.game.spawnEntity( EntityTrigger, this.shipDrawPosX, this.drawPosY + 347, {kind: 'selectA', parentEntity: this, cursorFade: true, size: {x: 100, y: 54}});
        ig.game.spawnEntity( EntityTrigger, this.shipDrawPosX + 100, this.drawPosY + 347, {kind: 'upgradeA', parentEntity: this, cursorFade: true, size: {x: 100, y: 54}});

        // Spawn ship B links
        ig.game.spawnEntity( EntityTrigger, this.shipDrawPosX + 215, this.drawPosY + 347, {kind: 'selectB', parentEntity: this, cursorFade: true, size: {x: 100, y: 54}});
        ig.game.spawnEntity( EntityTrigger, this.shipDrawPosX + 215 + 100, this.drawPosY + 347, {kind: 'upgradeB', parentEntity: this, cursorFade: true, size: {x: 100, y: 54}});

        // Spawn ship C links
        ig.game.spawnEntity( EntityTrigger, this.shipDrawPosX + 215 * 2, this.drawPosY + 347, {kind: 'selectC', parentEntity: this, cursorFade: true, size: {x: 100, y: 54}});
        ig.game.spawnEntity( EntityTrigger, this.shipDrawPosX + 215 * 2 + 100, this.drawPosY + 347, {kind: 'upgradeC', parentEntity: this, cursorFade: true, size: {x: 100, y: 54}});

    }, 

    kill: function() {
        var allTriggers = ig.game.getEntitiesByType(EntityTrigger);
        if (allTriggers.length > 0) {
            for (var i = 0; i < allTriggers.length; i++) {
                allTriggers[i].active = true;
            }
        }
        this.parent();

    },

    update: function() {
        this.parent();

    },

    drawShips: function() {
        var x = this.shipDrawPosX + 70;
        var y = this.drawPosY + 19;
        for (var i = 0; i < ig.game.Controller.shipsArr.length; i++) {
            var ship = ig.game.Controller.shipsArr[i];
            ship.selectShipImg.draw(x - 70, y - 19);
            ig.game.gui.font25.draw(ship.name, x, y, 'left', ship.color);
            y += 60;
            x -= 70;
            ig.game.gui.HUDfont.draw('Level: ' + ship.level, x, y);
            y += 25;
            ig.game.gui.HUDfont.draw('Piloting XP: ' + ship.xp, x, y);
            y += 25;
            ig.game.gui.HUDfont.draw('XP to Next Level: ' + '(tbd)', x, y );
            y += 25;
            ig.game.gui.HUDfont.draw('Thrust: ' + ship.thrust, x, y);
            y += 25;
            ig.game.gui.HUDfont.draw('Rotation Speed: ' + ship.turnSpeed, x, y);
            y += 25;
            ig.game.gui.HUDfont.draw('Hull Strength: ' + ship.health, x, y);
            x += 215 + 70;
            y = this.drawPosY + 19;
        }
    },

    drawShipD: function() {
        this.selectShipD.draw(this.shipDDrawPosX, this.drawPosY);
        var x = this.shipDDrawPosX + 70;
        var y = this.drawPosY + 19;
        var headTextColor = "#df00e7";
        var regTextColor = "#656565";
        ig.game.gui.font25.draw('Wolf', x, y, 'left', headTextColor);
        y += 60;
        x = this.shipDDrawPosX;
        ig.game.gui.HUDfont.draw('Unfortunately Wolf suffered', x, y, 'left', regTextColor);
        y += 20;
        ig.game.gui.HUDfont.draw('an unfortunate hangar bay', x, y, 'left', regTextColor );
        y += 20;
        ig.game.gui.HUDfont.draw('incident after its steering,', x, y, 'left', regTextColor);
        y += 20;
        ig.game.gui.HUDfont.draw('engines, and shields proved', x, y, 'left', regTextColor);
        y += 20;
        ig.game.gui.HUDfont.draw('incompetent for any sort of', x, y, 'left', regTextColor);
        y += 20;
        ig.game.gui.HUDfont.draw('useful endeavour.', x, y, 'left', regTextColor);
        y += 20;
        ig.game.gui.HUDfont.draw('It is now fondly referred to', x, y, 'left', regTextColor);
        y += 20;
        ig.game.gui.HUDfont.draw("as 'Ol' Bessie' by the crew.", x, y, 'left', regTextColor);
    },

    draw: function() {
        ig.system.context.fillStyle = "#000000";
        ig.system.context.fillRect(0, 0, ig.system.width, ig.system.height);
        ig.game.gui.largeHUDfont.draw('X', 5, 3, 'left', '#ffffff');
        this.drawShips();
        this.drawShipD();
        this.parent();
    },

});

The player is then able to click either Select or Vessel on each of the ships. Clicking Vessel brings up the upgrade GUI for that particular ship, where the player is able to click on different parts of the ships to see what upgrades are available (though only the Wing component is implemented for now):

Vessel upgrade GUI

Clicking “Select” runs the following function in the custom Controller class:

    setPlayerKind: function(kind) {
        this.playerKind = kind;
        for (var i = 0; i < this.shipsArr.length; i++) {
            var ship = this.shipsArr[i];
            if (ship.kind === kind) {
                this.playerLevel = ship.level;
                this.accelGround = ship.accelGround;
                this.accelAir = ship.accelAir;
                this.coreDamage = ship.coreDamage;
                this.speedModifier = ship.speedModifier;
                this.turnSpeed = ship.turnSpeed;
                this.thrust = ship.thrust;
                this.playerHealth = ship.health;
                this.playerFuel = ship.fuel;
                this.playerShipName = ship.name;
                break;
            }
        }

Clicking select also kills the ship selection entity and replaces the “Select Character” button with the selected ship. Eg:

Mission brief screen

The player is now able to click “Launch” to start the mission with that ship. When the level starts, the Player entity is created. It then uses the data that was set in the setPlayerKind function above to set its attributes when it’s being initialized:

    setupPlayer: function() {
        this.kind = ig.game.Controller.playerKind;
        this.health = ig.game.Controller.playerHealth;
        this.accelGround = ig.game.Controller.accelGround;
        this.accelAir = ig.game.Controller.accelAir;
        this.coreDamage = ig.game.Controller.coreDamage;
        this.speedModifier = ig.game.Controller.speedModifier;
        this.turnSpeed = ig.game.Controller.turnSpeed;
        this.thrust = ig.game.Controller.thrust;
        this.fuel = ig.game.Controller.playerFuel;
        ig.game.inventory.setupInventory(this.kind);
        this.activeItem = ig.game.inventory.weaponsArr[0];
    },

That’s the general gist. Other things happen when the level is over to take things like piloting XP, remaining fuel, etc and push it back into the individual ship attributes in the Controller class (to make sure attributes that are required persist across levels after the Player entity is killed, which happens at the end of each level).

In other news, today I had my appointment for my Swedish residence card. Pretty sure I look like a sleepy criminal in the photo.

comments powered by Disqus