Typescript Phaser Stars

/// <reference path="F:/typings/phaser/phaser.d.ts" />
module BanzaiThumbWars {

export class StarsDemo extends Phaser.State {

    private renderTexture: Phaser.RenderTexture;
    private starSprite: Phaser.Sprite;
    private NUM_STARS:number = 13;

    private starData = []; // this will be used to store angle and position (index) per star
    private starGroup:Phaser.Group; // group to place our sprites in ready for rendering to texture

    private w: number = 800;
    private h: number = 600;

    private frameCount = 0; // keep track of frames during initial launch

    private bgRT: Phaser.RenderTexture; // texture to render star group to
    private bgSprite: Phaser.Sprite; // sprite to view texture

    private ignoreFrameCount=false; // once all the stars are launched we don't need to stagger launches anymore

    private starSprites:Phaser.Sprite[] = []; // our first stars on the path
    private extraSprites:Phaser.Sprite[] = []; // our second stars on the path

    private frontGroup:Phaser.Group; // UI etc (not used currently)
    private backGroup:Phaser.Group; // our background animation texture/group

    // we scale our sprites to 1.7 (170 frames)..
    // we want to launch a second star half way through
    private nextStarIndex = 85;

    constructor () {
        super();
    }

    create()  {

        // this is the group of sprites we'll be rendering to a texture
        this.starGroup = this.game.add.group(this.game, "stargroup", true);
        this.starGroup.height = 800;
        this.starGroup.width = 600;
        this.starGroup.x=400;

        // place it off screen
        // is there any way to render the sprites ready for the texture without displaying it?
        this.starGroup.y=-800;

        // our render texture
        this.bgRT = this.game.add.renderTexture(800, 600, 'bgRT');

        // this is what the user will see the Render Texture with
        this.bgSprite = this.game.add.sprite(0, 0, this.bgRT);
        this.bgSprite.anchor.set(0.5,0.5)
        this.bgSprite.x=400
        this.bgSprite.y=300

        // position to anchor the base of our star sprites
        var startY: number = 600;


        for(var i = 0; i <= this.NUM_STARS-1; i++) {

            // offset from the middle sprite
            var a = (i-(this.NUM_STARS - 1)/2);

            // time to delay the animation start, so they are staggered
            var t = Math.abs(a*12.8*70);

            // index is used to track position of the sprite in the animation
            this.starData.push({ a: a, t:t, angle: a*12.8, index:0, index2:null});

            // create the first sprite on the path
            var starSprite = this.starGroup.create(0, startY, "star");

            // create the second sprite on the path
            var extraSprite = this.starGroup.create(0, startY, "star");

            // anchor our sprite tos the bottom
            starSprite.anchor.set(0.5,1);
            extraSprite.anchor.set(0.5,1);

            // fan our stars out
            starSprite.angle = a * 12.8;
            extraSprite.angle = a *12.8;

            // start small
            starSprite.scale.set(0.1);
            extraSprite.scale.set(0.1);

            // add the sprite to an array
            this.starSprites.push(starSprite);
            this.extraSprites.push(extraSprite);

        }


        // create a group to put our animated background in
        this.backGroup = this.game.add.group();
        this.backGroup.add(this.bgSprite);
        this.backGroup.add(this.starGroup);

        // used for UI later
        this.frontGroup = this.game.add.group();

    }

    update () {

            for(var i=0; i < this.NUM_STARS; i++) {

            // for the opening few frame of the animation we want to delay our scale "tweens"
            // to create our staggered effect
            if(this.frameCount > this.starData[i].t/30 || this.ignoreFrameCount) {

                var starSprite = this.starSprites[i];
                starSprite.angle = this.starData[i].angle;
                var scale = this.starData[i].index / 100;
                starSprite.scale.setTo(scale);


                // index = animation position of starSprite[i]
                // index2 = animation position of extraSprite[i]

                /*
                ---------------------------------------------------------------------------------------------
                ESSENTIALY:

                the starSprite animates the whole way; once launched the extraSprite animates the bottom half
                once they're in sync we can swap as needed
                ----------------------------------------------------------------------------------------------
                */

                // if there's no extraSprite on screen we scale starSprite all the way, otherwise we only need to scale the top half of the animation,
                // since the extra sprite covers the bottom half
                if(this.starData[i].index >= this.nextStarIndex || this.starData[i].index2!=null) {

                    // if there's no extraSprite, reset starSprite to the beginning of the animation path
                    if(this.starData[i].index2==null) {this.starData[i].index2=0}

                    // if extraSprite animation position will be in the bottom half,
                    // then scale it up
                    if(this.starData[i].index2 < this.nextStarIndex) {
                        var scale2 = this.starData[i].index2 / 100;
                        var extraSprite = this.extraSprites[i];
                        extraSprite.scale.setTo(scale2);

                    }
                    else {
                        // we don't need the extraSprite now,
                        // the starSprite can take over the top half of the animation
                        this.starData[i].index2=null;
                        this.starData[i].index=this.nextStarIndex;
                    }
                }

                // increment the animation frame index counter
                this.starData[i].index = this.starData[i].index+1;

                // we've reached 1.7 scale
                if(this.starData[i].index == 170) {

                    // if there's an extraSprite in the animation
                    if(this.starData[i].index2 !=null)
                    {
                        // let the starSrprite do the top half of the animation
                        this.starData[i].index=this.nextStarIndex;
                    }
                    else
                    {
                        // reset starSprite back to beginning of animation
                        this.starData[i].index=0;
                    }
                }

                // if there's an extraSprite in the animation
                if(this.starData[i].index2!=null) {

                    // increase it's animation frame index
                    this.starData[i].index2 = this.starData[i].index2+1;

                    // if it reaches half way, reset it to 0
                    if(this.starData[i].index2 == 85) {
                        this.starData[i].index2=0;
                    }
                }
            }

        }


        // render all of our stars to a texture
        // this is because 2 sets of stars on the path dont fill the whole screen at any one time
        // so we need to keep the residual graphics
        this.bgRT.renderXY(this.starGroup,400,0, false);


        // after 2 full loops we don't need to stagger the launches anymore
        // so we can ignore the frame count from now on
        if(!this.ignoreFrameCount) {

            this.frameCount = this.frameCount+1;
            if(this.frameCount > 340 ) {
                this.ignoreFrameCount=true;
            }
        }
    }

}

}