Display no longer renders after code refactor

[wiseguy12851]

I'm designing a simple grid based game and had working code with moving clouds and a grid, but the code was very messy so I did a large scale refactor to clean it up. Now pretty much nothing works anymore and I've spent literally 3 hours scratching my head trying to figure it out to the point where I have exhausted all possibilities and completely given up.

 

The backdrop renders just fine, but the grid and clouds act like I never programmed them in. Whats even more mind boggling is under any and all testing and manually scanning various breakpoints performed in 2 different browsers, Phaser is acting like everything is definitely all there, 100%, all the code for the clouds and grid are working exactly as expected, theyre being created exactly as expected, timers are running just fine, code is being reached as it should. Every single thing checks out perfectly as expected.

 

I've scanned almost every function, even checked layers thinking it may be rendering underneath for some bizarre reason, but according to Phaser and the browser, everything is working A-OK. Yet, nothing but the static backdrop is working. I'm at a complete loss.

 

Can anyone help me.

 

The code provided is the refactored state code, its in typescript but most of it should be pretty self explanatory if you don't know it.

/*1. init2. create3. preload	1. loadUpdate	2. loadRender4. update5. render*. paused	1. pauseUpdate*. resize*. shutdown*/export interface ICell{	x?: number;	y?: number;	size?: number;	row?: number;	column?: number;	graphicsHandle?: Phaser.Graphics;	spriteHandle?: Phaser.Sprite;}export class GameState extends Phaser.State{	constructor()    {        super();    }    public init()    {    	// Time setup    	this.millisecond = 1;        this.second = 1000 * this.millisecond;        this.minute = 60 * this.second;    	// Turn off all world gravity        this.physics.arcade.gravity.y = 0;        // Create and Setup Timers        this.cellAppearTimer = this.time.create();        // Setup board grid preferences        this.gridCellSize = this.yPercent(8);        this.gridBorderSize = this.yPercent(.1);        this.gridVisibleSize = this.gridCellSize + this.gridBorderSize;        this.gridGutterSize = this.yPercent(0);        this.gridTotalSize = this.gridVisibleSize + this.gridGutterSize;        this.gridXStart = this.xPercent(33);        this.gridYStart = this.yPercent(46);        this.gridColumns = 6;        this.gridRows = 6;        // Setup grid cell preferences        this.cellContentColor = 0xFFFFFF;        this.cellBorderColor = this.cellContentColor;        this.cellContentAlpha = .3;        this.cellBorderAlpha = .7;        this.cellRadius = 0;        this.cellAppearMethod = this.rnd.pick([                "all",                "row",                "column",                "random"            ]);        this.cellAppearDelayBase = 100;        this.cellAppearLength = 500;        this.cellBank = [];        // Create board to hold all of the cells        this.boardGroup = this.add.group();        // Cloud data setup        this.maxClouds = 20;        this.cloudEmitter = this.add.emitter(            this.xPercent(-5),            this.yPercent(6),            this.maxClouds);    }    public preload()    {        this.load.image('oldMap', 'media/background/oldMap.min.jpg');        this.load.image('ocean', 'media/background/ocean.min.jpg');        this.load.image('log', 'media/background/treeLog.min.jpg');        this.load.image('cloud', 'media/misc/cloud.min.png');        this.load.image('earth', 'media/blocks/earth.min.png');        this.load.image('fire', 'media/blocks/fire.min.png');        this.load.image('wind', 'media/blocks/wind.min.png');        this.load.image('water', 'media/blocks/water.min.png');    }    public create()    {        // Crete the backdrop        this.createBackdrop();        // Create all the cells        this.generateCells();        // Create the clouds        this.createClouds();        // When thats all done present the cells        this.presentCells();    }    public update()    {        if(this.input.keyboard.isDown(Phaser.Keyboard.ESC))        {            this.game.state.start("menu");        }    }    protected createBackdrop()    {        this.createOcean();        this.createMap();        this.createLog();            }    protected generateCells()    {    	// Begin creating cells        for(var row = 0; row < this.gridRows; row++)        {            for(var column = 0; column < this.gridColumns; column++)            {            	// Make cell            	var cell: ICell = this.generateCell(row, column);            	// Save it            	this.cellBank.push(cell);            	// then cue its appearance            	this.cueCellAppearance(cell);            }        }    }    protected presentCells()    {    	this.cellAppearTimer.onComplete.add(this.cellsPresented, this);        this.cellAppearTimer.start();    }    protected generateCell(row: number, column: number): ICell    {    	// Calculate the placement and size of the cell        var cell: ICell = this.calculateCell(row, column);        // Create the visual cell        cell.graphicsHandle = this.generateCellGraphics();        // Create the sprite handle and attach the pre-generated graphics handle to it        cell.spriteHandle = this.add.sprite(cell.x, cell.y);        cell.spriteHandle.addChild(cell.graphicsHandle);        // Attach the sprite handle to the board        this.boardGroup.add(cell.spriteHandle);        return cell;    }    protected cueCellAppearance(cell: ICell)    {    	// This picks an animation at random for presenting the cells    	// Basically each cell is assigned its own millisecond to start appearing    	// If more than 1 cell has the same milliseconds then they appear at the same time    	// So this is essentially a formula to calculate that millisecond and thus create an    	// appearance animation    	// The "row" animation fades in all cells from top to bottom by giving each cell    	// the same milliseconds on each column but increase in numbers the further it goes     	// down        if(this.cellAppearMethod === "row")            this.cellAppearTimer.add(            	// For each cell, convert its row number to its millisecond time                this.cellAppearDelayBase * cell.row,                this.presentCell,                this,                 cell);        // The "column" animation fades in all cells from left to right by giving each cell    	// the same milliseconds on each row but increase in numbers the further it goes     	// right        else if(this.cellAppearMethod === "column")            this.cellAppearTimer.add(            	// For each cell, convert its column number to its millisecond time                this.cellAppearDelayBase * cell.column,                 this.presentCell,                 this,                 cell);        // The "random" animation fades in all cells randomly by generating random millisecond        // values        else if(this.cellAppearMethod === "random")            this.cellAppearTimer.add(            	// For each cell, come up with a random value at a maximum of the possible            	// generate milliseconds based on total cells                this.cellAppearDelayBase * (this.rnd.between(0, this.gridColumns + this.gridRows - 2)),                 this.presentCell,                 this,                 cell);        // The "default" animation fades in all cells from top left to bottom right        else            this.cellAppearTimer.add(                this.cellAppearDelayBase * (cell.row + cell.column),                 this.presentCell,                 this,                 cell);    }    protected presentCell(cell: ICell)    {    	// Set the cell up to be presented        cell.spriteHandle.alpha = 0;        // Then present it        var tween = this.add.tween(cell.spriteHandle).to(            {                alpha: 1            }, this.cellAppearLength, Phaser.Easing.Linear.None, true);        tween.onComplete.add(this.cellPresented, this);    }    protected cellPresented() {}    protected cellsPresented() {}    protected generateCellGraphics(): Phaser.Graphics    {    	var cell: Phaser.Graphics = this.add.graphics(0, 0);    	cell.boundsPadding = 0;    	// Setup style        cell.beginFill(this.cellContentColor, this.cellContentAlpha);        cell.lineStyle(this.gridBorderSize, this.cellBorderColor, this.cellBorderAlpha);        // Draw cell        cell.drawRoundedRect(            0,            0,            this.gridCellSize,            this.gridCellSize,            this.cellRadius);        // End cell drawing        cell.endFill();        return cell;    }    protected calculateCell(row: number, column: number): ICell    {    	return {    		x: this.gridXStart + (this.gridTotalSize * column),    		y: this.gridYStart + (this.gridTotalSize * row),    		size: this.gridCellSize,    		row: row,    		column: column    	};    }    protected createClouds()    {        this.cloudEmitter.height = this.yPercent(5);        this.cloudEmitter.makeParticles("cloud");        // Between 2 and 5 percent horizontal speed        this.cloudEmitter.minParticleSpeed.set(this.xPercent(.5), 0);        this.cloudEmitter.maxParticleSpeed.set(this.xPercent(1), 0);        // Between .5 and 1 percent size        this.cloudEmitter.setScale(            .1, .2,            .1, .2,            300, Phaser.Easing.Linear.None);        // No gravity, we cant have the clouds falling to the ground        this.cloudEmitter.gravity = 0;        // We certainly dont want the clouds rotating        this.cloudEmitter.minRotation = 0;        this.cloudEmitter.maxRotation = 0;        // Start the particle emitter        this.cloudEmitter.start(false, 5 * this.minute, 25 * this.second);    }    protected createOcean()    {        /*         * Place ocean below map so it can be overlapped. Place ocean from top         * to 60% so that the ocean image isn't so squished and gives the         * illusion the map is being held over the ocean         */        this.oceanImage = this.add.image(0, 0, "ocean");        this.oceanImage.width = this.game.width;        this.oceanImage.height = this.yPercent(60);    }    protected createMap()    {        /*         * Place map above ocean so it can overlap it. Also place map at         * y = 40% and extend it to bottom.         */        this.mapImage = this.add.image(0, this.yPercent(40), "oldMap");        this.oceanImage.width = this.game.width;        this.oceanImage.height = this.yPercent(60);    }    protected createLog()    {        // Add a log to cover up the 2 image borders, make it 2 % tall and start        // at position y = 39% so it covers from 39% - 41%        this.log = this.add.tileSprite(            0,            this.yPercent(39),            this.game.width,            this.yPercent(2),            "log");    }    protected xPercent(percent:number): number    {        var _percent: number = percent * 0.01;        return this.game.width * _percent;    }    protected yPercent(percent: number): number    {        var _percent: number = percent * 0.01;        return this.game.height * _percent;    }    // Timers    protected cellAppearTimer: Phaser.Timer;    // Groups    protected boardGroup: Phaser.Group;    // Grid Preferences    protected gridCellSize: number;    protected gridBorderSize: number;    protected gridVisibleSize: number;    protected gridGutterSize: number;    protected gridTotalSize: number;    protected gridXStart: number;    protected gridYStart: number;    protected gridColumns: number;    protected gridRows: number;    // Cell preferences    protected cellContentColor: number;    protected cellBorderColor: number;    protected cellContentAlpha: number;    protected cellBorderAlpha: number;    protected cellRadius: number;    protected cellAppearMethod: string;    protected cellAppearDelayBase: number;    protected cellAppearLength: number;    protected cellBank;    // Cloud preferences    protected maxClouds: number;    protected cloudEmitter: Phaser.Particles.Arcade.Emitter;    // Misc    protected oceanImage: Phaser.Image;    protected mapImage: Phaser.Image;    protected log: Phaser.TileSprite;    // Time    protected millisecond: number;    protected second: number;    protected minute: number;}