diff --git a/notNeededPackages.json b/notNeededPackages.json
index f0619f8e79..363596d0d2 100644
--- a/notNeededPackages.json
+++ b/notNeededPackages.json
@@ -307,6 +307,12 @@
             "asOfVersion": "0.0.0"
         },
         {
+            "libraryName": "pixi-spine",
+            "typingsPackageName": "pixi-spine",
+            "sourceRepoURL": "https://github.com/pixijs/pixi-spine",
+            "asOfVersion": "1.3.0"
+        },
+        { 
             "libraryName": "jsonschema",
             "typingsPackageName": "jsonschema",
             "sourceRepoURL": "https://github.com/tdegrunt/jsonschema",
diff --git a/pixi-spine/index.d.ts b/pixi-spine/index.d.ts
deleted file mode 100644
index deb614c749..0000000000
--- a/pixi-spine/index.d.ts
+++ /dev/null
@@ -1,1042 +0,0 @@
-// Type definitions for Pixi-spine 1.3
-// Project: https://github.com/pixijs/pixi-spine/tree/master
-// Definitions by: Ivan Popelyshev <https://github.com/pixijs/pixi-spine>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-import * as PPP from "pixi.js";
-
-declare module "pixi.js" {
-    namespace spine.core {
-        class Animation {
-            name: string;
-            timelines: Timeline[];
-            duration: number;
-            constructor(name: string, timelines: Timeline[], duration: number);
-            apply(skeleton: Skeleton, lastTime: number, time: number, loop: boolean, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-            static binarySearch(values: ArrayLike<number>, target: number, step?: number): number;
-            static linearSearch(values: ArrayLike<number>, target: number, step: number): number;
-        }
-        interface Timeline {
-            apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-            getPropertyId(): number;
-        }
-        enum TimelineType {
-            rotate = 0,
-            translate = 1,
-            scale = 2,
-            shear = 3,
-            attachment = 4,
-            color = 5,
-            deform = 6,
-            event = 7,
-            drawOrder = 8,
-            ikConstraint = 9,
-            transformConstraint = 10,
-            pathConstraintPosition = 11,
-            pathConstraintSpacing = 12,
-            pathConstraintMix = 13,
-        }
-        abstract class CurveTimeline implements Timeline {
-            static LINEAR: number;
-            static STEPPED: number;
-            static BEZIER: number;
-            static BEZIER_SIZE: number;
-            private curves;
-            abstract getPropertyId(): number;
-            constructor(frameCount: number);
-            getFrameCount(): number;
-            setLinear(frameIndex: number): void;
-            setStepped(frameIndex: number): void;
-            getCurveType(frameIndex: number): number;
-            setCurve(frameIndex: number, cx1: number, cy1: number, cx2: number, cy2: number): void;
-            getCurvePercent(frameIndex: number, percent: number): number;
-            abstract apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class RotateTimeline extends CurveTimeline {
-            static ENTRIES: number;
-            static PREV_TIME: number;
-            static PREV_ROTATION: number;
-            static ROTATION: number;
-            boneIndex: number;
-            frames: ArrayLike<number>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, degrees: number): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class TranslateTimeline extends CurveTimeline {
-            static ENTRIES: number;
-            static PREV_TIME: number;
-            static PREV_X: number;
-            static PREV_Y: number;
-            static X: number;
-            static Y: number;
-            boneIndex: number;
-            frames: ArrayLike<number>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, x: number, y: number): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class ScaleTimeline extends TranslateTimeline {
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class ShearTimeline extends TranslateTimeline {
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class ColorTimeline extends CurveTimeline {
-            static ENTRIES: number;
-            static PREV_TIME: number;
-            static PREV_R: number;
-            static PREV_G: number;
-            static PREV_B: number;
-            static PREV_A: number;
-            static R: number;
-            static G: number;
-            static B: number;
-            static A: number;
-            slotIndex: number;
-            frames: ArrayLike<number>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, r: number, g: number, b: number, a: number): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class AttachmentTimeline implements Timeline {
-            slotIndex: number;
-            frames: ArrayLike<number>;
-            attachmentNames: string[];
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            getFrameCount(): number;
-            setFrame(frameIndex: number, time: number, attachmentName: string): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, events: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class DeformTimeline extends CurveTimeline {
-            slotIndex: number;
-            attachment: VertexAttachment;
-            frames: ArrayLike<number>;
-            frameVertices: Array<ArrayLike<number>>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, vertices: ArrayLike<number>): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class EventTimeline implements Timeline {
-            frames: ArrayLike<number>;
-            events: Event[];
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            getFrameCount(): number;
-            setFrame(frameIndex: number, event: Event): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class DrawOrderTimeline implements Timeline {
-            frames: ArrayLike<number>;
-            drawOrders: number[][];
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            getFrameCount(): number;
-            setFrame(frameIndex: number, time: number, drawOrder: number[]): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class IkConstraintTimeline extends CurveTimeline {
-            static ENTRIES: number;
-            static PREV_TIME: number;
-            static PREV_MIX: number;
-            static PREV_BEND_DIRECTION: number;
-            static MIX: number;
-            static BEND_DIRECTION: number;
-            ikConstraintIndex: number;
-            frames: ArrayLike<number>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, mix: number, bendDirection: number): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class TransformConstraintTimeline extends CurveTimeline {
-            static ENTRIES: number;
-            static PREV_TIME: number;
-            static PREV_ROTATE: number;
-            static PREV_TRANSLATE: number;
-            static PREV_SCALE: number;
-            static PREV_SHEAR: number;
-            static ROTATE: number;
-            static TRANSLATE: number;
-            static SCALE: number;
-            static SHEAR: number;
-            transformConstraintIndex: number;
-            frames: ArrayLike<number>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, rotateMix: number, translateMix: number, scaleMix: number, shearMix: number): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class PathConstraintPositionTimeline extends CurveTimeline {
-            static ENTRIES: number;
-            static PREV_TIME: number;
-            static PREV_VALUE: number;
-            static VALUE: number;
-            pathConstraintIndex: number;
-            frames: ArrayLike<number>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, value: number): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class PathConstraintSpacingTimeline extends PathConstraintPositionTimeline {
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-        class PathConstraintMixTimeline extends CurveTimeline {
-            static ENTRIES: number;
-            static PREV_TIME: number;
-            static PREV_ROTATE: number;
-            static PREV_TRANSLATE: number;
-            static ROTATE: number;
-            static TRANSLATE: number;
-            pathConstraintIndex: number;
-            frames: ArrayLike<number>;
-            constructor(frameCount: number);
-            getPropertyId(): number;
-            setFrame(frameIndex: number, time: number, rotateMix: number, translateMix: number): void;
-            apply(skeleton: Skeleton, lastTime: number, time: number, firedEvents: Event[], alpha: number, setupPose: boolean, mixingOut: boolean): void;
-        }
-    }
-    namespace spine.core {
-        class AnimationState {
-            static emptyAnimation: Animation;
-            data: AnimationStateData;
-            tracks: TrackEntry[];
-            events: Event[];
-            listeners: AnimationStateListener2[];
-            queue: EventQueue;
-            propertyIDs: IntSet;
-            animationsChanged: boolean;
-            timeScale: number;
-            trackEntryPool: Pool<TrackEntry>;
-            constructor(data: AnimationStateData);
-            update(delta: number): void;
-            updateMixingFrom(entry: TrackEntry, delta: number, canEnd: boolean): void;
-            apply(skeleton: Skeleton): void;
-            applyMixingFrom(entry: TrackEntry, skeleton: Skeleton): number;
-            applyRotateTimeline(timeline: Timeline, skeleton: Skeleton, time: number, alpha: number, setupPose: boolean, timelinesRotation: number[], i: number, firstFrame: boolean): void;
-            queueEvents(entry: TrackEntry, animationTime: number): void;
-            clearTracks(): void;
-            clearTrack(trackIndex: number): void;
-            setCurrent(index: number, current: TrackEntry): void;
-            setAnimation(trackIndex: number, animationName: string, loop: boolean): TrackEntry;
-            setAnimationWith(trackIndex: number, animation: Animation, loop: boolean): TrackEntry;
-            addAnimation(trackIndex: number, animationName: string, loop: boolean, delay: number): TrackEntry;
-            addAnimationWith(trackIndex: number, animation: Animation, loop: boolean, delay: number): TrackEntry;
-            setEmptyAnimation(trackIndex: number, mixDuration: number): TrackEntry;
-            addEmptyAnimation(trackIndex: number, mixDuration: number, delay: number): TrackEntry;
-            setEmptyAnimations(mixDuration: number): void;
-            expandToIndex(index: number): TrackEntry;
-            trackEntry(trackIndex: number, animation: Animation, loop: boolean, last: TrackEntry): TrackEntry;
-            disposeNext(entry: TrackEntry): void;
-            _animationsChanged(): void;
-            setTimelinesFirst(entry: TrackEntry): void;
-            checkTimelinesFirst(entry: TrackEntry): void;
-            checkTimelinesUsage(entry: TrackEntry, usageArray: boolean[]): void;
-            getCurrent(trackIndex: number): TrackEntry;
-            addListener(listener: AnimationStateListener2): void;
-            removeListener(listener: AnimationStateListener2): void;
-            clearListeners(): void;
-            clearListenerNotifications(): void;
-            onComplete: (trackIndex: number, loopCount: number) => any;
-            onEvent: (trackIndex: number, event: Event) => any;
-            onStart: (trackIndex: number) => any;
-            onEnd: (trackIndex: number) => any;
-            private static deprecatedWarning1;
-            setAnimationByName(trackIndex: number, animationName: string, loop: boolean): void;
-            private static deprecatedWarning2;
-            addAnimationByName(trackIndex: number, animationName: string, loop: boolean, delay: number): void;
-            private static deprecatedWarning3;
-            hasAnimationByName(animationName: string): boolean;
-        }
-        class TrackEntry {
-            animation: Animation;
-            next: TrackEntry;
-            mixingFrom: TrackEntry;
-            listener: AnimationStateListener2;
-            trackIndex: number;
-            loop: boolean;
-            eventThreshold: number;
-            attachmentThreshold: number;
-            drawOrderThreshold: number;
-            animationStart: number;
-            animationEnd: number;
-            animationLast: number;
-            nextAnimationLast: number;
-            delay: number;
-            trackTime: number;
-            trackLast: number;
-            nextTrackLast: number;
-            trackEnd: number;
-            timeScale: number;
-            alpha: number;
-            mixTime: number;
-            mixDuration: number;
-            mixAlpha: number;
-            timelinesFirst: boolean[];
-            timelinesRotation: number[];
-            reset(): void;
-            getAnimationTime(): number;
-            setAnimationLast(animationLast: number): void;
-            isComplete(): boolean;
-            resetRotationDirections(): void;
-            onComplete: (trackIndex: number, loopCount: number) => any;
-            onEvent: (trackIndex: number, event: Event) => any;
-            onStart: (trackIndex: number) => any;
-            onEnd: (trackIndex: number) => any;
-            private static deprecatedWarning1;
-            private static deprecatedWarning2;
-            time: number;
-            endTime: number;
-            loopsCount(): number;
-        }
-        class EventQueue {
-            objects: any[];
-            drainDisabled: boolean;
-            animState: AnimationState;
-            constructor(animState: AnimationState);
-            start(entry: TrackEntry): void;
-            interrupt(entry: TrackEntry): void;
-            end(entry: TrackEntry): void;
-            dispose(entry: TrackEntry): void;
-            complete(entry: TrackEntry): void;
-            event(entry: TrackEntry, event: Event): void;
-            private static deprecatedWarning1;
-            deprecateStuff(): boolean;
-            drain(): void;
-            clear(): void;
-        }
-        enum EventType {
-            start = 0,
-            interrupt = 1,
-            end = 2,
-            dispose = 3,
-            complete = 4,
-            event = 5,
-        }
-        interface AnimationStateListener2 {
-            start(entry: TrackEntry): void;
-            interrupt(entry: TrackEntry): void;
-            end(entry: TrackEntry): void;
-            dispose(entry: TrackEntry): void;
-            complete(entry: TrackEntry): void;
-            event(entry: TrackEntry, event: Event): void;
-        }
-        abstract class AnimationStateAdapter2 implements AnimationStateListener2 {
-            start(entry: TrackEntry): void;
-            interrupt(entry: TrackEntry): void;
-            end(entry: TrackEntry): void;
-            dispose(entry: TrackEntry): void;
-            complete(entry: TrackEntry): void;
-            event(entry: TrackEntry, event: Event): void;
-        }
-    }
-    namespace spine.core {
-        class AnimationStateData {
-            skeletonData: SkeletonData;
-            animationToMixTime: Map<number>;
-            defaultMix: number;
-            constructor(skeletonData: SkeletonData);
-            setMix(fromName: string, toName: string, duration: number): void;
-            private static deprecatedWarning1;
-            setMixByName(fromName: string, toName: string, duration: number): void;
-            setMixWith(from: Animation, to: Animation, duration: number): void;
-            getMix(from: Animation, to: Animation): number;
-        }
-    }
-    namespace spine.core {
-        class AtlasAttachmentLoader implements AttachmentLoader {
-            atlas: TextureAtlas;
-            constructor(atlas: TextureAtlas);
-            newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
-            newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
-            newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
-            newPathAttachment(skin: Skin, name: string): PathAttachment;
-        }
-    }
-    namespace spine.core {
-        abstract class Attachment {
-            name: string;
-            constructor(name: string);
-        }
-        abstract class VertexAttachment extends Attachment {
-            bones: number[];
-            vertices: ArrayLike<number>;
-            worldVerticesLength: number;
-            constructor(name: string);
-            computeWorldVertices(slot: Slot, worldVertices: ArrayLike<number>): void;
-            computeWorldVerticesWith(slot: Slot, start: number, count: number, worldVertices: ArrayLike<number>, offset: number): void;
-            applyDeform(sourceAttachment: VertexAttachment): boolean;
-        }
-    }
-    namespace spine.core {
-        interface AttachmentLoader {
-            newRegionAttachment(skin: Skin, name: string, path: string): RegionAttachment;
-            newMeshAttachment(skin: Skin, name: string, path: string): MeshAttachment;
-            newBoundingBoxAttachment(skin: Skin, name: string): BoundingBoxAttachment;
-            newPathAttachment(skin: Skin, name: string): PathAttachment;
-        }
-    }
-    namespace spine.core {
-        enum AttachmentType {
-            Region = 0,
-            BoundingBox = 1,
-            Mesh = 2,
-            LinkedMesh = 3,
-            Path = 4,
-        }
-    }
-    namespace spine.core {
-        class BoundingBoxAttachment extends VertexAttachment {
-            color: Color;
-            constructor(name: string);
-        }
-    }
-    namespace spine.core {
-        class MeshAttachment extends VertexAttachment {
-            region: TextureRegion;
-            path: string;
-            regionUVs: ArrayLike<number>;
-            triangles: number[];
-            color: Color;
-            hullLength: number;
-            private parentMesh;
-            inheritDeform: boolean;
-            tempColor: Color;
-            constructor(name: string);
-            updateWorldVertices(slot: Slot, premultipliedAlpha: boolean): ArrayLike<number>;
-            updateUVs(region: TextureRegion, uvs: ArrayLike<number>): ArrayLike<number>;
-            applyDeform(sourceAttachment: VertexAttachment): boolean;
-            getParentMesh(): MeshAttachment;
-            setParentMesh(parentMesh: MeshAttachment): void;
-        }
-    }
-    namespace spine.core {
-        class PathAttachment extends VertexAttachment {
-            lengths: number[];
-            closed: boolean;
-            constantSpeed: boolean;
-            color: Color;
-            constructor(name: string);
-        }
-    }
-    namespace spine.core {
-        class RegionAttachment extends Attachment {
-            x: number;
-            y: number;
-            scaleX: number;
-            scaleY: number;
-            rotation: number;
-            width: number;
-            height: number;
-            color: Color;
-            path: string;
-            region: TextureRegion;
-            constructor(name: string);
-            updateWorldVertices(slot: Slot, premultipliedAlpha: boolean): ArrayLike<number>;
-        }
-    }
-    namespace spine.core {
-        enum BlendMode {
-            Normal = 0,
-            Additive = 1,
-            Multiply = 2,
-            Screen = 3,
-        }
-    }
-    namespace spine.core {
-        class Bone implements Updatable {
-            static yDown: boolean;
-            matrix: Matrix;
-            readonly worldX: number;
-            readonly worldY: number;
-            data: BoneData;
-            skeleton: Skeleton;
-            parent: Bone;
-            children: Bone[];
-            x: number;
-            y: number;
-            rotation: number;
-            scaleX: number;
-            scaleY: number;
-            shearX: number;
-            shearY: number;
-            ax: number;
-            ay: number;
-            arotation: number;
-            ascaleX: number;
-            ascaleY: number;
-            ashearX: number;
-            ashearY: number;
-            appliedValid: boolean;
-            sorted: boolean;
-            constructor(data: BoneData, skeleton: Skeleton, parent: Bone);
-            update(): void;
-            updateWorldTransform(): void;
-            updateWorldTransformWith(x: number, y: number, rotation: number, scaleX: number, scaleY: number, shearX: number, shearY: number): void;
-            setToSetupPose(): void;
-            getWorldRotationX(): number;
-            getWorldRotationY(): number;
-            getWorldScaleX(): number;
-            getWorldScaleY(): number;
-            worldToLocalRotationX(): number;
-            worldToLocalRotationY(): number;
-            rotateWorld(degrees: number): void;
-            updateAppliedTransform(): void;
-            worldToLocal(world: Vector2): Vector2;
-            localToWorld(local: Vector2): Vector2;
-        }
-    }
-    namespace spine.core {
-        class BoneData {
-            index: number;
-            name: string;
-            parent: BoneData;
-            length: number;
-            x: number;
-            y: number;
-            rotation: number;
-            scaleX: number;
-            scaleY: number;
-            shearX: number;
-            shearY: number;
-            transformMode: TransformMode;
-            constructor(index: number, name: string, parent: BoneData);
-        }
-        enum TransformMode {
-            Normal = 0,
-            OnlyTranslation = 1,
-            NoRotationOrReflection = 2,
-            NoScale = 3,
-            NoScaleOrReflection = 4,
-        }
-    }
-    namespace spine.core {
-        interface Constraint extends Updatable {
-            getOrder(): number;
-        }
-    }
-    namespace spine.core {
-        class Event {
-            data: EventData;
-            intValue: number;
-            floatValue: number;
-            stringValue: string;
-            time: number;
-            constructor(time: number, data: EventData);
-        }
-    }
-    namespace spine.core {
-        class EventData {
-            name: string;
-            intValue: number;
-            floatValue: number;
-            stringValue: string;
-            constructor(name: string);
-        }
-    }
-    namespace spine.core {
-        class IkConstraint implements Constraint {
-            data: IkConstraintData;
-            bones: Bone[];
-            target: Bone;
-            mix: number;
-            bendDirection: number;
-            level: number;
-            constructor(data: IkConstraintData, skeleton: Skeleton);
-            getOrder(): number;
-            apply(): void;
-            update(): void;
-            apply1(bone: Bone, targetX: number, targetY: number, alpha: number): void;
-            apply2(parent: Bone, child: Bone, targetX: number, targetY: number, bendDir: number, alpha: number): void;
-        }
-    }
-    namespace spine.core {
-        class IkConstraintData {
-            name: string;
-            order: number;
-            bones: BoneData[];
-            target: BoneData;
-            bendDirection: number;
-            mix: number;
-            constructor(name: string);
-        }
-    }
-    namespace spine.core {
-        class PathConstraint implements Constraint {
-            static NONE: number;
-            static BEFORE: number;
-            static AFTER: number;
-            data: PathConstraintData;
-            bones: Bone[];
-            target: Slot;
-            position: number;
-            spacing: number;
-            rotateMix: number;
-            translateMix: number;
-            spaces: number[];
-            positions: number[];
-            world: number[];
-            curves: number[];
-            lengths: number[];
-            segments: number[];
-            constructor(data: PathConstraintData, skeleton: Skeleton);
-            apply(): void;
-            update(): void;
-            computeWorldPositions(path: PathAttachment, spacesCount: number, tangents: boolean, percentPosition: boolean, percentSpacing: boolean): number[];
-            addBeforePosition(p: number, temp: number[], i: number, out: number[], o: number): void;
-            addAfterPosition(p: number, temp: number[], i: number, out: number[], o: number): void;
-            addCurvePosition(p: number, x1: number, y1: number, cx1: number, cy1: number, cx2: number, cy2: number, x2: number, y2: number, out: number[], o: number, tangents: boolean): void;
-            getOrder(): number;
-        }
-    }
-    namespace spine.core {
-        class PathConstraintData {
-            name: string;
-            order: number;
-            bones: BoneData[];
-            target: SlotData;
-            positionMode: PositionMode;
-            spacingMode: SpacingMode;
-            rotateMode: RotateMode;
-            offsetRotation: number;
-            position: number;
-            spacing: number;
-            rotateMix: number;
-            translateMix: number;
-            constructor(name: string);
-        }
-        enum PositionMode {
-            Fixed = 0,
-            Percent = 1,
-        }
-        enum SpacingMode {
-            Length = 0,
-            Fixed = 1,
-            Percent = 2,
-        }
-        enum RotateMode {
-            Tangent = 0,
-            Chain = 1,
-            ChainScale = 2,
-        }
-    }
-    namespace spine.core {
-        class Skeleton {
-            data: SkeletonData;
-            bones: Bone[];
-            slots: Slot[];
-            drawOrder: Slot[];
-            ikConstraints: IkConstraint[];
-            transformConstraints: TransformConstraint[];
-            pathConstraints: PathConstraint[];
-            _updateCache: Updatable[];
-            updateCacheReset: Updatable[];
-            skin: Skin;
-            color: Color;
-            time: number;
-            flipX: boolean;
-            flipY: boolean;
-            x: number;
-            y: number;
-            constructor(data: SkeletonData);
-            updateCache(): void;
-            sortIkConstraint(constraint: IkConstraint): void;
-            sortPathConstraint(constraint: PathConstraint): void;
-            sortTransformConstraint(constraint: TransformConstraint): void;
-            sortPathConstraintAttachment(skin: Skin, slotIndex: number, slotBone: Bone): void;
-            sortPathConstraintAttachmentWith(attachment: Attachment, slotBone: Bone): void;
-            sortBone(bone: Bone): void;
-            sortReset(bones: Bone[]): void;
-            updateWorldTransform(): void;
-            setToSetupPose(): void;
-            setBonesToSetupPose(): void;
-            setSlotsToSetupPose(): void;
-            getRootBone(): Bone;
-            findBone(boneName: string): Bone;
-            findBoneIndex(boneName: string): number;
-            findSlot(slotName: string): Slot;
-            findSlotIndex(slotName: string): number;
-            setSkinByName(skinName: string): void;
-            setSkin(newSkin: Skin): void;
-            getAttachmentByName(slotName: string, attachmentName: string): Attachment;
-            getAttachment(slotIndex: number, attachmentName: string): Attachment;
-            setAttachment(slotName: string, attachmentName: string): void;
-            findIkConstraint(constraintName: string): IkConstraint;
-            findTransformConstraint(constraintName: string): TransformConstraint;
-            findPathConstraint(constraintName: string): PathConstraint;
-            getBounds(offset: Vector2, size: Vector2): void;
-            update(delta: number): void;
-        }
-    }
-    namespace spine.core {
-        class SkeletonBounds {
-            minX: number;
-            minY: number;
-            maxX: number;
-            maxY: number;
-            boundingBoxes: BoundingBoxAttachment[];
-            polygons: Array<ArrayLike<number>>;
-            private polygonPool;
-            update(skeleton: Skeleton, updateAabb: boolean): void;
-            aabbCompute(): void;
-            aabbContainsPoint(x: number, y: number): boolean;
-            aabbIntersectsSegment(x1: number, y1: number, x2: number, y2: number): boolean;
-            aabbIntersectsSkeleton(bounds: SkeletonBounds): boolean;
-            containsPoint(x: number, y: number): BoundingBoxAttachment;
-            containsPointPolygon(polygon: ArrayLike<number>, x: number, y: number): boolean;
-            intersectsSegment(x1: number, y1: number, x2: number, y2: number): BoundingBoxAttachment;
-            intersectsSegmentPolygon(polygon: ArrayLike<number>, x1: number, y1: number, x2: number, y2: number): boolean;
-            getPolygon(boundingBox: BoundingBoxAttachment): ArrayLike<number>;
-            getWidth(): number;
-            getHeight(): number;
-        }
-    }
-    namespace spine.core {
-        class SkeletonData {
-            name: string;
-            bones: BoneData[];
-            slots: SlotData[];
-            skins: Skin[];
-            defaultSkin: Skin;
-            events: EventData[];
-            animations: Animation[];
-            ikConstraints: IkConstraintData[];
-            transformConstraints: TransformConstraintData[];
-            pathConstraints: PathConstraintData[];
-            width: number;
-            height: number;
-            version: string;
-            hash: string;
-            fps: number;
-            imagesPath: string;
-            findBone(boneName: string): BoneData;
-            findBoneIndex(boneName: string): number;
-            findSlot(slotName: string): SlotData;
-            findSlotIndex(slotName: string): number;
-            findSkin(skinName: string): Skin;
-            findEvent(eventDataName: string): EventData;
-            findAnimation(animationName: string): Animation;
-            findIkConstraint(constraintName: string): IkConstraintData;
-            findTransformConstraint(constraintName: string): TransformConstraintData;
-            findPathConstraint(constraintName: string): PathConstraintData;
-            findPathConstraintIndex(pathConstraintName: string): number;
-        }
-    }
-    namespace spine.core {
-        class SkeletonJson {
-            attachmentLoader: AttachmentLoader;
-            scale: number;
-            private linkedMeshes;
-            constructor(attachmentLoader: AttachmentLoader);
-            readSkeletonData(json: string | any): SkeletonData;
-            readAttachment(map: any, skin: Skin, slotIndex: number, name: string): Attachment;
-            readVertices(map: any, attachment: VertexAttachment, verticesLength: number): void;
-            readAnimation(map: any, name: string, skeletonData: SkeletonData): void;
-            readCurve(map: any, timeline: CurveTimeline, frameIndex: number): void;
-            getValue(map: any, prop: string, defaultValue: any): any;
-            static blendModeFromString(str: string): number;
-            static positionModeFromString(str: string): PositionMode;
-            static spacingModeFromString(str: string): SpacingMode;
-            static rotateModeFromString(str: string): RotateMode;
-            static transformModeFromString(str: string): TransformMode;
-            static transformModeLegacy(inheritRotation: boolean, inheritScale: boolean): TransformMode;
-        }
-    }
-    namespace spine.core {
-        class Skin {
-            name: string;
-            attachments: Array<Map<Attachment>>;
-            constructor(name: string);
-            addAttachment(slotIndex: number, name: string, attachment: Attachment): void;
-            getAttachment(slotIndex: number, name: string): Attachment;
-            attachAll(skeleton: Skeleton, oldSkin: Skin): void;
-        }
-    }
-    namespace spine.core {
-        class Slot {
-            currentMesh: any;
-            currentSprite: any;
-            meshes: any;
-            currentMeshName: string;
-            sprites: any;
-            currentSpriteName: string;
-            blendMode: number;
-            tempRegion: TextureRegion;
-            tempAttachment: Attachment;
-            data: SlotData;
-            bone: Bone;
-            color: Color;
-            attachment: Attachment;
-            private attachmentTime;
-            attachmentVertices: number[];
-            constructor(data: SlotData, bone: Bone);
-            getAttachment(): Attachment;
-            setAttachment(attachment: Attachment): void;
-            setAttachmentTime(time: number): void;
-            getAttachmentTime(): number;
-            setToSetupPose(): void;
-        }
-    }
-    namespace spine.core {
-        class SlotData {
-            index: number;
-            name: string;
-            boneData: BoneData;
-            color: Color;
-            attachmentName: string;
-            blendMode: number;
-            constructor(index: number, name: string, boneData: BoneData);
-        }
-    }
-    namespace spine.core {
-        abstract class Texture {
-            protected _image: HTMLImageElement;
-            constructor(image: HTMLImageElement);
-            getImage(): HTMLImageElement;
-            abstract setFilters(minFilter: TextureFilter, magFilter: TextureFilter): void;
-            abstract setWraps(uWrap: TextureWrap, vWrap: TextureWrap): void;
-            abstract dispose(): void;
-            static filterFromString(text: string): TextureFilter;
-            static wrapFromString(text: string): TextureWrap;
-        }
-        enum TextureFilter {
-            Nearest = 9728,
-            Linear = 9729,
-            MipMap = 9987,
-            MipMapNearestNearest = 9984,
-            MipMapLinearNearest = 9985,
-            MipMapNearestLinear = 9986,
-            MipMapLinearLinear = 9987,
-        }
-        enum TextureWrap {
-            MirroredRepeat = 33648,
-            ClampToEdge = 33071,
-            Repeat = 10497,
-        }
-        class TextureRegion {
-            texture: Texture;
-            size: Rectangle;
-            readonly width: number;
-            readonly height: number;
-            readonly u: number;
-            readonly v: number;
-            readonly u2: number;
-            readonly v2: number;
-            readonly offsetX: number;
-            readonly offsetY: number;
-            readonly pixiOffsetY: number;
-            readonly spineOffsetY: number;
-            readonly originalWidth: number;
-            readonly originalHeight: number;
-            readonly x: number;
-            readonly y: number;
-            readonly rotate: boolean;
-        }
-    }
-    namespace spine.core {
-        class TextureAtlas implements Disposable {
-            pages: TextureAtlasPage[];
-            regions: TextureAtlasRegion[];
-            constructor(atlasText: string, textureLoader: (path: string, loaderFunction: (tex: BaseTexture) => any) => any, callback: (obj: TextureAtlas) => any);
-            addTexture(name: string, texture: Texture): TextureAtlasRegion;
-            addTextureHash(textures: Map<Texture>, stripExtension: boolean): void;
-            addSpineAtlas(atlasText: string, textureLoader: (path: string, loaderFunction: (tex: BaseTexture) => any) => any, callback: (obj: TextureAtlas) => any): void;
-            private load(atlasText, textureLoader, callback);
-            findRegion(name: string): TextureAtlasRegion;
-            dispose(): void;
-        }
-        class TextureAtlasPage {
-            name: string;
-            minFilter: TextureFilter;
-            magFilter: TextureFilter;
-            uWrap: TextureWrap;
-            vWrap: TextureWrap;
-            baseTexture: BaseTexture;
-            width: number;
-            height: number;
-            setFilters(): void;
-        }
-        class TextureAtlasRegion extends TextureRegion {
-            page: TextureAtlasPage;
-            name: string;
-            index: number;
-        }
-    }
-    namespace spine.core {
-        class TransformConstraint implements Constraint {
-            data: TransformConstraintData;
-            bones: Bone[];
-            target: Bone;
-            rotateMix: number;
-            translateMix: number;
-            scaleMix: number;
-            shearMix: number;
-            temp: Vector2;
-            constructor(data: TransformConstraintData, skeleton: Skeleton);
-            apply(): void;
-            update(): void;
-            getOrder(): number;
-        }
-    }
-    namespace spine.core {
-        class TransformConstraintData {
-            name: string;
-            order: number;
-            bones: BoneData[];
-            target: BoneData;
-            rotateMix: number;
-            translateMix: number;
-            scaleMix: number;
-            shearMix: number;
-            offsetRotation: number;
-            offsetX: number;
-            offsetY: number;
-            offsetScaleX: number;
-            offsetScaleY: number;
-            offsetShearY: number;
-            constructor(name: string);
-        }
-    }
-    namespace spine.core {
-        interface Updatable {
-            update(): void;
-        }
-    }
-    namespace spine.core {
-        interface Map<T> {
-            [key: string]: T;
-        }
-        class IntSet {
-            array: number[];
-            add(value: number): boolean;
-            contains(value: number): boolean;
-            remove(value: number): void;
-            clear(): void;
-        }
-        interface Disposable {
-            dispose(): void;
-        }
-        class Color {
-            r: number;
-            g: number;
-            b: number;
-            a: number;
-            static WHITE: Color;
-            static RED: Color;
-            static GREEN: Color;
-            static BLUE: Color;
-            static MAGENTA: Color;
-            constructor(r?: number, g?: number, b?: number, a?: number);
-            set(r: number, g: number, b: number, a: number): this;
-            setFromColor(c: Color): this;
-            setFromString(hex: string): this;
-            add(r: number, g: number, b: number, a: number): this;
-            clamp(): this;
-        }
-        class MathUtils {
-            static PI: number;
-            static PI2: number;
-            static radiansToDegrees: number;
-            static radDeg: number;
-            static degreesToRadians: number;
-            static degRad: number;
-            static clamp(value: number, min: number, max: number): number;
-            static cosDeg(degrees: number): number;
-            static sinDeg(degrees: number): number;
-            static signum(value: number): number;
-            static toInt(x: number): number;
-            static cbrt(x: number): number;
-        }
-        class Utils {
-            static SUPPORTS_TYPED_ARRAYS: boolean;
-            static arrayCopy<T>(source: ArrayLike<T>, sourceStart: number, dest: ArrayLike<T>, destStart: number, numElements: number): void;
-            static setArraySize<T>(array: T[], size: number, value?: any): T[];
-            static ensureArrayCapacity<T>(array: T[], size: number, value?: any): T[];
-            static newArray<T>(size: number, defaultValue: T): T[];
-            static newFloatArray(size: number): ArrayLike<number>;
-            static toFloatArray(array: number[]): number[] | Float32Array;
-        }
-        class DebugUtils {
-            static logBones(skeleton: Skeleton): void;
-        }
-        class Pool<T> {
-            private items;
-            private instantiator;
-            constructor(instantiator: () => T);
-            obtain(): T;
-            free(item: T): void;
-            freeAll(items: ArrayLike<T>): void;
-            clear(): void;
-        }
-        class Vector2 {
-            x: number;
-            y: number;
-            constructor(x?: number, y?: number);
-            set(x: number, y: number): Vector2;
-            length(): number;
-            normalize(): this;
-        }
-        class TimeKeeper {
-            maxDelta: number;
-            framesPerSecond: number;
-            delta: number;
-            totalTime: number;
-            private lastTime;
-            private frameCount;
-            private frameTime;
-            update(): void;
-        }
-        interface ArrayLike<T> {
-            length: number;
-            [n: number]: T;
-        }
-    }
-    namespace spine {
-        function atlasParser(): (resource: loaders.Resource, next: () => any) => any;
-        function imageLoaderAdapter(loader: any, namePrefix: any, baseUrl: any, imageOptions: any): (line: string, callback: (baseTexture: BaseTexture) => any) => void;
-        function syncImageLoaderAdapter(baseUrl: any, crossOrigin: any): (line: any, callback: any) => void;
-    }
-    namespace spine {
-        class SpineSprite extends Sprite {
-            region: core.TextureRegion;
-            constructor(tex: Texture);
-        }
-        class SpineMesh extends mesh.Mesh {
-            region: core.TextureRegion;
-            constructor(texture: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array, drawMode?: number);
-        }
-        class Spine extends Container {
-            static globalAutoUpdate: boolean;
-            tintRgb: ArrayLike<number>;
-            spineData: core.SkeletonData;
-            skeleton: core.Skeleton;
-            stateData: core.AnimationStateData;
-            state: core.AnimationState;
-            slotContainers: Container[];
-            constructor(spineData: core.SkeletonData);
-            autoUpdate: boolean;
-            tint: number;
-            update(dt: number): void;
-            private setSpriteRegion(attachment, sprite, region);
-            private setMeshRegion(attachment, mesh, region);
-            protected lastTime: number;
-            autoUpdateTransform(): void;
-            createSprite(slot: core.Slot, attachment: core.RegionAttachment, defName: string): SpineSprite;
-            createMesh(slot: core.Slot, attachment: core.MeshAttachment): SpineMesh;
-            hackTextureBySlotIndex(slotIndex: number, texture?: Texture, size?: Rectangle): boolean;
-            hackTextureBySlotName: (slotName: string, texture?: Texture, size?: Rectangle) => any;
-        }
-    }
-}
diff --git a/pixi-spine/pixi-spine-tests.ts b/pixi-spine/pixi-spine-tests.ts
deleted file mode 100644
index 51e4c7806f..0000000000
--- a/pixi-spine/pixi-spine-tests.ts
+++ /dev/null
@@ -1,311 +0,0 @@
-import * as PIXI from "pixi.js";
-
-namespace Spine {
-
-    export class Dragon {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private dragon: PIXI.spine.Spine;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            PIXI.loader.add('dragon', '../../_assets/spine/dragon.json').load(this.onAssetsLoaded);
-
-        }
-
-        private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
-
-            // initiate the spine animation
-            this.dragon = new PIXI.spine.Spine(res.dragon.spineData);
-            this.dragon.skeleton.setToSetupPose();
-            this.dragon.update(0);
-            this.dragon.autoUpdate = false;
-
-            // create a container for the spin animation and add the animation to it
-            var dragonCage: PIXI.Container = new PIXI.Container();
-            dragonCage.addChild(this.dragon);
-
-            // measure the spine animation and position it inside its container to align it to the origin
-            var localRect: PIXI.Rectangle = this.dragon.getLocalBounds();
-            this.dragon.position.set(-localRect.x, -localRect.y);
-
-            // now we can scale, position and rotate the container as any other display object
-            var scale = Math.min((this.renderer.width * 0.7) / dragonCage.width, (this.renderer.height * 0.7) / dragonCage.height);
-            dragonCage.scale.set(scale, scale);
-            dragonCage.position.set((this.renderer.width - dragonCage.width) * 0.5, (this.renderer.height - dragonCage.height) * 0.5);
-
-            // add the container to the stage
-            this.stage.addChild(dragonCage);
-
-            // once position and scaled, set the animation to play
-            this.dragon.state.setAnimation(0, 'flying', true);
-
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            // update the spine animation, only needed if dragon.autoupdate is set to false
-            this.dragon.update(0.01666666666667); // HARDCODED FRAMERATE!
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace Spine {
-
-    export class Goblin {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private goblin: PIXI.spine.Spine;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            PIXI.loader.add('goblins', '../../_assets/spine/goblins.json').load(this.onAssetsLoaded);
-
-        }
-
-        private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
-
-            // initiate the spine animation
-            this.goblin = new PIXI.spine.Spine(res.goblins.spineData);
-            this.goblin.skeleton.setSkinByName('goblin');
-            this.goblin.skeleton.setSlotsToSetupPose();
-
-            this.goblin.position.x = 400;
-            this.goblin.position.y = 600;
-            this.goblin.scale.set(1.5);
-
-            this.goblin.state.setAnimationByName(0, 'walk', true);
-
-            this.stage.addChild(this.goblin);
-
-            this.stage.on('click', () => {
-
-                // change current skin
-                var currentSkinName = this.goblin.skeleton.skin.name;
-                var newSkinName = (currentSkinName === 'goblin' ? 'goblingirl' : 'goblin');
-                this.goblin.skeleton.setSkinByName(newSkinName);
-                this.goblin.skeleton.setSlotsToSetupPose();
-
-            });
-
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace Spine {
-
-    export class Pixie {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private pixie: PIXI.spine.Spine;
-
-        private position: number;
-        private background: PIXI.Sprite;
-        private background2: PIXI.Sprite;
-        private foreground: PIXI.Sprite;
-        private foreground2: PIXI.Sprite;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            PIXI.loader.add('pixie', '../../_assets/spine/pixie.json').load(this.onAssetsLoaded);
-
-        }
-
-        private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
-
-            this.background = PIXI.Sprite.fromImage('../../_assets/spine/iP4_BGtile.jpg');
-            this.background2 = PIXI.Sprite.fromImage('../../_assets/spine/iP4_BGtile.jpg');
-            this.stage.addChild(this.background);
-            this.stage.addChild(this.background2);
-
-            this.foreground = PIXI.Sprite.fromImage('../../_assets/spine/iP4_ground.png');
-            this.foreground2 = PIXI.Sprite.fromImage('../../_assets/spine/iP4_ground.png');
-            this.stage.addChild(this.foreground);
-            this.stage.addChild(this.foreground2);
-            this.foreground.position.y = this.foreground2.position.y = 640 - this.foreground2.height;
-
-            this.pixie = new PIXI.spine.Spine(res.pixie.spineData);
-
-            var scale = 0.3;
-
-            this.pixie.position.x = 1024 / 3;
-            this.pixie.position.y = 500;
-
-            this.pixie.scale.x = this.pixie.scale.y = scale;
-
-            this.stage.addChild(this.pixie);
-
-            this.pixie.stateData.setMix('running', 'jump', 0.2);
-            this.pixie.stateData.setMix('jump', 'running', 0.4);
-
-            this.pixie.state.setAnimation(0, 'running', true);
-
-            this.stage.on('mousedown', this.onTouchStart);
-            this.stage.on('touchstart', this.onTouchStart);
-
-            this.animate();
-
-        }
-
-        private onTouchStart = (): void => {
-
-            this.pixie.state.setAnimation(0, 'jump', false);
-            this.pixie.state.addAnimation(0, 'running', true, 0);
-
-        }
-
-        private animate = (): void => {
-
-            this.position += 10;
-
-            this.background.position.x = -(this.position * 0.6);
-            this.background.position.x %= 1286 * 2;
-            if (this.background.position.x < 0) {
-                this.background.position.x += 1286 * 2;
-            }
-            this.background.position.x -= 1286;
-
-            this.background2.position.x = -(this.position * 0.6) + 1286;
-            this.background2.position.x %= 1286 * 2;
-            if (this.background2.position.x < 0) {
-                this.background2.position.x += 1286 * 2;
-            }
-            this.background2.position.x -= 1286;
-
-            this.foreground.position.x = -this.position;
-            this.foreground.position.x %= 1286 * 2;
-            if (this.foreground.position.x < 0) {
-                this.foreground.position.x += 1286 * 2;
-            }
-            this.foreground.position.x -= 1286;
-
-            this.foreground2.position.x = -this.position + 1286;
-            this.foreground2.position.x %= 1286 * 2;
-            if (this.foreground2.position.x < 0) {
-                this.foreground2.position.x += 1286 * 2;
-            }
-            this.foreground2.position.x -= 1286;
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-    namespace Spine {
-
-        export class SpineBoy {
-
-            private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-            private stage: PIXI.Container;
-
-            private spineboy: PIXI.spine.Spine;
-
-            constructor() {
-
-                this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-                document.body.appendChild(this.renderer.view);
-
-                // create the root of the scene graph
-                this.stage = new PIXI.Container();
-                this.stage.interactive = true;
-
-                PIXI.loader.add('spineboy', '../../_assets/spine/spineboy.json').load(this.onAssetsLoaded);
-
-            }
-
-            private onAssetsLoaded = (loader: PIXI.loaders.Loader, res: any): void => {
-
-                // initiate the spine animation
-                this.spineboy = new PIXI.spine.Spine(res.spineboy.spineData);
-                this.spineboy.position.x = this.renderer.width / 2;
-                this.spineboy.position.y = this.renderer.height;
-                this.spineboy.scale.set(1.5);
-
-                // set up the mixes!
-                this.spineboy.stateData.setMix('walk', 'jump', 0.2);
-                this.spineboy.stateData.setMix('jump', 'walk', 0.4);
-
-                // play animation
-                this.spineboy.state.setAnimation(0, 'walk', true);
-
-                this.stage.addChild(this.spineboy);
-
-
-                this.stage.on('click', () => {
-
-                    this.spineboy.state.setAnimation(0, 'jump', false);
-                    this.spineboy.state.addAnimation(0, 'walk', true, 0);
-
-                });
-
-                this.animate();
-
-            }
-
-            private animate = (): void => {
-
-                requestAnimationFrame(this.animate);
-
-                this.renderer.render(this.stage);
-
-            }
-
-        }
-
-    }
-
-}
diff --git a/pixi-spine/tsconfig.json b/pixi-spine/tsconfig.json
deleted file mode 100644
index 8351a9fd60..0000000000
--- a/pixi-spine/tsconfig.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "commonjs",
-        "lib": [
-            "es6",
-            "dom"
-        ],
-        "noImplicitAny": true,
-        "noImplicitThis": true,
-        "strictNullChecks": false,
-        "baseUrl": "../",
-        "typeRoots": [
-            "../"
-        ],
-        "types": [],
-        "noEmit": true,
-        "forceConsistentCasingInFileNames": true
-    },
-    "files": [
-        "index.d.ts",
-        "pixi-spine-tests.ts"
-    ]
-}
\ No newline at end of file
diff --git a/pixi-spine/tslint.json b/pixi-spine/tslint.json
deleted file mode 100644
index c21d1d3fb1..0000000000
--- a/pixi-spine/tslint.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "extends": "../tslint.json",
-    "rules": {}
-}
diff --git a/pixi.js/index.d.ts b/pixi.js/index.d.ts
index bacdfd23aa..cccbc1fbd9 100644
--- a/pixi.js/index.d.ts
+++ b/pixi.js/index.d.ts
@@ -1,2891 +1,3122 @@
-// Type definitions for Pixi.js 4.3
-// Project: https://github.com/pixijs/pixi.js/
-// Definitions by: Clark Stevenson <https://github.com/clark-stevenson>
+// Type definitions for Pixi.js 4.4
+// Project: https://github.com/pixijs/pixi.js/tree/dev
+// Definitions by: clark-stevenson <https://github.com/pixijs/pixi-typescript>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+// TypeScript Version: 2.1
+
+declare namespace PIXI {
+
+    // from CONST
+    export const VERSION: typeof CONST.VERSION;
+    export const PI_2: typeof CONST.PI_2;
+    export const RAD_TO_DEG: typeof CONST.RAD_TO_DEG;
+    export const DEG_TO_RAD: typeof CONST.DEG_TO_RAD;
+    export const RENDERER_TYPE: typeof CONST.RENDERER_TYPE;
+    export const BLEND_MODES: typeof CONST.BLEND_MODES;
+    export const DRAW_MODES: typeof CONST.DRAW_MODES;
+    export const SCALE_MODES: typeof CONST.SCALE_MODES;
+    export const WRAP_MODES: typeof CONST.WRAP_MODES;
+    export const TRANSFORM_MODE: typeof CONST.TRANSFORM_MODE;
+    export const PRECISION: typeof CONST.PRECISION;
+    export const GC_MODES: typeof CONST.GC_MODES;
+    export const SHAPES: typeof CONST.SHAPES;
+    export const TEXT_GRADIENT: typeof CONST.TEXT_GRADIENT;
+
+    export function autoDetectRenderer(width: number, height: number, options?: PIXI.IRendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer;
+    export const loader: PIXI.loaders.Loader;
+
+    //////////////////////////////////////////////////////////////////////////////
+    ///////////////////////////////SETTINGS///////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    export namespace settings {
+        export let TARGET_FPMS: number;
+        export let MIPMAP_TEXTURES: boolean;
+        export let RESOLUTION: number;
+        export let FILTER_RESOLUTION: number;
+        export let SPRITE_MAX_TEXTURES: number;
+        export let SPRITE_BATCH_SIZE: number;
+        export let RETINA_PREFIX: RegExp;
+        export const RENDER_OPTIONS: {
+            view: HTMLCanvasElement | null,
+            antialias: boolean,
+            forceFXAA: boolean,
+            autoResize: boolean,
+            transparent: boolean,
+            backgroundColor: number,
+            clearBeforeRender: boolean,
+            preserveDrawingBuffer: boolean,
+            roundPixels: boolean
+        };
+        export let TRANSFORM_MODE: number;
+        export let GC_MODE: number;
+        export let GC_MAX_IDLE: number;
+        export let GC_MAX_CHECK_COUNT: number;
+        export let WRAP_MODE: number;
+        export let SCALE_MODE: number;
+        export let PRECISION: string;
+        export let UPLOADS_PER_FRAME: number;
+        export let CAN_UPLOAD_SAME_BUFFER: boolean;
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    /////////////////////////////ACCESSIBILITY////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    export namespace accessibility {
+
+        // accessibility
+        export class AccessibilityManager {
+
+            constructor(renderer: CanvasRenderer | WebGLRenderer);
+
+            protected div: HTMLElement;
+            protected pool: HTMLElement[];
+            protected renderId: number;
+            debug: boolean;
+            renderer: SystemRenderer;
+            protected children: IAccessibleTarget[];
+            protected isActive: boolean;
+
+            protected activate(): void;
+            protected deactivate(): void;
+            protected updateAccessibleObjects(displayObject: DisplayObject): void;
+            protected update(): void;
+            protected capHitArea(hitArea: IHitArea): void;
+            protected addChild(displayObject: DisplayObject): void;
+            protected _onClick(e: interaction.InteractionEvent): void;
+            protected _onFocus(e: interaction.InteractionEvent): void;
+            protected _onFocusOut(e: interaction.InteractionEvent): void;
+            protected _onKeyDown(e: interaction.InteractionEvent): void;
+            protected _onMouseMove(): void;
+
+            destroy(): void;
+
+        }
+        export interface IAccessibleTarget {
+
+            accessible: boolean;
+            accessibleTitle: string | null;
+            accessibleHint: string | null;
+            tabIndex: number;
+
+        }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////////CORE//////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    // const
+
+    export namespace CONST {
+        export const VERSION: string;
+        export const PI_2: number;
+        export const RAD_TO_DEG: number;
+        export const DEG_TO_RAD: number;
+        export const TARGET_FPMS: number;
+        export const RENDERER_TYPE: {
+            UNKNOWN: number;
+            WEBGL: number;
+            CANVAS: number;
+        };
+        export const BLEND_MODES: {
+            NORMAL: number;
+            ADD: number;
+            MULTIPLY: number;
+            SCREEN: number;
+            OVERLAY: number;
+            DARKEN: number;
+            LIGHTEN: number;
+            COLOR_DODGE: number;
+            COLOR_BURN: number;
+            HARD_LIGHT: number;
+            SOFT_LIGHT: number;
+            DIFFERENCE: number;
+            EXCLUSION: number;
+            HUE: number;
+            SATURATION: number;
+            COLOR: number;
+            LUMINOSITY: number;
+        };
+        export const DRAW_MODES: {
+            POINTS: number;
+            LINES: number;
+            LINE_LOOP: number;
+            LINE_STRIP: number;
+            TRIANGLES: number;
+            TRIANGLE_STRIP: number;
+            TRIANGLE_FAN: number;
+        };
+        export const SCALE_MODES: {
+            LINEAR: number,
+            NEAREST: number
+        };
+        export const GC_MODES: {
+            AUTO: number;
+            MANUAL: number;
+        };
+        export const WRAP_MODES: {
+            CLAMP: number;
+            MIRRORED_REPEAT: number;
+            REPEAT: number;
+        };
+        export const TRANSFORM_MODE: {
+            DEFAULT: number;
+            DYNAMIC: number;
+            STATIC: number;
+        };
+        export const URL_FILE_EXTENSION: RegExp | string;
+        export const DATA_URI: RegExp | string;
+        export const SVG_SIZE: RegExp | string;
+        export const SHAPES: {
+            POLY: number;
+            RECT: number;
+            CIRC: number;
+            ELIP: number;
+            RREC: number;
+        };
+        export const PRECISION: {
+            LOW: string;
+            MEDIUM: string;
+            HIGH: string;
+        };
+        export const TEXT_GRADIENT: {
+            LINEAR_VERTICAL: number;
+            LINEAR_HORIZONTAL: number;
+        };
+    }
+
+    // display
+
+    export interface IApplicationOptions extends IRendererOptions {
+
+        view?: HTMLCanvasElement;
+        transparent?: boolean;
+        autoResize?: boolean;
+        antialias?: boolean;
+        resolution?: number;
+        clearBeforeRender?: boolean;
+        backgroundColor?: number;
+        roundPixels?: boolean;
+        context?: WebGLRenderingContext;
+        preserveDrawingBuffer?: boolean;
+        legacy?: boolean;
+
+    }
+
+    export class Application {
+
+        constructor(width?: number, height?: number, options?: IApplicationOptions, noWebGL?: boolean, useSharedTicker?: boolean);
+
+        private _ticker: ticker.Ticker;
+
+        renderer: PIXI.WebGLRenderer | PIXI.CanvasRenderer;
+        stage: Container;
+        ticker: ticker.Ticker;
+        readonly screen: Rectangle;
+
+        stop(): void;
+        start(): void;
+        render(): void;
+        destroy(removeView?: boolean): void;
+        readonly view: HTMLCanvasElement;
+
+    }
+
+    export interface IDestroyOptions {
+        children?: boolean;
+        texture?: boolean;
+        baseTexture?: boolean;
+    }
+    export class Bounds {
+
+        minX: number;
+        minY: number;
+        maxX: number;
+        maxY: number;
+        rect: Rectangle;
+
+        isEmpty(): boolean;
+        clear(): void;
+
+        getRectangle(rect?: Rectangle): Rectangle;
+        addPoint(point: Point): void;
+        addQuad(vertices: number[]): Bounds | undefined;
+        addFrame(transform: Transform, x0: number, y0: number, x1: number, y1: number): void;
+        addVertices(transform: Transform, vertices: number[], beginOffset: number, endOffset: number): void;
+        addBounds(bounds: Bounds): void;
+        addBoundsMask(bounds: Bounds, mask: Bounds): void;
+        addBoundsArea(bounds: Bounds, area: Rectangle): void;
+
+    }
+    export class Container extends DisplayObject {
+
+        // begin extras.getChildByName
+        getChildByName(name: string): DisplayObject;
+        // end extras.getChildByName
+
+        children: DisplayObject[];
+        width: number;
+        height: number;
+
+        protected onChildrenChange: (...args: any[]) => void;
+        addChild<T extends DisplayObject>(child: T, ...additionalChildren: DisplayObject[]): T;
+        addChildAt<T extends DisplayObject>(child: T, index: number): T;
+        swapChildren(child: DisplayObject, child2: DisplayObject): void;
+        getChildIndex(child: DisplayObject): number;
+        setChildIndex(child: DisplayObject, index: number): void;
+        getChildAt(index: number): DisplayObject;
+        removeChild(child: DisplayObject): DisplayObject;
+        removeChildAt(index: number): DisplayObject;
+        removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[];
+        updateTransform(): void;
+        calculateBounds(): void;
+        protected _calculateBounds(): void;
+        protected containerUpdateTransform(): void;
+        renderWebGL(renderer: WebGLRenderer): void;
+        renderAdvancedWebGL(renderer: WebGLRenderer): void;
+        protected _renderWebGL(renderer: WebGLRenderer): void;
+        protected _renderCanvas(renderer: CanvasRenderer): void;
+        renderCanvas(renderer: CanvasRenderer): void;
+        destroy(options?: IDestroyOptions | boolean): void;
+
+        once(event: "added", fn: (displayObject: DisplayObject) => void, context?: any): this;
+        once(event: "removed", fn: (DisplayObject: DisplayObject) => void, context?: any): this;
+        once(event: string, fn: Function, context?: any): this;
+        on(event: "added", fn: (displayObject: DisplayObject) => void, context?: any): this;
+        on(event: "removed", fn: (DisplayObject: DisplayObject) => void, context?: any): this;
+        on(event: string, fn: Function, context?: any): this;
+        off(event: string, fn: Function, context?: any): this;
+
+    }
+    export class DisplayObject extends utils.EventEmitter implements interaction.InteractiveTarget, accessibility.IAccessibleTarget {
+
+        // begin extras.cacheAsBitmap
+        protected _cacheAsBitmap: boolean;
+        protected _cacheData: boolean;
+        cacheAsBitmap: boolean;
+        protected _renderCachedWebGL(renderer: WebGLRenderer): void;
+        protected _initCachedDisplayObject(renderer: WebGLRenderer): void;
+        protected _renderCachedCanvas(renderer: CanvasRenderer): void;
+        protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void;
+        protected _calculateCachedBounds(): Rectangle;
+        protected _getCachedLocalBounds(): Rectangle;
+        protected _destroyCachedDisplayObject(): void;
+        protected _cacheAsBitmapDestroy(): void;
+        // end extras.cacheAsBitmap
+
+        // begin extras.getChildByName
+        name: string | null;
+        // end extras.getChildByName
+
+        // begin extras.getGlobalPosition
+        getGlobalPosition(point?: Point, skipUpdate?: boolean): Point;
+        // end extras.getGlobalPosition
+
+        // begin accessible target
+        accessible: boolean;
+        accessibleTitle: string | null;
+        accessibleHint: string | null;
+        tabIndex: number;
+        // end accessible target
+
+        // begin interactive target
+        interactive: boolean;
+        interactiveChildren: boolean;
+        hitArea: PIXI.Rectangle | PIXI.Circle | PIXI.Ellipse | PIXI.Polygon | PIXI.RoundedRectangle;
+        buttonMode: boolean;
+        cursor: string;
+        trackedPointers(): { [key: number]: interaction.InteractionTrackingData; };
+        // depricated
+        defaultCursor: string;
+        // end interactive target
+
+        transform: TransformBase;
+        alpha: number;
+        visible: boolean;
+        renderable: boolean;
+        parent: Container;
+        worldAlpha: number;
+        filterArea: Rectangle;
+        protected _filters: Filter[] | null;
+        protected _enabledFilters: Filter[] | null;
+        protected _bounds: Bounds;
+        protected _boundsID: number;
+        protected _lastBoundsID: number;
+        protected _boundsRect: Rectangle;
+        protected _localBoundsRect: Rectangle;
+        protected _mask: PIXI.Graphics | PIXI.Sprite;
+        x: number;
+        y: number;
+        worldTransform: Matrix;
+        localTransform: Matrix;
+        position: Point;
+        scale: Point;
+        pivot: Point;
+        skew: Point;
+        rotation: number;
+        worldVisible: boolean;
+        mask: PIXI.Graphics | PIXI.Sprite;
+        filters: Filter[] | null;
+
+        updateTransform(): void;
+        protected displayObjectUpdateTransform(): void;
+        protected _recursivePostUpdateTransform(): void;
+        getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle;
+        getLocalBounds(rect?: Rectangle): Rectangle;
+        toGlobal(position: Point, point?: Point, skipUpdate?: boolean): Point;
+        toLocal(position: Point, from?: DisplayObject, point?: Point, skipUpdate?: boolean): Point;
+        renderWebGL(renderer: WebGLRenderer): void;
+        renderCanvas(renderer: CanvasRenderer): void;
+        setParent(container: Container): Container;
+        setTransform(x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, skewX?: number, skewY?: number, pivotX?: number, pivotY?: number): DisplayObject;
+        destroy(): void;
+
+        on(event: string, fn: Function, context?: any): this;
+        once(event: string, fn: Function, context?: any): this;
+        off(event: string, fn: Function, context?: any): this;
+
+        /*
+         on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+
+         once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): this;
+         */
+
+    }
+
+    export class TransformBase {
+
+        static IDENTITY: TransformBase;
+
+        worldTransform: Matrix;
+        localTransform: Matrix;
+        protected _worldID: number;
+        updateLocalTransform(): void;
+        updateTransform(parentTransform: TransformBase): void;
+        updateWorldTransform(parentTransform: TransformBase): void;
+
+    }
+    export class TransformStatic extends TransformBase {
+
+        position: ObservablePoint;
+        scale: ObservablePoint;
+        pivot: ObservablePoint;
+        skew: ObservablePoint;
+
+        protected _rotation: number;
+        protected _sr?: number;
+        protected _cr?: number;
+        protected _cy?: number;
+        protected _sy?: number;
+        protected _nsx?: number;
+        protected _cx?: number;
+        protected _currentLocalID: number;
+
+        protected onChange(): void;
+        updateSkew(): void;
+        updateLocalTransform(): void;
+        updateTransform(parentTransform: TransformBase): void;
+        setFromMatrix(matrix: Matrix): void;
+
+        rotation: number;
+
+    }
+    export class Transform extends TransformBase {
+
+        constructor();
+
+        position: Point;
+        scale: Point;
+        skew: ObservablePoint;
+        pivot: Point;
+
+        protected _rotation: number;
+        protected _sr?: number;
+        protected _cr?: number;
+        protected _cy?: number;
+        protected _sy?: number;
+        protected _nsx?: number;
+        protected _cx?: number;
+
+        updateSkew(): void;
+        setFromMatrix(matrix: Matrix): void;
+
+        rotation: number;
+
+    }
+
+    // graphics
+
+    export class GraphicsData {
+
+        constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, nativeLines: boolean, shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon);
+
+        lineWidth: number;
+        nativeLines: boolean;
+        lineColor: number;
+        lineAlpha: number;
+        protected _lineTint: number;
+        fillColor: number;
+        fillAlpha: number;
+        protected _fillTint: number;
+        fill: boolean;
+        protected holes: IShape[];
+        shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon;
+        type?: number;
+        clone(): GraphicsData;
+        addHole(shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon): void;
+        destroy(options?: IDestroyOptions | boolean): void;
+
+    }
+    export class Graphics extends Container {
+
+        constructor(nativeLines?: boolean);
+
+        fillAlpha: number;
+        lineWidth: number;
+        nativeLines: boolean;
+        lineColor: number;
+        protected graphicsData: GraphicsData[];
+        tint: number;
+        protected _prevTint: number;
+        blendMode: number;
+        currentPath: GraphicsData;
+        protected _webGL: any;
+        isMask: boolean;
+        boundsPadding: number;
+        protected _localBounds: Bounds;
+        dirty: boolean;
+        fastRectDirty: number;
+        clearDirty: number;
+        boundsDirty: number;
+        protected cachedSpriteDirty: boolean;
+        protected _spriteRect: Rectangle;
+        protected _fastRect: boolean;
+
+        static _SPRITE_TEXTURE: Texture;
+
+        clone(): Graphics;
+        lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics;
+        moveTo(x: number, y: number): Graphics;
+        lineTo(x: number, y: number): Graphics;
+        quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics;
+        bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics;
+        arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics;
+        arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics;
+        beginFill(color: number, alpha?: number): Graphics;
+        endFill(): Graphics;
+        drawRect(x: number, y: number, width: number, height: number): Graphics;
+        drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics;
+        drawCircle(x: number, y: number, radius: number): Graphics;
+        drawEllipse(x: number, y: number, width: number, height: number): Graphics;
+        drawPolygon(path: number[] | Point[]): Graphics;
+        clear(): Graphics;
+        isFastRect(): boolean;
+        protected _renderCanvas(renderer: CanvasRenderer): void;
+        protected _calculateBounds(): Rectangle;
+        protected _renderSpriteRect(renderer: PIXI.SystemRenderer): void;
+        containsPoint(point: Point): boolean;
+        updateLocalBounds(): void;
+        drawShape(shape: IShape | Circle | Rectangle | Ellipse | Polygon | RoundedRectangle): GraphicsData;
+        generateCanvasTexture(scaleMode?: number, resolution?: number): Texture;
+        protected closePath(): Graphics;
+        protected addHole(): Graphics;
+        destroy(options?: IDestroyOptions | boolean): void;
+
+    }
+    export class CanvasGraphicsRenderer {
+
+        constructor(renderer: SystemRenderer);
+        render(graphics: Graphics): void;
+        protected updateGraphicsTint(graphics: Graphics): void;
+        protected renderPolygon(points: Point[], close: boolean, context: CanvasRenderingContext2D): void;
+        destroy(): void;
+
+    }
+    export class GraphicsRenderer extends ObjectRenderer {
+
+        constructor(renderer: PIXI.CanvasRenderer);
+
+        protected graphicsDataPool: GraphicsData[];
+        protected primitiveShader: PrimitiveShader;
+        gl: WebGLRenderingContext;
+
+        CONTEXT_UID: number;
+
+        destroy(): void;
+        render(graphics: Graphics): void;
+        protected updateGraphics(graphics: PIXI.Graphics): void;
+        getWebGLData(webGL: WebGLRenderingContext, type: number): WebGLGraphicsData;
+
+    }
+    export class WebGLGraphicsData {
+
+        constructor(gl: WebGLRenderingContext, shader: glCore.GLShader, attribsState: glCore.IAttribState);
+
+        gl: WebGLRenderingContext;
+        color: number[];
+        points: Point[];
+        indices: number[];
+        buffer: WebGLBuffer;
+        indexBuffer: WebGLBuffer;
+        dirty: boolean;
+        glPoints: number[];
+        glIndices: number[];
+        shader: glCore.GLShader;
+        vao: glCore.VertexArrayObject;
+
+        reset(): void;
+        upload(): void;
+        destroy(): void;
+
+    }
+    export class PrimitiveShader extends glCore.GLShader { }
+
+    // math
+
+    export namespace GroupD8 {
+
+        export const E: number;
+        export const SE: number;
+        export const S: number;
+        export const SW: number;
+        export const W: number;
+        export const NW: number;
+        export const N: number;
+        export const NE: number;
+        export const MIRROR_HORIZONTAL: number;
+        export const MIRROR_VERTICAL: number;
+
+        export function uX(ind: number): number;
+        export function uY(ind: number): number;
+        export function vX(ind: number): number;
+        export function vY(ind: number): number;
+        export function inv(rotation: number): number;
+        export function add(rotationSecond: number, rotationFirst: number): number;
+        export function sub(rotationSecond: number, rotationFirst: number): number;
+        export function rotate180(rotation: number): number;
+        export function isSwapWidthHeight(rotation: number): boolean;
+        export function byDirection(dx: number, dy: number): number;
+        export function matrixAppendRotationInv(matrix: Matrix, rotation: number, tx: number, ty: number): void;
+
+    }
+    export class Matrix {
+
+        constructor(a?: number, b?: number, c?: number, d?: number, tx?: number, ty?: number);
+
+        a: number;
+        b: number;
+        c: number;
+        d: number;
+        tx: number;
+        ty: number;
+
+        fromArray(array: number[]): void;
+        set(a: number, b: number, c: number, d: number, tx: number, ty: number): Matrix;
+        toArray(transpose?: boolean, out?: number[]): number[];
+        apply(pos: Point, newPos?: Point): Point;
+        applyInverse(pos: Point, newPos?: Point): Point;
+        translate(x: number, y: number): Matrix;
+        scale(x: number, y: number): Matrix;
+        rotate(angle: number): Matrix;
+        append(matrix: Matrix): Matrix;
+        setTransform(x: number, y: number, pivotX: number, pivotY: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number): PIXI.Matrix;
+        prepend(matrix: Matrix): Matrix;
+        invert(): Matrix;
+        identity(): Matrix;
+        decompose(transform: TransformBase): TransformBase;
+        clone(): Matrix;
+        copy(matrix: Matrix): Matrix;
+
+        static IDENTITY: Matrix;
+        static TEMP_MATRIX: Matrix;
+
+    }
+    export class ObservablePoint {
+
+        constructor(cb: Function, scope?: any, x?: number, y?: number);
+
+        x: number;
+        y: number;
+        cb: () => any;
+        scope: any;
+
+        set(x?: number, y?: number): void;
+        copy(point: Point | ObservablePoint): void;
+
+    }
+    export class Point {
+
+        constructor(x?: number, y?: number);
+
+        x: number;
+        y: number;
+
+        clone(): Point;
+        copy(p: Point): void;
+        equals(p: Point): boolean;
+        set(x?: number, y?: number): void;
+
+    }
+
+    export interface IShape {
+    }
+    export interface IHitArea extends IShape {
+
+        contains(x: number, y: number): boolean;
+
+    }
+    export class Circle {
+
+        constructor(x?: number, y?: number, radius?: number);
+
+        x: number;
+        y: number;
+        radius: number;
+        type: number;
+
+        clone(): Circle;
+        contains(x: number, y: number): boolean;
+        getBounds(): Rectangle;
+
+    }
+    export class Ellipse {
+
+        constructor(x?: number, y?: number, width?: number, height?: number);
+
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        type: number;
+
+        clone(): Ellipse;
+        contains(x: number, y: number): boolean;
+        getBounds(): Rectangle;
+
+    }
+    export class Polygon {
+
+        constructor(points: Point[] | number[]);
+        constructor(...points: Point[]);
+        constructor(...points: number[]);
+
+        closed: boolean;
+        points: number[];
+        type: number;
+
+        clone(): Polygon;
+        contains(x: number, y: number): boolean;
+        close(): void;
+
+    }
+    export class Rectangle {
+
+        constructor(x?: number, y?: number, width?: number, height?: number);
+
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        type: number;
+        left: number;
+        right: number;
+        top: number;
+        bottom: number;
+
+        static EMPTY: Rectangle;
+
+        clone(): Rectangle;
+        copy(rectangle: Rectangle): Rectangle;
+        contains(x: number, y: number): boolean;
+        pad(paddingX: number, paddingY: number): void;
+        fit(rectangle: Rectangle): void;
+        enlarge(rectangle: Rectangle): void;
+
+    }
+    export class RoundedRectangle {
+
+        constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
+
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        radius: number;
+        type: number;
+
+        clone(): RoundedRectangle;
+        contains(x: number, y: number): boolean;
+
+    }
+
+    // renderers
+
+    export interface IRendererOptions {
+
+        view?: HTMLCanvasElement;
+        transparent?: boolean;
+        autoResize?: boolean;
+        antialias?: boolean;
+        resolution?: number;
+        clearBeforeRender?: boolean;
+        backgroundColor?: number;
+        roundPixels?: boolean;
+        context?: WebGLRenderingContext;
+
+    }
+    export class SystemRenderer extends utils.EventEmitter {
+
+        constructor(system: string, screenWidth?: number, screenHeight?: number, options?: IRendererOptions);
+
+        type: number;
+        screen: Rectangle;
+        readonly width: number;
+        readonly height: number;
+        view: HTMLCanvasElement;
+        resolution: number;
+        transparent: boolean;
+        autoResize: boolean;
+        blendModes: any; // todo?
+        preserveDrawingBuffer: boolean;
+        clearBeforeRender: boolean;
+        roundPixels: boolean;
+        protected _backgroundColor: number;
+        protected _backgroundColorRgba: number[];
+        protected _backgroundColorString: string;
+        protected _tempDisplayObjectParent: Container;
+        protected _lastObjectRendered: DisplayObject;
+        backgroundColor: number;
+
+        resize(screenWidth: number, screenHeight: number): void;
+        generateTexture(displayObject: DisplayObject, scaleMode?: number, resolution?: number): RenderTexture;
+        render(...args: any[]): void;
+        destroy(removeView?: boolean): void;
+
+    }
+    export class CanvasRenderer extends SystemRenderer {
+
+        // plugintarget mixin start
+        static __plugins: Object;
+        static registerPlugin(pluginName: string, ctor: Function): void;
+        plugins: any;
+        initPlugins(): void;
+        destroyPlugins(): void;
+        // plugintarget mixin end
+
+        // from InteractionManager
+        interaction?: interaction.InteractionManager;
+
+        constructor(screenWidth?: number, screenHeight?: number, options?: IRendererOptions);
+
+        rootContext: CanvasRenderingContext2D;
+        rootResolution?: number;
+        refresh: boolean;
+        maskManager: CanvasMaskManager;
+        smoothProperty: string;
+        extract: extract.CanvasExtract;
+
+        context: CanvasRenderingContext2D | null;
+
+        render(displayObject: PIXI.DisplayObject, renderTexture?: PIXI.RenderTexture, clear?: boolean, transform?: PIXI.Transform, skipUpdateTransform?: boolean): void
+        setBlendMode(blendMode: number): void;
+        destroy(removeView?: boolean): void;
+        clear(clearColor?: string): void;
+
+        on(event: "prerender", fn: () => void, context?: any): this;
+        on(event: "postrender", fn: () => void, context?: any): this;
+        on(event: string, fn: Function, context?: any): this;
+        once(event: "prerender", fn: () => void, context?: any): this;
+        once(event: "postrender", fn: () => void, context?: any): this;
+        once(event: string, fn: Function, context?: any): this;
+        off(event: string, fn: Function, context?: any): this;
+
+    }
+    export class CanvasMaskManager {
+
+        constructor(renderer: CanvasRenderer);
+
+        pushMask(maskData: any): void;
+        protected renderGraphicsShape(graphics: Graphics): void;
+        popMask(renderer: WebGLRenderer | CanvasRenderer): void;
+        destroy(): void;
+
+    }
+    export class CanvasRenderTarget {
+
+        constructor(width: number, height: number, resolution: number);
+
+        canvas: HTMLCanvasElement;
+        context: CanvasRenderingContext2D;
+        resolution: number;
+
+        width: number;
+        height: number;
+
+        clear(): void;
+        resize(width: number, height: number): void;
+        destroy(): void;
+
+    }
+
+    export interface IWebGLRendererOptions {
+
+        view?: HTMLCanvasElement;
+        transparent?: boolean;
+        autoResize?: boolean;
+        antialias?: boolean;
+        forceFXAA?: boolean;
+        resolution?: number;
+        clearBeforeRender?: boolean;
+        preserveDrawingBuffer?: boolean;
+        roundPixels?: boolean;
+        legacy?: boolean;
+
+    }
+    export class WebGLRenderer extends SystemRenderer {
+
+        // plugintarget mixin start
+        static __plugins: Object;
+        static registerPlugin(pluginName: string, ctor: Function): void;
+        plugins: any;
+        initPlugins(): void;
+        destroyPlugins(): void;
+        // plugintarget mixin end
+
+        // from InteractionManager
+        interaction: interaction.InteractionManager;
+
+        constructor(screenWidth?: number, screenHeight?: number, options?: IWebGLRendererOptions);
+
+        protected _contextOptions: {
+            alpha: boolean;
+            antiAlias?: boolean;
+            premultipliedAlpha: boolean;
+            stencil: boolean;
+            preseveDrawingBuffer?: boolean;
+        };
+        protected _backgroundColorRgba: number[];
+        maskManager: MaskManager;
+        stencilManager?: StencilManager;
+        emptyRenderer: ObjectRenderer;
+        currentRenderer: ObjectRenderer;
+        gl: WebGLRenderingContext;
+        CONTEXT_UID: number;
+        state?: WebGLState;
+        renderingToScreen: boolean;
+        boundTextures: Texture[];
+        filterManager: FilterManager;
+        textureManager?: TextureManager;
+        extract: extract.WebGLExtract;
+        protected drawModes: any;
+        protected _activeShader: Shader;
+        _activeRenderTarget: RenderTarget;
+        protected _initContext(): void;
+
+        render(displayObject: PIXI.DisplayObject, renderTexture?: PIXI.RenderTexture, clear?: boolean, transform?: PIXI.Transform, skipUpdateTransform?: boolean): void
+        setObjectRenderer(objectRenderer: ObjectRenderer): void;
+        flush(): void;
+        setBlendMode(blendMode: number): void;
+        clear(clearColor?: number): void;
+        setTransform(matrix: Matrix): void;
+        clearRenderTexture(renderTexture: RenderTexture, clearColor?: number): WebGLRenderer;
+        bindRenderTexture(renderTexture: RenderTexture, transform: Transform): WebGLRenderer;
+        bindRenderTarget(renderTarget: RenderTarget): WebGLRenderer;
+        bindShader(shader: Shader, autoProject?: boolean): WebGLRenderer;
+        bindTexture(texture: Texture | BaseTexture, location?: number, forceLocation?: boolean): number;
+        unbindTexture(texture: Texture | BaseTexture): WebGLRenderer | undefined;
+        createVao(): glCore.VertexArrayObject;
+        bindVao(vao: glCore.VertexArrayObject): WebGLRenderer;
+        reset(): WebGLRenderer;
+        handleContextLost: (event: WebGLContextEvent) => void;
+        handleContextRestored: () => void;
+        destroy(removeView?: boolean): void;
+
+        on(event: "context", fn: (gl: WebGLRenderingContext) => void, context?: any): this;
+        on(event: "prerender", fn: () => void, context?: any): this;
+        on(event: "postrender", fn: () => void, context?: any): this;
+        on(event: string, fn: Function, context?: any): this;
+        once(event: "context", fn: (gl: WebGLRenderingContext) => void, context?: any): this;
+        once(event: "prerender", fn: () => void, context?: any): this;
+        once(event: "postrender", fn: () => void, context?: any): this;
+        once(event: string, fn: Function, context?: any): this;
+        off(event: string, fn: Function, context?: any): this;
+
+    }
+    export class WebGLState {
+
+        constructor(gl: WebGLRenderingContext);
+
+        activeState: number[];
+        defaultState: number[];
+        stackIndex: number;
+        stack: number[];
+        gl: WebGLRenderingContext;
+        maxAttribs: number;
+        attribState: glCore.IAttribState;
+        nativeVaoExtension: any;
+
+        push(): void;
+        pop(): void;
+        setState(state: number[]): void;
+        setBlend(value: number): void;
+        setBlendMode(value: number): void;
+        setDepthTest(value: number): void;
+        setCullFace(value: number): void;
+        setFrontFace(value: number): void;
+        resetAttributes(): void;
+        resetToDefault(): void;
+
+    }
+    export class TextureManager {
+
+        constructor(renderer: WebGLRenderer);
+
+        renderer: WebGLRenderer;
+        gl: WebGLRenderingContext;
+        protected _managedTextures: WebGLTexture[];
+
+        bindTexture(): void;
+        getTexture(): WebGLTexture;
+        updateTexture(texture: BaseTexture | Texture): WebGLTexture;
+        destroyTexture(texture: BaseTexture, _skipRemove?: boolean): void;
+        removeAll(): void;
+        destroy(): void;
+
+    }
+    export class TextureGarbageCollector {
+
+        constructor(renderer: WebGLRenderer);
+
+        renderer: WebGLRenderer;
+        count: number;
+        checkCount: number;
+        maxIdle: number;
+        checkCountMax: number;
+        mode: number;
+
+        update(): void;
+        run(): void;
+        unload(): void;
+
+    }
+    export abstract class ObjectRenderer extends WebGLManager {
+
+        constructor(renderer: WebGLRenderer);
+
+        start(): void;
+        stop(): void;
+        flush(): void;
+
+        render(...args: any[]): void;
+
+    }
+    export class Quad {
+
+        constructor(gl: WebGLRenderingContext);
+
+        gl: WebGLRenderingContext;
+        vertices: number[];
+        uvs: number[];
+        interleaved: number[];
+        indices: number[];
+        vertexBuffer: WebGLBuffer;
+        vao: glCore.VertexArrayObject;
+        initVao(shader: glCore.GLShader): void;
+        map(targetTextureFrame: Rectangle, destinationFrame: Rectangle): Quad;
+        upload(): Quad;
+        destroy(): void;
+
+    }
+    export class RenderTarget {
+
+        constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root?: boolean);
+
+        gl: WebGLRenderingContext;
+        frameBuffer: glCore.GLFramebuffer;
+        texture: Texture;
+        clearColor: number[];
+        size: Rectangle;
+        resolution: number;
+        projectionMatrix: Matrix;
+        transform: Matrix;
+        frame: Rectangle;
+        defaultFrame: Rectangle;
+        destinationFrame: Rectangle;
+        sourceFrame?: Rectangle;
+        stencilBuffer: glCore.GLFramebuffer;
+        stencilMaskStack: Graphics[];
+        filterData: {
+            index: number,
+            stack: {
+                renderTarget: RenderTarget,
+                filter: any[];
+                bounds: Rectangle
+            }[]
+        };
+        scaleMode: number;
+        root: boolean;
+
+        clear(clearColor?: number[]): void;
+        attachStencilBuffer(): void;
+        setFrame(destinationFrame: Rectangle, sourceFrame: Rectangle): void;
+        activate(): void;
+        calculateProjection(destinationFrame: Rectangle, sourceFrame: Rectangle): void;
+        resize(width: number, height: number): void;
+        destroy(): void;
+
+    }
+
+    export class BlendModeManager extends WebGLManager {
+
+        constructor(renderer: WebGLRenderer);
+
+        currentBlendMode: number;
+
+        setBlendMode(blendMode: number): boolean;
+
+    }
+    export class FilterManager extends WebGLManager {
+
+        constructor(renderer: WebGLRenderer);
+
+        gl: WebGLRenderingContext;
+        quad: Quad;
+        stack: {
+            renderTarget: RenderTarget;
+            sourceFrame: Rectangle;
+            destinationFrame: Rectangle;
+            filters: Filter[];
+            target: any;
+            resolution: number;
+        }[];
+        stackIndex: number;
+        shaderCache: any;
+        filterData: any;
+
+        pushFilter(target: RenderTarget, filters: Filter[]): void;
+        popFilter(): void;
+        applyFilter(shader: glCore.GLShader | Filter, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void;
+        syncUniforms(shader: glCore.GLShader, filter: Filter): void;
+        getRenderTarget(clear?: boolean, resolution?: number): RenderTarget;
+        returnRenderTarget(renderTarget: RenderTarget): RenderTarget;
+        calculateScreenSpaceMatrix(outputMatrix: Matrix): Matrix;
+        calculateNormalisedScreenSpaceMatrix(outputMatrix: Matrix): Matrix;
+        calculateSpriteMatrix(outputMatrix: Matrix, sprite: Sprite): Matrix;
+        destroy(): void;
+        emptyPool(): void;
+        getPotRenderTarget(gl: WebGLRenderingContext, minWidth: number, minHeight: number, resolution: number): RenderTarget;
+        freePotRenderTarget(renderTarget: RenderTarget): void;
+
+    }
+    export class StencilMaskStack {
+
+        stencilStack: any[];
+        reverse: boolean;
+        count: number;
+
+    }
+    export class MaskManager extends WebGLManager {
+
+        scissor: boolean;
+        scissorData: any;
+        scissorRenderTarget: RenderTarget;
+        enableScissor: boolean;
+        alphaMaskPool: number[];
+        alphaMaskIndex: number;
+        pushMask(target: RenderTarget, maskData: Sprite | Graphics): void;
+        popMask(target: RenderTarget, maskData: Sprite | Graphics): void;
+        pushSpriteMask(target: RenderTarget, maskData: Sprite | Graphics): void;
+        popSpriteMask(): void;
+        pushStencilMask(maskData: Sprite | Graphics): void;
+        popStencilMask(): void;
+        pushScissorMask(target: RenderTarget, maskData: Sprite | Graphics): void;
+        popScissorMask(): void;
+
+    }
+    export class StencilManager extends WebGLManager {
+
+        constructor(renderer: WebGLRenderer);
+
+        stencilMaskStack: Graphics[];
+
+        setMaskStack(stencilMasStack: Graphics[]): void;
+        pushStencil(graphics: Graphics): void;
+        popStencil(): void;
+        destroy(): void;
+
+    }
+    export class WebGLManager {
+
+        constructor(renderer: WebGLRenderer);
+
+        renderer: SystemRenderer;
+        onContextChange(): void;
+        destroy(): void;
+
+    }
+    export interface IUniformData {
+
+        type: string;
+        value: any;
+
+        // name is set by pixi if uniforms were automatically extracted from shader code, but not used anywhere
+        name?: string;
+
+    }
+    export class Filter {
+
+        constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: { [name: string]: IUniformData });
+
+        vertextSrc?: string;
+        fragmentSrc: string;
+        blendMode: number;
+        protected uniformData: { [name: string]: IUniformData };
+        uniforms: { [name: string]: any } | any;
+        glShaders: any;
+        glShaderKey?: number;
+        padding: number;
+        resolution: number;
+        enabled: boolean;
+        apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget, clear?: boolean): void;
+
+        static defaultVertexSrc: string;
+        static defaultFragmentSrc: string;
+
+    }
+    export class SpriteMaskFilter extends Filter {
+
+        constructor(sprite: Sprite);
+
+        maskSprite: Sprite;
+        maskMatrix: Matrix;
+        apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget): void;
+
+    }
+
+    // sprites
+
+    export class Sprite extends Container {
+
+        constructor(texture?: Texture);
+
+        protected _anchor: ObservablePoint;
+        anchor: ObservablePoint;
+        protected _texture: Texture;
+        protected _transformTrimmedID: number;
+        protected _textureTrimmedID: number;
+        protected _width: number;
+        protected _height: number;
+        tint: number;
+        protected _tint: number;
+        protected _tintRGB: number;
+        blendMode: number;
+        pluginName: string;
+        protected cachedTint: number;
+        texture: Texture;
+        protected textureDirty: boolean;
+        protected _textureID: number;
+        protected _transformID: number;
+        protected vertexTrimmedData: Float32Array;
+        vertexData: Float32Array;
+        width: number;
+        height: number;
+
+        protected _onTextureUpdate(): void;
+        calculateVertices(): void;
+        protected _calculateBounds(): void;
+        protected calculateTrimmedVertices(): void;
+        protected onAnchorUpdate(): void;
+        protected _renderWebGL(renderer: WebGLRenderer): void;
+        protected _renderCanvas(renderer: CanvasRenderer): void;
+        getLocalBounds(): Rectangle;
+        containsPoint(point: Point): boolean;
+        destroy(options?: IDestroyOptions | boolean): void;
+
+        static from(source: number | string | BaseTexture | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): Sprite;
+        static fromFrame(frameId: string): Sprite;
+        static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
+
+    }
+    export class BatchBuffer {
+
+        vertices: ArrayBuffer;
+        float32View: number[];
+        uint32View: number[];
+
+        destroy(): void;
+
+    }
+    export class SpriteRenderer extends ObjectRenderer {
+
+        constructor(renderer: PIXI.WebGLRenderer);
+
+        vertSize: number;
+        vertByteSize: number;
+        size: number;
+        buffers: BatchBuffer[];
+        indices: number[];
+        shaders: Shader[];
+        currentIndex: number;
+        tick: number;
+        groups: any[];
+        sprites: Sprite[];
+        vertexBuffers: number[];
+        vaos: glCore.VertexArrayObject[];
+        vaoMax: number;
+        vertexCount: number;
+
+        protected onContextChanged: () => void;
+        protected onPrerender: () => void;
+        render(sprite: Sprite): void;
+        flush(): void;
+        start(): void;
+        stop(): void;
+        destroy(): void;
+
+    }
+    export class CanvasSpriteRenderer extends ObjectRenderer {
+
+        constructor(renderer: WebGLRenderer);
+
+        render(sprite: Sprite): void;
+        destroy(): void;
+
+    }
+    export namespace CanvasTinter {
+
+        export function getTintedTexture(sprite: Sprite, color: number): HTMLCanvasElement;
+        export function tintWithMultiply(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
+        export function tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
+        export function tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
+        export function roundColor(color: number): number;
+
+        export let cacheStepsPerColorChannel: number;
+        export let convertTintToImage: boolean;
+        export let canUseMultiply: boolean;
+        export let tintMethod: Function;
+
+    }
+
+    // text
+    export interface TextStyleOptions {
+        align?: string;
+        breakWords?: boolean;
+        dropShadow?: boolean;
+        dropShadowAlpha?: number;
+        dropShadowAngle?: number;
+        dropShadowBlur?: number;
+        dropShadowColor?: string | number;
+        dropShadowDistance?: number;
+        fill?: string | string[] | number | number[] | CanvasGradient | CanvasPattern;
+        fillGradientType?: number;
+        fillGradientStops?: number[];
+        fontFamily?: string | string[];
+        fontSize?: number | string;
+        fontStyle?: string;
+        fontVariant?: string;
+        fontWeight?: string;
+        letterSpacing?: number;
+        lineHeight?: number;
+        lineJoin?: string;
+        miterLimit?: number;
+        padding?: number;
+        stroke?: string | number;
+        strokeThickness?: number;
+        textBaseline?: string;
+        trim?: boolean;
+        wordWrap?: boolean;
+        wordWrapWidth?: number;
+    }
+
+    export class TextStyle implements TextStyleOptions {
+
+        constructor(style: TextStyleOptions)
+
+        styleID: number;
+
+        clone(): TextStyle;
+        reset(): void;
+
+        protected _align: string;
+        align: string;
+        protected _breakWords: boolean;
+        breakWords: boolean;
+        protected _dropShadow: boolean;
+        dropShadow: boolean;
+        protected _dropShadowAlpha: number;
+        dropShadowAlpha: number;
+        protected _dropShadowAngle: number;
+        dropShadowAngle: number;
+        protected _dropShadowBlur: number;
+        dropShadowBlur: number;
+        protected _dropShadowColor: string | number;
+        dropShadowColor: string | number;
+        protected _dropShadowDistance: number;
+        dropShadowDistance: number;
+        protected _fill: string | string[] | number | number[] | CanvasGradient | CanvasPattern;
+        fill: string | string[] | number | number[] | CanvasGradient | CanvasPattern;
+        protected _fillGradientType: number;
+        fillGradientType: number;
+        protected _fillGradientStops: number[];
+        fillGradientStops: number[];
+        protected _fontFamily: string | string[];
+        fontFamily: string | string[];
+        protected _fontSize: number | string;
+        fontSize: number | string;
+        protected _fontStyle: string;
+        fontStyle: string;
+        protected _fontVariant: string;
+        fontVariant: string;
+        protected _fontWeight: string;
+        fontWeight: string;
+        protected _letterSpacing: number;
+        letterSpacing: number;
+        protected _lineHeight: number;
+        lineHeight: number;
+        protected _lineJoin: string;
+        lineJoin: string;
+        protected _miterLimit: number;
+        miterLimit: number;
+        protected _padding: number;
+        padding: number;
+        protected _stroke: string | number;
+        stroke: string | number;
+        protected _strokeThickness: number;
+        strokeThickness: number;
+        protected _textBaseline: string;
+        textBaseline: string;
+        protected _trim: boolean;
+        trim: boolean;
+        protected _wordWrap: boolean;
+        wordWrap: boolean;
+        protected _wordWrapWidth: number;
+        wordWrapWidth: number;
+
+    }
+
+    export class Text extends Sprite {
+
+        static getFontStyle(style: TextStyleOptions): string;
+        static calculateFontProperties(style: string): any;
+
+        constructor(text?: string, style?: TextStyleOptions, canvas?: HTMLCanvasElement);
+
+        canvas: HTMLCanvasElement;
+        context: CanvasRenderingContext2D;
+        resolution: number;
+        protected _text: string;
+        protected _style: TextStyle;
+        protected _styleListener: Function;
+        protected _font: string;
+        protected localStyleID: number;
+
+        static fontPropertiesCache: any;
+        static fontPropertiesCanvas: HTMLCanvasElement;
+        static fontPropertiesContext: CanvasRenderingContext2D;
+
+        width: number;
+        height: number;
+        style: TextStyle;
+        text: string;
+
+        protected updateText(respectDirty?: boolean): void;
+        protected drawLetterSpacing(text: string, x: number, y: number, isStroke?: boolean): void;
+        protected updateTexture(): void;
+        renderWebGL(renderer: WebGLRenderer): void;
+        protected _renderCanvas(renderer: CanvasRenderer): void;
+        protected wordWrap(text: string): string;
+        getLocalBounds(rect?: Rectangle): Rectangle;
+        protected _calculateBounds(): void;
+        protected _onStyleChange: () => void;
+        protected _generateFillStyle(style: TextStyle, lines: string[]): string | number | CanvasGradient;
+        destroy(options?: IDestroyOptions | boolean): void;
+        dirty: boolean;
+
+    }
+
+    // textures
+
+    export class BaseRenderTexture extends BaseTexture {
+
+        constructor(width?: number, height?: number, scaleMode?: number, resolution?: number);
+
+        height: number;
+        width: number;
+        realHeight: number;
+        realWidth: number;
+        resolution: number;
+        scaleMode: number;
+        hasLoaded: boolean;
+        protected _glRenderTargets: { [n: number]: WebGLTexture; };
+        protected _canvasRenderTarget: { [n: number]: WebGLTexture; };
+        valid: boolean;
+
+        resize(width: number, height: number): void;
+        destroy(): void;
+
+        once(event: "update", fn: (baseRenderTexture: BaseRenderTexture) => void, context?: any): this;
+        once(event: string, fn: Function, context?: any): this;
+        on(event: "update", fn: (baseRenderTexture: BaseRenderTexture) => void, context?: any): this;
+        on(event: string, fn: Function, context?: any): this;
+        off(event: string, fn: Function, context?: any): this;
+
+    }
+    export class BaseTexture extends utils.EventEmitter {
+
+        static from(source: string | HTMLImageElement | HTMLCanvasElement, scaleMode?: number, sourceScale?: number): BaseTexture;
+
+        constructor(source?: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, scaleMode?: number, resolution?: number);
+
+        protected uuid?: number;
+        protected touched: number;
+        resolution: number;
+        width: number;
+        height: number;
+        realWidth: number;
+        realHeight: number;
+        scaleMode: number;
+        hasLoaded: boolean;
+        isLoading: boolean;
+        wrapMode: number;
+        source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | null;
+        origSource: HTMLImageElement | null;
+        imageType: string | null;
+        sourceScale: number;
+        premultipliedAlpha: boolean;
+        imageUrl: string | null;
+        protected isPowerOfTwo: boolean;
+        mipmap: boolean;
+        wrap?: boolean;
+        protected _glTextures: any;
+        protected _enabled: number;
+        protected _id?: number;
+
+        update(): void;
+        protected _updateDimensions(): void;
+        protected _updateImageType(): void;
+        protected _loadSvgSource(): void;
+        protected _loadSvgSourceUsingDataUri(dataUri: string): void;
+        protected _loadSvgSourceUsingXhr(): void;
+        protected _loadSvgSourceUsingString(svgString: string): void;
+        protected loadSource(source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): void;
+        protected _sourceLoaded(): void;
+        destroy(): void;
+        dispose(): void;
+        updateSourceImage(newSrc: string): void;
+
+        static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number, sourceScale?: number): BaseTexture;
+        static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture;
+
+        on(event: "update", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        on(event: "loaded", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        on(event: "error", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        on(event: "dispose", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        on(event: string, fn: Function, context?: any): this;
+        once(event: "update", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        once(event: "loaded", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        once(event: "error", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        once(event: "dispose", fn: (baseTexture: BaseTexture) => void, context?: any): this;
+        once(event: string, fn: Function, context?: any): this;
+        off(event: string, fn: Function, context?: any): this;
+
+    }
+    export class RenderTexture extends Texture {
+
+        constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle);
+
+        protected legacyRenderer: any;
+        valid: boolean;
+
+        resize(width: number, height: number, doNotResizeBaseTexture?: boolean): void;
+
+        static create(width?: number, height?: number, scaleMode?: number, resolution?: number): RenderTexture;
+
+    }
+    export class Texture extends utils.EventEmitter {
+
+        static from(source: number | string | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | PIXI.BaseTexture): Texture;
+
+        constructor(baseTexture: BaseTexture, frame?: Rectangle, orig?: Rectangle, trim?: Rectangle, rotate?: number);
+
+        noFrame: boolean;
+        baseTexture: BaseTexture;
+        protected _frame: Rectangle;
+        trim?: Rectangle;
+        valid: boolean;
+        requiresUpdate: boolean;
+        protected _uvs: TextureUvs;
+        orig: Rectangle;
+        protected _updateID: number;
+        transform: any;
+
+        update(): void;
+        protected onBaseTextureLoaded(baseTexture: BaseTexture): void;
+        protected onBaseTextureUpdated(baseTexture: BaseTexture): void;
+        destroy(destroyBase?: boolean): void;
+        clone(): Texture;
+        protected _updateUvs(): void;
+
+        static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number, sourceScale?: number): Texture;
+        static fromFrame(frameId: string): Texture;
+        static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): Texture;
+        static fromVideo(video: HTMLVideoElement | string, scaleMode?: number): Texture;
+        static fromVideoUrl(videoUrl: string, scaleMode?: number): Texture;
+        static from(source: string | BaseTexture | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): Texture;
+        static fromLoader(source: HTMLImageElement | HTMLCanvasElement, imageUrl: string, name?: string): Texture;
+        static addTextureToCache(texture: Texture, id: string): void;
+        static removeTextureFromCache(id: string): Texture | undefined;
+
+        frame: Rectangle;
+        protected _rotate: boolean | 0;
+        rotate: number;
+        width: number;
+        height: number;
+
+        static EMPTY: Texture;
+
+        on(event: "update", fn: (texture: Texture) => void, context?: any): this;
+        on(event: string, fn: Function, context?: any): this;
+        once(event: "update", fn: (texture: Texture) => void, context?: any): this;
+        once(event: string, fn: Function, context?: any): this;
+        off(event: string, fn: Function, context?: any): this;
+
+    }
+    export class TextureUvs {
+
+        x0: number;
+        y0: number;
+        x1: number;
+        y1: number;
+        x2: number;
+        y2: number;
+        x3: number;
+        y3: number;
+
+        uvsUint32: Uint32Array;
+
+        protected set(frame: Rectangle, baseFrame: Rectangle, rotate: number): void;
+
+    }
 
-// from CONST
-export var VERSION: typeof CONST.VERSION;
-export var PI_2: typeof CONST.PI_2;
-export var RAD_TO_DEG: typeof CONST.RAD_TO_DEG;
-export var DEG_TO_RAD: typeof CONST.DEG_TO_RAD;
-export var RENDERER_TYPE: typeof CONST.RENDERER_TYPE;
-export var BLEND_MODES: typeof CONST.BLEND_MODES;
-export var DRAW_MODES: typeof CONST.DRAW_MODES;
-export var SCALE_MODES: typeof CONST.SCALE_MODES;
-export var WRAP_MODES: typeof CONST.WRAP_MODES;
-export var TRANSFORM_MODE: typeof CONST.TRANSFORM_MODE;
-export var PRECISION: typeof CONST.PRECISION;
-export var TEXT_STYLE_CHANGED: typeof CONST.TEXT_STYLE_CHANGED;
-export var GC_MODES: typeof CONST.GC_MODES;
-export var SHAPES: typeof CONST.SHAPES;
-export var TEXT_GRADIENT: typeof CONST.TEXT_GRADIENT;
-
-export function autoDetectRenderer(width: number, height: number, options?: PIXI.IRendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer;
-export var loader: PIXI.loaders.Loader;
-
-//////////////////////////////////////////////////////////////////////////////
-///////////////////////////////SETTINGS///////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace settings {
-	export var TARGET_FPMS: number;
-	export var MIPMAP_TEXTURES: boolean;
-	export var RESOLUTION: number;
-	export var FILTER_RESOLUTION: number;
-	export var SPRITE_MAX_TEXTURES: number;
-	export var SPRITE_BATCH_SIZE: number;
-	export var RETINA_PREFIX: RegExp;
-	export var RENDER_OPTIONS: {
-		view: HTMLCanvasElement,
-		antialias: boolean,
-		forceFXAA: boolean,
-		autoResize: boolean,
-		transparent: boolean,
-		backgroundColor: number,
-		clearBeforeRender: boolean,
-		preserveDrawingBuffer: boolean,
-		roundPixels: boolean
-	};
-	export var TRANSFORM_MODE: number;
-	export var GC_MODE: number;
-	export var GC_MAX_IDLE: number;
-	export var GC_MAX_CHECK_COUNT: number;
-	export var WRAP_MODE: number;
-	export var SCALE_MODE: number;
-	export var PRECISION: string;
-	export var UPLOADS_PER_FRAME: number;
-	export var CAN_UPLOAD_SAME_BUFFER: boolean;
-}
-
-//////////////////////////////////////////////////////////////////////////////
-/////////////////////////////ACCESSIBILITY////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace accessibility {
-
-	// accessibility
-	export class AccessibilityManager {
-
-		constructor(renderer: CanvasRenderer | WebGLRenderer);
-
-		protected div: HTMLElement;
-		protected pool: HTMLElement[];
-		protected renderId: number;
-		debug: boolean;
-		renderer: SystemRenderer;
-		protected children: IAccessibleTarget[];
-		protected isActive: boolean;
-
-		protected activate(): void;
-		protected deactivate(): void;
-		protected updateAccessibleObjects(displayObject: DisplayObject): void;
-		protected update(): void;
-		protected capHitArea(hitArea: IHitArea): void;
-		protected addChild(displayObject: DisplayObject): void;
-		protected _onClick(e: interaction.InteractionEvent): void;
-		protected _onFocus(e: interaction.InteractionEvent): void;
-		protected _onFocusOut(e: interaction.InteractionEvent): void;
-		protected _onKeyDown(e: interaction.InteractionEvent): void;
-		protected _onMouseMove(): void;
-
-		destroy(): void;
-
-	}
-	export interface IAccessibleTarget {
-
-		accessible: boolean;
-		accessibleTitle: string;
-		accessibleHint: string;
-		tabIndex: number;
-
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-////////////////////////////////CORE//////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-// const
-
-export namespace CONST {
-	export var VERSION: string;
-	export var PI_2: number;
-	export var RAD_TO_DEG: number;
-	export var DEG_TO_RAD: number;
-	export var TARGET_FPMS: number;
-	export var RENDERER_TYPE: {
-		UNKNOWN: number;
-		WEBGL: number;
-		CANVAS: number;
-	};
-	export var BLEND_MODES: {
-		NORMAL: number;
-		ADD: number;
-		MULTIPLY: number;
-		SCREEN: number;
-		OVERLAY: number;
-		DARKEN: number;
-		LIGHTEN: number;
-		COLOR_DODGE: number;
-		COLOR_BURN: number;
-		HARD_LIGHT: number;
-		SOFT_LIGHT: number;
-		DIFFERENCE: number;
-		EXCLUSION: number;
-		HUE: number;
-		SATURATION: number;
-		COLOR: number;
-		LUMINOSITY: number;
-	};
-	export var DRAW_MODES: {
-		POINTS: number;
-		LINES: number;
-		LINE_LOOP: number;
-		LINE_STRIP: number;
-		TRIANGLES: number;
-		TRIANGLE_STRIP: number;
-		TRIANGLE_FAN: number;
-	};
-	export var SCALE_MODES: {
-		LINEAR: number,
-		NEAREST: number
-	};
-	export var GC_MODES: {
-		AUTO: number;
-		MANUAL: number;
-	};
-	export var WRAP_MODES: {
-		CLAMP: number;
-		MIRRORED_REPEAT: number;
-		REPEAT: number;
-	};
-	export var TRANSFORM_MODE: {
-		DEFAULT: number;
-		DYNAMIC: number;
-		STATIC: number;
-	};
-	export var URL_FILE_EXTENSION: RegExp | string;
-	export var DATA_URI: RegExp | string;
-	export var SVG_SIZE: RegExp | string;
-	export var SHAPES: {
-		POLY: number;
-		RECT: number;
-		CIRC: number;
-		ELIP: number;
-		RREC: number;
-	};
-	export var PRECISION: {
-		LOW: string;
-		MEDIUM: string;
-		HIGH: string;
-	};
-	export var TEXT_GRADIENT: {
-		LINEAR_VERTICAL: number;
-		LINEAR_HORIZONTAL: number;
-	};
-	export var TEXT_STYLE_CHANGED: string;
-
-}
-
-// display
-
-export interface IDestroyOptions {
-	children?: boolean;
-	texture?: boolean;
-	baseTexture?: boolean;
-}
-export class Bounds {
-
-	minX: number;
-	minY: number;
-	maxX: number;
-	maxY: number;
-	rect: Rectangle;
-
-	isEmpty(): boolean;
-	clear(): void;
-
-	getRectangle(rect?: Rectangle): Rectangle;
-	addPoint(point: Point): void;
-	addQuad(vertices: number[]): Bounds;
-	addFrame(transform: Transform, x0: number, y0: number, x1: number, y1: number): void;
-	addVertices(transform: Transform, vertices: number[], beginOffset: number, endOffset: number): void;
-	addBounds(bounds: Bounds): void;
-	addBoundsMask(bounds: Bounds, mask: Bounds): void;
-	addBoundsArea(bounds: Bounds, area: Rectangle): void;
-
-}
-export class Container extends DisplayObject {
-
-	// begin extras.getChildByName
-	getChildByName(name: string): DisplayObject;
-	// end extras.getChildByName
-
-	children: DisplayObject[];
-	width: number;
-	height: number;
-
-	protected onChildrenChange: (...args: any[]) => void;
-	addChild<T extends DisplayObject>(child: T, ...additionalChildren: DisplayObject[]): T;
-	addChildAt<T extends DisplayObject>(child: T, index: number): T;
-	swapChildren(child: DisplayObject, child2: DisplayObject): void;
-	getChildIndex(child: DisplayObject): number;
-	setChildIndex(child: DisplayObject, index: number): void;
-	getChildAt(index: number): DisplayObject;
-	removeChild(child: DisplayObject): DisplayObject;
-	removeChildAt(index: number): DisplayObject;
-	removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[];
-	updateTransform(): void;
-	calculateBounds(): void;
-	protected _calculateBounds(): void;
-	protected containerUpdateTransform(): void;
-	renderWebGL(renderer: WebGLRenderer): void;
-	renderAdvancedWebGL(renderer: WebGLRenderer): void;
-	protected _renderWebGL(renderer: WebGLRenderer): void;
-	protected _renderCanvas(renderer: CanvasRenderer): void;
-	renderCanvas(renderer: CanvasRenderer): void;
-	destroy(options?: IDestroyOptions | boolean): void;
-
-	once(event: "added", fn: (displayObject: DisplayObject) => void, context?: any): utils.EventEmitter;
-	once(event: "removed", fn: (DisplayObject: DisplayObject) => void, context?: any): utils.EventEmitter;
-	once(event: string, fn: Function, context?: any): utils.EventEmitter;
-	on(event: "added", fn: (displayObject: DisplayObject) => void, context?: any): utils.EventEmitter;
-	on(event: "removed", fn: (DisplayObject: DisplayObject) => void, context?: any): utils.EventEmitter;
-	on(event: string, fn: Function, context?: any): utils.EventEmitter;
-	off(event: string, fn: Function, context?: any): utils.EventEmitter;
-
-}
-export class DisplayObject extends utils.EventEmitter implements interaction.InteractiveTarget {
-
-	// begin extras.cacheAsBitmap
-	protected _cacheAsBitmap: boolean;
-	protected _cacheData: boolean;
-	cacheAsBitmap: boolean;
-	protected _renderCachedWebGL(renderer: WebGLRenderer): void;
-	protected _initCachedDisplayObject(renderer: WebGLRenderer): void;
-	protected _renderCachedCanvas(renderer: CanvasRenderer): void;
-	protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void;
-	protected _calculateCachedBounds(): Rectangle;
-	protected _getCachedLocalBounds(): Rectangle;
-	protected _destroyCachedDisplayObject(): void;
-	protected _cacheAsBitmapDestroy(): void;
-	// end extras.cacheAsBitmap
-
-	// begin extras.getChildByName
-	name: string;
-	// end extras.getChildByName
-
-	// begin extras.getGlobalPosition
-	getGlobalPosition(point?: Point, skipUpdate?: boolean): Point;
-	// end extras.getGlobalPosition
-
-	// begin accessible target
-	accessible: boolean;
-	accessibleTitle: string;
-	accessibleHint: string;
-	tabIndex: number;
-	// end accessible target
-
-	// begin interactive target
-	interactive: boolean;
-	buttonMode: boolean;
-	hitArea: IHitArea;
-	interactiveChildren: boolean;
-	defaultCursor: string;
-	_isRightDown: boolean;
-	_isLeftDown: boolean;
-	// end interactive target
-
-	transform: TransformBase;
-	alpha: number;
-	visible: boolean;
-	renderable: boolean;
-	parent: Container;
-	worldAlpha: number;
-	filterArea: Rectangle;
-	protected _filters: Filter[];
-	protected _enabledFilters: Filter[];
-	protected _bounds: Bounds;
-	protected _boundsID: number;
-	protected _lastBoundsID: number;
-	protected _boundsRect: Rectangle;
-	protected _localBoundsRect: Rectangle;
-	protected _mask: Rectangle;
-	x: number;
-	y: number;
-	worldTransform: Matrix;
-	localTransform: Matrix;
-	position: Point;
-	scale: Point;
-	pivot: Point;
-	skew: Point;
-	rotation: number;
-	worldVisible: boolean;
-	mask: PIXI.Graphics | PIXI.Sprite;
-	filters: Filter[];
-
-	updateTransform(): void;
-	protected displayObjectUpdateTransform(): void;
-	protected _recursivePostUpdateTransform(): void;
-	getBounds(skipUpdate?: boolean, rect?: Rectangle): Rectangle;
-	getLocalBounds(rect?: Rectangle): Rectangle;
-	toGlobal(position: Point, point?: Point, skipUpdate?: boolean): Point;
-	toLocal(position: Point, from?: DisplayObject, point?: Point, skipUpdate?: boolean): Point;
-	protected renderWebGL(renderer: WebGLRenderer): void;
-	renderCanvas(renderer: CanvasRenderer): void;
-	setParent(container: Container): Container;
-	setTransform(x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, skewX?: number, skewY?: number, pivotX?: number, pivotY?: number): DisplayObject;
-	destroy(): void;
-
-	on(event: string, fn: Function, context?: any): utils.EventEmitter;
-	once(event: string, fn: Function, context?: any): utils.EventEmitter;
-	off(event: string, fn: Function, context?: any): utils.EventEmitter;
-
-	/*
-		on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-
-		once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): utils.EventEmitter;
-		*/
-
-}
-
-export class TransformBase {
-
-	static IDENTITY: TransformBase;
-
-	worldTransform: Matrix;
-	localTransform: Matrix;
-	protected _worldID: number;
-	updateLocalTransform(): void;
-	updateTransform(parentTransform: TransformBase): void;
-	updateWorldTransform(parentTransform: TransformBase): void;
-
-}
-export class TransformStatic extends TransformBase {
-
-	position: ObservablePoint;
-	scale: ObservablePoint;
-	pivot: ObservablePoint;
-	skew: ObservablePoint;
-
-	protected _rotation: number;
-	protected _sr: number;
-	protected _cr: number;
-	protected _cy: number;
-	protected _sy: number;
-	protected _nsx: number;
-	protected _cx: number;
-	protected _currentLocalID: number;
-
-	protected onChange(): void;
-	updateSkew(): void;
-	updateLocalTransform(): void;
-	updateTransform(parentTransform: TransformBase): void;
-	setFromMatrix(matrix: Matrix): void;
-
-	rotation: number;
-
-}
-export class Transform extends TransformBase {
-
-	constructor();
-
-	position: Point;
-	scale: Point;
-	skew: ObservablePoint;
-	pivot: Point;
-
-	protected _rotation: number;
-	protected _sr: number;
-	protected _cr: number;
-	protected _cy: number;
-	protected _sy: number;
-	protected _nsx: number;
-	protected _cx: number;
-
-	updateSkew(): void;
-	setFromMatrix(matrix: Matrix): void;
-
-	rotation: number;
-
-}
-
-// graphics
-
-export class GraphicsData {
-
-	constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon);
-
-	lineWidth: number;
-	lineColor: number;
-	lineAlpha: number;
-	protected _lineTint: number;
-	fillColor: number;
-	fillAlpha: number;
-	protected _fillTint: number;
-	fill: boolean;
-	protected holes: IShape[];
-	shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon;
-	type: number;
-	clone(): GraphicsData;
-	addHole(shape: IShape | Circle | Rectangle | RoundedRectangle | Ellipse | Polygon): void;
-	destroy(options?: IDestroyOptions | boolean): void;
-
-}
-export class Graphics extends Container {
-
-	fillAlpha: number;
-	lineWidth: number;
-	lineColor: number;
-	protected graphicsData: GraphicsData[];
-	tint: number;
-	protected _prevTint: number;
-	blendMode: number;
-	currentPath: GraphicsData;
-	protected _webGL: any;
-	isMask: boolean;
-	boundsPadding: number;
-	protected _localBounds: Bounds;
-	dirty: boolean;
-	fastRectDirty: number;
-	clearDirty: number;
-	boundsDirty: number;
-	protected cachedSpriteDirty: boolean;
-	protected _spriteRect: Rectangle;
-	protected _fastRect: boolean;
-
-	static _SPRITE_TEXTURE: Texture;
-
-	clone(): Graphics;
-	lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics;
-	moveTo(x: number, y: number): Graphics;
-	lineTo(x: number, y: number): Graphics;
-	quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics;
-	bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics;
-	arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics;
-	arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics;
-	beginFill(color: number, alpha?: number): Graphics;
-	endFill(): Graphics;
-	drawRect(x: number, y: number, width: number, height: number): Graphics;
-	drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics;
-	drawCircle(x: number, y: number, radius: number): Graphics;
-	drawEllipse(x: number, y: number, width: number, height: number): Graphics;
-	drawPolygon(path: number[] | Point[]): Graphics;
-	clear(): Graphics;
-	isFastRect(): boolean;
-	protected _renderCanvas(renderer: CanvasRenderer): void;
-	protected _calculateBounds(): Rectangle;
-	protected _renderSpriteRect(renderer: PIXI.SystemRenderer): void;
-	containsPoint(point: Point): boolean;
-	updateLocalBounds(): void;
-	drawShape(shape: IShape | Circle | Rectangle | Ellipse | Polygon | RoundedRectangle): GraphicsData;
-	generateCanvasTexture(scaleMode?: number, resolution?: number): Texture;
-	protected closePath(): Graphics;
-	protected addHole(): Graphics;
-	destroy(options?: IDestroyOptions | boolean): void;
-
-}
-export class CanvasGraphicsRenderer {
-
-	constructor(renderer: SystemRenderer);
-	render(graphics: Graphics): void;
-	protected updateGraphicsTint(graphics: Graphics): void;
-	protected renderPolygon(points: Point[], close: boolean, context: CanvasRenderingContext2D): void;
-	destroy(): void;
-
-}
-export class GraphicsRenderer extends ObjectRenderer {
-
-	constructor(renderer: PIXI.CanvasRenderer);
-
-	protected graphicsDataPool: GraphicsData[];
-	protected primitiveShader: PrimitiveShader;
-	gl: WebGLRenderingContext;
-
-	CONTEXT_UID: number;
-
-	destroy(): void;
-	render(graphics: Graphics): void;
-	protected updateGraphics(graphics: PIXI.Graphics): void;
-	getWebGLData(webGL: WebGLRenderingContext, type: number): WebGLGraphicsData;
-
-}
-export class WebGLGraphicsData {
-
-	constructor(gl: WebGLRenderingContext, shader: glCore.GLShader, attribsState: glCore.IAttribState);
-
-	gl: WebGLRenderingContext;
-	color: number[];
-	points: Point[];
-	indices: number[];
-	buffer: WebGLBuffer;
-	indexBuffer: WebGLBuffer;
-	dirty: boolean;
-	glPoints: number[];
-	glIndices: number[];
-	shader: glCore.GLShader;
-	vao: glCore.VertexArrayObject;
-
-	reset(): void;
-	upload(): void;
-	destroy(): void;
-
-}
-export class PrimitiveShader extends glCore.GLShader { }
-
-// math
-
-export namespace GroupD8 {
-
-	export var E: number;
-	export var SE: number;
-	export var S: number;
-	export var SW: number;
-	export var W: number;
-	export var NW: number;
-	export var N: number;
-	export var NE: number;
-	export var MIRROR_HORIZONTAL: number;
-	export var MIRROR_VERTICAL: number;
-
-	export function uX(ind: number): number;
-	export function uY(ind: number): number;
-	export function vX(ind: number): number;
-	export function vY(ind: number): number;
-	export function inv(rotation: number): number;
-	export function add(rotationSecond: number, rotationFirst: number): number;
-	export function sub(rotationSecond: number, rotationFirst: number): number;
-	export function rotate180(rotation: number): number;
-	export function isSwapWidthHeight(rotation: number): boolean;
-	export function byDirection(dx: number, dy: number): number;
-	export function matrixAppendRotationInv(matrix: Matrix, rotation: number, tx: number, ty: number): void;
-
-}
-export class Matrix {
-
-	a: number;
-	b: number;
-	c: number;
-	d: number;
-	tx: number;
-	ty: number;
-
-	fromArray(array: number[]): void;
-	set(a: number, b: number, c: number, d: number, tx: number, ty: number): Matrix;
-	toArray(transpose?: boolean, out?: number[]): number[];
-	apply(pos: Point, newPos?: Point): Point;
-	applyInverse(pos: Point, newPos?: Point): Point;
-	translate(x: number, y: number): Matrix;
-	scale(x: number, y: number): Matrix;
-	rotate(angle: number): Matrix;
-	append(matrix: Matrix): Matrix;
-	setTransform(x: number, y: number, pivotX: number, pivotY: number, scaleX: number, scaleY: number, rotation: number, skewX: number, skewY: number): PIXI.Matrix;
-	prepend(matrix: Matrix): Matrix;
-	invert(): Matrix;
-	identity(): Matrix;
-	decompose(transform: TransformBase): TransformBase;
-	clone(): Matrix;
-	copy(matrix: Matrix): Matrix;
-
-	static IDENTITY: Matrix;
-	static TEMP_MATRIX: Matrix;
-
-}
-export class ObservablePoint {
-
-	constructor(cb: Function, scope?: any, x?: number, y?: number);
-
-	x: number;
-	y: number;
-	cb: () => void;
-	scope: any;
-
-	set(x?: number, y?: number): void;
-	copy(point: Point | ObservablePoint): void;
-
-}
-export class Point {
-
-	constructor(x?: number, y?: number);
-
-	x: number;
-	y: number;
-
-	clone(): Point;
-	copy(p: Point): void;
-	equals(p: Point): boolean;
-	set(x?: number, y?: number): void;
-
-}
-
-export interface IShape {
-}
-export interface IHitArea extends IShape {
+    export class Spritesheet {
 
-	contains(x: number, y: number): boolean;
+        static BATCH_SIZE: number;
 
-}
-export class Circle {
-
-	constructor(x?: number, y?: number, radius?: number);
-
-	x: number;
-	y: number;
-	radius: number;
-	type: number;
-
-	clone(): Circle;
-	contains(x: number, y: number): boolean;
-	getBounds(): Rectangle;
-
-}
-export class Ellipse {
-
-	constructor(x?: number, y?: number, width?: number, height?: number);
+        constructor(baseTexture: BaseTexture, data: any, resolutionFilename?: string);
 
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	type: number;
+        baseTexture: BaseTexture;
+        textures: { [key: string]: Texture; };
+        data: any;
+        resolution: number;
+        protected _frames: any;
+        protected _frameKeys: string;
+        protected _batchIndex: number;
+        protected _callback: (spriteSheet: this, textures: { [key: string]: Texture; }) => void;
+        protected _updateResolution(resolutionFilename: string): number;
+        parse(callback: (spriteSheet: this, textures: { [key: string]: Texture; }) => void): void;
+        protected _processFrames(initialFrameIndex: number): void;
+        protected _parseComplete(): void;
+        protected _nextBatch(): void;
+        destroy(destroyBase?: boolean): void;
 
-	clone(): Ellipse;
-	contains(x: number, y: number): boolean;
-	getBounds(): Rectangle;
+    }
 
-}
-export class Polygon {
+    export class VideoBaseTexture extends BaseTexture {
 
-	constructor(points: Point[] | number[]);
-	constructor(...points: Point[]);
-	constructor(...points: number[]);
+        constructor(source: HTMLVideoElement, scaleMode?: number);
 
-	closed: boolean;
-	points: number[];
-	type: number;
+        autoUpdate: boolean;
+        autoPlay: boolean;
+        protected _isAutoUpdating: boolean;
 
-	clone(): Polygon;
-	contains(x: number, y: number): boolean;
-	close(): void;
-
-}
-export class Rectangle {
+        update(): void;
+        protected _onCanPlay(): void;
+        protected _onPlayStart(): void;
+        protected _onPlayStop(): void;
+        destroy(): void;
+        protected _isSourcePlaying(): boolean;
+        protected _isSourceReady(): boolean;
 
-	constructor(x?: number, y?: number, width?: number, height?: number);
+        static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture;
+        static fromUrl(videoSrc: string | any | string[] | any[]): VideoBaseTexture;
+        static fromUrls(videoSrc: string | any | string[] | any[]): VideoBaseTexture;
 
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	type: number;
-	left: number;
-	right: number;
-	top: number;
-	bottom: number;
-
-	static EMPTY: Rectangle;
-
-	clone(): Rectangle;
-	copy(rectangle: Rectangle): Rectangle;
-	contains(x: number, y: number): boolean;
-	pad(paddingX: number, paddingY: number): void;
-	fit(rectangle: Rectangle): void;
-	enlarge(rect: Rectangle): void;
-
-}
-export class RoundedRectangle {
-
-	constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
-
-	x: number;
-	y: number;
-	width: number;
-	height: number;
-	radius: number;
-	type: number;
-
-	clone(): RoundedRectangle;
-	contains(x: number, y: number): boolean;
-
-}
+        source: HTMLVideoElement;
+        protected loadSource(source: HTMLVideoElement): void;
+    }
 
-// renderers
-
-export interface IRendererOptions {
-
-	view?: HTMLCanvasElement;
-	transparent?: boolean;
-	autoResize?: boolean;
-	antialias?: boolean;
-	resolution?: number;
-	clearBeforeRender?: boolean;
-	backgroundColor?: number;
-	roundPixels?: boolean;
-	context?: WebGLRenderingContext;
-
-}
-export class SystemRenderer extends utils.EventEmitter {
-
-	constructor(system: string, width?: number, height?: number, options?: IRendererOptions);
-
-	type: number;
-	width: number;
-	height: number;
-	view: HTMLCanvasElement;
-	resolution: number;
-	transparent: boolean;
-	autoResize: boolean;
-	blendModes: any; // todo?
-	preserveDrawingBuffer: boolean;
-	clearBeforeRender: boolean;
-	roundPixels: boolean;
-	protected _backgroundColor: number;
-	protected _backgroundColorRgba: number[];
-	protected _backgroundColorString: string;
-	protected _tempDisplayObjectParent: Container;
-	protected _lastObjectRendered: DisplayObject;
-	backgroundColor: number;
-
-	resize(width: number, height: number): void;
-	generateTexture(displayObject: DisplayObject, scaleMode?: number, resolution?: number): RenderTexture;
-	render(...args: any[]): void;
-	destroy(removeView?: boolean): void;
-
-}
-export class CanvasRenderer extends SystemRenderer {
-
-	// plugintarget mixin start
-	static __plugins: any[];
-	static registerPlugin(pluginName: string, ctor: Function): void;
-	plugins: any;
-	initPlugins(): void;
-	destroyPlugins(): void;
-	// plugintarget mixin end
-
-	constructor(width?: number, height?: number, options?: IRendererOptions);
-
-	rootContext: CanvasRenderingContext2D;
-	rootResolution: number;
-	refresh: boolean;
-	maskManager: CanvasMaskManager;
-	smoothProperty: string;
-	extract: extract.CanvasExtract;
-
-	context: CanvasRenderingContext2D;
-
-	render(displayObject: PIXI.DisplayObject, renderTexture?: PIXI.RenderTexture, clear?: boolean, transform?: PIXI.Transform, skipUpdateTransform?: boolean): void
-	setBlendMode(blendMode: number): void;
-	destroy(removeView?: boolean): void;
-	resize(w: number, h: number): void;
-
-	on(event: "prerender", fn: () => void, context?: any): utils.EventEmitter;
-	on(event: "postrender", fn: () => void, context?: any): utils.EventEmitter;
-	on(event: string, fn: Function, context?: any): utils.EventEmitter;
-	once(event: "prerender", fn: () => void, context?: any): utils.EventEmitter;
-	once(event: "postrender", fn: () => void, context?: any): utils.EventEmitter;
-	once(event: string, fn: Function, context?: any): utils.EventEmitter;
-	off(event: string, fn: Function, context?: any): utils.EventEmitter;
-
-}
-export class CanvasMaskManager {
-
-	constructor(renderer: CanvasRenderer);
-
-	pushMask(maskData: any): void;
-	protected renderGraphicsShape(graphics: Graphics): void;
-	popMask(renderer: WebGLRenderer | CanvasRenderer): void;
-	destroy(): void;
-
-}
-export class CanvasRenderTarget {
-
-	constructor(width: number, height: number, resolution: number);
-
-	canvas: HTMLCanvasElement;
-	context: CanvasRenderingContext2D;
-	resolution: number;
-
-	width: number;
-	height: number;
-
-	clear(): void;
-	resize(width: number, height: number): void;
-	destroy(): void;
-
-}
+    // ticker
 
-export interface IWebGLRendererOptions {
+    namespace ticker {
 
-	view?: HTMLCanvasElement;
-	transparent?: boolean;
-	autoResize?: boolean;
-	antialias?: boolean;
-	forceFXAA?: boolean;
-	resolution?: number;
-	clearBeforeRender?: boolean;
-	preserveDrawingBuffer?: boolean;
-	roundPixels?: boolean;
+        export const shared: Ticker;
 
-}
-export class WebGLRenderer extends SystemRenderer {
-
-	// plugintarget mixin start
-	static __plugins: any[];
-	static registerPlugin(pluginName: string, ctor: Function): void;
-	plugins: any;
-	initPlugins(): void;
-	destroyPlugins(): void;
-	// plugintarget mixin end
-
-	constructor(width?: number, height?: number, options?: IWebGLRendererOptions);
-
-	protected _contextOptions: {
-		alpha: boolean;
-		antiAlias: boolean;
-		premultipliedAlpha: boolean;
-		stencil: boolean;
-		preseveDrawingBuffer: boolean;
-	};
-	protected _backgroundColorRgba: number[];
-	maskManager: MaskManager;
-	stencilManager: StencilManager;
-	emptyRenderer: ObjectRenderer;
-	currentRenderer: ObjectRenderer;
-	gl: WebGLRenderingContext;
-	CONTEXT_UID: number;
-	state: WebGLState;
-	renderingToScreen: boolean;
-	boundTextures: Texture[];
-	filterManager: FilterManager;
-	textureManager: TextureManager;
-	extract: extract.WebGLExtract;
-	protected drawModes: any;
-	protected _activeShader: Shader;
-	_activeRenderTarget: RenderTarget;
-	protected _initContext(): void;
-
-	render(displayObject: PIXI.DisplayObject, renderTexture?: PIXI.RenderTexture, clear?: boolean, transform?: PIXI.Transform, skipUpdateTransform?: boolean): void
-	setObjectRenderer(objectRenderer: ObjectRenderer): void;
-	flush(): void;
-	resize(width: number, height: number): void;
-	setBlendMode(blendMode: number): void;
-	clear(clearColor?: number): void;
-	setTransform(matrix: Matrix): void;
-	bindRenderTexture(renderTexture: RenderTexture, transform: Transform): WebGLRenderer;
-	bindRenderTarget(renderTarget: RenderTarget): WebGLRenderer;
-	bindShader(shader: Shader): WebGLRenderer;
-	bindTexture(texture: Texture | BaseTexture, location?: number, forceLocation?: boolean): number;
-	unbindTexture(texture: Texture | BaseTexture): WebGLRenderer;
-	createVao(): glCore.VertexArrayObject;
-	bindVao(vao: glCore.VertexArrayObject): WebGLRenderer;
-	reset(): WebGLRenderer;
-	handleContextLost: (event: WebGLContextEvent) => void;
-	handleContextRestored: () => void;
-	destroy(removeView?: boolean): void;
-
-	on(event: "context", fn: (gl: WebGLRenderingContext) => void, context?: any): utils.EventEmitter;
-	on(event: "prerender", fn: () => void, context?: any): utils.EventEmitter;
-	on(event: "postrender", fn: () => void, context?: any): utils.EventEmitter;
-	on(event: string, fn: Function, context?: any): utils.EventEmitter;
-	once(event: "context", fn: (gl: WebGLRenderingContext) => void, context?: any): utils.EventEmitter;
-	once(event: "prerender", fn: () => void, context?: any): utils.EventEmitter;
-	once(event: "postrender", fn: () => void, context?: any): utils.EventEmitter;
-	once(event: string, fn: Function, context?: any): utils.EventEmitter;
-	off(event: string, fn: Function, context?: any): utils.EventEmitter;
+        export class Ticker {
 
-}
-export class WebGLState {
-
-	constructor(gl: WebGLRenderingContext);
-
-	activeState: number[];
-	defaultState: number[];
-	stackIndex: number;
-	stack: number[];
-	gl: WebGLRenderingContext;
-	maxAttribs: number;
-	attribState: glCore.IAttribState;
-	nativeVaoExtension: any;
-
-	push(): void;
-	pop(): void;
-	setState(state: number[]): void;
-	setBlend(value: number): void;
-	setBlendMode(value: number): void;
-	setDepthTest(value: number): void;
-	setCullFace(value: number): void;
-	setFrontFace(value: number): void;
-	resetAttributes(): void;
-	resetToDefault(): void;
+            protected _tick(time: number): void;
+            protected _emitter: utils.EventEmitter;
+            protected _requestId: number | null;
+            protected _maxElapsedMS: number;
 
-}
-export class TextureManager {
+            protected _requestIfNeeded(): void;
+            protected _cancelIfNeeded(): void;
+            protected _startIfPossible(): void;
 
-	constructor(renderer: WebGLRenderer);
+            autoStart: boolean;
+            deltaTime: number;
+            elapsedMS: number;
+            lastTime: number;
+            speed: number;
+            started: boolean;
 
-	renderer: WebGLRenderer;
-	gl: WebGLRenderingContext;
-	protected _managedTextures: WebGLTexture[];
+            FPS: number;
+            minFPS: number;
 
-	bindTexture(): void;
-	getTexture(): WebGLTexture;
-	updateTexture(texture: BaseTexture | Texture): WebGLTexture;
-	destroyTexture(texture: BaseTexture, _skipRemove?: boolean): void;
-	removeAll(): void;
-	destroy(): void;
+            add(fn: (deltaTime: number) => void, context?: any): Ticker;
+            addOnce(fn: (deltaTime: number) => void, context?: any): Ticker;
+            remove(fn: (deltaTime: number) => void, context?: any): Ticker;
+            start(): void;
+            stop(): void;
+            update(): void;
 
-}
-export class TextureGarbageCollector {
+        }
 
-	constructor(renderer: WebGLRenderer);
+    }
 
-	renderer: WebGLRenderer;
-	count: number;
-	checkCount: number;
-	maxIdle: number;
-	checkCountMax: number;
-	mode: number;
+    // shader
 
-	update(): void;
-	run(): void;
-	unload(): void;
+    export class Shader extends glCore.GLShader { }
 
-}
-export abstract class ObjectRenderer extends WebGLManager {
+    //////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////EXTRACT///////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
 
-	constructor(renderer: WebGLRenderer);
+    export namespace extract {
 
-	start(): void;
-	stop(): void;
-	flush(): void;
+        export class CanvasExtract {
 
-	render(...args: any[]): void;
+            protected renderer: CanvasRenderer;
+
+            constructor(renderer: CanvasRenderer);
+
+            image(target?: DisplayObject | RenderTexture): HTMLImageElement;
+            base64(target?: DisplayObject | RenderTexture): string;
+            canvas(target?: DisplayObject | RenderTexture): HTMLCanvasElement;
+            pixels(renderTexture?: DisplayObject | RenderTexture): number[];
+
+            destroy(): void;
+
+        }
+        export class WebGLExtract {
+            protected renderer: WebGLRenderer;
+
+            constructor(renderer: WebGLRenderer);
 
-}
-export class Quad {
-
-	constructor(gl: WebGLRenderingContext);
-
-	gl: WebGLRenderingContext;
-	vertices: number[];
-	uvs: number[];
-	interleaved: number[];
-	indices: number[];
-	vertexBuffer: WebGLBuffer;
-	vao: glCore.VertexArrayObject;
-	initVao(shader: glCore.GLShader): void;
-	map(targetTextureFrame: Rectangle, destinationFrame: Rectangle): Quad;
-	upload(): Quad;
-	destroy(): void;
+            image(target?: DisplayObject | RenderTexture): HTMLImageElement;
+            base64(target?: DisplayObject | RenderTexture): string;
+            canvas(target?: DisplayObject | RenderTexture): HTMLCanvasElement;
+            pixels(renderTexture?: DisplayObject | RenderTexture): number[];
 
-}
-export class RenderTarget {
-
-	constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root?: boolean);
-
-	gl: WebGLRenderingContext;
-	frameBuffer: glCore.GLFramebuffer;
-	texture: Texture;
-	clearColor: number[];
-	size: Rectangle;
-	resolution: number;
-	projectionMatrix: Matrix;
-	transform: Matrix;
-	frame: Rectangle;
-	defaultFrame: Rectangle;
-	destinationFrame: Rectangle;
-	sourceFrame: Rectangle;
-	stencilBuffer: glCore.GLFramebuffer;
-	stencilMaskStack: Graphics[];
-	filterData: {
-		index: number,
-		stack: Array<{
-			renderTarget: RenderTarget,
-			filter: any[];
-			bounds: Rectangle
-		}>
-	};
-	scaleMode: number;
-	root: boolean;
-
-	clear(clearColor?: number[]): void;
-	attachStencilBuffer(): void;
-	setFrame(destinationFrame: Rectangle, sourceFrame: Rectangle): void;
-	activate(): void;
-	calculateProjection(destinationFrame: Rectangle, sourceFrame: Rectangle): void;
-	resize(width: number, height: number): void;
-	destroy(): void;
+            destroy(): void;
+        }
 
-}
+    }
 
-export class BlendModeManager extends WebGLManager {
+    //////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////EXTRAS////////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
 
-	constructor(renderer: WebGLRenderer);
+    export namespace extras {
 
-	currentBlendMode: number;
+        export interface IBitmapTextStyle {
 
-	setBlendMode(blendMode: number): boolean;
+            font?: string | {
+                name?: string;
+                size?: number;
+            };
+            align?: string;
+            tint?: number;
 
-}
-export class FilterManager extends WebGLManager {
-
-	constructor(renderer: WebGLRenderer);
-
-	gl: WebGLRenderingContext;
-	quad: Quad;
-	stack: Array<{
-		renderTarget: RenderTarget;
-		sourceFrame: Rectangle;
-		destinationFrame: Rectangle;
-		filters: Filter[];
-		target: any;
-		resolution: number;
-	}>;
-	stackIndex: number;
-	shaderCache: any;
-	filterData: any;
-
-	pushFilter(target: RenderTarget, filters: Filter[]): void;
-	popFilter(): void;
-	applyFilter(shader: glCore.GLShader | Filter, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void;
-	syncUniforms(shader: glCore.GLShader, filter: Filter): void;
-	getRenderTarget(clear?: boolean, resolution?: number): RenderTarget;
-	returnRenderTarget(renderTarget: RenderTarget): RenderTarget;
-	calculateScreenSpaceMatrix(outputMatrix: Matrix): Matrix;
-	calculateNormalisedScreenSpaceMatrix(outputMatrix: Matrix): Matrix;
-	calculateSpriteMatrix(outputMatrix: Matrix, sprite: Sprite): Matrix;
-	destroy(): void;
-	emptyPool(): void;
-	getPotRenderTarget(gl: WebGLRenderingContext, minWidth: number, minHeight: number, resolution: number): RenderTarget;
-	freePotRenderTarget(renderTarget: RenderTarget): void;
+        }
+        export class BitmapText extends Container {
 
-}
-export class StencilMaskStack {
+            static registerFont(xml: XMLDocument, texture: Texture): any;
 
-	stencilStack: any[];
-	reverse: boolean;
-	count: number;
+            constructor(text: string, style?: IBitmapTextStyle);
 
-}
-export class MaskManager extends WebGLManager {
-
-	scissor: boolean;
-	scissorData: any;
-	scissorRenderTarget: RenderTarget;
-	enableScissor: boolean;
-	alphaMaskPool: number[];
-	alphaMaskIndex: number;
-	pushMask(target: RenderTarget, maskData: Sprite | Graphics): void;
-	popMask(target: RenderTarget, maskData: Sprite | Graphics): void;
-	pushSpriteMask(target: RenderTarget, maskData: Sprite | Graphics): void;
-	popSpriteMask(): void;
-	pushStencilMask(maskData: Sprite | Graphics): void;
-	popStencilMask(): void;
-	pushScissorMask(target: RenderTarget, maskData: Sprite | Graphics): void;
-	popScissorMask(): void;
+            protected _textWidth: number;
+            protected _textHeight: number;
+            textWidth: number;
+            textHeight: number;
+            protected _glyphs: Sprite[];
+            protected _font: string | {
+                name?: string;
+                size?: number;
+            };
+            font: string | {
+                name?: string;
+                size?: number;
+            };
+            protected _text: string;
+            maxWidth: number;
+            maxLineHeight: number;
+            protected _anchor: ObservablePoint;
+            dirty: boolean;
+            tint: number;
+            align: string;
+            text: string;
+            anchor: PIXI.Point | number;
 
-}
-export class StencilManager extends WebGLManager {
+            protected updateText(): void;
+            updateTransform(): void;
+            getLocalBounds(): Rectangle;
+            protected validate(): void;
 
-	constructor(renderer: WebGLRenderer);
+            static fonts: any;
 
-	stencilMaskStack: Graphics[];
+        }
+        export class AnimatedSprite extends Sprite {
 
-	setMaskStack(stencilMasStack: Graphics[]): void;
-	pushStencil(graphics: Graphics): void;
-	popStencil(): void;
-	destroy(): void;
+            constructor(textures: Texture[] | { texture: Texture, time?: number }[], autoUpdate?: boolean);
 
-}
-export class WebGLManager {
+            protected _autoUpdate: boolean;
+            protected _textures: Texture[];
+            protected _durations: number[];
+            textures: Texture[] | { texture: Texture, time?: number }[];
+            animationSpeed: number;
+            loop: boolean;
+            onComplete: () => void;
+            onFrameChange: (currentFrame: number) => void;
+            protected _currentTime: number;
+            playing: boolean;
+            totalFrames: number;
+            currentFrame: number;
+            stop(): void;
+            play(): void;
+            gotoAndStop(frameNumber: number): void;
+            gotoAndPlay(frameNumber: number): void;
+            protected update(deltaTime: number): void;
+            destroy(): void;
+
+            static fromFrames(frame: string[]): AnimatedSprite;
+            static fromImages(images: string[]): AnimatedSprite;
+
+        }
+        export class TextureTransform {
 
-	constructor(renderer: WebGLRenderer);
+            constructor(texture: Texture, clampMargin?: number);
 
-	renderer: WebGLRenderer;
-	onContextChange(): void;
-	destroy(): void;
+            protected _texture: Texture;
+            protected mapCoord: Matrix;
+            protected uClampFrame: Float32Array;
+            protected uClampOffset: Float32Array;
+            protected _lastTextureID: number;
+
+            clampOffset: number;
+            clampMargin: number;
+
+            texture: Texture;
 
-}
-export interface IUniformData {
+            update(forceUpdate?: boolean): void;
+
+        }
+        export class TilingSprite extends Sprite {
+
+            constructor(texture: Texture, width?: number, height?: number);
+
+            tileTransform: TransformStatic;
+            protected _width: number;
+            protected _height: number;
+            protected _canvasPattern: CanvasPattern;
+            uvTransform: TextureTransform;
+            uvRespectAnchor: boolean;
+
+            clampMargin: number;
+            tileScale: Point | ObservablePoint;
+            tilePosition: Point | ObservablePoint;
+
+            protected _onTextureUpdate(): void;
+            protected _renderWebGL(renderer: WebGLRenderer): void;
+            protected _renderCanvas(renderer: CanvasRenderer): void;
+            protected _calculateBounds(): void;
+            getLocalBounds(rect?: Rectangle): Rectangle;
+            containsPoint(point: Point): boolean;
+            destroy(): void;
+
+            static from(source: number | string | BaseTexture | HTMLCanvasElement | HTMLVideoElement, width?: number, height?: number): TilingSprite;
+            static fromFrame(frameId: string, width?: number, height?: number): TilingSprite;
+            // if you remove the next line, the class will break. https://github.com/pixijs/pixi-typescript/issues/96
+            static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
+            static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite;
+
+            width: number;
+            height: number;
+
+        }
+        export class TilingSpriteRenderer extends ObjectRenderer {
+
+            constructor(renderer: WebGLRenderer);
+
+            render(ts: TilingSprite): void;
+
+        }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////FILTERS///////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
 
-	type: string;
-	value: any;
+    export namespace filters {
 
-	// name is set by pixi if uniforms were automatically extracted from shader code, but not used anywhere
-	name?: string;
+        export class FXAAFilter extends Filter { }
+        export class BlurFilter extends Filter {
 
-}
-export class Filter {
-
-	// param uniforms should be an object matching type {[name: string]: IUniformData};
-	// left untyped as there's no way to define the type without requiring an index signature or making this class generic
-	constructor(vertexSrc?: string, fragmentSrc?: string, uniforms?: any);
-
-	vertextSrc: string;
-	fragmentSrc: string;
-	protected uniformData: { [name: string]: IUniformData };
-	uniforms: { [name: string]: any };
-	glShaders: any;
-	glShaderKey: string;
-	padding: number;
-	resolution: number;
-	blendMode: number;
-	enabled: boolean;
-	apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget, clear?: boolean): void;
-
-	static defaultVertexSrc: string;
-	static defaultFragmentSrc: string;
+            constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
 
-}
-export class SpriteMaskFilter extends Filter {
+            blurXFilter: BlurXFilter;
+            blurYFilter: BlurYFilter;
+            resolution: number;
+            padding: number;
+            passes: number;
+            blur: number;
+            blurX: number;
+            blurY: number;
+            quality: number;
 
-	constructor(sprite: Sprite);
+        }
+        export class BlurXFilter extends Filter {
 
-	maskSprite: Sprite;
-	maskMatrix: Matrix;
-	apply(filterManager: FilterManager, input: RenderTarget, output: RenderTarget): void;
+            constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
 
-}
+            protected _quality: number;
 
-// sprites
-
-export class Sprite extends Container {
-
-	constructor(texture?: Texture);
-
-	protected _anchor: ObservablePoint;
-	anchor: ObservablePoint;
-	protected _texture: Texture;
-	protected _width: number;
-	protected _height: number;
-	tint: number;
-	protected _tint: number;
-	protected _tintRGB: number;
-	blendMode: number;
-	pluginName: string;
-	protected cachedTint: number;
-	texture: Texture;
-	protected textureDirty: boolean;
-	protected _textureID: number;
-	protected _transformID: number;
-	protected vertexTrimmedData: Float32Array;
-	vertexData: Float32Array;
-	width: number;
-	height: number;
-
-	protected _onTextureUpdate(): void;
-	calculateVertices(): void;
-	protected _calculateBounds(): void;
-	protected calculateTrimmedVertices(): void;
-	protected onAnchorUpdate(): void;
-	protected _renderWebGL(renderer: WebGLRenderer): void;
-	protected _renderCanvas(renderer: CanvasRenderer): void;
-	getLocalBounds(): Rectangle;
-	containsPoint(point: Point): boolean;
-	destroy(options?: IDestroyOptions | boolean): void;
-
-	static from(source: number | string | BaseTexture | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): Sprite;
-	static fromFrame(frameId: string): Sprite;
-	static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
+            quality: number;
+            passes: number;
+            resolution: number;
+            strength: number;
+            firstRun: boolean;
+            blur: number;
 
-}
-export class BatchBuffer {
+        }
+        export class BlurYFilter extends Filter {
 
-	vertices: ArrayBuffer;
-	float32View: number[];
-	uint32View: number[];
+            constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
 
-	destroy(): void;
+            protected _quality: number;
 
-}
-export class SpriteRenderer extends ObjectRenderer {
-
-	constructor(renderer: PIXI.WebGLRenderer);
-
-	vertSize: number;
-	vertByteSize: number;
-	size: number;
-	buffers: BatchBuffer[];
-	indices: number[];
-	shaders: Shader[];
-	currentIndex: number;
-	tick: number;
-	groups: any[];
-	sprites: Sprite[];
-	vertexBuffers: number[];
-	vaos: glCore.VertexArrayObject[];
-	vaoMax: number;
-	vertexCount: number;
-
-	protected onContextChanged: () => void;
-	protected onPrerender: () => void;
-	render(sprite: Sprite): void;
-	flush(): void;
-	start(): void;
-	stop(): void;
-	destroy(): void;
+            quality: number;
+            passes: number;
+            resolution: number;
+            strength: number;
+            firstRun: boolean;
+            blur: number;
 
-}
-export class CanvasSpriteRenderer extends ObjectRenderer {
+        }
+        export class ColorMatrixFilter extends Filter {
 
-	constructor(renderer: WebGLRenderer);
+            constructor();
 
-	render(sprite: Sprite): void;
-	destroy(): void;
+            protected _loadMatrix(matrix: number[], multiply?: boolean): void;
+            protected _multiply(out: number[], a: number[], b: number[]): void;
+            protected _colorMatrix(matrix: number[]): void;
 
-}
-export namespace CanvasTinter {
+            matrix: number[];
 
-	export function getTintedTexture(sprite: Sprite, color: number): HTMLCanvasElement;
-	export function tintWithMultiply(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
-	export function tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
-	export function tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
-	export function roundColor(color: number): number;
+            brightness(b: number, multiply?: boolean): void;
+            greyscale(scale: number, multiply?: boolean): void;
+            blackAndWhite(multiply?: boolean): void;
+            hue(rotation: number, multiply?: boolean): void;
+            contrast(amount: number, multiply?: boolean): void;
+            saturate(amount: number, multiply?: boolean): void;
+            desaturate(multiply?: boolean): void;
+            negative(multiply?: boolean): void;
+            sepia(multiply?: boolean): void;
+            technicolor(multiply?: boolean): void;
+            polaroid(multiply?: boolean): void;
+            toBGR(multiply?: boolean): void;
+            kodachrome(multiply?: boolean): void;
+            browni(multiply?: boolean): void;
+            vintage(multiply?: boolean): void;
+            colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void;
+            night(intensity: number, multiply?: boolean): void;
+            predator(amount: number, multiply?: boolean): void;
+            lsd(multiply?: boolean): void;
+            reset(): void;
+
+        }
+        export class DisplacementFilter extends Filter {
+
+            constructor(sprite: Sprite, scale?: number);
+
+            scale: Point;
+            map: Texture;
+
+        }
+        export class VoidFilter extends Filter {
+            glShaderKey: number;
+        }
+
+        // pixi-filters.d.ts todo
+        // https://github.com/pixijs/pixi-filters/
+        export class NoiseFilter extends Filter {
+
+            noise: number;
+
+        }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////INTERACTION///////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    export namespace interaction {
+
+        export interface InteractiveTarget {
+
+            interactive: boolean;
+            interactiveChildren: boolean;
+            hitArea: PIXI.Rectangle | PIXI.Circle | PIXI.Ellipse | PIXI.Polygon | PIXI.RoundedRectangle;
+            buttonMode: boolean;
+            cursor: string;
+            trackedPointers(): { [key: number]: InteractionTrackingData; };
+
+            // depricated
+            defaultCursor: string;
+
+        }
+        export interface InteractionTrackingData {
+
+            readonly pointerId: number;
+            flags: number;
+            none: number;
+            over: boolean;
+            rightDown: boolean;
+            leftDown: boolean;
+
+        }
+        export interface InteractionEvent {
+
+            stopped: boolean;
+            target: DisplayObject;
+            currentTarget: DisplayObject;
+            type: string;
+            data: InteractionData;
+            stopPropagation(): void;
+
+        }
+        export class InteractionData {
+
+            global: Point;
+            target: DisplayObject;
+            originalEvent: Event;
+            identifier?: number;
+
+            getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point;
+
+        }
+        export interface InteractionManagerOptions {
+            autoPreventDefault?: boolean;
+            interactionFrequency?: number;
+        }
+        export class InteractionManager extends utils.EventEmitter {
+
+            constructor(renderer: CanvasRenderer | WebGLRenderer | SystemRenderer, options?: InteractionManagerOptions);
+
+            renderer: SystemRenderer;
+            autoPreventDefault: boolean;
+            interactionFrequency: number;
+            mouse: InteractionData;
+            activeInteractionData: { [key: number]: InteractionData; };
+            interactionDataPool: InteractionData[];
+            eventData: InteractionEvent;
+            protected interactionDOMElement: HTMLElement;
+            moveWhenInside: boolean;
+            eventsAdded: boolean;
+            protected mouseOverRenderer: boolean;
+            readonly supportsTouchEvents: boolean;
+            readonly supportsPointerEvents: boolean;
+            protected onPointerUp: (event: PointerEvent) => void;
+            protected processPointerUp: (interactionEvent: InteractionEvent, displayObject: Container | PIXI.Sprite | PIXI.extras.TilingSprite, hit: boolean) => void;
+            protected onPointerCancel: (event: PointerEvent) => void;
+            protected processPointerCancel: (interactionEvent: InteractionEvent, displayObject: PIXI.Container | PIXI.Sprite | PIXI.extras.TilingSprite) => void;
+            protected onPointerDown: (event: PointerEvent) => void;
+            protected processPointerDown: (interactionEvent: InteractionEvent, displayObject: PIXI.Container | PIXI.Sprite | PIXI.extras.TilingSprite, hit: boolean) => void;
+            protected onPointerMove: (event: PointerEvent) => void;
+            protected processPointerMove: (interactionEvent: InteractionEvent, displayObject: PIXI.Container | PIXI.Sprite | PIXI.extras.TilingSprite, hit: boolean) => void;
+            protected onPointerOut: (event: PointerEvent) => void;
+            protected processPointerOverOut: (interactionEvent: InteractionEvent, displayObject: PIXI.Container | PIXI.Sprite | PIXI.extras.TilingSprite, hit: boolean) => void;
+            protected onPointerOver: (event: PointerEvent) => void;
+            cursorStyles: {
+                default: string;
+                pointer: string;
+            };
+            currentCursorMode: string;
+            cursor: string;
+            protected _tempPoint: Point;
+            resolution: number;
+            protected setTargetElement(element: HTMLCanvasElement, resolution?: number): void;
+            protected addEvents(): void;
+            protected removeEvents(): void;
+            update(deltaTime?: number): void;
+            setCursorMode(mode: string): void;
+            protected dispatchEvent(displayObject: Container | Sprite | extras.TilingSprite, eventString: string, eventData: any): void;
+            mapPositionToPoint(point: Point, x: number, y: number): void;
+            protected processInteractive(interactionEvent: InteractionEvent, displayObject: PIXI.Container | PIXI.Sprite | PIXI.extras.TilingSprite, func?: Function, hitTest?: boolean, interactive?: boolean): boolean;
+            protected onPointerComplete(originalEvent: PointerEvent, cancelled: boolean, func: Function): void;
+            protected getInteractionDataForPointerId(pointerId: number): InteractionData;
+            protected releaseInteractionDataForPointerId(pointerId: number): void;
+            protected configureInteractionEventForDOMEvent(interactionEvent: InteractionEvent, pointerEvent: PointerEvent, interactionData: InteractionData): InteractionEvent;
+            protected normalizeToPointerData(event: TouchEvent | MouseEvent | PointerEvent): PointerEvent[];
+            destroy(): void;
+
+            // depricated
+            defaultCursorStyle: string;
+            currentCursorStyle: string;
+
+        }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    ///////////////////////////////LOADER/////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    // pixi loader extends
+    // https://github.com/englercj/resource-loader/
+    // 2.0.6
+
+    class MiniSignalBinding {
+
+        constructor(fn: Function, once?: boolean, thisArg?: any);
+
+        protected _fn: Function;
+        protected _once: boolean;
+        protected _thisArg: any;
+        protected _next: MiniSignalBinding;
+        protected _prev: MiniSignalBinding;
+        protected _owner: MiniSignal;
+
+        detach(): boolean;
+
+    }
+    class MiniSignal {
+
+        constructor();
+
+        protected _head: MiniSignalBinding;
+        protected _tail: MiniSignalBinding;
+
+        handlers(exists?: boolean): MiniSignalBinding[] | boolean;
+        handlers(exists?: true): boolean;
+        handlers(exists?: false): MiniSignalBinding[];
+
+        has(node: MiniSignalBinding): boolean;
+        dispatch(): boolean;
+        add(fn: Function, thisArg?: any): any;
+        once(fn: Function, thisArg?: any): any;
+        detach(node: MiniSignalBinding): MiniSignal;
+        detachAll(): MiniSignal;
+
+    }
+
+    export namespace loaders {
+
+        export interface ILoaderOptions {
+
+            crossOrigin?: boolean | string;
+            loadType?: number;
+            xhrType?: string;
+            metaData?: any;
+            loadElement?: HTMLImageElement | HTMLAudioElement | HTMLVideoElement;
+            skipSource?: boolean;
+
+        }
+        export interface IResourceDictionary {
+
+            [index: string]: PIXI.loaders.Resource;
+
+        }
+
+        // As of ResourceLoader v2 we no longer require EventEmitter
+        // However, for depreciation reasons, it remains.
+        export class Loader extends utils.EventEmitter {
+
+            // pixi overrides here
+            static addPixiMiddleware(fn: Function): void;
+
+            // below this line is the original non-pixi loader
+
+            static Resource: any;
+            static async: any;
+            static base64: any;
+
+            constructor(baseUrl?: string, concurrency?: number);
+
+            baseUrl: string;
+            progress: number;
+            loading: boolean;
+            defaultQueryString: string;
+
+            protected _beforeMiddleware: Function[];
+            protected _afterMiddleware: Function[];
+            protected _resourcesParsing: Resource[];
+            protected _boundLoadResource: (r: Resource, d: Function) => void;
+            protected _queue: any;
+
+            resources: IResourceDictionary;
+
+            onProgress: MiniSignal;
+            onError: MiniSignal;
+            onLoad: MiniSignal;
+            onStart: MiniSignal;
+            onComplete: MiniSignal;
+
+            add(...params: any[]): this;
+            add(name: string, url: string, options?: ILoaderOptions, cb?: Function): this;
+            add(url: string, options?: ILoaderOptions, cb?: Function): this;
+            add(obj: any | any[], options?: ILoaderOptions, cb?: Function): this;
+
+            pre(fn: Function): this;
+            use(fn: Function): this;
+            reset(): this;
+            load(cb?: Function): this;
+
+            protected _prepareUrl(url: string): string;
+            protected _loadResource(resource: Resource, dequeue: Function): void;
+            protected _onComplete(): void;
+            protected _onLoad(resource: Resource): void;
+
+            // depreciation
+
+            on(event: "complete", fn: (loader: loaders.Loader, object: any) => void, context?: any): this;
+            on(event: "error", fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): this;
+            on(event: "load", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): this;
+            on(event: "progress", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): this;
+            on(event: "start", fn: (loader: loaders.Loader) => void, context?: any): this;
+            on(event: string, fn: Function, context?: any): this;
+
+            once(event: "complete", fn: (loader: loaders.Loader, object: any) => void, context?: any): this;
+            once(event: "error", fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): this;
+            once(event: "load", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): this;
+            once(event: "progress", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): this;
+            once(event: "start", fn: (loader: loaders.Loader) => void, context?: any): this;
+            once(event: string, fn: Function, context?: any): this;
+
+        }
+        export interface ITextureDictionary {
+            [index: string]: PIXI.Texture;
+        }
+        export class Resource {
+
+            static setExtensionLoadType(extname: string, loadType: number): void;
+            static setExtensionXhrType(extname: string, xhrType: string): void;
+
+            constructor(name: string, url: string | string[], options?: ILoaderOptions);
+
+            protected _flags: number;
+
+            name: string;
+            url: string;
+            extension: string;
+            data: any;
+            crossOrigin: boolean | string;
+            loadType: number;
+            xhrType: string;
+            metadata: any;
+            error: Error;
+            xhr: XMLHttpRequest | null;
+            children: Resource[];
+            type: number;
+            progressChunk: number;
+
+            protected _dequeue: Function;
+            protected _onLoadBinding: Function;
+            protected _boundComplete: Function;
+            protected _boundOnError: Function;
+            protected _boundOnProgress: Function;
+            protected _boundXhrOnError: Function;
+            protected _boundXhrOnAbort: Function;
+            protected _boundXhrOnLoad: Function;
+            protected _boundXdrOnTimeout: Function;
+
+            onStart: MiniSignal;
+            onProgress: MiniSignal;
+            onComplete: MiniSignal;
+            onAfterMiddleware: MiniSignal;
+
+            isDataUrl: boolean;
+            isComplete: boolean;
+            isLoading: boolean;
+            complete(): void;
+            abort(message?: string): void;
+            load(cb?: Function): void;
+
+            protected _hasFlag(flag: number): boolean;
+            protected _setFlag(flag: number, value: boolean): void;
+            protected _loadElement(type: string): void;
+            protected _loadSourceElement(type: string): void;
+            protected _loadXhr(): void;
+            protected _loadXdr(): void;
+            protected _createSource(type: string, url: string, mime?: string): HTMLSourceElement;
+            protected _onError(event?: any): void;
+            protected _onProgress(event?: any): void;
+            protected _xhrOnError(): void;
+            protected _xhrOnAbort(): void;
+            protected _xdrOnTimeout(): void;
+            protected _xhrOnLoad(): void;
+            protected _determineCrossOrigin(url: string, loc: any): string;
+            protected _determineXhrType(): number;
+            protected _determineLoadType(): number;
+            protected _getExtension(): string;
+            protected _getMimeXhrType(type: number): string;
+
+            static STATUS_FLAGS: {
+                NONE: number;
+                DATA_URL: number;
+                COMPLETE: number;
+                LOADING: number;
+            };
+
+            static TYPE: {
+                UNKNOWN: number;
+                JSON: number;
+                XML: number;
+                IMAGE: number;
+                AUDIO: number;
+                VIDEO: number;
+                TEXT: number;
+            };
+
+            static LOAD_TYPE: {
+                XHR: number;
+                IMAGE: number;
+                AUDIO: number;
+                VIDEO: number;
+            };
+
+            static XHR_RESPONSE_TYPE: {
+                DEFAULT: string;
+                BUFFER: string;
+                BLOB: string;
+                DOCUMENT: string;
+                JSON: string;
+                TEXT: string;
+            };
+
+            static EMPTY_GIF: string;
+
+            texture: Texture;
+            spineAtlas: any;
+            spineData: any;
+            textures?: ITextureDictionary;
+        }
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    ///////////////////////////////MESH///////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    export namespace mesh {
+
+        export class Mesh extends Container {
+
+            constructor(texture: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array, drawMode?: number);
+
+            protected _texture: Texture;
+            uvs: Float32Array;
+            vertices: Float32Array;
+            indices: Uint16Array;
+            dirty: number;
+            indexDirty: number;
+            dirtyVertex: boolean;
+            protected _geometryVersion: number;
+            blendMode: number;
+            pluginName: string;
+            canvasPadding: number;
+            drawMode: number;
+            texture: Texture;
+            tintRgb: Float32Array;
+            protected _glDatas: { [n: number]: any; };
+            protected _renderWebGL(renderer: WebGLRenderer): void;
+            protected _renderCanvas(renderer: CanvasRenderer): void;
+            protected _onTextureUpdate(): void;
+            protected _calculateBounds(): void;
+            containsPoint(point: Point): boolean;
+            tint: number;
+
+            static DRAW_MODES: {
+                TRIANGLE_MESH: number;
+                TRIANGLES: number;
+            };
+
+        }
+
+        export class CanvasMeshRenderer {
+
+            constructor(renderer: CanvasRenderer);
+
+            renderer: CanvasRenderer;
+
+            render(mesh: Mesh): void;
+            protected _renderTriangleMesh(mesh: Mesh): void;
+            protected _renderTriangles(mesh: Mesh): void;
+            protected _renderDrawTriangle(mesh: Mesh, index0: number, index1: number, index2: number): void;
+            protected renderMeshFlat(mesh: Mesh): void;
+
+            destroy(): void;
+
+        }
+
+        export class MeshRenderer extends ObjectRenderer {
+
+            constructor(renderer: WebGLRenderer);
+
+            shader: Shader;
+            render(mesh: Mesh): void;
 
-	export var cacheStepsPerColorChannel: number;
-	export var convertTintToImage: boolean;
-	export var canUseMultiply: boolean;
-	export var tintMethod: Function;
+        }
 
-}
+        export class Plane extends Mesh {
+
+            constructor(texture: Texture, verticesX?: number, verticesY?: number);
+            protected _ready: boolean;
+            verticesX: number;
+            verticesY: number;
+            drawMode: number;
+
+            refresh(): void;
 
-// text
-export interface TextStyleOptions {
-	align?: string;
-	breakWords?: boolean;
-	dropShadow?: boolean;
-	dropShadowAngle?: number;
-	dropShadowBlur?: number;
-	dropShadowColor?: string | number;
-	dropShadowDistance?: number;
-	fill?: string | string[] | number | number[] | CanvasGradient | CanvasPattern;
-	fillGradientType?: number;
-	fontFamily?: string;
-	fontSize?: number | string;
-	fontStyle?: string;
-	fontVariant?: string;
-	fontWeight?: string;
-	letterSpacing?: number;
-	lineHeight?: number;
-	lineJoin?: string;
-	miterLimit?: number;
-	padding?: number;
-	stroke?: string | number;
-	strokeThickness?: number;
-	styleID?: number;
-	textBaseline?: string;
-	wordWrap?: boolean;
-	wordWrapWidth?: number;
-}
+            protected _onTexureUpdate(): void;
 
-export class TextStyle implements TextStyleOptions {
-	align: string;
-	breakWords: boolean;
-	dropShadow: boolean;
-	dropShadowAngle: number;
-	dropShadowBlur: number;
-	dropShadowColor: string | number;
-	dropShadowDistance: number;
-	fill: string | string[] | number | number[] | CanvasGradient | CanvasPattern;
-	fillGradientType: number;
-	fontFamily: string;
-	fontSize: number | string;
-	fontStyle: string;
-	fontVariant: string;
-	fontWeight: string;
-	letterSpacing: number;
-	lineHeight: number;
-	lineJoin: string;
-	miterLimit: number;
-	padding: number;
-	stroke: string | number;
-	strokeThickness: number;
-	styleID: number;
-	textBaseline: string;
-	wordWrap: boolean;
-	wordWrapWidth: number;
-	constructor(style?: TextStyleOptions);
-	clone(): TextStyle;
-	reset(): void;
-}
+        }
 
-export class Text extends Sprite {
-
-	static getFontStyle(style: TextStyleOptions): string;
-	static calculateFontProperties(style: string): any;
-
-	constructor(text?: string, style?: TextStyleOptions);
-
-	canvas: HTMLCanvasElement;
-	context: CanvasRenderingContext2D;
-	resolution: number;
-	protected _text: string;
-	protected _style: TextStyle;
-	protected _styleListener: Function;
-	protected _font: string;
-	protected localStyleID: number;
-
-	static fontPropertiesCache: any;
-	static fontPropertiesCanvas: HTMLCanvasElement;
-	static fontPropertiesContext: CanvasRenderingContext2D;
-
-	width: number;
-	height: number;
-	style: TextStyle;
-	text: string;
-
-	protected updateText(respectDirty?: boolean): void;
-	protected drawLetterSpacing(text: string, x: number, y: number, isStroke?: boolean): void;
-	protected updateTexture(): void;
-	renderWebGL(renderer: WebGLRenderer): void;
-	protected _renderCanvas(renderer: CanvasRenderer): void;
-	protected wordWrap(text: string): string;
-	protected _calculateBounds(): void;
-	protected _onStyleChange: () => void;
-	protected _generateFillStyle(style: TextStyle, lines: string[]): string | number | CanvasGradient;
-	destroy(options?: IDestroyOptions | boolean): void;
-	dirty: boolean;
+        export class NineSlicePlane extends Plane {
 
-}
+            constructor(texture: Texture, leftWidth?: number, topHeight?: number, rightWidth?: number, bottomHeight?: number);
 
-// textures
+            width: number;
+            height: number;
+            leftWidth: number;
+            rightWidth: number;
+            topHeight: number;
+            bottomHeight: number;
 
-export class BaseRenderTexture extends BaseTexture {
+            protected _leftWidth: number;
+            protected _rightWidth: number;
+            protected _topHeight: number;
+            protected _bottomHeight: number;
+            protected _height: number;
+            protected _width: number;
+            protected _origHeight: number;
+            protected _origWidth: number;
+            protected _uvh: number;
+            protected _uvw: number;
 
-	constructor(width?: number, height?: number, scaleMode?: number, resolution?: number);
+            updateHorizontalVertices(): void;
+            updateVerticalVertices(): void;
+            protected drawSegment(context: CanvasRenderingContext2D | WebGLRenderingContext, textureSource: any, w: number, h: number, x1: number, y1: number, x2: number, y2: number): void;
 
-	height: number;
-	width: number;
-	realHeight: number;
-	realWidth: number;
-	resolution: number;
-	scaleMode: number;
-	hasLoaded: boolean;
-	protected _glRenderTargets: { [n: number]: WebGLTexture; };
-	protected _canvasRenderTarget: { [n: number]: WebGLTexture; };
-	valid: boolean;
+        }
 
-	resize(width: number, height: number): void;
-	destroy(): void;
+        export class Rope extends Mesh {
 
-	once(event: "update", fn: (baseRenderTexture: BaseRenderTexture) => void, context?: any): utils.EventEmitter;
-	once(event: string, fn: Function, context?: any): utils.EventEmitter;
-	on(event: "update", fn: (baseRenderTexture: BaseRenderTexture) => void, context?: any): utils.EventEmitter;
-	on(event: string, fn: Function, context?: any): utils.EventEmitter;
-	off(event: string, fn: Function, context?: any): utils.EventEmitter;
+            constructor(texture: Texture, points: Point[]);
 
-}
-export class BaseTexture extends utils.EventEmitter {
-
-	constructor(source?: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement, scaleMode?: number, resolution?: number);
-
-	protected uuid: number;
-	protected touched: number;
-	resolution: number;
-	width: number;
-	height: number;
-	realWidth: number;
-	realHeight: number;
-	scaleMode: number;
-	hasLoaded: boolean;
-	isLoading: boolean;
-	wrapMode: number;
-	source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
-	origSource: HTMLImageElement;
-	imageType: string;
-	sourceScale: number;
-	premultipliedAlpha: boolean;
-	imageUrl: string;
-	protected isPowerOfTwo: boolean;
-	mipmap: boolean;
-	wrap: boolean;
-	protected _glTextures: any;
-	protected _enabled: number;
-	protected _id: number;
-
-	update(): void;
-	protected _updateImageType(): void;
-	protected _loadSvgSource(): void;
-	protected _loadSvgSourceUsingDataUri(dataUri: string): void;
-	protected _loadSvgSourceUsingXhr(): void;
-	protected _loadSvgSourceUsingString(svgString: string): void;
-	protected loadSource(source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): void;
-	protected _sourceLoaded(): void;
-	destroy(): void;
-	dispose(): void;
-	updateSourceImage(newSrc: string): void;
-
-	static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number, sourceScale?: number): BaseTexture;
-	static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture;
-
-	on(event: "update", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	on(event: "loaded", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	on(event: "error", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	on(event: "dispose", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	on(event: string, fn: Function, context?: any): utils.EventEmitter;
-	once(event: "update", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	once(event: "loaded", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	once(event: "error", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	once(event: "dispose", fn: (baseTexture: BaseTexture) => void, context?: any): utils.EventEmitter;
-	once(event: string, fn: Function, context?: any): utils.EventEmitter;
-	off(event: string, fn: Function, context?: any): utils.EventEmitter;
+            points: Point[];
+            colors: number[];
+            protected _ready: boolean;
+            refresh(): void;
 
-}
-export class RenderTexture extends Texture {
+            protected _onTextureUpdate(): void;
+            updateTransform(): void;
 
-	constructor(baseRenderTexture: BaseRenderTexture, frame?: Rectangle);
+        }
+    }
 
-	protected legacyRenderer: any;
-	valid: boolean;
+    //////////////////////////////////////////////////////////////////////////////
+    /////////////////////////////PARTICLES////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
 
-	resize(width: number, height: number, doNotResizeBaseTexture?: boolean): void;
+    export namespace particles {
 
-	static create(width?: number, height?: number, scaleMode?: number, resolution?: number): RenderTexture;
+        export interface IParticleContainerProperties {
 
-}
-export class Texture extends utils.EventEmitter {
-
-	constructor(baseTexture: BaseTexture, frame?: Rectangle, orig?: Rectangle, trim?: Rectangle, rotate?: number);
-
-	noFrame: boolean;
-	baseTexture: BaseTexture;
-	protected _frame: Rectangle;
-	trim: Rectangle;
-	valid: boolean;
-	requiresUpdate: boolean;
-	protected _uvs: TextureUvs;
-	orig: Rectangle;
-	protected _updateID: number;
-	transform: any;
-
-	update(): void;
-	protected onBaseTextureLoaded(baseTexture: BaseTexture): void;
-	protected onBaseTextureUpdated(baseTexture: BaseTexture): void;
-	destroy(destroyBase?: boolean): void;
-	clone(): Texture;
-	protected _updateUvs(): void;
-
-	static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number, sourceScale?: number): Texture;
-	static fromFrame(frameId: string): Texture;
-	static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): Texture;
-	static fromVideo(video: HTMLVideoElement | string, scaleMode?: number): Texture;
-	static fromVideoUrl(videoUrl: string, scaleMode?: number): Texture;
-	static from(source: number | string | BaseTexture | HTMLImageElement | HTMLCanvasElement | HTMLVideoElement): Texture;
-	static addTextureToCache(texture: Texture, id: string): void;
-	static removeTextureFromCache(id: string): Texture;
-
-	frame: Rectangle;
-	protected _rotate: boolean;
-	rotate: number;
-	width: number;
-	height: number;
-
-	static EMPTY: Texture;
-
-	on(event: "update", fn: (texture: Texture) => void, context?: any): utils.EventEmitter;
-	on(event: string, fn: Function, context?: any): utils.EventEmitter;
-	once(event: "update", fn: (texture: Texture) => void, context?: any): utils.EventEmitter;
-	once(event: string, fn: Function, context?: any): utils.EventEmitter;
-	off(event: string, fn: Function, context?: any): utils.EventEmitter;
+            scale?: boolean;
+            position?: boolean;
+            rotation?: boolean;
+            uvs?: boolean;
+            alpha?: boolean;
 
-}
-export class TextureUvs {
+        }
+        export class ParticleContainer extends Container {
 
-	x0: number;
-	y0: number;
-	x1: number;
-	y1: number;
-	x2: number;
-	y2: number;
-	x3: number;
-	y3: number;
+            constructor(size?: number, properties?: IParticleContainerProperties, batchSize?: number);
 
-	uvsUint32: Uint32Array;
+            protected _properties: boolean[];
+            protected _maxSize: number;
+            protected _batchSize: number;
+            protected _glBuffers: { [n: number]: WebGLBuffer; };
+            protected _bufferToUpdate: number;
+            interactiveChildren: boolean;
+            blendMode: number;
+            roundPixels: boolean;
+            baseTexture: BaseTexture;
 
-	protected set(frame: Rectangle, baseFrame: Rectangle, rotate: number): void;
+            setProperties(properties: IParticleContainerProperties): void;
+            protected onChildrenChange: (smallestChildIndex?: number) => void;
 
-}
-export class VideoBaseTexture extends BaseTexture {
+            destroy(options?: IDestroyOptions | boolean): void;
 
-	constructor(source: HTMLVideoElement, scaleMode?: number);
+        }
+        export class ParticleBuffer {
 
-	autoUpdate: boolean;
-	autoPlay: boolean;
-	protected _isAutoUpdating: boolean;
+            constructor(gl: WebGLRenderingContext, properties: any, dynamicPropertyFlags: any[], size: number);
 
-	update(): void;
-	protected _onCanPlay(): void;
-	protected _onPlayStart(): void;
-	protected _onPlayStop(): void;
-	destroy(): void;
-	protected _isSourcePlaying(): boolean;
-	protected _isSourceReady(): boolean;
+            gl: WebGLRenderingContext;
+            vertSize: number;
+            vertByteSize: number;
+            size: number;
+            dynamicProperties: any[];
+            staticProperties: any[];
+            staticStride: number;
+            staticBuffer: any;
+            staticData: any;
+            dynamicStride: number;
+            dynamicBuffer: any;
+            dynamicData: any;
 
-	static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture;
-	static fromUrl(videoSrc: string | any | string[] | any[]): VideoBaseTexture;
-	static fromUrls(videoSrc: string | any | string[] | any[]): VideoBaseTexture;
+            destroy(): void;
 
-	source: HTMLVideoElement;
-	protected loadSource(source: HTMLVideoElement): void;
+        }
+        export interface IParticleRendererProperty {
+            attribute: number;
+            size: number;
+            uploadFunction: (children: PIXI.DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number) => void;
+            offset: number;
+        }
+        export class ParticleRenderer extends ObjectRenderer {
+
+            constructor(renderer: WebGLRenderer);
+
+            shader: glCore.GLShader;
+            indexBuffer: WebGLBuffer;
+            properties: IParticleRendererProperty[];
+            protected tempMatrix: Matrix;
+
+            start(): void;
+            generateBuffers(container: ParticleContainer): ParticleBuffer[];
+            uploadVertices(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
+            uploadPosition(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
+            uploadRotation(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
+            uploadUvs(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
+            uploadAlpha(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
+            destroy(): void;
+
+            indices: Uint16Array;
+
+        }
+        export interface IParticleShader extends glCore.GLShader { }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    ////////////////////////////PREPARE///////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    export namespace prepare {
+
+        interface AddHook {
+            (item: any, queue: any[]): boolean;
+        }
+        interface UploadHook<UploadHookSource> {
+            (prepare: UploadHookSource, item: any): boolean;
+        }
+        export abstract class BasePrepare<UploadHookSource>{
+
+            constructor(renderer: SystemRenderer);
+
+            limiter: CountLimiter | TimeLimiter;
+            protected renderer: SystemRenderer;
+            protected uploadHookHelper: UploadHookSource;
+            protected queue: any[];
+            protected addHooks: AddHook[];
+            protected uploadHooks: UploadHook<UploadHookSource>[];
+            protected completes: Function[];
+            protected ticking: boolean;
+            protected delayedTick: () => void;
+
+            upload(item: Function | DisplayObject | Container | BaseTexture | Texture | Graphics | Text | any, done?: () => void): void;
+            protected tick(): void;
+            protected prepareItems(): void;
+            register(addHook?: AddHook, uploadHook?: UploadHook<UploadHookSource>): this;
+            add(item: PIXI.DisplayObject | PIXI.Container | PIXI.BaseTexture | PIXI.Texture | PIXI.Graphics | PIXI.Text | any): this;
+            destroy(): void;
+
+        }
+        export class CanvasPrepare extends BasePrepare<CanvasPrepare> {
+
+            constructor(renderer: CanvasRenderer);
+
+            protected canvas: HTMLCanvasElement;
+            protected ctx: CanvasRenderingContext2D;
+
+        }
+        export class WebGLPrepare extends BasePrepare<WebGLRenderer> {
+
+            constructor(renderer: WebGLRenderer);
+
+        }
+        export class CountLimiter {
+
+            constructor(maxItemsPerFrame: number);
+
+            protected maxItemsPerFrame: number;
+            protected itemsLeft: number;
+
+        }
+        export class TimeLimiter {
+
+            constructor(maxMilliseconds: number);
+
+            protected maxMilliseconds: number;
+            protected frameStart: number;
+
+        }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    /////////////////////////////pixi-gl-core/////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+    // pixi-gl-core https://github.com/pixijs/pixi-gl-core
+    // sharedArrayBuffer as a type is not available yet.
+    // need to fully define what an `Attrib` is.
+    export namespace glCore {
+
+        export interface IContextOptions {
+            /**
+             * Boolean that indicates if the canvas contains an alpha buffer.
+             */
+            alpha?: boolean;
+            /**
+             * Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
+             */
+            depth?: boolean;
+            /**
+             * Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.
+             */
+            stencil?: boolean;
+            /**
+             * Boolean that indicates whether or not to perform anti-aliasing.
+             */
+            antialias?: boolean;
+            /**
+             * Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
+             */
+            premultipliedAlpha?: boolean;
+            /**
+             * If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
+             */
+            preserveDrawingBuffer?: boolean;
+            /**
+             *  Boolean that indicates if a context will be created if the system performance is low.
+             */
+            failIfMajorPerformanceCaveat?: boolean;
+        }
+        export function createContext(view: HTMLCanvasElement, options?: IContextOptions): WebGLRenderingContext;
+        export function setVertexAttribArrays(gl: WebGLRenderingContext, attribs: IAttrib[], state?: WebGLState): WebGLRenderingContext | undefined;
+        export class GLBuffer {
+
+            constructor(gl: WebGLRenderingContext, type: number, data: ArrayBuffer | ArrayBufferView | any, drawType: number);
+
+            protected _updateID?: number;
+            gl: WebGLRenderingContext;
+            buffer: WebGLBuffer;
+            type: number;
+            drawType: number;
+            data: ArrayBuffer | ArrayBufferView | any;
+
+            upload(data: ArrayBuffer | ArrayBufferView | any, offset?: number, dontBind?: boolean): void;
+            bind(): void;
+
+            static createVertexBuffer(gl: WebGLRenderingContext, data: ArrayBuffer | ArrayBufferView | any, drawType: number): GLBuffer;
+            static createIndexBuffer(gl: WebGLRenderingContext, data: ArrayBuffer | ArrayBufferView | any, drawType: number): GLBuffer;
+            static create(gl: WebGLRenderingContext, type: number, data: ArrayBuffer | ArrayBufferView | any, drawType: number): GLBuffer;
+
+            destroy(): void;
+
+        }
+        export class GLFramebuffer {
+
+            constructor(gl: WebGLRenderingContext, width: number, height: number);
+
+            gl: WebGLRenderingContext;
+            frameBuffer: WebGLFramebuffer;
+            stencil: WebGLRenderbuffer;
+            texture: GLTexture;
+            width: number;
+            height: number;
+
+            enableTexture(texture: GLTexture): void;
+            enableStencil(): void;
+            clear(r: number, g: number, b: number, a: number): void;
+            bind(): void;
+            unbind(): void;
+            resize(width: number, height: number): void;
+            destroy(): void;
+
+            static createRGBA(gl: WebGLRenderingContext, width: number, height: number, data: ArrayBuffer | ArrayBufferView | any): GLFramebuffer;
+            static createFloat32(gl: WebGLRenderingContext, width: number, height: number, data: ArrayBuffer | ArrayBufferView | any): GLFramebuffer;
+
+        }
+        export class GLShader {
+
+            constructor(gl: WebGLRenderingContext, vertexSrc: string | string[], fragmentSrc: string | string[], precision: string, attributeLocations: { [key: string]: number });
+
+            gl: WebGLRenderingContext;
+            program?: WebGLProgram | null;
+            uniformData: any;
+            uniforms: any;
+            attributes: any;
+
+            bind(): void;
+            destroy(): void;
+
+        }
+        export class GLTexture {
+
+            constructor(gl: WebGLRenderingContext, width?: number, height?: number, format?: number, type?: number);
+
+            gl: WebGLRenderingContext;
+            texture: WebGLTexture;
+            mipmap: boolean;
+            premultiplyAlpha: boolean;
+            width: number;
+            height: number;
+            format: number;
+            type: number;
+
+            upload(source: HTMLImageElement | ImageData | HTMLVideoElement | HTMLCanvasElement): void;
+            uploadData(data: number, width: number, height: number): void;
+            bind(location?: number): void;
+            unbind(): void;
+            minFilter(linear: boolean): void;
+            magFilter(linear: boolean): void;
+            enableMipmap(): void;
+            enableLinearScaling(): void;
+            enableNearestScaling(): void;
+            enableWrapClamp(): void;
+            enableWrapRepeat(): void;
+            enableWrapMirrorRepeat(): void;
+            destroy(): void;
+
+            static fromSource(gl: WebGLRenderingContext, source: HTMLImageElement | ImageData | HTMLVideoElement | HTMLCanvasElement, premultipleAlpha?: boolean): GLTexture;
+            static fromData(gl: WebGLRenderingContext, data: number[], width: number, height: number): GLTexture;
+
+        }
+        export interface IAttrib {
+
+            attribute: {
+                location: boolean;
+                size: number;
+            };
+            normalized: boolean;
+            stride: number;
+            start: number;
+            buffer: ArrayBuffer;
+
+        }
+        export interface IWebGLRenderingContextAttribute {
+
+            buffer: WebGLBuffer;
+            attribute: any;
+            type: number;
+            normalized: boolean;
+            stride: number;
+            start: number;
+
+        }
+        export interface IAttribState {
+            tempAttribState: IAttrib[];
+            attribState: IAttrib[];
+        }
+
+        export class VertexArrayObject {
+
+            static FORCE_NATIVE: boolean;
+
+            constructor(gl: WebGLRenderingContext, state: WebGLState);
+
+            protected nativeVaoExtension: any;
+            protected nativeState: IAttribState;
+            protected nativeVao: VertexArrayObject;
+            gl: WebGLRenderingContext;
+            attributes: IAttrib[];
+            indexBuffer: GLBuffer;
+            dirty: boolean;
+
+            bind(): VertexArrayObject;
+            unbind(): VertexArrayObject;
+            activate(): VertexArrayObject;
+            addAttribute(buffer: GLBuffer, attribute: IAttrib, type: number, normalized: boolean, stride: number, start: number): VertexArrayObject;
+            addIndex(buffer: GLBuffer, options?: any): VertexArrayObject;
+            clear(): VertexArrayObject;
+            draw(type: number, size: number, start: number): VertexArrayObject;
+            destroy(): void;
+
+        }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    ///////////////////////////////UTILS//////////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+
+    export interface IDecomposedDataUri {
+        mediaType: string;
+        subType: string;
+        encoding: string;
+        data: any;
+    }
+
+    export namespace utils {
+
+        export function uid(): number;
+        export function hex2rgb(hex: number, out?: number[]): number[];
+        export function hex2string(hex: number): string;
+        export function rgb2hex(rgb: Number[]): number;
+        export function canUseNewCanvasBlendModes(): boolean;
+        export function getResolutionOfUrl(url: string, defaultValue?: number): number;
+        export function getSvgSize(svgString: string): any;
+        export function decomposeDataUri(dataUri: string): IDecomposedDataUri | void;
+        export function getUrlFileExtension(url: string): string | void;
+        export function sayHello(type: string): void;
+        export function skipHello(): void;
+        export function isWebGLSupported(): boolean;
+        export function sign(n: number): number;
+        export function removeItems<T>(arr: T[], startIdx: number, removeCount: number): void;
+        export const TextureCache: any;
+        export const BaseTextureCache: any;
+
+        // https://github.com/kaimallea/isMobile
+        export namespace isMobile {
+            export const apple: {
+                phone: boolean;
+                ipod: boolean;
+                tablet: boolean;
+                device: boolean;
+            };
+            export const android: {
+                phone: boolean;
+                tablet: boolean;
+                device: boolean;
+            };
+            export const amazon: {
+                phone: boolean;
+                tablet: boolean;
+                device: boolean;
+            };
+            export const windows: {
+                phone: boolean;
+                tablet: boolean;
+                device: boolean;
+            };
+            export const seven_inch: boolean;
+            export const other: {
+                blackberry10: boolean;
+                blackberry: boolean;
+                opera: boolean;
+                firefox: boolean;
+                chrome: boolean;
+                device: boolean;
+            };
+            export const any: boolean;
+            export const phone: boolean;
+            export const tablet: boolean;
+        }
+
+        // https://github.com/primus/eventemitter3
+        export class EventEmitter {
+
+            listeners(event: string, exists?: boolean): Function[];
+            emit(event: string, ...args: any[]): boolean;
+            on(event: string, fn: Function, context?: any): this;
+            once(event: string, fn: Function, context?: any): this;
+            removeListener(event: string, fn: Function, context?: any, once?: boolean): this;
+            removeAllListeners(event?: string): this;
+            eventNames(): string[];
+
+            off(event: string, fn: Function, context?: any, once?: boolean): this;
+            addListener(event: string, fn: Function, context?: any): this;
+
+        }
+
+    }
+
+    //////////////////////////////////////////////////////////////////////////////
+    /////////////////////////////depreciation/////////////////////////////////////
+    //////////////////////////////////////////////////////////////////////////////
+    // not sure how to handle blendmodes scalemodes basetexturecache
+    namespace core {
+
+        /**
+         * @class
+         * @private
+         * @name SpriteBatch
+         * @memberof PIXI
+         * @see PIXI.ParticleContainer
+         * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead.
+         * @deprecated since version 3.0.0
+         */
+        type SpriteBatch = ParticleContainer;
+
+        /**
+         * @class
+         * @private
+         * @name AssetLoader
+         * @memberof PIXI
+         * @see PIXI.loaders.Loader
+         * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.
+         * @deprecated since version 3.0.0
+         */
+        type AssetLoader = loaders.Loader;
+
+        /**
+         * @class
+         * @private
+         * @name Stage
+         * @memberof PIXI
+         * @see PIXI.Container
+         * @deprecated since version 3.0.0
+         */
+        type Stage = Container;
+
+        /**
+         * @class
+         * @private
+         * @name DisplayObjectContainer
+         * @memberof PIXI
+         * @see PIXI.Container
+         * @deprecated since version 3.0.0
+         */
+        type DisplayObjectContainer = Container;
+
+        /**
+         * @class
+         * @private
+         * @name Strip
+         * @memberof PIXI
+         * @see PIXI.mesh.Mesh
+         * @deprecated since version 3.0.0
+         */
+        type Strip = mesh.Mesh;
+
+        /**
+         * @class
+         * @private
+         * @name Rope
+         * @memberof PIXI
+         * @see PIXI.mesh.Rope
+         * @deprecated since version 3.0.0
+         */
+        type Rope = mesh.Rope;
+
+        /**
+         * @class
+         * @private
+         * @name ParticleContainer
+         * @memberof PIXI
+         * @see PIXI.particles.ParticleContainer
+         * @deprecated since version 4.0.0
+         */
+        type ParticleContainer = particles.ParticleContainer;
+
+        /**
+         * @class
+         * @private
+         * @name MovieClip
+         * @memberof PIXI
+         * @see PIXI.extras.MovieClip
+         * @deprecated since version 3.0.0
+         */
+        type MovieClip = extras.AnimatedSprite;
+
+        /**
+         * @class
+         * @private
+         * @name TilingSprite
+         * @memberof PIXI
+         * @see PIXI.extras.TilingSprite
+         * @deprecated since version 3.0.0
+         */
+        type TilingSprite = extras.TilingSprite;
+
+        /**
+         * @class
+         * @private
+         * @name BitmapText
+         * @memberof PIXI
+         * @see PIXI.extras.BitmapText
+         * @deprecated since version 3.0.0
+         */
+        type BitmapText = extras.BitmapText;
+
+        /**
+         * @namespace
+         * @private
+         * @name math
+         * @memberof PIXI
+         * @see PIXI
+         * @deprecated since version 3.0.6
+         */
+        type math = any;
+
+        /**
+         * @class
+         * @private
+         * @name PIXI.AbstractFilter
+         * @see PIXI.Filter
+         * @deprecated since version 3.0.6
+         */
+        type AbstractFilter = Filter;
+
+        /**
+         * @class
+         * @private
+         * @name PIXI.TransformManual
+         * @see PIXI.TransformBase
+         * @deprecated since version 4.0.0
+         */
+        type TransformManual = TransformBase;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.TARGET_FPMS
+         * @see PIXI.settings.TARGET_FPMS
+         * @deprecated since version 4.2.0
+         */
+        type TARGET_FPMS = number;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.FILTER_RESOLUTION
+         * @see PIXI.settings.FILTER_RESOLUTION
+         * @deprecated since version 4.2.0
+         */
+        type FILTER_RESOLUTION = number;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.RESOLUTION
+         * @see PIXI.settings.RESOLUTION
+         * @deprecated since version 4.2.0
+         */
+        type RESOLUTION = number;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.MIPMAP_TEXTURES
+         * @see PIXI.settings.MIPMAP_TEXTURES
+         * @deprecated since version 4.2.0
+         */
+        type MIPMAP_TEXTURES = any;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.SPRITE_BATCH_SIZE
+         * @see PIXI.settings.SPRITE_BATCH_SIZE
+         * @deprecated since version 4.2.0
+         */
+        type SPRITE_BATCH_SIZE = number;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.SPRITE_MAX_TEXTURES
+         * @see PIXI.settings.SPRITE_MAX_TEXTURES
+         * @deprecated since version 4.2.0
+         */
+        type SPRITE_MAX_TEXTURES = number;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.RETINA_PREFIX
+         * @see PIXI.settings.RETINA_PREFIX
+         * @deprecated since version 4.2.0
+         */
+        type RETINA_PREFIX = RegExp | string;
+
+        /**
+         * @static
+         * @constant
+         * @name PIXI.DEFAULT_RENDER_OPTIONS
+         * @see PIXI.settings.RENDER_OPTIONS
+         * @deprecated since version 4.2.0
+         */
+        type DEFAULT_RENDER_OPTIONS = number;
+
+    }
+
+    export namespace extras {
+
+        /**
+         * @class
+         * @name MovieClip
+         * @memberof PIXI.extras
+         * @see PIXI.extras.AnimatedSprite
+         * @deprecated since version 4.2.0
+         */
+        type MovieClip = extras.AnimatedSprite;
+
+    }
+
+}
+
+declare namespace pixi {
+    export const gl: typeof PIXI.glCore;
+}
+
+declare module "pixi.js" {
+    export = PIXI;
 }
-
-// ticker
-
-export namespace ticker {
-
-	export var shared: Ticker;
-
-	export class Ticker {
-
-		protected _tick(time: number): void;
-		protected _emitter: utils.EventEmitter;
-		protected _requestId: number;
-		protected _maxElapsedMS: number;
-
-		protected _requestIfNeeded(): void;
-		protected _cancelIfNeeded(): void;
-		protected _startIfPossible(): void;
-
-		autoStart: boolean;
-		deltaTime: number;
-		elapsedMS: number;
-		lastTime: number;
-		speed: number;
-		started: boolean;
-
-		FPS: number;
-		minFPS: number;
-
-		add(fn: (deltaTime: number) => void, context?: any): Ticker;
-		addOnce(fn: (deltaTime: number) => void, context?: any): Ticker;
-		remove(fn: (deltaTime: number) => void, context?: any): Ticker;
-		start(): void;
-		stop(): void;
-		update(): void;
-
-	}
-
-}
-
-// shader
-
-export class Shader extends glCore.GLShader { }
-
-//////////////////////////////////////////////////////////////////////////////
-////////////////////////////EXTRACT///////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace extract {
-
-	export class CanvasExtract {
-
-		protected renderer: CanvasRenderer;
-
-		constructor(renderer: CanvasRenderer);
-
-		image(target?: DisplayObject | RenderTexture): HTMLImageElement;
-		base64(target?: DisplayObject | RenderTexture): string;
-		canvas(target?: DisplayObject | RenderTexture): HTMLCanvasElement;
-		pixels(renderTexture?: DisplayObject | RenderTexture): number[];
-
-		destroy(): void;
-
-	}
-	export class WebGLExtract {
-		protected renderer: WebGLRenderer;
-
-		constructor(renderer: WebGLRenderer);
-
-		image(target?: DisplayObject | RenderTexture): HTMLImageElement;
-		base64(target?: DisplayObject | RenderTexture): string;
-		canvas(target?: DisplayObject | RenderTexture): HTMLCanvasElement;
-		pixels(renderTexture?: DisplayObject | RenderTexture): number[];
-
-		destroy(): void;
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-////////////////////////////EXTRAS////////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace extras {
-
-	export interface IBitmapTextStyle {
-
-		font?: string | {
-
-			name?: string;
-			size?: number;
-
-		};
-		align?: string;
-		tint?: number;
-
-	}
-	export class BitmapText extends Container {
-
-		constructor(text: string, style?: IBitmapTextStyle);
-
-		textWidth: number;
-		textHeight: number;
-		protected _glyphs: Sprite[];
-		protected _font: string | {
-			name?: string;
-			size?: number;
-		};
-		font: string | {
-			name?: string;
-			size?: number;
-		};
-		protected _text: string;
-		maxWidth: number;
-		maxLineHeight: number;
-		dirty: boolean;
-		tint: number;
-		align: string;
-		text: string;
-		anchor: PIXI.Point | number;
-
-		protected updateText(): void;
-		updateTransform(): void;
-		getLocalBounds(): Rectangle;
-		validate(): void;
-
-		static fonts: any;
-
-	}
-	export class AnimatedSprite extends Sprite {
-
-		constructor(textures: Texture[] | Array<{ texture: Texture, time?: number }>);
-
-		protected _textures: Texture[];
-		protected _durations: number[];
-		textures: Texture[] | Array<{ texture: Texture, time?: number }>;
-		animationSpeed: number;
-		loop: boolean;
-		onComplete: () => void;
-		onFrameChange: (currentFrame: number) => void;
-		protected _currentTime: number;
-		playing: boolean;
-		totalFrames: number;
-		currentFrame: number;
-		stop(): void;
-		play(): void;
-		gotoAndStop(frameNumber: number): void;
-		gotoAndPlay(frameNumber: number): void;
-		protected update(deltaTime: number): void;
-		destroy(): void;
-
-		static fromFrames(frame: string[]): AnimatedSprite;
-		static fromImages(images: string[]): AnimatedSprite;
-
-	}
-	export class TextureTransform {
-
-		constructor(texture: Texture, clampMargin?: number);
-
-		protected _texture: Texture;
-		protected mapCoord: Matrix;
-		protected uClampFrame: Float32Array;
-		protected uClampOffset: Float32Array;
-		protected _lastTextureID: number;
-
-		clampOffset: number;
-		clampMargin: number;
-
-		texture: Texture;
-
-		update(forceUpdate?: boolean): void;
-
-	}
-	export class TilingSprite extends Sprite {
-
-		constructor(texture: Texture, width?: number, height?: number);
-
-		tileTransform: TransformStatic;
-		protected _width: number;
-		protected _height: number;
-		protected _canvasPattern: CanvasPattern;
-		uvTransform: TextureTransform;
-
-		clampMargin: number;
-		tileScale: Point | ObservablePoint;
-		tilePosition: Point | ObservablePoint;
-
-		protected _onTextureUpdate(): void;
-		protected _renderWebGL(renderer: WebGLRenderer): void;
-		protected _renderCanvas(renderer: CanvasRenderer): void;
-		protected _calculateBounds(): void;
-		getLocalBounds(rect?: Rectangle): Rectangle;
-		containsPoint(point: Point): boolean;
-		destroy(): void;
-
-		static from(source: number | string | BaseTexture | HTMLCanvasElement | HTMLVideoElement, width?: number, height?: number): TilingSprite;
-		static fromFrame(frameId: string, width?: number, height?: number): TilingSprite;
-		// if you remove the next line, the class will break. https://github.com/pixijs/pixi-typescript/issues/96
-		static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
-		static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite;
-
-		width: number;
-		height: number;
-
-	}
-	export class TilingSpriteRenderer extends ObjectRenderer {
-
-		constructor(renderer: WebGLRenderer);
-
-		render(ts: TilingSprite): void;
-
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-////////////////////////////FILTERS///////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace filters {
-
-	export class FXAAFilter extends Filter { }
-	export class BlurFilter extends Filter {
-
-		constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
-
-		blurXFilter: BlurXFilter;
-		blurYFilter: BlurYFilter;
-		resolution: number;
-		padding: number;
-		passes: number;
-		blur: number;
-		blurX: number;
-		blurY: number;
-		quality: number;
-
-	}
-	export class BlurXFilter extends Filter {
-
-		constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
-
-		protected _quality: number;
-
-		quality: number;
-		passes: number;
-		resolution: number;
-		strength: number;
-		firstRun: boolean;
-		blur: number;
-
-	}
-	export class BlurYFilter extends Filter {
-
-		constructor(strength?: number, quality?: number, resolution?: number, kernelSize?: number);
-
-		protected _quality: number;
-
-		quality: number;
-		passes: number;
-		resolution: number;
-		strength: number;
-		firstRun: boolean;
-		blur: number;
-
-	}
-	export class ColorMatrixFilter extends Filter {
-
-		constructor();
-
-		protected _loadMatrix(matrix: number[], multiply?: boolean): void;
-		protected _multiply(out: number[], a: number[], b: number[]): void;
-		protected _colorMatrix(matrix: number[]): void;
-
-		matrix: number[];
-
-		brightness(b: number, multiply?: boolean): void;
-		greyscale(scale: number, multiply?: boolean): void;
-		blackAndWhite(multiply?: boolean): void;
-		hue(rotation: number, multiply?: boolean): void;
-		contrast(amount: number, multiply?: boolean): void;
-		saturate(amount: number, multiply?: boolean): void;
-		desaturate(multiply?: boolean): void;
-		negative(multiply?: boolean): void;
-		sepia(multiply?: boolean): void;
-		technicolor(multiply?: boolean): void;
-		polaroid(multiply?: boolean): void;
-		toBGR(multiply?: boolean): void;
-		kodachrome(multiply?: boolean): void;
-		browni(multiply?: boolean): void;
-		vintage(multiply?: boolean): void;
-		colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void;
-		night(intensity: number, multiply?: boolean): void;
-		predator(amount: number, multiply?: boolean): void;
-		lsd(multiply?: boolean): void;
-		reset(): void;
-
-	}
-	export class DisplacementFilter extends Filter {
-
-		constructor(sprite: Sprite, scale?: number);
-
-		scale: Point;
-		map: Texture;
-
-	}
-	export class VoidFilter extends Filter {
-		glShaderKey: string;
-	}
-
-	// pixi-filters.d.ts todo
-	// https://github.com/pixijs/pixi-filters/
-	export class NoiseFilter extends Filter {
-
-		noise: number;
-
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-////////////////////////////INTERACTION///////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace interaction {
-
-	export interface InteractionEvent {
-
-		stopped: boolean;
-		target: DisplayObject;
-		currentTarget: DisplayObject;
-		type: string;
-		data: InteractionData;
-		stopPropagation(): void;
-
-	}
-	export class InteractionData {
-
-		global: Point;
-
-		protected _target: DisplayObject;
-		target: DisplayObject;
-		targetProxy: DisplayObject;
-		originalEvent: Event;
-
-		getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point;
-
-	}
-	export class InteractionManager extends utils.EventEmitter {
-
-		constructor(renderer: SystemRenderer, options?: { autoPreventDefault?: boolean; interactionFrequency?: number; });
-
-		renderer: SystemRenderer;
-		autoPreventDefault: boolean;
-		interactionFrequency: number;
-		mouse: InteractionData;
-		pointer: InteractionData;
-		eventData: {
-			stopped: boolean;
-			target: any;
-			type: any;
-			data: InteractionData;
-			stopPropagination(): void;
-		};
-		interactiveDataPool: InteractionData[];
-		protected interactionDOMElement: HTMLElement;
-		protected moveWhenInside: boolean;
-		protected eventsAdded: boolean;
-		mouseOverRenderer: boolean;
-		supportsTouchEvents: boolean;
-		supportsPointerEvents: boolean;
-		normalizeTouchEvents: boolean;
-		normalizeMouseEvents: boolean;
-
-		protected onMouseUp: (event: MouseEvent) => void;
-		protected processMouseUp: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onMouseDown: (event: MouseEvent) => void;
-		protected processMouseDown: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onMouseMove: (event: MouseEvent) => void;
-		protected processMouseMove: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onMouseOut: (event: MouseEvent) => void;
-		protected processMouseOverOut: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onMouseOver: (event: MouseEvent) => void;
-
-		protected onPointerUp: (event: PointerEvent) => void;
-		protected processPointerUp: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onPointerDown: (event: PointerEvent) => void;
-		protected processPointerDown: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onPointerMove: (event: PointerEvent) => void;
-		protected processPointerMove: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onPointerOut: (event: PointerEvent) => void;
-		protected processPointerOut: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onPointerOver: (event: PointerEvent) => void;
-
-		protected onTouchStart: (event: TouchEvent) => void;
-		protected processTouchStart: (DisplayObject: DisplayObject, hit: boolean) => void;
-		protected onTouchEnd: (event: TouchEvent) => void;
-		protected processTouchEnd: (displayObject: DisplayObject, hit: boolean) => void;
-		protected onTouchMove: (event: TouchEvent) => void;
-		protected processTouchMove: (displayObject: DisplayObject, hit: boolean) => void;
-		defaultCursorStyle: string;
-		currentCursorStyle: string;
-		protected _tempPoint: Point;
-		resolution: number;
-		protected setTargetElement(element: HTMLElement, resolution: number): void;
-		protected addEvents(): void;
-		protected removeEvents(): void;
-		update(deltaTime: number): void;
-		protected dispatchEvent(displayObject: DisplayObject, eventString: string, eventData: any): void;
-		mapPositionToPoint(point: Point, x: number, y: number): void;
-		protected processInteractive(point: Point, displayObject: DisplayObject, func: (displayObject: DisplayObject, hit: boolean) => void, hitTest: boolean, interactive: boolean): boolean;
-		protected _startInteractionProcess(): void;
-		protected _queueAdd(displayObject: DisplayObject, order: number): void;
-		protected _finishInteractionProcess(func: Function): void;
-		protected getTouchData(touchEvent: InteractionData): InteractionData;
-		protected returnTouchData(touchData: InteractionData): void;
-		protected normalizeToPointerData(Event: Event): void;
-
-		destroy(): void;
-
-	}
-	export interface InteractiveTarget {
-
-		interactive: boolean;
-		interactiveChildren: boolean;
-		hitArea: IHitArea;
-		buttonMode: boolean;
-		defaultCursor: string;
-
-	}
-	export interface InteractiveTargetProxy extends InteractiveTarget {
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-///////////////////////////////LOADER/////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-// extends
-// https://github.com/englercj/resource-loader/
-// 1.6.4
-
-export namespace loaders {
-
-	export interface ILoaderOptions {
-
-		crossOrigin?: boolean | string;
-		loadType?: number;
-		xhrType?: string;
-		metaData?: any;
-
-	}
-	export interface IResourceDictionary {
-
-		[index: string]: PIXI.loaders.Resource;
-
-	}
-	export class Loader extends utils.EventEmitter {
-
-		protected static _pixiMiddleware: Function[];
-		static addPixiMiddleware(fn: Function): void;
-
-		constructor(baseUrl?: string, concurrency?: number);
-
-		baseUrl: string;
-		progress: number;
-		loading: boolean;
-		resources: IResourceDictionary;
-
-		add(name: string, url: string, options?: ILoaderOptions, cb?: () => void): Loader;
-		add(url: string, options?: ILoaderOptions, cb?: () => void): Loader;
-		// todo I am not sure of object literal notional (or its options) so just allowing any but would love to improve this
-		add(obj: any, options?: ILoaderOptions, cb?: () => void): Loader;
-
-		on(event: "complete", fn: (loader: loaders.Loader, object: any) => void, context?: any): utils.EventEmitter;
-		on(event: "error", fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter;
-		on(event: "load", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter;
-		on(event: "progress", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter;
-		on(event: "start", fn: (loader: loaders.Loader) => void, context?: any): utils.EventEmitter;
-		on(event: string, fn: Function, context?: any): utils.EventEmitter;
-
-		once(event: "complete", fn: (loader: loaders.Loader, object: any) => void, context?: any): utils.EventEmitter;
-		once(event: "error", fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter;
-		once(event: "load", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter;
-		once(event: "progress", fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): utils.EventEmitter;
-		once(event: "start", fn: (loader: loaders.Loader) => void, context?: any): utils.EventEmitter;
-		once(event: string, fn: Function, context?: any): utils.EventEmitter;
-
-		before(fn: Function): Loader;
-		pre(fn: Function): Loader;
-
-		after(fn: Function): Loader;
-		use(fn: Function): Loader;
-
-		reset(): void;
-
-		load(cb?: (loader: loaders.Loader, object: any) => void): Loader;
-
-	}
-	export interface ITextureDictionary {
-		[index: string]: PIXI.Texture;
-	}
-
-	export class Resource extends utils.EventEmitter {
-
-		static LOAD_TYPE: {
-			XHR: number;
-			IMAGE: number;
-			AUDIO: number;
-			VIDEO: number;
-		};
-
-		static XHR_READ_STATE: {
-			UNSENT: number;
-			OPENED: number;
-			HEADERS_RECIEVED: number;
-			LOADING: number;
-			DONE: number;
-		};
-
-		static XHR_RESPONSE_TYPE: {
-			DEFAULT: number;
-			BUFFER: number;
-			BLOB: number;
-			DOCUMENT: number;
-			JSON: number;
-			TEXT: number;
-		};
-
-		constructor(name?: string, url?: string | string[], options?: ILoaderOptions);
-
-		protected _loadSourceElement(type: string): void;
-		isLoading: boolean;
-		isComplete: boolean;
-
-		isJson: boolean;
-		isXml: boolean;
-		isImage: boolean;
-		isAudio: boolean;
-		isVideo: boolean;
-
-		name: string;
-		texture: Texture;
-		textures: ITextureDictionary;
-		url: string;
-		data: any;
-		crossOrigin: boolean | string;
-		loadType: number;
-		xhrType: string;
-		error: Error;
-		xhr: XMLHttpRequest;
-		SVGMetadataElement: any;
-
-		metadata: any;
-		spineAtlas: any;
-		spineData: any;
-
-		complete(): void;
-		load(cb?: () => void): void;
-		abort(message: string): void;
-
-	}
-}
-
-//////////////////////////////////////////////////////////////////////////////
-///////////////////////////////MESH///////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace mesh {
-
-	export class Mesh extends Container {
-
-		constructor(texture: Texture, vertices?: Float32Array, uvs?: Float32Array, indices?: Uint16Array, drawMode?: number);
-
-		protected _texture: Texture;
-		uvs: Float32Array;
-		vertices: Float32Array;
-		indices: Uint16Array;
-		dirty: number;
-		indexDirty: number;
-		dirtyVertex: boolean;
-		protected _geometryVersion: number;
-		blendMode: number;
-		pluginName: string;
-		canvasPadding: number;
-		drawMode: number;
-		texture: Texture;
-		tintRgb: Float32Array;
-		protected _glDatas: { [n: number]: any; };
-		protected _renderWebGL(renderer: WebGLRenderer): void;
-		protected _renderCanvas(renderer: CanvasRenderer): void;
-		protected _onTextureUpdate(): void;
-		protected _calculateBounds(): void;
-		containsPoint(point: Point): boolean;
-		tint: number;
-
-		static DRAW_MODES: {
-			TRIANGLE_MESH: number;
-			TRIANGLES: number;
-		};
-
-	}
-
-	export class CanvasMeshRenderer {
-
-		constructor(renderer: CanvasRenderer);
-
-		renderer: CanvasRenderer;
-
-		render(mesh: Mesh): void;
-		protected _renderTriangleMesh(mesh: Mesh): void;
-		protected _renderTriangles(mesh: Mesh): void;
-		protected _renderDrawTriangle(mesh: Mesh, index0: number, index1: number, index2: number): void;
-		protected renderMeshFlat(mesh: Mesh): void;
-
-		destroy(): void;
-
-	}
-
-	export class MeshRenderer extends ObjectRenderer {
-
-		constructor(renderer: WebGLRenderer);
-
-		shader: Shader;
-		render(mesh: Mesh): void;
-
-	}
-
-	export class Plane extends Mesh {
-
-		constructor(texture: Texture, verticesX?: number, verticesY?: number);
-		protected _ready: boolean;
-		verticesX: number;
-		verticesY: number;
-		drawMode: number;
-
-		refresh(): void;
-
-		protected _onTexureUpdate(): void;
-
-	}
-
-	export class NineSlicePlane extends Plane {
-
-		constructor(texture: Texture, leftWidth?: number, topHeight?: number, rightWidth?: number, bottomHeight?: number);
-
-		width: number;
-		height: number;
-		leftWidth: number;
-		rightWidth: number;
-		topHeight: number;
-		bottomHeight: number;
-
-		protected _leftWidth: number;
-		protected _rightWidth: number;
-		protected _topHeight: number;
-		protected _bottomHeight: number;
-		protected _height: number;
-		protected _width: number;
-		protected _origHeight: number;
-		protected _origWidth: number;
-		protected _uvh: number;
-		protected _uvw: number;
-
-		updateHorizontalVertices(): void;
-		updateVerticalVertices(): void;
-		protected drawSegment(context: CanvasRenderingContext2D | WebGLRenderingContext, textureSource: any, w: number, h: number, x1: number, y1: number, x2: number, y2: number): void;
-
-	}
-
-	export class Rope extends Mesh {
-
-		constructor(texture: Texture, points: Point[]);
-
-		points: Point[];
-		colors: number[];
-		protected _ready: boolean;
-		refresh(): void;
-
-		protected _onTextureUpdate(): void;
-		updateTransform(): void;
-
-	}
-}
-
-//////////////////////////////////////////////////////////////////////////////
-/////////////////////////////PARTICLES////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace particles {
-
-	export interface IParticleContainerProperties {
-
-		scale?: boolean;
-		position?: boolean;
-		rotation?: boolean;
-		uvs?: boolean;
-		alpha?: boolean;
-
-	}
-	export class ParticleContainer extends Container {
-
-		constructor(size?: number, properties?: IParticleContainerProperties, batchSize?: number);
-
-		protected _properties: boolean[];
-		protected _maxSize: number;
-		protected _batchSize: number;
-		protected _glBuffers: { [n: number]: WebGLBuffer; };
-		protected _bufferToUpdate: number;
-		interactiveChildren: boolean;
-		blendMode: number;
-		roundPixels: boolean;
-		baseTexture: BaseTexture;
-
-		setProperties(properties: IParticleContainerProperties): void;
-		protected onChildrenChange: (smallestChildIndex?: number) => void;
-
-		destroy(options?: IDestroyOptions | boolean): void;
-
-	}
-	export class ParticleBuffer {
-
-		constructor(gl: WebGLRenderingContext, properties: any, dynamicPropertyFlags: any[], size: number);
-
-		gl: WebGLRenderingContext;
-		vertSize: number;
-		vertByteSize: number;
-		size: number;
-		dynamicProperties: any[];
-		staticProperties: any[];
-		staticStride: number;
-		staticBuffer: any;
-		staticData: any;
-		dynamicStride: number;
-		dynamicBuffer: any;
-		dynamicData: any;
-
-		destroy(): void;
-
-	}
-	export interface IParticleRendererProperty {
-		attribute: number;
-		size: number;
-		uploadFunction: (children: PIXI.DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number) => void;
-		offset: number;
-	}
-	export class ParticleRenderer extends ObjectRenderer {
-
-		constructor(renderer: WebGLRenderer);
-
-		shader: glCore.GLShader;
-		indexBuffer: WebGLBuffer;
-		properties: IParticleRendererProperty[];
-		protected tempMatrix: Matrix;
-
-		start(): void;
-		generateBuffers(container: ParticleContainer): ParticleBuffer[];
-		uploadVertices(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
-		uploadPosition(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
-		uploadRotation(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
-		uploadUvs(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
-		uploadAlpha(children: DisplayObject[], startIndex: number, amount: number, array: number[], stride: number, offset: number): void;
-		destroy(): void;
-
-		indices: Uint16Array;
-
-	}
-	export interface IParticleShader extends glCore.GLShader { }
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-////////////////////////////PREPARE///////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export namespace prepare {
-
-	type addHook = (item: any, queue: any[]) => boolean;
-	type uploadHook<UploadHookSource> = (prepare: UploadHookSource, item: any) => boolean;
-	export abstract class BasePrepare<UploadHookSource>{
-
-		constructor(renderer: SystemRenderer);
-
-		limiter: CountLimiter | TimeLimiter;
-		protected renderer: SystemRenderer;
-		protected uploadHookHelper: UploadHookSource;
-		protected queue: any[];
-		protected addHooks: addHook[];
-		protected uploadHooks: Array<uploadHook<UploadHookSource>>;
-		protected completes: Function[];
-		protected ticking: boolean;
-		protected delayedTick: () => void;
-
-		upload(item: Function | DisplayObject | BaseTexture | TextStyle | any, done?: () => void): void;
-		protected tick(): void;
-		protected prepareItems(): void;
-		register(addHook?: addHook, uploadHook?: uploadHook<UploadHookSource>): this;
-		add(item: DisplayObject | any): this;
-		destroy(): void;
-
-	}
-	export class CanvasPrepare extends BasePrepare<CanvasPrepare> {
-
-		constructor(renderer: CanvasRenderer);
-
-		protected canvas: HTMLCanvasElement;
-		protected ctx: CanvasRenderingContext2D;
-
-	}
-	export class WebGLPrepare extends BasePrepare<WebGLRenderer> {
-
-		constructor(renderer: WebGLRenderer);
-
-	}
-	export class CountLimiter {
-
-		constructor(maxItemsPerFrame: number);
-
-		protected maxItemsPerFrame: number;
-		protected itemsLeft: number;
-
-	}
-	export class TimeLimiter {
-
-		constructor(maxMilliseconds: number);
-
-		protected maxMilliseconds: number;
-		protected frameStart: number;
-
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-/////////////////////////////pixi-gl-core/////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-// pixi-gl-core https://github.com/pixijs/pixi-gl-core
-// sharedArrayBuffer as a type is not available yet.
-// need to fully define what an `Attrib` is.
-export namespace glCore {
-
-	export interface IContextOptions {
-		/**
-		 * Boolean that indicates if the canvas contains an alpha buffer.
-		 */
-		alpha?: boolean;
-		/**
-		 * Boolean that indicates that the drawing buffer has a depth buffer of at least 16 bits.
-		 */
-		depth?: boolean;
-		/**
-		 * Boolean that indicates that the drawing buffer has a stencil buffer of at least 8 bits.
-		 */
-		stencil?: boolean;
-		/**
-		 * Boolean that indicates whether or not to perform anti-aliasing.
-		 */
-		antialias?: boolean;
-		/**
-		 * Boolean that indicates that the page compositor will assume the drawing buffer contains colors with pre-multiplied alpha.
-		 */
-		premultipliedAlpha?: boolean;
-		/**
-		 * If the value is true the buffers will not be cleared and will preserve their values until cleared or overwritten by the author.
-		 */
-		preserveDrawingBuffer?: boolean;
-		/**
-		 *  Boolean that indicates if a context will be created if the system performance is low.
-		 */
-		failIfMajorPerformanceCaveat?: boolean;
-	}
-	export function createContext(view: HTMLCanvasElement, options?: IContextOptions): WebGLRenderingContext;
-	export function setVertexAttribArrays(gl: WebGLRenderingContext, attribs: IAttrib[], state?: WebGLState): WebGLRenderingContext;
-	export class GLBuffer {
-
-		static EMPTY_ARRAY_BUFFER: ArrayBuffer;
-
-		constructor(gl: WebGLRenderingContext, type: number, data: ArrayBuffer | ArrayBufferView | any, drawType: number);
-
-		protected _updateID: number;
-		gl: WebGLRenderingContext;
-		buffer: WebGLBuffer;
-		type: number;
-		drawType: number;
-		data: ArrayBuffer | ArrayBufferView | any;
-
-		upload(data: ArrayBuffer | ArrayBufferView | any, offset?: number, dontBind?: boolean): void;
-		bind(): void;
-
-		static createVertexBuffer(gl: WebGLRenderingContext, data: ArrayBuffer | ArrayBufferView | any, drawType: number): GLBuffer;
-		static createIndexBuffer(gl: WebGLRenderingContext, data: ArrayBuffer | ArrayBufferView | any, drawType: number): GLBuffer;
-		static create(gl: WebGLRenderingContext, type: number, data: ArrayBuffer | ArrayBufferView | any, drawType: number): GLBuffer;
-
-		destroy(): void;
-
-	}
-	export class GLFramebuffer {
-
-		constructor(gl: WebGLRenderingContext, width: number, height: number);
-
-		gl: WebGLRenderingContext;
-		frameBuffer: WebGLFramebuffer;
-		stencil: WebGLRenderbuffer;
-		texture: GLTexture;
-		width: number;
-		height: number;
-
-		enableTexture(texture: GLTexture): void;
-		enableStencil(): void;
-		clear(r: number, g: number, b: number, a: number): void;
-		bind(): void;
-		unbind(): void;
-		resize(width: number, height: number): void;
-		destroy(): void;
-
-		static createRGBA(gl: WebGLRenderingContext, width: number, height: number, data: ArrayBuffer | ArrayBufferView | any): GLFramebuffer;
-		static createFloat32(gl: WebGLRenderingContext, width: number, height: number, data: ArrayBuffer | ArrayBufferView | any): GLFramebuffer;
-
-	}
-	export class GLShader {
-
-		constructor(gl: WebGLRenderingContext, vertexSrc: string | string[], fragmentSrc: string | string[]);
-
-		gl: WebGLRenderingContext;
-		program: WebGLProgram;
-		uniforms: any;
-		attributes: any;
-
-		bind(): void;
-		destroy(): void;
-
-	}
-	export class GLTexture {
-
-		constructor(gl: WebGLRenderingContext, width?: number, height?: number, format?: number, type?: number);
-
-		gl: WebGLRenderingContext;
-		texture: WebGLTexture;
-		mipmap: boolean;
-		premultiplyAlpha: boolean;
-		width: number;
-		height: number;
-		format: number;
-		type: number;
-
-		upload(source: HTMLImageElement | ImageData | HTMLVideoElement | HTMLCanvasElement): void;
-		uploadData(data: number, width: number, height: number): void;
-		bind(location?: number): void;
-		unbind(): void;
-		minFilter(linear: boolean): void;
-		magFilter(linear: boolean): void;
-		enableMipmap(): void;
-		enableLinearScaling(): void;
-		enableNearestScaling(): void;
-		enableWrapClamp(): void;
-		enableWrapRepeat(): void;
-		enableWrapMirrorRepeat(): void;
-		destroy(): void;
-
-		static fromSource(gl: WebGLRenderingContext, source: HTMLImageElement | ImageData | HTMLVideoElement | HTMLCanvasElement, premultipleAlpha?: boolean): GLTexture;
-		static fromData(gl: WebGLRenderingContext, data: number[], width: number, height: number): GLTexture;
-
-	}
-	export interface IAttrib {
-
-		attribute: {
-			location: boolean;
-			size: number;
-		};
-		normalized: boolean;
-		stride: number;
-		start: number;
-		buffer: ArrayBuffer;
-
-	}
-	export interface IWebGLRenderingContextAttribute {
-
-		buffer: WebGLBuffer;
-		attribute: any;
-		type: number;
-		normalized: boolean;
-		stride: number;
-		start: number;
-
-	}
-	export interface IAttribState {
-		tempAttribState: IAttrib[];
-		attribState: IAttrib[];
-	}
-
-	export class VertexArrayObject {
-
-		static FORCE_NATIVE: boolean;
-
-		constructor(gl: WebGLRenderingContext, state: WebGLState);
-
-		protected nativeVaoExtension: any;
-		protected nativeState: IAttribState;
-		protected nativeVao: VertexArrayObject;
-		gl: WebGLRenderingContext;
-		attributes: IAttrib[];
-		indexBuffer: GLBuffer;
-		dirty: boolean;
-
-		bind(): VertexArrayObject;
-		unbind(): VertexArrayObject;
-		activate(): VertexArrayObject;
-		addAttribute(buffer: GLBuffer, attribute: IAttrib, type: number, normalized: boolean, stride: number, start: number): VertexArrayObject;
-		addIndex(buffer: GLBuffer, options?: any): VertexArrayObject;
-		clear(): VertexArrayObject;
-		draw(type: number, size: number, start: number): VertexArrayObject;
-		destroy(): void;
-
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-///////////////////////////////UTILS//////////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-
-export interface IDecomposedDataUri {
-	mediaType: string;
-	subType: string;
-	encoding: string;
-	data: any;
-}
-
-export namespace utils {
-
-	export function uid(): number;
-	export function hex2rgb(hex: number, out?: number[]): number[];
-	export function hex2string(hex: number): string;
-	export function rgb2hex(rgb: Number[]): number;
-	export function canUseNewCanvasBlendModes(): boolean;
-	export function getResolutionOfUrl(url: string, defaultValue?: number): number;
-	export function getSvgSize(svgString: string): any;
-	export function decomposeDataUri(dataUri: string): IDecomposedDataUri;
-	export function getUrlFileExtension(url: string): string;
-	export function sayHello(type: string): void;
-	export function skipHello(): void;
-	export function isWebGLSupported(): boolean;
-	export function sign(n: number): number;
-	export function removeItems<T>(arr: T[], startIdx: number, removeCount: number): void;
-	export var TextureCache: any;
-	export var BaseTextureCache: any;
-
-	// https://github.com/kaimallea/isMobile
-	export namespace isMobile {
-		export var apple: {
-			phone: boolean;
-			ipod: boolean;
-			tablet: boolean;
-			device: boolean;
-		};
-		export var android: {
-			phone: boolean;
-			tablet: boolean;
-			device: boolean;
-		};
-		export var amazon: {
-			phone: boolean;
-			table: boolean;
-			device: boolean;
-		};
-		export var windows: {
-			phone: boolean;
-			tablet: boolean;
-			device: boolean;
-		};
-		export var seven_inch: boolean;
-		export var other: {
-			blackberry_10: boolean;
-			blackberry: boolean;
-			opera: boolean;
-			firefox: boolean;
-			chrome: boolean;
-			device: boolean;
-		};
-		export var any: boolean;
-		export var phone: boolean;
-		export var tablet: boolean;
-	}
-
-	// https://github.com/primus/eventemitter3
-	export class EventEmitter {
-
-		listeners(event: string): Function[];
-		emit(event: string, ...args: any[]): boolean;
-		on(event: string, fn: Function, context?: any): EventEmitter;
-		once(event: string, fn: Function, context?: any): EventEmitter;
-		removeListener(event: string, fn: Function, context?: any, once?: boolean): EventEmitter;
-		removeAllListeners(event: string): EventEmitter;
-		eventNames(): string[];
-
-		off(event: string, fn: Function, context?: any, once?: boolean): EventEmitter;
-		addListener(event: string, fn: Function, context?: any): EventEmitter;
-
-	}
-
-}
-
-//////////////////////////////////////////////////////////////////////////////
-/////////////////////////////depreciation/////////////////////////////////////
-//////////////////////////////////////////////////////////////////////////////
-// not sure how to handle blendmodes scalemodes basetexturecache
-export namespace core {
-
-	/**
-	 * @class
-	 * @private
-	 * @name SpriteBatch
-	 * @memberof PIXI
-	 * @see PIXI.ParticleContainer
-	 * @throws {ReferenceError} SpriteBatch does not exist any more, please use the new ParticleContainer instead.
-	 * @deprecated since version 3.0.0
-	 */
-	type SpriteBatch = ParticleContainer;
-
-	/**
-	 * @class
-	 * @private
-	 * @name AssetLoader
-	 * @memberof PIXI
-	 * @see PIXI.loaders.Loader
-	 * @throws {ReferenceError} The loader system was overhauled in pixi v3, please see the new PIXI.loaders.Loader class.
-	 * @deprecated since version 3.0.0
-	 */
-	type AssetLoader = loaders.Loader;
-
-	/**
-	 * @class
-	 * @private
-	 * @name Stage
-	 * @memberof PIXI
-	 * @see PIXI.Container
-	 * @deprecated since version 3.0.0
-	 */
-	type Stage = Container;
-
-	/**
-	 * @class
-	 * @private
-	 * @name DisplayObjectContainer
-	 * @memberof PIXI
-	 * @see PIXI.Container
-	 * @deprecated since version 3.0.0
-	 */
-	type DisplayObjectContainer = Container;
-
-	/**
-	 * @class
-	 * @private
-	 * @name Strip
-	 * @memberof PIXI
-	 * @see PIXI.mesh.Mesh
-	 * @deprecated since version 3.0.0
-	 */
-	type Strip = mesh.Mesh;
-
-	/**
-	 * @class
-	 * @private
-	 * @name Rope
-	 * @memberof PIXI
-	 * @see PIXI.mesh.Rope
-	 * @deprecated since version 3.0.0
-	 */
-	type Rope = mesh.Rope;
-
-	/**
-	 * @class
-	 * @private
-	 * @name ParticleContainer
-	 * @memberof PIXI
-	 * @see PIXI.particles.ParticleContainer
-	 * @deprecated since version 4.0.0
-	 */
-	type ParticleContainer = particles.ParticleContainer;
-
-	/**
-	 * @class
-	 * @private
-	 * @name MovieClip
-	 * @memberof PIXI
-	 * @see PIXI.extras.MovieClip
-	 * @deprecated since version 3.0.0
-	 */
-	type MovieClip = extras.AnimatedSprite;
-
-	/**
-	 * @class
-	 * @private
-	 * @name TilingSprite
-	 * @memberof PIXI
-	 * @see PIXI.extras.TilingSprite
-	 * @deprecated since version 3.0.0
-	 */
-	type TilingSprite = extras.TilingSprite;
-
-	/**
-	 * @class
-	 * @private
-	 * @name BitmapText
-	 * @memberof PIXI
-	 * @see PIXI.extras.BitmapText
-	 * @deprecated since version 3.0.0
-	 */
-	type BitmapText = extras.BitmapText;
-
-	/**
-	 * @namespace
-	 * @private
-	 * @name math
-	 * @memberof PIXI
-	 * @see PIXI
-	 * @deprecated since version 3.0.6
-	 */
-	type math = any;
-
-	/**
-	 * @class
-	 * @private
-	 * @name PIXI.AbstractFilter
-	 * @see PIXI.Filter
-	 * @deprecated since version 3.0.6
-	 */
-	type AbstractFilter = Filter;
-
-	/**
-	 * @class
-	 * @private
-	 * @name PIXI.TransformManual
-	 * @see PIXI.TransformBase
-	 * @deprecated since version 4.0.0
-	 */
-	type TransformManual = TransformBase;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.TARGET_FPMS
-	 * @see PIXI.settings.TARGET_FPMS
-	 * @deprecated since version 4.2.0
-	 */
-	type TARGET_FPMS = number;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.FILTER_RESOLUTION
-	 * @see PIXI.settings.FILTER_RESOLUTION
-	 * @deprecated since version 4.2.0
-	 */
-	type FILTER_RESOLUTION = number;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.RESOLUTION
-	 * @see PIXI.settings.RESOLUTION
-	 * @deprecated since version 4.2.0
-	 */
-	type RESOLUTION = number;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.MIPMAP_TEXTURES
-	 * @see PIXI.settings.MIPMAP_TEXTURES
-	 * @deprecated since version 4.2.0
-	 */
-	type MIPMAP_TEXTURES = any;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.SPRITE_BATCH_SIZE
-	 * @see PIXI.settings.SPRITE_BATCH_SIZE
-	 * @deprecated since version 4.2.0
-	 */
-	type SPRITE_BATCH_SIZE = number;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.SPRITE_MAX_TEXTURES
-	 * @see PIXI.settings.SPRITE_MAX_TEXTURES
-	 * @deprecated since version 4.2.0
-	 */
-	type SPRITE_MAX_TEXTURES = number;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.RETINA_PREFIX
-	 * @see PIXI.settings.RETINA_PREFIX
-	 * @deprecated since version 4.2.0
-	 */
-	type RETINA_PREFIX = RegExp | string;
-
-	/**
-	 * @static
-	 * @constant
-	 * @name PIXI.DEFAULT_RENDER_OPTIONS
-	 * @see PIXI.settings.RENDER_OPTIONS
-	 * @deprecated since version 4.2.0
-	 */
-	type DEFAULT_RENDER_OPTIONS = number;
-
-}
-
-export namespace extras {
-
-	/**
-	 * @class
-	 * @name MovieClip
-	 * @memberof PIXI.extras
-	 * @see PIXI.extras.AnimatedSprite
-	 * @deprecated since version 4.2.0
-	 */
-	type MovieClip = extras.AnimatedSprite;
-
-}
-
-declare global {
-	namespace pixi {
-    	export var gl: typeof glCore;
-	}
-}
-
-export as namespace PIXI;
diff --git a/pixi.js/pixi.js-tests.ts b/pixi.js/pixi.js-tests.ts
index 313ad7740e..8cea83df3f 100644
--- a/pixi.js/pixi.js-tests.ts
+++ b/pixi.js/pixi.js-tests.ts
@@ -1,217 +1,124 @@
-import PIXI = require("pixi.js");
 namespace basics {
 
     export class Basics {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
+        private app: PIXI.Application;
 
         private bunny: PIXI.Sprite;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.bunny = PIXI.Sprite.fromImage("required/assets/basics/bunny.png");
+            this.bunny.anchor.set(0.5);
+            this.bunny.x = this.app.renderer.width / 2;
+            this.bunny.y = this.app.renderer.height / 2;
+            this.app.stage.addChild(this.bunny);
 
-            // create a texture from an image path
-            var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
-
-            // create a new Sprite using the texture
-            this.bunny = new PIXI.Sprite(texture);
-
-            // center the sprite's anchor point
-            this.bunny.anchor.x = 0.5;
-            this.bunny.anchor.y = 0.5;
-
-            // move the sprite to the center of the screen
-            this.bunny.position.x = 200;
-            this.bunny.position.y = 150;
-
-            // add it to the stage
-            this.stage.addChild(this.bunny);
-
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.bunny.rotation += 0.1;
-
-            this.renderer.render(this.stage);
+            this.app.ticker.add((delta: number): void => {
+                this.bunny.rotation += 0.1 / delta;
+            });
 
         }
 
     }
 
-}
-
-namespace basics {
-
     export class Click {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
+        private app: PIXI.Application;
 
         private sprite: PIXI.Sprite;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
-            this.sprite.position.set(230, 264);
+            this.sprite = PIXI.Sprite.fromImage("../../_assets/basics/bunny.png");
+            this.sprite.texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
+            this.sprite.anchor.set(0.5);
+            this.sprite.x = this.app.renderer.width / 2;
+            this.sprite.y = this.app.renderer.height / 2;
             this.sprite.interactive = true;
-            this.sprite.on('mousedown', this.onDown, this);
-            this.sprite.on('touchstart', this.onDown, this);
-
-            // add it to the stage
-            this.stage.addChild(this.sprite);
-
-            // start animatng
-            this.animate();
+            this.sprite.buttonMode = true;
+            this.sprite.on("pointerdown", (): void => {
+                this.sprite.scale.x *= 1.25;
+                this.sprite.scale.y *= 1.25;
+            });
+            this.app.stage.addChild(this.sprite);
 
         }
-
-        private onDown = (eventData: PIXI.interaction.InteractionData): void => {
-
-            this.sprite.scale.x += 0.3;
-            this.sprite.scale.y += 0.3;
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
     }
 
-}
-
-namespace basics {
-
-    export class Container {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
+    export class ContainerPivot {
 
+        private app: PIXI.Application;
         private container: PIXI.Container;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
 
             this.container = new PIXI.Container();
+            this.app.stage.addChild(this.container);
 
-            this.stage.addChild(this.container);
+            let texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
+
+            for (let i = 0; i < 25; i++) {
+
+                let bunny = new PIXI.Sprite(texture);
+                bunny.anchor.set(0.5);
+                bunny.x = (i % 5) * 40;
+                bunny.y = Math.floor(i / 5) * 40;
+                this.container.addChild(bunny);
 
-            for (var j = 0; j < 5; j++) {
-                for (var i = 0; i < 5; i++) {
-                    var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
-                    bunny.x = 40 * i;
-                    bunny.y = 40 * j;
-                    this.container.addChild(bunny);
-                }
             }
 
-            /*
-             * All the bunnies are added to the container with the addChild method
-             * when you do this, all the bunnies become children of the container, and when a container moves,
-             * so do all its children.
-             * This gives you a lot of flexibility and makes it easier to position elements on the screen
-             */
-            this.container.x = 100;
-            this.container.y = 60;
+            this.container.x = this.app.renderer.width / 2;
+            this.container.y = this.app.renderer.height / 2;
 
-            // start animating
-            this.animate();
+            this.container.pivot.x = this.container.width / 2;
+            this.container.pivot.y = this.container.height / 2;
+
+            this.app.ticker.add((delta: number): void => {
+                this.container.rotation -= 0.01 / delta;
+            });
 
         }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
     }
 
-}
+    export class Container {
 
-namespace basics {
-
-    export class CustomFilter {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Sprite;
-
-        private filter: CustomizedFilter;
+        private app: PIXI.Application;
+        private container: PIXI.Container;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.container = new PIXI.Container();
+            this.app.stage.addChild(this.container);
 
-            this.background = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg');
-            this.background.scale.set(1.3, 1);
-            this.stage.addChild(this.background);
+            let texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
 
+            for (let i = 0; i < 25; i++) {
 
-            PIXI.loader.add('shader', '../../_assets/basics/shader.frag');
-            PIXI.loader.once('complete', this.onLoaded, this);
-            PIXI.loader.load();
+                let bunny = new PIXI.Sprite(texture);
+                bunny.anchor.set(0.5);
+                bunny.x = (i % 5) * 40;
+                bunny.y = Math.floor(i / 5) * 40;
+                this.container.addChild(bunny);
+
+            }
+
+            this.container.x = this.app.renderer.width / 2;
+            this.container.y = this.app.renderer.height / 2;
 
         }
-
-        private onLoaded(loader: PIXI.loaders.Loader, res: any) {
-
-            var fragmentSrc = res.shader.data;
-
-            this.filter = new CustomizedFilter(fragmentSrc);
-            this.background.filters = [this.filter];
-
-            this.animate();
-
-
-        }
-
-        private animate = (): void => {
-
-            this.filter.uniforms['customUniform'].value += 0.04;
-
-            this.renderer.render(this.stage);
-            requestAnimationFrame(this.animate);
-
-        }
-
     }
 
     export class CustomizedFilter extends PIXI.Filter {
@@ -219,469 +126,361 @@ namespace basics {
         constructor(fragmentSource: string) {
             super(null, fragmentSource, {
                 customUniform: {
-                    type: '1f',
+                    type: "1f",
                     value: 0
                 }
             });
         }
 
     }
+    export class CustomFilter {
 
-}
+        private app: PIXI.Application;
+        private background: PIXI.Sprite;
+        private filter: CustomizedFilter;
 
-namespace basics {
+        constructor() {
+
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
+
+            this.background = PIXI.Sprite.fromImage("required/assets/bkg-grass.jpg");
+            this.background.width = this.app.renderer.width;
+            this.background.height = this.app.renderer.height;
+            this.app.stage.addChild(this.background);
+
+            this.app.stop();
+
+            PIXI.loader.add("shader", "_assets/basics/shader.frag")
+
+                .load((loader: PIXI.loaders.Loader, resource: any): void => {
+
+                    this.filter = new PIXI.Filter(null, resource.shader.data);
+                    this.background.filters = [this.filter];
+                    this.app.start();
+
+                    this.app.ticker.add((delta: number) => {
+                        this.filter.uniforms.customUniform += 0.04 / delta;
+                    });
+
+                });
+
+        }
+    }
 
     export class Graphics {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private graphics: PIXI.Graphics;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { antialias: true });
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
+            let graphics = new PIXI.Graphics();
 
-            this.graphics = new PIXI.Graphics();
+            // set a fill and line style
+            graphics.beginFill(0xFF3300);
+            graphics.lineStyle(4, 0xffd900, 1);
 
             // draw a shape
-            this.graphics.moveTo(50, 50);
-            this.graphics.lineTo(250, 50);
-            this.graphics.lineTo(100, 100);
-            this.graphics.lineTo(50, 50);
-            this.graphics.endFill();
+            graphics.moveTo(50, 50);
+            graphics.lineTo(250, 50);
+            graphics.lineTo(100, 100);
+            graphics.lineTo(50, 50);
+            graphics.endFill();
 
             // set a fill and a line style again and draw a rectangle
-            this.graphics.lineStyle(2, 0x0000FF, 1);
-            this.graphics.beginFill(0xFF700B, 1);
-            this.graphics.drawRect(50, 250, 120, 120);
+            graphics.lineStyle(2, 0x0000FF, 1);
+            graphics.beginFill(0xFF700B, 1);
+            graphics.drawRect(50, 250, 120, 120);
 
             // draw a rounded rectangle
-            this.graphics.lineStyle(2, 0xFF00FF, 1);
-            this.graphics.beginFill(0xFF00BB, 0.25);
-            this.graphics.drawRoundedRect(150, 450, 300, 100, 15);
-            this.graphics.endFill();
+            graphics.lineStyle(2, 0xFF00FF, 1);
+            graphics.beginFill(0xFF00BB, 0.25);
+            graphics.drawRoundedRect(150, 450, 300, 100, 15);
+            graphics.endFill();
 
-            // draw a circle, set the lineStyle to zero so the circle doesn't have an outline
-            this.graphics.lineStyle(0);
-            this.graphics.beginFill(0xFFFF0B, 0.5);
-            this.graphics.drawCircle(470, 90, 60);
-            this.graphics.endFill();
+            // draw a circle, set the lineStyle to zero so the circle doesn"t have an outline
+            graphics.lineStyle(0);
+            graphics.beginFill(0xFFFF0B, 0.5);
+            graphics.drawCircle(470, 90, 60);
+            graphics.endFill();
 
-            this.stage.addChild(this.graphics);
-
-            // start animating
-            this.animate();
+            this.graphics = graphics;
 
+            this.app.stage.addChild(this.graphics);
         }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
     }
 
-}
-
-namespace basics {
-
     export class RenderTexture {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private container: PIXI.Container;
-
         private renderTexture: PIXI.RenderTexture;
-
         private sprite: PIXI.Sprite;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
 
             this.container = new PIXI.Container();
+            this.app.stage.addChild(this.container);
 
-            this.stage.addChild(this.container);
+            let texture = PIXI.Texture.fromImage("required/assets/basics/bunny.png");
 
-            for (var j = 0; j < 5; j++) {
-                for (var i = 0; i < 5; i++) {
-                    var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
-                    bunny.x = 40 * i;
-                    bunny.y = 40 * j;
-                    bunny.rotation = Math.random() * (Math.PI * 2);
-                    this.container.addChild(bunny);
-                }
+            for (let i = 0; i < 25; i++) {
+                let bunny = new PIXI.Sprite(texture);
+                bunny.x = (i % 5) * 30;
+                bunny.y = Math.floor(i / 5) * 30;
+                bunny.rotation = Math.random() * (Math.PI * 2);
+                this.container.addChild(bunny);
             }
 
-            this.renderTexture = PIXI.RenderTexture.create(300, 200, PIXI.SCALE_MODES.LINEAR, 0.1);
+            let brt = new PIXI.BaseRenderTexture(300, 300, PIXI.SCALE_MODES.LINEAR, 1);
+            let rt = new PIXI.RenderTexture(brt);
 
-            this.sprite = new PIXI.Sprite(this.renderTexture);
+            this.sprite = new PIXI.Sprite(rt);
             this.sprite.x = 450;
             this.sprite.y = 60;
-            this.stage.addChild(this.sprite);
+            this.app.stage.addChild(this.sprite);
 
             this.container.x = 100;
             this.container.y = 60;
 
-            // start animating
-            this.animate();
+            this.app.ticker.add((delta: number) => {
+                this.app.renderer.render(this.container, rt);
+            });
 
         }
+    }
 
-        private animate = (): void => {
+    export class SpriteSheet {
 
-            this.renderer.render(this.container, this.renderTexture);
+        private app: PIXI.Application;
+        private anim: PIXI.extras.AnimatedSprite;
 
-            requestAnimationFrame(this.animate);
+        constructor() {
 
-            this.renderer.render(this.stage);
+            PIXI.loader
+                .add("required/assets/basics/fighter.json")
+                .load((loader: PIXI.loaders.Loader, resource: any) => {
+
+                    let frames = [];
+
+                    for (let i = 0; i < 30; i++) {
+
+                        let val = i < 10 ? "0" + i : i;
+
+                        frames.push(PIXI.Texture.fromFrame("rollSequence00" + val + ".png"));
+
+                    }
+
+                    this.anim = new PIXI.extras.AnimatedSprite(frames);
+
+                    this.anim.x = this.app.renderer.width / 2;
+                    this.anim.y = this.app.renderer.height / 2;
+                    this.anim.anchor.set(0.5);
+                    this.anim.animationSpeed = 0.5;
+                    this.anim.play();
+
+                    this.app.stage.addChild(this.anim);
+
+                    this.app.ticker.add((deltaTime: number) => {
+                        this.anim.rotation += 0.01;
+                    });
+
+                });
+        }
+
+    }
+
+    export class Text {
+
+        private app: PIXI.Application;
+        private basicText: PIXI.Text;
+        private richText: PIXI.Text;
+
+        constructor() {
+
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
+
+            this.basicText = new PIXI.Text("Basic text in pixi");
+            this.basicText.x = 30;
+            this.basicText.y = 90;
+            this.app.stage.addChild(this.basicText);
+
+            let style = new PIXI.TextStyle({
+                fontFamily: "Arial",
+                fontSize: 36,
+                fontStyle: "italic",
+                fontWeight: "bold",
+                fill: ["#ffffff", "#fff0b5"],
+                stroke: "#4a1850",
+                strokeThickness: 5,
+                dropShadow: true,
+                dropShadowColor: "#000000",
+                dropShadowBlur: 4,
+                dropShadowAngle: Math.PI / 6,
+                dropShadowDistance: 6,
+                wordWrap: true,
+                wordWrapWidth: 440
+            });
+
+            this.richText = new PIXI.Text("Rich text with a lot of options and across multiple lines", style);
+            this.richText.x = 30;
+            this.richText.y = 180;
+            this.app.stage.addChild(this.richText);
 
         }
 
     }
 
-}
+    export class TexturedMesh {
 
-namespace basics {
-
-    export class SpriteSheet {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private movie: PIXI.extras.AnimatedSprite;
+        private app: PIXI.Application;
+        private count: number;
+        private points: PIXI.Point[];
+        private strip: PIXI.mesh.Rope;
+        private graphics: PIXI.Graphics;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            let ropeLength = 918 / 20;
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            for (let i = 0; i < 25; i++) {
+                this.points.push(new PIXI.Point(i * ropeLength, 0));
+            }
 
-            PIXI.loader.add('../../_assets/basics/fighter.json').load((loader: PIXI.loaders.Loader, object: any): void => {
+            this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage("required/assets/snake.png"), this.points);
+            this.strip.x = -40;
+            this.strip.y = 300;
+            this.app.stage.addChild(this.strip);
 
-                // create an array of textures from an image path
-                var frames: PIXI.Texture[] = [];
+            this.graphics = new PIXI.Graphics();
+            this.graphics.x = this.strip.x;
+            this.graphics.y = this.strip.y;
+            this.app.stage.addChild(this.graphics);
 
-                for (var i = 0; i < 30; i++) {
+            // start animating
+            this.app.ticker.add((deltaTime: number) => {
 
-                    var val = i < 10 ? '0' + i : i;
+                this.count += 0.1;
 
-                    // magically works since the spritesheet was loaded with the pixi loader
-                    frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png'));
+                // make the snake
+                for (let i = 0; i < this.points.length; i++) {
+                    this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
+                    this.points[i].x = i * ropeLength + Math.cos((i * 0.3) + this.count) * 20;
                 }
-
-
-                // create a AnimatedSprite (brings back memories from the days of Flash, right ?)
-                this.movie = new PIXI.extras.AnimatedSprite(frames);
-
-                /*
-                 * A AnimatedSprite inherits all the properties of a PIXI sprite
-                 * so you can change its position, its anchor, mask it, etc
-                 */
-                this.movie.position.set(300);
-                this.movie.anchor.set(0.5);
-                this.movie.animationSpeed = 0.5;
-                this.movie.play();
-
-                this.stage.addChild(this.movie);
-
-                this.animate();
+                this.renderPoints();
 
             });
 
         }
 
-        private animate = (): void => {
-
-            this.movie.rotation += 0.01;
-
-            // render the stage container
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class Text {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private basicText: PIXI.Text;
-
-        private richText: PIXI.Text;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.basicText = new PIXI.Text('Basic Text in Pixi');
-            this.basicText.x = 30;
-            this.basicText.y = 90;
-
-            this.stage.addChild(this.basicText);
-
-            var style: PIXI.TextStyleOptions = {
-                fontSize: 36,
-                fontFamily: 'Arial',
-                fontWeight: 'bold',
-                fontStyle: 'italic',
-                fill: '#F7EDCA',
-                stroke: '#4a1850',
-                strokeThickness: 5,
-                dropShadow: true,
-                dropShadowColor: '#000000',
-                dropShadowAngle: Math.PI / 6,
-                dropShadowDistance: 6,
-                wordWrap: true,
-                wordWrapWidth: 440
-            };
-
-            this.richText = new PIXI.Text('Rich Text with a lot of options and across multiple lines', style);
-            this.richText.x = 30;
-            this.richText.y = 180;
-
-            this.stage.addChild(this.richText);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class TexturedMesh {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private strip: PIXI.mesh.Rope;
-
-        private graphics: PIXI.Graphics;
-
-        private count: number;
-
-        private points: PIXI.Point[];
-
-        private ropeLength: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.count = 0;
-
-            this.ropeLength = 918 / 20;
-            this.ropeLength = 45;
-
-            this.points = [];
-
-            for (var i = 0; i < 25; i++) {
-                this.points.push(new PIXI.Point(i * this.ropeLength, 0));
-            }
-
-            this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points);
-            this.strip.position.x = -40;
-            this.strip.position.y = 300;
-            this.stage.addChild(this.strip);
-
-            this.graphics = new PIXI.Graphics();
-            this.graphics.x = this.strip.x;
-            this.graphics.y = this.strip.y;
-            this.stage.addChild(this.graphics);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.1;
-
-            // make the snake
-            for (var i = 0; i < this.points.length; i++) {
-                this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
-                this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20;
-            }
-
-            // render the stage
-            this.renderer.render(this.stage);
-
-            this.renderPoints();
-
-            requestAnimationFrame(this.animate);
-
-        }
-
         private renderPoints(): void {
-            this.graphics.clear();
 
+            this.graphics.clear();
             this.graphics.lineStyle(2, 0xffc2c2);
             this.graphics.moveTo(this.points[0].x, this.points[0].y);
 
-            for (var i = 1; i < this.points.length; i++) {
+            for (let i = 1; i < this.points.length; i++) {
                 this.graphics.lineTo(this.points[i].x, this.points[i].y);
             }
 
-            for (var i = 1; i < this.points.length; i++) {
+            for (let i = 1; i < this.points.length; i++) {
                 this.graphics.beginFill(0xff0022);
                 this.graphics.drawCircle(this.points[i].x, this.points[i].y, 10);
                 this.graphics.endFill();
             }
+
         }
 
     }
 
-}
-
-namespace basics {
-
     export class TilingSprite {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private texture: PIXI.Texture;
-
+        private app: PIXI.Application;
         private tilingSprite: PIXI.extras.TilingSprite;
-
         private count: number;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            let texture = PIXI.Texture.fromImage("required/assets/p2.jpeg");
 
-            // create a texture from an image path
-            this.texture = PIXI.Texture.fromImage('../../_assets/p2.jpeg');
-
-            /* create a tiling sprite ...
-             * requires a texture, a width and a height
-             * in WebGL the image size should preferably be a power of two
-             */
-            this.tilingSprite = new PIXI.extras.TilingSprite(this.texture, this.renderer.width, this.renderer.height);
-            this.stage.addChild(this.tilingSprite);
+            this.tilingSprite = new PIXI.extras.TilingSprite(
+                texture,
+                this.app.renderer.width,
+                this.app.renderer.height
+            );
+            this.app.stage.addChild(this.tilingSprite);
 
             this.count = 0;
 
-            this.animate();
+            this.app.ticker.add((deltaTime: number): void => {
 
-        }
+                this.count += 0.005;
 
-        private animate = (): void => {
+                this.tilingSprite.tileScale.x = 2 + Math.sin(this.count);
+                this.tilingSprite.tileScale.y = 2 + Math.cos(this.count);
+                this.tilingSprite.tilePosition.x += 1;
+                this.tilingSprite.tilePosition.y += 1;
 
-            this.count += 0.005;
-
-            this.tilingSprite.tileScale.x = 2 + Math.sin(this.count);
-            this.tilingSprite.tileScale.y = 2 + Math.cos(this.count);
-
-            this.tilingSprite.tilePosition.x += 1;
-            this.tilingSprite.tilePosition.y += 1;
-
-            // render the root container
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            });
 
         }
 
     }
 
-}
-
-namespace basics {
-
     export class Video {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private texture: PIXI.Texture;
-
+        private app: PIXI.Application;
+        private button: PIXI.Graphics;
         private videoSprite: PIXI.Sprite;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { transparent: true });
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.button = new PIXI.Graphics()
+                .beginFill(0x0, 0.5)
+                .drawRoundedRect(0, 0, 100, 100, 10)
+                .endFill()
+                .beginFill(0xffffff)
+                .moveTo(36, 30)
+                .lineTo(36, 70)
+                .lineTo(70, 50);
 
-            // create a video texture from a path
-            this.texture = PIXI.Texture.fromVideo('../../_assets/testVideo.mp4');
+            // Position the button
+            this.button.x = (this.app.renderer.width - this.button.width) / 2;
+            this.button.y = (this.app.renderer.height - this.button.height) / 2;
 
-            // create a new sprite using the video texture (yes it's that easy)
-            this.videoSprite = new PIXI.Sprite(this.texture);
-            this.videoSprite.width = this.renderer.width;
-            this.videoSprite.height = this.renderer.height;
-            this.stage.addChild(this.videoSprite);
+            // Enable interactivity on the button
+            this.button.interactive = true;
+            this.button.buttonMode = true;
 
-            this.stage.addChild(this.videoSprite);
+            // Add to the stage
+            this.app.stage.addChild(this.button);
 
-            this.animate();
+            this.button.on("pointertap", (): void => {
 
-        }
+                this.button.destroy();
 
-        private animate = (): void => {
+                let texture = PIXI.Texture.fromVideo("required/assets/testVideo.mp4");
 
-            // render the stage
-            this.renderer.render(this.stage);
+                this.videoSprite = new PIXI.Sprite(texture);
+                this.videoSprite.width = this.app.renderer.width;
+                this.videoSprite.height = this.app.renderer.height;
+                this.app.stage.addChild(this.videoSprite);
 
-            requestAnimationFrame(this.animate);
+            });
 
         }
 
@@ -693,49 +492,48 @@ namespace demos {
 
     export class AlphaMask {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Container;
-
+        private app: PIXI.Application;
+        private bg: PIXI.Container;
         private cells: PIXI.Sprite;
-
         private mask: PIXI.Sprite;
-
         private target: PIXI.Point;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            this.app.stage.interactive = true;
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
+            this.bg = PIXI.Sprite.fromImage("required/assets/bkg.jpg");
+            this.app.stage.addChild(this.bg);
 
-            this.background = PIXI.Sprite.fromImage('../../_assets/bkg.jpg');
-            this.stage.addChild(this.background);
+            this.cells = PIXI.Sprite.fromImage("required/assets/cells.png");
+            this.cells.scale.set(1.5);
 
-            this.cells = PIXI.Sprite.fromImage('../../_assets/cells.png');
-            this.cells.scale.set(1.5, 1.5);
-
-            this.mask = PIXI.Sprite.fromImage('../../_assets/flowerTop.png');
+            this.mask = PIXI.Sprite.fromImage("required/assets/flowerTop.png");
             this.mask.anchor.set(0.5);
-            this.mask.position.x = 310;
-            this.mask.position.y = 190;
+            this.mask.x = 310;
+            this.mask.y = 190;
 
             this.cells.mask = this.mask;
 
-            this.stage.addChild(this.mask);
-
-            this.stage.addChild(this.cells);
+            this.app.stage.addChild(this.mask, this.cells);
 
             this.target = new PIXI.Point();
 
             this.reset();
 
-            this.animate();
+            this.app.ticker.add((deltaTime: number): void => {
+
+                this.mask.position.x += (this.target.x - this.mask.x) * 0.1;
+                this.mask.position.y += (this.target.y - this.mask.y) * 0.1;
+
+                if (Math.abs(this.mask.x - this.target.x) < 1) {
+                    this.reset();
+                }
+
+
+            });
 
         }
 
@@ -746,492 +544,300 @@ namespace demos {
 
         }
 
-        private animate = (): void => {
+    }
 
-            this.mask.position.x += (this.target.x - this.mask.x) * 0.1;
-            this.mask.position.y += (this.target.y - this.mask.y) * 0.1;
+    export class AnimatedSpriteDemo {
 
-            if (Math.abs(this.mask.x - this.target.x) < 1) {
-                this.reset();
-            }
+        private app: PIXI.Application;
 
-            this.renderer.render(this.stage);
+        constructor() {
 
-            requestAnimationFrame(this.animate);
+            this.app = new PIXI.Application();
+            this.app.stop();
+            document.body.appendChild(this.app.view);
+
+            PIXI.loader
+                .add("spritesheet", "required/assets/mc.json")
+                .load((): void => {
+
+                    let explosionTextures: PIXI.Texture[] = [];
+                    let i: number;
+
+                    for (i = 0; i < 26; i++) {
+                        let texture = PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i + 1) + ".png");
+                        explosionTextures.push(texture);
+                    }
+
+                    for (i = 0; i < 50; i++) {
+
+                        let explosion = new PIXI.extras.AnimatedSprite(explosionTextures);
+
+                        explosion.x = Math.random() * this.app.renderer.width;
+                        explosion.y = Math.random() * this.app.renderer.height;
+                        explosion.anchor.set(0.5);
+                        explosion.rotation = Math.random() * Math.PI;
+                        explosion.scale.set(0.75 + Math.random() * 0.5);
+                        explosion.gotoAndPlay(Math.random() * 27);
+                        this.app.stage.addChild(explosion);
+                    }
+
+                    this.app.start();
+
+                });
 
         }
 
     }
 
-}
-
-namespace demos {
-
     export class Batch {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private sprites: PIXI.particles.ParticleContainer;
-
-        private maggots: BatchDude[];
-
-        private tick: number;
-
+        private maggots: Dude[];
         private dudeBounds: PIXI.Rectangle;
+        private tick: number;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
             this.sprites = new PIXI.particles.ParticleContainer(10000, {
-
                 scale: true,
                 position: true,
                 rotation: true,
                 uvs: true,
                 alpha: true
-
             });
-            this.stage.addChild(this.sprites);
+            this.app.stage.addChild(this.sprites);
 
-            // create an array to store all the sprites
             this.maggots = [];
 
-            var totalSprites = this.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
+            let totalSprites = this.app.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
 
-            for (var i = 0; i < totalSprites; i++) {
+            let dudeTexture = PIXI.Texture.fromImage("required/assets/tinyMaggot.png");
 
-                // create a new Sprite
-                var dude = new BatchDude(PIXI.Texture.fromImage('../../_assets/tinyMaggot.png'));
+            for (let i = 0; i < totalSprites; i++) {
 
+                let dude = new Dude(dudeTexture);
                 dude.tint = Math.random() * 0xE8D4CD;
-
-                // set the anchor point so the texture is centerd on the sprite
                 dude.anchor.set(0.5);
-
-                // different maggots, different sizes
                 dude.scale.set(0.8 + Math.random() * 0.3);
-
-                // scatter them all
-                dude.x = Math.random() * this.renderer.width;
-                dude.y = Math.random() * this.renderer.height;
-
-                dude.tint = Math.random() * 0x808080;
-
-                // create a random direction in radians
+                dude.x = Math.random() * this.app.renderer.width;
+                dude.y = Math.random() * this.app.renderer.height;
                 dude.direction = Math.random() * Math.PI * 2;
-
-                // this number will be used to modify the direction of the sprite over time
                 dude.turningSpeed = Math.random() - 0.8;
-
-                // create a random speed between 0 - 2, and these maggots are slooww
                 dude.speed = (2 + Math.random() * 2) * 0.2;
-
                 dude.offset = Math.random() * 100;
 
-                // finally we push the dude into the maggots array so it it can be easily accessed later
                 this.maggots.push(dude);
-
                 this.sprites.addChild(dude);
 
             }
 
-            // create a bounding box box for the little maggots
-            var dudeBoundsPadding = 100;
-            this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
+            let dudeBoundsPadding = 100;
+            this.dudeBounds = new PIXI.Rectangle(
                 -dudeBoundsPadding,
-                this.renderer.width + dudeBoundsPadding * 2,
-                this.renderer.height + dudeBoundsPadding * 2);
+                -dudeBoundsPadding,
+                this.app.renderer.width + dudeBoundsPadding * 2,
+                this.app.renderer.height + dudeBoundsPadding * 2
+            );
 
             this.tick = 0;
 
-            // start animating
-            this.animate();
+            this.app.ticker.add((): void => {
 
-        }
+                for (let i = 0; i < this.maggots.length; i++) {
 
-        private animate = (): void => {
+                    let dude = this.maggots[i];
+                    dude.scale.y = 0.95 + Math.sin(this.tick + dude.offset) * 0.05;
+                    dude.direction += dude.turningSpeed * 0.01;
+                    dude.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
+                    dude.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
+                    dude.rotation = -dude.direction + Math.PI;
 
-            // iterate through the sprites and update their position
-            for (const dude of this.maggots) {
-                dude.scale.y = 0.95 + Math.sin(this.tick + dude.offset) * 0.05;
-                dude.direction += dude.turningSpeed * 0.01;
-                dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
-                dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
-                dude.rotation = -dude.direction + Math.PI;
+                    // wrap the maggots
+                    if (dude.x < this.dudeBounds.x) {
+                        dude.x += this.dudeBounds.width;
+                    }
+                    else if (dude.x > this.dudeBounds.x + this.dudeBounds.width) {
+                        dude.x -= this.dudeBounds.width;
+                    }
 
-                // wrap the maggots
-                if (dude.position.x < this.dudeBounds.x) {
-                    dude.position.x += this.dudeBounds.width;
-                } else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
-                    dude.position.x -= this.dudeBounds.width;
+                    if (dude.y < this.dudeBounds.y) {
+                        dude.y += this.dudeBounds.height;
+                    }
+                    else if (dude.y > this.dudeBounds.y + this.dudeBounds.height) {
+                        dude.y -= this.dudeBounds.height;
+                    }
                 }
 
-                if (dude.position.y < this.dudeBounds.y) {
-                    dude.position.y += this.dudeBounds.height;
-                } else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
-                    dude.position.y -= this.dudeBounds.height;
-                }
-            }
+                this.tick += 0.1;
 
-            // increment the ticker
-            this.tick += 0.1;
-
-            // time to render the stage !
-            this.renderer.render(this.stage);
-
-            // request another animation frame...
-            requestAnimationFrame(this.animate);
+            });
 
         }
 
     }
+    export class Dude extends PIXI.Sprite {
 
-    export class BatchDude extends PIXI.Sprite {
-
-        direction: number;
-        speed: number;
-        turningSpeed: number;
-        offset: number;
+        direction: number = 0;
+        speed: number = 0;
+        turningSpeed: number = 0;
+        offset: number = 0;
 
         constructor(texture: PIXI.Texture) {
-
             super(texture);
-
         }
 
     }
 
-}
-
-namespace demos {
-
     export class BlendModes {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private background: PIXI.Sprite;
-
-        private dudeArray: BlendModesDude[];
-
-        private totalDudes: number;
-
+        private dudeArray: Dude[];
         private dudeBounds: PIXI.Rectangle;
 
-        private tick: number;
-
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.background = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg");
+            this.app.stage.addChild(this.background);
 
-            // create a new background sprite
-            this.background = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg');
-            this.stage.addChild(this.background);
-
-            // create an array to store a reference to the dudes
             this.dudeArray = [];
 
-            this.totalDudes = 20;
+            let totalDudes = 20;
+            let dudeTexture = PIXI.Texture.fromImage("required/assets/flowerTop.png");
 
-            for (var i = 0; i < this.totalDudes; i++) {
-
-                // create a new Sprite that uses the image name that we just generated as its source
-                var dude = new BlendModesDude(PIXI.Texture.fromImage('../../_assets/flowerTop.png'));
+            for (let i = 0; i < totalDudes; i++) {
 
+                let dude = new Dude(dudeTexture);
                 dude.anchor.set(0.5);
-
-                // set a random scale for the dude
                 dude.scale.set(0.8 + Math.random() * 0.3);
-
-                // finally let's set the dude to be at a random position...
-                dude.position.x = Math.floor(Math.random() * this.renderer.width);
-                dude.position.y = Math.floor(Math.random() * this.renderer.height);
-
-                // The important bit of this example, this is how you change the default blend mode of the sprite
+                dude.x = Math.floor(Math.random() * this.app.renderer.width);
+                dude.y = Math.floor(Math.random() * this.app.renderer.height);
                 dude.blendMode = PIXI.BLEND_MODES.ADD;
-
-                // create some extra properties that will control movement
                 dude.direction = Math.random() * Math.PI * 2;
-
-                // this number will be used to modify the direction of the dude over time
                 dude.turningSpeed = Math.random() - 0.8;
-
-                // create a random speed for the dude between 0 - 2
                 dude.speed = 2 + Math.random() * 2;
 
-                // finally we push the dude into the dudeArray so it it can be easily accessed later
                 this.dudeArray.push(dude);
-
-                this.stage.addChild(dude);
+                this.app.stage.addChild(dude);
 
             }
 
-            // create a bounding box box for the little maggots
-            var dudeBoundsPadding = 100;
-            this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
+            let dudeBoundsPadding = 100;
+            this.dudeBounds = new PIXI.Rectangle(
                 -dudeBoundsPadding,
-                this.renderer.width + dudeBoundsPadding * 2,
-                this.renderer.height + dudeBoundsPadding * 2);
+                -dudeBoundsPadding,
+                this.app.renderer.width + dudeBoundsPadding * 2,
+                this.app.renderer.height + dudeBoundsPadding * 2
+            );
 
-            this.tick = 0;
+            this.app.ticker.add((): void => {
 
-            // start animating
-            this.animate();
+                for (let i = 0; i < this.dudeArray.length; i++) {
 
-        }
+                    let dude = this.dudeArray[i];
+                    dude.direction += dude.turningSpeed * 0.01;
+                    dude.x += Math.sin(dude.direction) * dude.speed;
+                    dude.y += Math.cos(dude.direction) * dude.speed;
+                    dude.rotation = -dude.direction - Math.PI / 2;
 
-        private animate = (): void => {
+                    // wrap the dudes by testing their bounds...
+                    if (dude.x < this.dudeBounds.x) {
+                        dude.x += this.dudeBounds.width;
+                    }
+                    else if (dude.x > this.dudeBounds.x + this.dudeBounds.width) {
+                        dude.x -= this.dudeBounds.width;
+                    }
 
-            // iterate through the dudes and update the positions
-            for (const dude of this.dudeArray) {
-                dude.direction += dude.turningSpeed * 0.01;
-                dude.position.x += Math.sin(dude.direction) * dude.speed;
-                dude.position.y += Math.cos(dude.direction) * dude.speed;
-                dude.rotation = -dude.direction - Math.PI / 2;
-
-                // wrap the dudes by testing their bounds...
-                if (dude.position.x < this.dudeBounds.x) {
-                    dude.position.x += this.dudeBounds.width;
-                } else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
-                    dude.position.x -= this.dudeBounds.width;
+                    if (dude.y < this.dudeBounds.y) {
+                        dude.y += this.dudeBounds.height;
+                    }
+                    else if (dude.y > this.dudeBounds.y + this.dudeBounds.height) {
+                        dude.y -= this.dudeBounds.height;
+                    }
                 }
 
-                if (dude.position.y < this.dudeBounds.y) {
-                    dude.position.y += this.dudeBounds.height;
-                } else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
-                    dude.position.y -= this.dudeBounds.height;
-                }
-            }
-
-            // increment the ticker
-            this.tick += 0.1;
-
-            // time to render the stage !
-            this.renderer.render(this.stage);
-
-            // request another animation frame...
-            requestAnimationFrame(this.animate);
+            });
 
         }
 
     }
 
-    export class BlendModesDude extends PIXI.Sprite {
-
-        direction: number;
-        speed: number;
-        turningSpeed: number;
-        offset: number;
-
-        constructor(texture: PIXI.Texture) {
-
-            super(texture);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
     export class CacheAsBitmap {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private aliens: PIXI.Sprite[];
-
-        private alienContainer: PIXI.Container;
-
         private count: number;
+        private alienContainer: PIXI.Container;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            this.app.stage.interactive = true;
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.app.stop();
 
-            // load resources
-            PIXI.loader
-                .add('spritesheet', '../../_assets/monsters.json')
-                .load(this.onAssetsLoaded);
-
-            // holder to store aliens
             this.aliens = [];
+            let alienFrames = [
+                "eggHead.png",
+                "flowerTop.png",
+                "helmlok.png",
+                "skully.png"
+            ];
 
             this.count = 0;
 
-            // create an empty container
             this.alienContainer = new PIXI.Container();
-            this.alienContainer.position.x = 400;
-            this.alienContainer.position.y = 300;
+            this.alienContainer.x = 400;
+            this.alienContainer.y = 300;
+            this.app.stage.addChild(this.alienContainer);
 
-            // make the stage interactive
-            this.stage.interactive = true;
+            PIXI.loader
+                .add("spritesheet", "required/assets/monsters.json")
+                .load((): void => {
 
-            this.stage.addChild(this.alienContainer);
+                    for (let i = 0; i < 100; i++) {
 
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
+                        let frameName = alienFrames[i % 4];
 
-        }
+                        let alien = PIXI.Sprite.fromFrame(frameName);
+                        alien.tint = Math.random() * 0xFFFFFF;
+                        alien.x = Math.random() * 800 - 400;
+                        alien.y = Math.random() * 600 - 300;
+                        alien.anchor.x = 0.5;
+                        alien.anchor.y = 0.5;
+                        this.aliens.push(alien);
+                        this.alienContainer.addChild(alien);
+                    }
+                    this.app.start();
 
-        private onClick = (event: PIXI.interaction.InteractionEvent): void => {
+                    this.app.stage.on("pointerTap", (event: PIXI.interaction.InteractionEvent): void => {
+                        this.alienContainer.cacheAsBitmap = !this.alienContainer.cacheAsBitmap;
+                    });
+                    this.app.ticker.add((): void => {
 
-            this.alienContainer.cacheAsBitmap = !this.alienContainer.cacheAsBitmap;
+                        // let"s rotate the aliens a little bit
+                        for (let i = 0; i < 100; i++) {
+                            let alien = this.aliens[i];
+                            alien.rotation += 0.1;
+                        }
 
-            // feel free to play with what's below
-            // var sprite = new PIXI.Sprite(this.alienContainer.generateTexture());
-            // this.stage.addChild(sprite);
-            // sprite.position.x = Math.random() * 800;
-            // sprite.position.y = Math.random() * 600;
+                        this.count += 0.01;
 
-        }
+                        this.alienContainer.scale.x = Math.sin(this.count);
+                        this.alienContainer.scale.y = Math.sin(this.count);
+                        this.alienContainer.rotation += 0.01;
 
-        private onAssetsLoaded = (): void => {
+                    });
 
-            // add a bunch of aliens with textures from image paths
-
-            var alienFrames = ['eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png'];
-
-            for (var i = 0; i < 100; i++) {
-
-                var frameName = alienFrames[i % 4];
-
-                // create an alien using the frame name..
-                var alien = PIXI.Sprite.fromFrame(frameName);
-                alien.tint = Math.random() * 0xFFFFFF;
-
-                /*
-                 * fun fact for the day :)
-                 * another way of doing the above would be
-                 * var texture = PIXI.Texture.fromFrame(frameName);
-                 * var alien = new PIXI.Sprite(texture);
-                 */
-                alien.position.x = Math.random() * 800 - 400;
-                alien.position.y = Math.random() * 600 - 300;
-                alien.anchor.x = 0.5;
-                alien.anchor.y = 0.5;
-                this.aliens.push(alien);
-                this.alienContainer.addChild(alien);
-
-            }
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // let's rotate the aliens a little bit
-            for (var i = 0; i < 100; i++) {
-                var alien = this.aliens[i];
-                alien.rotation += 0.1;
-            }
-
-            this.count += 0.01;
-
-            this.alienContainer.scale.x = Math.sin(this.count);
-            this.alienContainer.scale.y = Math.sin(this.count);
-
-            this.alienContainer.rotation += 0.01;
-
-            // render the stage
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class DraggableBunny extends PIXI.Sprite {
-
-        // todo I dont know what event.data is at this time
-        private data: any;
-
-        private dragging: boolean;
-
-        constructor(texture?: PIXI.Texture) {
-
-            super(texture);
-
-            // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
-            this.interactive = true;
-
-            // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
-            this.buttonMode = true;
-
-            // center the bunny's anchor point
-            this.anchor.set(0.5);
-
-            // make it a bit bigger, so it's easier to grab
-            this.scale.set(3);
-
-            // setup events
-            this
-            // events for drag start
-                .on('mousedown', this.onDragStart)
-                .on('touchstart', this.onDragStart)
-            // events for drag end
-                .on('mouseup', this.onDragEnd)
-                .on('mouseupoutside', this.onDragEnd)
-                .on('touchend', this.onDragEnd)
-                .on('touchendoutside', this.onDragEnd)
-            // events for drag move
-                .on('mousemove', this.onDragMove)
-                .on('touchmove', this.onDragMove);
-
-        }
-
-        private onDragStart = (event: PIXI.interaction.InteractionEvent): void => {
-
-            // store a reference to the data
-            // the reason for this is because of multitouch
-            // we want to track the movement of this particular touch
-            this.data = event.data;
-            this.alpha = 0.5;
-            this.dragging = true;
-
-        }
-
-        private onDragEnd = (event: PIXI.interaction.InteractionEvent): void => {
-
-            // set interactiondata to null
-            this.data = null;
-            this.alpha = 1;
-            this.dragging = false;
-
-        }
-
-        private onDragMove = (event: PIXI.interaction.InteractionEvent): void => {
-
-            if (this.dragging) {
-                var newPosition = this.data.getLocalPosition(this.parent);
-                this.position.x = newPosition.x;
-                this.position.y = newPosition.y;
-            }
+                });
 
         }
 
@@ -1239,212 +845,191 @@ namespace demos {
 
     export class Dragging {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private texture: PIXI.Texture;
-
+        private app: PIXI.Application;
         private data: PIXI.interaction.InteractionData;
+        private dragging: boolean;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { backgroundColor: 0x1099bb });
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            let texture = PIXI.Texture.fromImage("required/assets/bunny.png");
+            texture.baseTexture.scaleMode = PIXI.SCALE_MODES.NEAREST;
 
-            // create a texture from an image
-            this.texture = PIXI.Texture.fromImage('../../_assets/bunny.png');
-
-            for (var i = 0; i < 10; i++) {
-                this.createBunny(Math.floor(Math.random() * 800), Math.floor(Math.random() * 600));
+            for (let i = 0; i < 10; i++) {
+                this.createBunny(
+                    texture,
+                    Math.floor(Math.random() * this.app.renderer.width),
+                    Math.floor(Math.random() * this.app.renderer.height)
+                );
             }
 
-            // start animating
-            this.animate();
-
         }
 
-        private createBunny(x: number, y: number): void {
+        private createBunny(texture: PIXI.Texture, x: number, y: number): void {
 
-            // create our little bunny friend..
-            var bunny = new DraggableBunny(this.texture);
+            let bunny = new PIXI.Sprite(texture);
+            bunny.interactive = true;
+            bunny.buttonMode = true;
+            bunny.anchor.set(0.5);
+            bunny.scale.set(3);
+            bunny
+                .on("pointerdown", (event: PIXI.interaction.InteractionEvent): void => {
 
-            // move the sprite to its designated position
-            bunny.position.x = x;
-            bunny.position.y = y;
+                    this.data = event.data;
+                    bunny.alpha = 0.5;
+                    this.dragging = true;
 
-            // add it to the stage
-            this.stage.addChild(bunny);
+                })
+                .on("pointerup", (event: PIXI.interaction.InteractionEvent): void => {
 
-        }
+                    this.data = null;
+                    bunny.alpha = 0.5;
+                    this.dragging = false;
 
-        private animate = (): void => {
+                })
+                .on("pointerupoutside", (event: PIXI.interaction.InteractionEvent): void => {
 
-            requestAnimationFrame(this.animate);
+                    this.data = null;
+                    bunny.alpha = 0.5;
+                    this.dragging = false;
 
-            this.renderer.render(this.stage);
+                })
+                .on("pointermove", (event: PIXI.interaction.InteractionEvent): void => {
+
+                    if (this.dragging) {
+                        let newPosition = this.data.getLocalPosition(bunny);
+                        bunny.x = newPosition.x;
+                        bunny.y = newPosition.y;
+                    }
+
+                });
+
+            bunny.x = x;
+            bunny.y = y;
+
+            this.app.stage.addChild(bunny);
 
         }
 
     }
 
-}
-
-namespace demos {
-
     export class GraphicsDemo {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private thing: PIXI.Graphics;
-
+        private app: PIXI.Application;
         private graphics: PIXI.Graphics;
-
+        private thing: PIXI.Graphics;
         private count: number;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { antialias: true });
+            this.app.stage.interactive = true;
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
+            let graphics = new PIXI.Graphics();
 
-            this.graphics = new PIXI.Graphics();
+            graphics.beginFill(0xFF3300);
+            graphics.lineStyle(10, 0xffd900, 1);
 
-            // set a fill and line style
-            this.graphics.beginFill(0xFF3300);
-            this.graphics.lineStyle(10, 0xffd900, 1);
+            graphics.moveTo(50, 50);
+            graphics.lineTo(250, 50);
+            graphics.lineTo(100, 100);
+            graphics.lineTo(250, 220);
+            graphics.lineTo(50, 220);
+            graphics.lineTo(50, 50);
+            graphics.endFill();
 
-            // draw a shape
-            this.graphics.moveTo(50, 50);
-            this.graphics.lineTo(250, 50);
-            this.graphics.lineTo(100, 100);
-            this.graphics.lineTo(250, 220);
-            this.graphics.lineTo(50, 220);
-            this.graphics.lineTo(50, 50);
-            this.graphics.endFill();
+            graphics.lineStyle(10, 0xFF0000, 0.8);
+            graphics.beginFill(0xFF700B, 1);
 
-            // set a fill and line style again
-            this.graphics.lineStyle(10, 0xFF0000, 0.8);
-            this.graphics.beginFill(0xFF700B, 1);
+            graphics.moveTo(210, 300);
+            graphics.lineTo(450, 320);
+            graphics.lineTo(570, 350);
+            graphics.quadraticCurveTo(600, 0, 480, 100);
+            graphics.lineTo(330, 120);
+            graphics.lineTo(410, 200);
+            graphics.lineTo(210, 300);
+            graphics.endFill();
 
-            // draw a second shape
-            this.graphics.moveTo(210, 300);
-            this.graphics.lineTo(450, 320);
-            this.graphics.lineTo(570, 350);
-            this.graphics.quadraticCurveTo(600, 0, 480, 100);
-            this.graphics.lineTo(330, 120);
-            this.graphics.lineTo(410, 200);
-            this.graphics.lineTo(210, 300);
-            this.graphics.endFill();
+            graphics.lineStyle(2, 0x0000FF, 1);
+            graphics.drawRect(50, 250, 100, 100);
 
-            // draw a rectangle
-            this.graphics.lineStyle(2, 0x0000FF, 1);
-            this.graphics.drawRect(50, 250, 100, 100);
+            graphics.lineStyle(0);
+            graphics.beginFill(0xFFFF0B, 0.5);
+            graphics.drawCircle(470, 200, 100);
+            graphics.endFill();
 
-            // draw a circle
-            this.graphics.lineStyle(0);
-            this.graphics.beginFill(0xFFFF0B, 0.5);
-            this.graphics.drawCircle(470, 200, 100);
-            this.graphics.endFill();
+            graphics.lineStyle(20, 0x33FF00);
+            graphics.moveTo(30, 30);
+            graphics.lineTo(600, 300);
 
-            this.graphics.lineStyle(20, 0x33FF00);
-            this.graphics.moveTo(30, 30);
-            this.graphics.lineTo(600, 300);
+            this.graphics = graphics;
 
-            this.stage.addChild(this.graphics);
+            this.app.stage.addChild(this.graphics);
 
-            // let's create a moving shape
             this.thing = new PIXI.Graphics();
-            this.stage.addChild(this.thing);
-            this.thing.position.x = 620 / 2;
-            this.thing.position.y = 380 / 2;
+            this.thing.x = 800 / 2;
+            this.thing.y = 600 / 2;
+            this.app.stage.addChild(this.thing);
 
             this.count = 0;
 
-            // Just click on the stage to draw random lines
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
+            this.app.stage.on("pointertap", (): void => {
 
-            // start animating
-            this.animate();
+                this.graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
+                this.graphics.moveTo(Math.random() * 800, Math.random() * 600);
+                this.graphics.bezierCurveTo(
+                    Math.random() * 800, Math.random() * 600,
+                    Math.random() * 800, Math.random() * 600,
+                    Math.random() * 800, Math.random() * 600
+                );
 
-        }
+            });
 
-        private onClick = (event: PIXI.interaction.InteractionEvent): void => {
+            this.app.ticker.add((): void => {
 
-            this.graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
-            this.graphics.moveTo(Math.random() * 620, Math.random() * 380);
-            this.graphics.bezierCurveTo(Math.random() * 620, Math.random() * 380,
-                Math.random() * 620, Math.random() * 380,
-                Math.random() * 620, Math.random() * 380);
-        }
+                this.count += 0.1;
 
-        private animate = (): void => {
+                this.thing.clear();
+                this.thing.lineStyle(10, 0xff0000, 1);
+                this.thing.beginFill(0xffFF00, 0.5);
 
-            this.thing.clear();
+                this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
+                this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
+                this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
+                this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
+                this.thing.lineTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
 
-            this.count += 0.1;
+                this.thing.rotation = this.count * 0.1;
 
-            this.thing.clear();
-            this.thing.lineStyle(10, 0xff0000, 1);
-            this.thing.beginFill(0xffFF00, 0.5);
+            });
 
-            this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-
-            this.thing.rotation = this.count * 0.1;
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
         }
 
     }
 
-}
-
-namespace demos {
-
     export class Interactivity {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private background: PIXI.Sprite;
-
-        private buttons: InteractivityButton[];
+        private buttons: PIXI.Sprite[];
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a background...
-            this.background = PIXI.Sprite.fromImage('../../_assets/button_test_BG.jpg');
-            this.background.width = this.renderer.width;
-            this.background.height = this.renderer.height;
-
-            // add background to stage...
-            this.stage.addChild(this.background);
+            let background = PIXI.Sprite.fromImage("required/assets/button_test_BG.jpg");
+            background.width = this.app.renderer.width;
+            background.height = this.app.renderer.height;
+            this.background = background;
+            this.app.stage.addChild(this.background);
 
             this.buttons = [];
 
-            var buttonPositions = [
+            let buttonPositions = [
                 175, 75,
                 655, 75,
                 410, 325,
@@ -1452,376 +1037,149 @@ namespace demos {
                 685, 445
             ];
 
-            function noop(): void {
-                console.log('click');
-            }
+            let textureButton = PIXI.Texture.fromImage("../../_assets/button.png");
+            let textureButtonDown = PIXI.Texture.fromImage("../../_assets/buttonDown.png");
+            let textureButtonOver = PIXI.Texture.fromImage("../../_assets/buttonOver.png");
 
-            // create some textures from an image path
-            var textureButton = PIXI.Texture.fromImage('../../_assets/button.png');
-            var textureButtonDown = PIXI.Texture.fromImage('../../_assets/buttonDown.png');
-            var textureButtonOver = PIXI.Texture.fromImage('../../_assets/buttonOver.png');
+            for (let i = 0; i < 5; i++) {
 
-            for (var i = 0; i < 5; i++) {
+                let button = new PIXI.Sprite(textureButton);
+                button.anchor.set(0.5);
+                button.x = buttonPositions[i * 2];
+                button.y = buttonPositions[i * 2 + 1];
+                button.interactive = true;
+                button.buttonMode = true;
 
-                var button = new InteractivityButton(textureButton, textureButtonDown, textureButtonOver);
+                button
+                    .on("pointerdown", (): void => {
+                        // blah
+                    })
+                    .on("pointerup", (): void => {
+                        // blah
+                    })
+                    .on("pointerupoutside", (): void => {
+                        // blah
+                    })
+                    .on("pointerover", (): void => {
+                        // blah
+                    })
+                    .on("pointerout", (): void => {
+                        // blah
+                    });
 
-                button.position.x = buttonPositions[i * 2];
-                button.position.y = buttonPositions[i * 2 + 1];
-
-                button.tap = noop;
-                button.click = noop;
-
-                // add it to the stage
-                this.stage.addChild(button);
-
-                // add button to array
+                this.app.stage.addChild(button);
                 this.buttons.push(button);
-
             }
 
-            // set some silly values...
             this.buttons[0].scale.set(1.2);
-
             this.buttons[2].rotation = Math.PI / 10;
-
             this.buttons[3].scale.set(0.8);
-
             this.buttons[4].scale.set(0.8, 1.2);
             this.buttons[4].rotation = Math.PI;
 
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
         }
 
     }
 
-    export class InteractivityButton extends PIXI.Sprite {
-
-        private textureButton: PIXI.Texture;
-        private textureButtonDown: PIXI.Texture;
-        private textureButtonOver: PIXI.Texture;
-
-        tap: Function;
-        click: Function;
-
-        isdown: boolean;
-        isOver: boolean;
-
-        constructor(textureButton: PIXI.Texture, textureButtonDown: PIXI.Texture, textureButtonOver: PIXI.Texture) {
-
-            super(textureButton);
-
-            // create some textures from an image path
-            this.textureButton = textureButton;
-            this.textureButtonDown = textureButtonDown;
-            this.textureButtonOver = textureButtonOver;
-
-            this.buttonMode = true;
-            this.anchor.set(0.5);
-
-            // make the button interactive...
-            this.interactive = true;
-
-            this
-            // set the mousedown and touchstart callback...
-                .on('mousedown', this.onButtonDown)
-                .on('touchstart', this.onButtonDown)
-
-            // set the mouseup and touchend callback...
-                .on('mouseup', this.onButtonUp)
-                .on('touchend', this.onButtonUp)
-                .on('mouseupoutside', this.onButtonUp)
-                .on('touchendoutside', this.onButtonUp)
-
-            // set the mouseover callback...
-                .on('mouseover', this.onButtonOver)
-
-            // set the mouseout callback...
-                .on('mouseout', this.onButtonOut);
-
-            // you can also listen to click and tap events :
-            // .on('click', this.noop)
-
-        }
-
-        private onButtonDown = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isdown = true;
-            this.texture = this.textureButtonDown;
-            this.alpha = 1;
-
-        }
-
-        private onButtonUp = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isdown = false;
-
-            if (this.isOver) {
-                this.texture = this.textureButtonOver;
-            } else {
-                this.texture = this.textureButton;
-            }
-        }
-
-        private onButtonOver = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isOver = true;
-
-            if (this.isdown) {
-                return;
-            }
-
-            this.texture = this.textureButtonOver;
-
-        }
-
-        private onButtonOut = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isOver = false;
-
-            if (this.isdown) {
-                return;
-            }
-
-            this.texture = this.textureButton;
-        }
-
-    }
-
-}
-
-namespace demos {
-
     export class Masking {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private bg: PIXI.Sprite;
-
         private container: PIXI.Container;
-
         private bgFront: PIXI.Sprite;
-
         private light1: PIXI.Sprite;
-
         private light2: PIXI.Sprite;
-
         private panda: PIXI.Sprite;
-
         private thing: PIXI.Graphics;
-
         private count: number;
-
         private help: PIXI.Text;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, antialias: true });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { antialias: true });
+            this.app.stage.interactive = true;
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            this.bg = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg');
-            this.bg.anchor.x = 0.5;
-            this.bg.anchor.y = 0.5;
-
-            this.bg.position.x = this.renderer.width / 2;
-            this.bg.position.y = this.renderer.height / 2;
-
-            this.stage.addChild(this.bg);
+            this.bg = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg");
+            this.bg.anchor.set(0.5);
+            this.bg.x = this.app.renderer.width / 2;
+            this.bg.y = this.app.renderer.height / 2;
+            this.app.stage.addChild(this.bg);
 
             this.container = new PIXI.Container();
-            this.container.position.x = this.renderer.width / 2;
-            this.container.position.y = this.renderer.height / 2;
+            this.container.x = this.app.renderer.width / 2;
+            this.container.y = this.app.renderer.height / 2;
+            this.app.stage.addChild(this.container);
 
-            // add a bunch of sprites
+            this.bgFront = PIXI.Sprite.fromImage("required/assets/SceneRotate.jpg");
+            this.bgFront.anchor.set(0.5);
 
-            this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg');
-            this.bgFront.anchor.x = 0.5;
-            this.bgFront.anchor.y = 0.5;
+            this.light2 = PIXI.Sprite.fromImage("required/assets/LightRotate2.png");
+            this.light2.anchor.set(0.5);
 
-            this.container.addChild(this.bgFront);
+            this.light1 = PIXI.Sprite.fromImage("required/assets/LightRotate1.png");
+            this.light1.anchor.set(0.5);
 
-            this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png');
-            this.light2.anchor.x = 0.5;
-            this.light2.anchor.y = 0.5;
-            this.container.addChild(this.light2);
+            this.panda = PIXI.Sprite.fromImage("required/assets/panda.png");
+            this.panda.anchor.set(0.5);
 
-            this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png');
-            this.light1.anchor.x = 0.5;
-            this.light1.anchor.y = 0.5;
-            this.container.addChild(this.light1);
+            this.container.addChild(this.bgFront, this.light2, this.light1, this.panda);
 
-            this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png');
-            this.panda.anchor.x = 0.5;
-            this.panda.anchor.y = 0.5;
+            this.app.stage.addChild(this.container);
 
-            this.container.addChild(this.panda);
-
-            this.stage.addChild(this.container);
-
-            // let's create a moving shape
             this.thing = new PIXI.Graphics();
-            this.stage.addChild(this.thing);
-            this.thing.position.x = this.renderer.width / 2;
-            this.thing.position.y = this.renderer.height / 2;
+            this.app.stage.addChild(this.thing);
+            this.thing.x = this.app.renderer.width / 2;
+            this.thing.y = this.app.renderer.height / 2;
             this.thing.lineStyle(0);
-
             this.container.mask = this.thing;
 
             this.count = 0;
 
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
+            this.app.stage.on("pointertap", (): void => {
+                if (!this.container.mask) {
+                    this.container.mask = this.thing;
+                }
+                else {
+                    this.container.mask = null;
+                }
+            });
 
-            this.help = new PIXI.Text('Click to turn masking on / off.', { fontFamily: 'Arial', fontSize: 12, fontWeight: 'bold', fill: 'white' });
-            this.help.position.y = this.renderer.height - 26;
-            this.help.position.x = 10;
-            this.stage.addChild(this.help);
+            this.app.ticker.add((): void => {
 
-            // start animating
-            this.animate();
+                this.bg.rotation += 0.01;
+                this.bgFront.rotation -= 0.01;
+
+                this.light1.rotation += 0.02;
+                this.light2.rotation += 0.01;
+
+                this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
+                this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
+
+                this.count += 0.1;
+
+                this.thing.clear();
+
+                this.thing.beginFill(0x8bc5ff, 0.4);
+                this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
+                this.thing.lineTo(-320 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
+                this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
+                this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
+                this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
+                this.thing.lineTo(-120 + Math.sin(this.count) * 20, -300 + Math.cos(this.count) * 20);
+                this.thing.lineTo(-320 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
+                this.thing.rotation = this.count * 0.1;
+
+            });
 
         }
 
-        private animate = (): void => {
-
-            this.bg.rotation += 0.01;
-            this.bgFront.rotation -= 0.01;
-
-            this.light1.rotation += 0.02;
-            this.light2.rotation += 0.01;
-
-            this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
-            this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
-
-            this.count += 0.1;
-
-            this.thing.clear();
-
-            this.thing.beginFill(0x8bc5ff, 0.4);
-            this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-320 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(-120 + Math.sin(this.count) * 20, -300 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-320 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-            this.thing.rotation = this.count * 0.1;
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-        private onClick = (event: PIXI.interaction.InteractionEvent): void => {
-
-            if (!this.container.mask) {
-                this.container.mask = this.thing;
-            } else {
-                this.container.mask = null;
-            }
-        }
 
     }
 
-}
-
-namespace demos {
-
-    export class AnimatedSpriteDemo {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            PIXI.loader
-                .add('spritesheet', '../../_assets/mc.json')
-                .load(this.onAssetsLoaded);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private onAssetsLoaded = (loader: PIXI.loaders.Loader): void => {
-
-            // create an array to store the textures
-            var explosionTextures: PIXI.Texture[] = [];
-            var i: number;
-
-            for (i = 0; i < 26; i++) {
-
-                var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i + 1) + '.png');
-                explosionTextures.push(texture);
-
-            }
-
-            for (i = 0; i < 50; i++) {
-
-                // create an explosion AnimatedSprite
-                var explosion = new PIXI.extras.AnimatedSprite(explosionTextures);
-
-                explosion.position.x = Math.random() * 800;
-                explosion.position.y = Math.random() * 600;
-                explosion.anchor.x = 0.5;
-                explosion.anchor.y = 0.5;
-
-                explosion.rotation = Math.random() * Math.PI;
-
-                explosion.scale.set(0.75 + Math.random() * 0.5);
-
-                explosion.gotoAndPlay(Math.random() * 27);
-
-                this.stage.addChild(explosion);
-
-            }
-
-            // start animating
-            this.animate();
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
     export class RenderTextureDemo {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
+        private app: PIXI.Application;
 
         private renderTexture: PIXI.RenderTexture;
         private renderTexture2: PIXI.RenderTexture;
@@ -1829,539 +1187,421 @@ namespace demos {
 
         private outputSprite: PIXI.Sprite;
         private stuffContainer: PIXI.Container;
+
         private items: PIXI.Sprite[];
 
         private count: number;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create two render textures... these dynamic textures will be used to draw the scene into itself
-            this.renderTexture = PIXI.RenderTexture.create(this.renderer.width, this.renderer.height);
-            this.renderTexture2 = PIXI.RenderTexture.create(this.renderer.width, this.renderer.height);
+            this.renderTexture = PIXI.RenderTexture.create(
+                this.app.renderer.width,
+                this.app.renderer.height
+            );
+            this.renderTexture2 = PIXI.RenderTexture.create(
+                this.app.renderer.width,
+                this.app.renderer.height
+            );
             this.currentTexture = this.renderTexture;
 
-            // create a new sprite that uses the render texture we created above
             this.outputSprite = new PIXI.Sprite(this.currentTexture);
-
-            // align the sprite
-            this.outputSprite.position.x = 400;
-            this.outputSprite.position.y = 300;
+            this.outputSprite.x = 400;
+            this.outputSprite.y = 300;
             this.outputSprite.anchor.set(0.5);
-
-            // add to stage
-            this.stage.addChild(this.outputSprite);
+            this.app.stage.addChild(this.outputSprite);
 
             this.stuffContainer = new PIXI.Container();
+            this.stuffContainer.x = 400;
+            this.stuffContainer.y = 300;
+            this.app.stage.addChild(this.stuffContainer);
 
-            this.stuffContainer.position.x = 400;
-            this.stuffContainer.position.y = 300;
-
-            this.stage.addChild(this.stuffContainer);
-
-            // create an array of image ids..
-            var fruits = [
-                '../../_assets/spinObj_01.png',
-                '../../_assets/spinObj_02.png',
-                '../../_assets/spinObj_03.png',
-                '../../_assets/spinObj_04.png',
-                '../../_assets/spinObj_05.png',
-                '../../_assets/spinObj_06.png',
-                '../../_assets/spinObj_07.png',
-                '../../_assets/spinObj_08.png'
+            let fruits = [
+                "required/assets/spinObj_01.png",
+                "required/assets/spinObj_02.png",
+                "required/assets/spinObj_03.png",
+                "required/assets/spinObj_04.png",
+                "required/assets/spinObj_05.png",
+                "required/assets/spinObj_06.png",
+                "required/assets/spinObj_07.png",
+                "required/assets/spinObj_08.png"
             ];
 
-            // create an array of items
             this.items = [];
 
-            // now create some items and randomly position them in the stuff container
-            for (var i = 0; i < 20; i++) {
-
-                var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
-                item.position.x = Math.random() * 400 - 200;
-                item.position.y = Math.random() * 400 - 200;
-
+            for (let i = 0; i < 20; i++) {
+                let item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
+                item.x = Math.random() * 400 - 200;
+                item.y = Math.random() * 400 - 200;
                 item.anchor.set(0.5);
-
                 this.stuffContainer.addChild(item);
-
                 this.items.push(item);
-
             }
 
-            // used for spinning!
             this.count = 0;
 
-            // start animating
-            this.animate();
+            this.app.ticker.add((): void => {
 
-        }
+                for (let i = 0; i < this.items.length; i++) {
+                    let item = this.items[i];
+                    item.rotation += 0.1;
+                }
 
-        private animate = (): void => {
+                this.count += 0.01;
 
-            for (const item of this.items) {
-                // rotate each item
-                item.rotation += 0.1;
-            }
+                let temp = this.renderTexture;
+                this.renderTexture = this.renderTexture2;
+                this.renderTexture2 = temp;
 
-            this.count += 0.01;
+                this.outputSprite.texture = this.renderTexture;
 
-            // swap the buffers ...
-            var temp = this.renderTexture;
-            this.renderTexture = this.renderTexture2;
-            this.renderTexture2 = temp;
+                this.stuffContainer.rotation -= 0.01;
+                this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2);
 
-            // set the new texture
-            this.outputSprite.texture = this.renderTexture;
+                this.app.renderer.render(this.app.stage, this.renderTexture2, false);
 
-            // twist this up!
-            this.stuffContainer.rotation -= 0.01;
-            this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2);
-
-            // render the stage to the texture
-            // the 'true' clears the texture before the content is rendered
-            this.renderer.render(this.stage, this.renderTexture2, false);
-
-            // and finally render the stage
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            });
 
         }
 
     }
 
-}
-
-namespace demos {
-
     export class StripDemo {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private count: number;
-
         private points: PIXI.Point[];
-
         private strip: PIXI.mesh.Rope;
-
         private snakeContainer: PIXI.Container;
 
-        private ropeLength: number;
-
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
             this.count = 0;
 
-            // build a rope!
-            this.ropeLength = 918 / 20;
+            let ropeLength = 918 / 20;
 
             this.points = [];
 
-            for (var i = 0; i < 20; i++) {
-                this.points.push(new PIXI.Point(i * this.ropeLength, 0));
+            for (let i = 0; i < 20; i++) {
+                this.points.push(new PIXI.Point(i * ropeLength, 0));
             }
 
-            this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points);
+            this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage("required/assets/snake.png"), this.points);
             this.strip.x = -459;
 
             this.snakeContainer = new PIXI.Container();
             this.snakeContainer.position.x = 400;
             this.snakeContainer.position.y = 300;
-
             this.snakeContainer.scale.set(800 / 1100);
-            this.stage.addChild(this.snakeContainer);
-
             this.snakeContainer.addChild(this.strip);
+            this.app.stage.addChild(this.snakeContainer);
 
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.1;
-
-            // make the snake
-            for (var i = 0; i < this.points.length; i++) {
-
-                this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
-
-                this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20;
-
-            }
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            this.app.ticker.add((): void => {
+                this.count += 0.1;
+                for (let i = 0; i < this.points.length; i++) {
+                    this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
+                    this.points[i].x = i * ropeLength + Math.cos((i * 0.3) + this.count) * 20;
+                }
+            });
 
         }
 
     }
 
-}
-
-namespace demos {
-
     export class TextDemo {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private bitmapFontText: PIXI.extras.BitmapText;
-
         private background: PIXI.Sprite;
-
         private textSample: PIXI.Text;
-
         private spinningText: PIXI.Text;
-
         private countingText: PIXI.Text;
-
         private count: number;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
             PIXI.loader
-                .add('desyrel', '../../_assets/desyrel.xml')
-                .load(this.onAssetsLoaded);
+                .add("desyrel", "required/assets/desyrel.xml")
+                .load((): void => {
 
-            // start animating
-            this.animate();
+                    this.bitmapFontText = new PIXI.extras.BitmapText("bitmap fonts are\n now supported!", { font: "35px Desyrel", align: "right" });
+                    this.bitmapFontText.x = this.app.renderer.width - this.bitmapFontText.textWidth - 20;
+                    this.bitmapFontText.y = 20;
+                    this.app.stage.addChild(this.bitmapFontText);
 
-        }
+                });
 
-        private onAssetsLoaded = (): void  => {
+            this.background = PIXI.Sprite.fromImage("required/assets/textDemoBG.jpg");
+            this.background.width = this.app.renderer.width;
+            this.background.height = this.app.renderer.height;
+            this.app.stage.addChild(this.background);
 
-            this.bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' });
-
-            this.bitmapFontText.position.x = 600 - this.bitmapFontText.textWidth;
-            this.bitmapFontText.position.y = 20;
-
-            this.stage.addChild(this.bitmapFontText);
-
-            // add a shiny background...
-            this.background = PIXI.Sprite.fromImage('../../_assets/textDemoBG.jpg');
-            this.stage.addChild(this.background);
-
-            // create some white text using the Snippet webfont
-            this.textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { fontSize: 35, fontFamily: 'Snippet', fill: 'white', align: 'left' });
+            this.textSample = new PIXI.Text("Pixi.js can has\n multiline text!", {
+                fontFamily: "Snippet",
+                fontSize: 35,
+                fill: "white",
+                align: "left"
+            });
             this.textSample.position.set(20);
 
-            // create a text object with a nice stroke
-            this.spinningText = new PIXI.Text('I\'m fun!', { fontWeight: 'bold', fontSize: 60, fontFamily: 'Arial', fill: '#cc00ff', align: 'center', stroke: '#FFFFFF', strokeThickness: 6 });
-
-            // setting the anchor point to 0.5 will center align the text... great for spinning!
+            this.spinningText = new PIXI.Text("I\"m fun!", {
+                fontWeight: "bold",
+                fontSize: 60,
+                fontFamily: "Arial",
+                fill: "#cc00ff",
+                align: "center",
+                stroke: "#FFFFFF",
+                strokeThickness: 6
+            });
             this.spinningText.anchor.set(0.5);
-            this.spinningText.position.x = 310;
-            this.spinningText.position.y = 200;
+            this.spinningText.x = this.app.renderer.width / 2;
+            this.spinningText.y = this.app.renderer.height / 2;
 
-            // create a text object that will be updated...
-            this.countingText = new PIXI.Text('COUNT 4EVAR: 0', {
-                fontWeight: 'bold',
-                fontStyle: 'italic',
-                fontSize: 60, fontFamily:
-                'Arvo', fill: '#3e1707',
-                align: 'center',
-                stroke: '#a4410e',
+            this.countingText = new PIXI.Text("COUNT 4Elet: 0", {
+                fontWeight: "bold",
+                fontStyle: "italic",
+                fontSize: 60,
+                fontFamily: "Arvo",
+                fill: "#3e1707",
+                align: "center",
+                stroke: "#a4410e",
                 strokeThickness: 7
             });
 
-            this.countingText.position.x = 310;
-            this.countingText.position.y = 320;
+            this.countingText.x = this.app.renderer.width / 2;
+            this.countingText.y = 500;
             this.countingText.anchor.x = 0.5;
 
-            this.stage.addChild(this.textSample);
-            this.stage.addChild(this.spinningText);
-            this.stage.addChild(this.countingText);
+            this.app.stage.addChild(this.textSample, this.spinningText, this.countingText);
 
             this.count = 0;
 
-        }
+            this.app.ticker.add((): void => {
 
-        private animate = (): void => {
+                this.count += 0.05;
+                this.countingText.text = "COUNT 4Elet: " + Math.floor(this.count);
 
+                this.spinningText.rotation += 0.03;
 
-            this.renderer.render(this.stage);
+            });
 
-            this.count += 0.05;
-
-            // update the text with a new string
-            this.countingText.text = 'COUNT 4EVAR: ' + Math.floor(this.count);
-
-            // let's spin the spinning text
-            this.spinningText.rotation += 0.03;
-
-            requestAnimationFrame(this.animate);
         }
 
     }
 
-}
-
-namespace demos {
-
-    export class TextureSwap {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
+    export class TextureRotate {
 
+        private app: PIXI.Application;
         private bol: boolean;
-
         private texture: PIXI.Texture;
         private secondTexture: PIXI.Texture;
-
         private dude: PIXI.Sprite;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
             this.bol = false;
 
-            // an image path
-            this.texture = PIXI.Texture.fromImage('../../_assets/flowerTop.png');
+            PIXI.loader.add("flowerTop", "required/assets/flowerTop.png");
+            PIXI.loader.load((loader: PIXI.loaders.Loader, resources: any) => {
+                this.texture = resources.flowerTop.texture;
+                this.init();
+            });
 
-            // create a second texture
-            this.secondTexture = PIXI.Texture.fromImage('../../_assets/eggHead.png');
+        }
+
+        private init(): void {
+
+            let textures = [this.texture];
+            let D8 = PIXI.GroupD8;
+            for (let rotate = 1; rotate < 16; rotate++) {
+                let h = D8.isSwapWidthHeight(rotate) ? this.texture.frame.width : this.texture.frame.height;
+                let w = D8.isSwapWidthHeight(rotate) ? this.texture.frame.height : this.texture.frame.width;
+
+                let frame = this.texture.frame;
+                let crop = new PIXI.Rectangle(this.texture.frame.x, this.texture.frame.y, w, h);
+                let trim = crop;
+                let rotatedTexture: PIXI.Texture;
+                if (rotate % 2 === 0) {
+                    rotatedTexture = new PIXI.Texture(this.texture.baseTexture, frame, crop, trim, rotate);
+                } else {
+                    rotatedTexture = new PIXI.Texture(this.texture.baseTexture, frame, crop, trim, rotate - 1);
+                    rotatedTexture.rotate++;
+                }
+                textures.push(rotatedTexture);
+            }
+
+            let offsetX = this.app.renderer.width / 16 | 0;
+            let offsetY = this.app.renderer.height / 8 | 0;
+            let gridW = this.app.renderer.width / 4 | 0;
+            let gridH = this.app.renderer.height / 5 | 0;
+
+            for (let i = 0; i < 16; i++) {
+
+                let dude = new PIXI.Sprite(textures[i < 8 ? i * 2 : (i - 8) * 2 + 1]);
+                dude.scale.x = 0.5;
+                dude.scale.y = 0.5;
+                dude.x = offsetX + gridW * (i % 4);
+                dude.y = offsetY + gridH * (i / 4 | 0);
+                this.app.stage.addChild(dude);
+
+                let text = new PIXI.Text("rotate = " + dude.texture.rotate, { fontFamily: "Courier New", fontSize: "12px", fill: "white", align: "left" });
+                text.x = dude.x;
+                text.y = dude.y - 20;
+                this.app.stage.addChild(text);
+
+            }
+
+        }
+
+    }
+
+    export class TextureSwap {
+
+        private app: PIXI.Application;
+        private bol: boolean;
+        private texture: PIXI.Texture;
+        private secondTexture: PIXI.Texture;
+        private dude: PIXI.Sprite;
+
+        constructor() {
+
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
+
+            this.bol = false;
+
+            this.texture = PIXI.Texture.fromImage("required/assets/flowerTop.png");
+
+            this.secondTexture = PIXI.Texture.fromImage("required/assets/eggHead.png");
 
-            // create a new Sprite using the texture
             this.dude = new PIXI.Sprite(this.texture);
-
-            // center the sprites anchor point
             this.dude.anchor.set(0.5);
-
-            // move the sprite to the center of the screen
-            this.dude.position.x = this.renderer.width / 2;
-            this.dude.position.y = this.renderer.height / 2;
-
-            this.stage.addChild(this.dude);
-
-            // make the sprite interactive
+            this.dude.x = this.app.renderer.width / 2;
+            this.dude.y = this.app.renderer.height / 2;
             this.dude.interactive = true;
+            this.dude.buttonMode = true;
+            this.app.stage.addChild(this.dude);
 
-            this.dude.on('click', (): void => {
+            this.dude.on("pointertap", (): void => {
                 this.bol = !this.bol;
-
                 if (this.bol) {
                     this.dude.texture = this.secondTexture;
-                } else {
+                }
+                else {
                     this.dude.texture = this.texture;
                 }
             });
 
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // just for fun, let's rotate mr rabbit a little
-            this.dude.rotation += 0.1;
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            this.app.ticker.add((): void => {
+                this.dude.rotation += 0.1;
+            });
 
         }
 
     }
 
-}
-
-namespace demos {
-
     export class Tinting {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private totalDudes: number = 10;
-        private aliens: TintingDude[];
-
-        private dudeBounds: PIXI.Rectangle;
-
-        private tick: number;
+        private app: PIXI.Application;
+        private aliens: Dude[];
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // holder to store the aliens
             this.aliens = [];
 
-            this.tick = 0;
+            let totalDudes = 20;
 
-            for (var i = 0; i < this.totalDudes; i++) {
+            let dudeTexture = PIXI.Texture.fromImage("required/assets/eggHead.png");
 
-                // create a new Sprite that uses the image name that we just generated as its source
-                var dude = new TintingDude();
+            for (let i = 0; i < totalDudes; i++) {
 
-                // set the anchor point so the texture is centerd on the sprite
+                let dude = new Dude(dudeTexture);
                 dude.anchor.set(0.5);
-
-                // set a random scale for the dude - no point them all being the same size!
                 dude.scale.set(0.8 + Math.random() * 0.3);
-
-                // finally lets set the dude to be at a random position..
-                dude.position.x = Math.random() * this.renderer.width;
-                dude.position.y = Math.random() * this.renderer.height;
-
+                dude.x = Math.random() * this.app.renderer.width;
+                dude.y = Math.random() * this.app.renderer.height;
                 dude.tint = Math.random() * 0xFFFFFF;
-
-                // create some extra properties that will control movement :
-                // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
                 dude.direction = Math.random() * Math.PI * 2;
-
-                // this number will be used to modify the direction of the dude over time
                 dude.turningSpeed = Math.random() - 0.8;
-
-                // create a random speed for the dude between 0 - 2
                 dude.speed = 2 + Math.random() * 2;
 
-                // finally we push the dude into the aliens array so it it can be easily accessed later
                 this.aliens.push(dude);
-
-                this.stage.addChild(dude);
+                this.app.stage.addChild(dude);
 
             }
 
-            // create a bounding box for the little dudes
-            var dudeBoundsPadding = 100;
-            this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
+            let dudeBoundsPadding = 100;
+            let dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
                 -dudeBoundsPadding,
-                this.renderer.width + dudeBoundsPadding * 2,
-                this.renderer.height + dudeBoundsPadding * 2);
+                this.app.renderer.width + dudeBoundsPadding * 2,
+                this.app.renderer.height + dudeBoundsPadding * 2);
 
-            // start animating
-            this.animate();
+            this.app.ticker.add((): void => {
 
-        }
+                for (let i = 0; i < this.aliens.length; i++) {
 
-        private animate = (): void => {
+                    let dude = this.aliens[i];
+                    dude.direction += dude.turningSpeed * 0.01;
+                    dude.x += Math.sin(dude.direction) * dude.speed;
+                    dude.y += Math.cos(dude.direction) * dude.speed;
+                    dude.rotation = -dude.direction - Math.PI / 2;
 
-            // iterate through the dudes and update their position
-            for (const dude of this.aliens) {
-                dude.direction += dude.turningSpeed * 0.01;
-                dude.position.x += Math.sin(dude.direction) * dude.speed;
-                dude.position.y += Math.cos(dude.direction) * dude.speed;
-                dude.rotation = -dude.direction - Math.PI / 2;
+                    if (dude.x < dudeBounds.x) {
+                        dude.x += dudeBounds.width;
+                    }
+                    else if (dude.x > dudeBounds.x + dudeBounds.width) {
+                        dude.x -= dudeBounds.width;
+                    }
 
-                // wrap the dudes by testing their bounds...
-                if (dude.position.x < this.dudeBounds.x) {
-                    dude.position.x += this.dudeBounds.width;
-                } else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
-                    dude.position.x -= this.dudeBounds.width;
+                    if (dude.y < dudeBounds.y) {
+                        dude.y += dudeBounds.height;
+                    }
+                    else if (dude.y > dudeBounds.y + dudeBounds.height) {
+                        dude.y -= dudeBounds.height;
+                    }
                 }
 
-                if (dude.position.y < this.dudeBounds.y) {
-                    dude.position.y += this.dudeBounds.height;
-                } else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
-                    dude.position.y -= this.dudeBounds.height;
-                }
-
-            }
-
-            // increment the ticker
-            this.tick += 0.1;
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
+            });
         }
 
     }
 
-    export class TintingDude extends PIXI.Sprite {
-
-        direction: number;
-        speed: number;
-        turningSpeed: number;
-
-        constructor() {
-            super(PIXI.Texture.fromImage('../../_assets/eggHead.png'));
-        }
-
-    }
-
-}
-
-namespace demos {
-
     export class TransparentBackground {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private bunny: PIXI.Sprite;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, transparent: true });
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600, { transparent: true });
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.bunny = PIXI.Sprite.fromImage("required/assets/bunny.png");
 
-            // create a new Sprite from an image path.
-            this.bunny = PIXI.Sprite.fromImage('../../_assets/bunny.png');
-
-            // center the sprite's anchor point
             this.bunny.anchor.set(0.5);
 
-            // move the sprite to the center of the screen
-            this.bunny.position.x = 200;
-            this.bunny.position.y = 150;
+            this.bunny.x = this.app.renderer.width / 2;
+            this.bunny.y = this.app.renderer.height / 2;
 
-            this.stage.addChild(this.bunny);
+            this.app.stage.addChild(this.bunny);
 
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // just for fun, let's rotate mr rabbit a little
-            this.bunny.rotation += 0.1;
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            this.app.ticker.add((): void => {
+                this.bunny.rotation += 0.1;
+            });
 
         }
 
@@ -2371,44 +1611,35 @@ namespace demos {
 
 namespace filters {
 
-    export class Blur {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
+    export class BlurFilter {
 
+        private app: PIXI.Application;
         private bg: PIXI.Sprite;
-
         private littleDudes: PIXI.Sprite;
         private littleRobot: PIXI.Sprite;
-
         private blurFilter1: PIXI.filters.BlurFilter;
         private blurFilter2: PIXI.filters.BlurFilter;
-
         private count: number;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600);
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application(800, 600);
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
+            this.bg = PIXI.Sprite.fromImage("required/assets/depth_blur_BG.jpg");
+            this.bg.width = this.app.renderer.width;
+            this.bg.height = this.app.renderer.height;
+            this.app.stage.addChild(this.bg);
 
-            this.bg = PIXI.Sprite.fromImage('../../_assets/depth_blur_BG.jpg');
-            this.bg.width = this.renderer.width;
-            this.bg.height = this.renderer.height;
-            this.stage.addChild(this.bg);
+            this.littleDudes = PIXI.Sprite.fromImage("required/assets/depth_blur_dudes.jpg");
+            this.littleDudes.x = (this.app.renderer.width / 2) - 315;
+            this.littleDudes.y = 200;
+            this.app.stage.addChild(this.littleDudes);
 
-            this.littleDudes = PIXI.Sprite.fromImage('../../_assets/depth_blur_dudes.jpg');
-            this.littleDudes.position.x = (this.renderer.width / 2) - 315;
-            this.littleDudes.position.y = 200;
-            this.stage.addChild(this.littleDudes);
-
-            this.littleRobot = PIXI.Sprite.fromImage('../../_assets/depth_blur_moby.jpg');
-            this.littleRobot.position.x = (this.renderer.width / 2) - 200;
-            this.littleRobot.position.y = 100;
-            this.stage.addChild(this.littleRobot);
+            this.littleRobot = PIXI.Sprite.fromImage("required/assets/depth_blur_moby.jpg");
+            this.littleRobot.x = (this.app.renderer.width / 2) - 200;
+            this.littleRobot.y = 100;
+            this.app.stage.addChild(this.littleRobot);
 
             this.blurFilter1 = new PIXI.filters.BlurFilter();
             this.blurFilter2 = new PIXI.filters.BlurFilter();
@@ -2418,77 +1649,54 @@ namespace filters {
 
             this.count = 0;
 
-            // nimate
-            this.animate();
+            this.app.ticker.add((): void => {
 
-        }
+                this.count += 0.005;
 
-        private animate = (): void => {
+                let blurAmount = Math.cos(this.count);
+                let blurAmount2 = Math.sin(this.count);
 
-            this.count += 0.005;
+                this.blurFilter1.blur = 20 * (blurAmount);
+                this.blurFilter2.blur = 20 * (blurAmount2);
 
-            var blurAmount = Math.cos(this.count);
-            var blurAmount2 = Math.sin(this.count);
-
-            this.blurFilter1.blur = 20 * (blurAmount);
-            this.blurFilter2.blur = 20 * (blurAmount2);
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            });
 
         }
 
     }
 
-}
-
-namespace filters {
-
     export class DisplacementMap {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
+        private app: PIXI.Application;
         private container: PIXI.Container;
-
-        private padding: number;
-
-        private bounds: PIXI.Rectangle;
-
         private maggots: DisplacementMapDude[];
-
         private displacementSprite: PIXI.Sprite;
-
         private displacementFilter: PIXI.filters.DisplacementFilter;
-
         private ring: PIXI.Sprite;
-
         private bg: PIXI.Sprite;
-
         private count: number;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600);
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
+            this.app = new PIXI.Application(800, 600);
+            this.app.stage.interactive = true;
+            document.body.appendChild(this.app.view);
 
             this.container = new PIXI.Container();
-            this.stage.addChild(this.container);
+            this.app.stage.addChild(this.container);
 
-            this.padding = 100;
-
-            this.bounds = new PIXI.Rectangle(-this.padding, -this.padding, this.renderer.width + this.padding * 2, this.renderer.height + this.padding * 2);
+            let padding = 100;
+            let bounds = new PIXI.Rectangle(
+                -padding,
+                -padding,
+                this.app.renderer.width + padding * 2,
+                this.app.renderer.height + padding * 2
+            );
             this.maggots = [];
 
-            for (var i = 0; i < 20; i++) {
+            for (let i = 0; i < 20; i++) {
 
-                var maggot = new DisplacementMapDude();
+                let maggot = new DisplacementMapDude();
                 maggot.anchor.set(0.5);
                 this.container.addChild(maggot);
 
@@ -2496,8 +1704,8 @@ namespace filters {
                 maggot.speed = 1;
                 maggot.turnSpeed = Math.random() - 0.8;
 
-                maggot.position.x = Math.random() * this.bounds.width;
-                maggot.position.y = Math.random() * this.bounds.height;
+                maggot.position.x = Math.random() * bounds.width;
+                maggot.position.y = Math.random() * bounds.height;
 
                 maggot.scale.set(1 + Math.random() * 0.3);
                 maggot.original = maggot.scale.clone();
@@ -2505,234 +1713,185 @@ namespace filters {
 
             }
 
-            this.displacementSprite = PIXI.Sprite.fromImage('../../_assets/displace.png');
-            this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite);
+            this.displacementSprite = PIXI.Sprite.fromImage("required/assets/displace.png");
+            let displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite);
+            this.app.stage.addChild(this.displacementSprite);
 
-            this.stage.addChild(this.displacementSprite);
+            this.container.filters = [displacementFilter];
 
-            this.container.filters = [this.displacementFilter];
-
-            this.displacementFilter.scale.x = 110;
-            this.displacementFilter.scale.y = 110;
-
-            this.ring = PIXI.Sprite.fromImage('../../_assets/ring.png');
+            displacementFilter.scale.x = 110;
+            displacementFilter.scale.y = 110;
 
+            this.ring = PIXI.Sprite.fromImage("required/assets/ring.png");
             this.ring.anchor.set(0.5);
-
             this.ring.visible = false;
+            this.app.stage.addChild(this.ring);
 
-            this.stage.addChild(this.ring);
-
-            this.bg = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg');
-            this.bg.width = this.renderer.width;
-            this.bg.height = this.renderer.height;
-
+            this.bg = PIXI.Sprite.fromImage("required/assets/bkg-grass.jpg");
+            this.bg.width = this.app.renderer.width;
+            this.bg.height = this.app.renderer.height;
             this.bg.alpha = 0.4;
-
             this.container.addChild(this.bg);
 
-            this.stage
-                .on('mousemove', this.onPointerMove)
-                .on('touchmove', this.onPointerMove);
-
             this.count = 0;
 
-            this.animate();
+            this.app.stage
+                .on("mousemove", this.onPointerMove)
+                .on("touchmove", this.onPointerMove);
+
+            this.app.ticker.add((): void => {
+
+                this.count += 0.05;
+
+                for (let i = 0; i < this.maggots.length; i++) {
+
+                    let maggot = this.maggots[i];
+
+                    maggot.direction += maggot.turnSpeed * 0.01;
+                    maggot.x += Math.sin(maggot.direction) * maggot.speed;
+                    maggot.y += Math.cos(maggot.direction) * maggot.speed;
+
+                    maggot.rotation = -maggot.direction - Math.PI / 2;
+                    maggot.scale.x = maggot.original.x + Math.sin(this.count) * 0.2;
+
+                    if (maggot.x < bounds.x) {
+                        maggot.x += bounds.width;
+                    }
+                    else if (maggot.x > bounds.x + bounds.width) {
+                        maggot.x -= bounds.width;
+                    }
+
+                    if (maggot.y < bounds.y) {
+                        maggot.y += bounds.height;
+                    }
+                    else if (maggot.y > bounds.y + bounds.height) {
+                        maggot.y -= bounds.height;
+                    }
+                }
+
+            });
 
         }
 
         private onPointerMove = (eventData: PIXI.interaction.InteractionEvent): void => {
 
             this.ring.visible = true;
-
             this.displacementSprite.x = eventData.data.global.x - 100;
             this.displacementSprite.y = eventData.data.global.y - this.displacementSprite.height / 2;
-
-            this.ring.position.x = eventData.data.global.x - 25;
-            this.ring.position.y = eventData.data.global.y;
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.05;
-
-            for (const maggot of this.maggots) {
-                maggot.direction += maggot.turnSpeed * 0.01;
-                maggot.position.x += Math.sin(maggot.direction) * maggot.speed;
-                maggot.position.y += Math.cos(maggot.direction) * maggot.speed;
-
-                maggot.rotation = -maggot.direction - Math.PI / 2;
-
-                maggot.scale.x = maggot.original.x + Math.sin(this.count) * 0.2;
-
-                // wrap the maggots around as the crawl
-                if (maggot.position.x < this.bounds.x) {
-                    maggot.position.x += this.bounds.width;
-                } else if (maggot.position.x > this.bounds.x + this.bounds.width) {
-                    maggot.position.x -= this.bounds.width;
-                }
-
-                if (maggot.position.y < this.bounds.y) {
-                    maggot.position.y += this.bounds.height;
-                } else if (maggot.position.y > this.bounds.y + this.bounds.height) {
-                    maggot.position.y -= this.bounds.height;
-                }
-            }
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            this.ring.x = eventData.data.global.x - 25;
+            this.ring.y = eventData.data.global.y;
 
         }
 
     }
-
     export class DisplacementMapDude extends PIXI.Sprite {
 
-        direction: number;
-        speed: number;
-        turnSpeed: number;
-        original: PIXI.Point;
+        direction: number = 0;
+        speed: number = 0;
+        turnSpeed: number = 0;
+        original: PIXI.Point = new PIXI.Point();
 
         constructor() {
 
-            super(PIXI.Texture.fromImage('../../_assets/maggot.png'));
+            super(PIXI.Texture.fromImage("../../_assets/maggot.png"));
 
         }
 
     }
 
-}
-
-namespace filters {
-
     export class Filter {
 
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Sprite;
-
+        private app: PIXI.Application;
+        private bg: PIXI.Sprite;
         private filter: PIXI.filters.ColorMatrixFilter;
-
         private container: PIXI.Container;
-
         private bgFront: PIXI.Sprite;
         private light2: PIXI.Sprite;
         private light1: PIXI.Sprite;
         private panda: PIXI.Sprite;
-
         private count: number;
-        private switchy: boolean;
-
+        private enabled: boolean;
         private help: PIXI.Text;
 
         constructor() {
 
-            this.renderer = PIXI.autoDetectRenderer(800, 600);
-            document.body.appendChild(this.renderer.view);
+            this.app = new PIXI.Application();
+            this.app.stage.interactive = true;
+            document.body.appendChild(this.app.view);
 
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            // create a texture from an image path
-            var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
-
-            this.background = PIXI.Sprite.fromImage('_assets/BGrotate.jpg');
-            this.background.anchor.set(0.5);
-
-            this.background.position.x = this.renderer.width / 2;
-            this.background.position.y = this.renderer.height / 2;
+            this.bg = PIXI.Sprite.fromImage("required/assets/BGrotate.jpg");
+            this.bg.anchor.set(0.5);
+            this.bg.x = this.app.renderer.width / 2;
+            this.bg.y = this.app.renderer.height / 2;
 
             this.filter = new PIXI.filters.ColorMatrixFilter();
 
             this.container = new PIXI.Container();
-            this.container.position.x = this.renderer.width / 2;
-            this.container.position.y = this.renderer.height / 2;
+            this.container.position.x = this.app.renderer.width / 2;
+            this.container.position.y = this.app.renderer.height / 2;
+            this.app.stage.addChild(this.container);
 
-            this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg');
+            this.bgFront = PIXI.Sprite.fromImage("required/assets/SceneRotate.jpg");
             this.bgFront.anchor.set(0.5);
-
             this.container.addChild(this.bgFront);
 
-            this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png');
+            this.light2 = PIXI.Sprite.fromImage("required/assets/LightRotate2.png");
             this.light2.anchor.set(0.5);
             this.container.addChild(this.light2);
 
-            this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png');
+            this.light1 = PIXI.Sprite.fromImage("../../_assets/LightRotate1.png");
             this.light1.anchor.set(0.5);
             this.container.addChild(this.light1);
 
-            this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png');
+            this.panda = PIXI.Sprite.fromImage("required/assets/panda.png");
             this.panda.anchor.set(0.5);
-
             this.container.addChild(this.panda);
 
-            this.stage.addChild(this.container);
-
-            this.stage.filters = [this.filter];
+            this.app.stage.filters = [this.filter];
 
             this.count = 0;
-            this.switchy = false;
+            this.enabled = true;
 
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
+            this.app.stage.on("pointertap", (): void => {
+                this.enabled = !this.enabled;
+                this.app.stage.filters = this.enabled ? [this.filter] : null;
+            });
 
+            this.help = new PIXI.Text("Click or tap to turn filters on / off.", {
+                fontFamily: "Arial",
+                fontSize: 12,
+                fontWeight: "bold",
+                fill: "white"
+            });
+            this.help.y = this.app.renderer.height - 25;
+            this.help.x = 10;
+            this.app.stage.addChild(this.help);
 
-            this.help = new PIXI.Text('Click to turn filters on / off.', { fontWeight: 'bold', fontSize: 12, fontFamily: 'Arial', fill: 'white' });
-            this.help.position.y = this.renderer.height - 25;
-            this.help.position.x = 10;
+            this.app.ticker.add((delta: number): void => {
 
-            this.stage.addChild(this.help);
+                this.bg.rotation += 0.01;
+                this.bgFront.rotation -= 0.01;
+                this.light1.rotation += 0.02;
+                this.light2.rotation += 0.01;
 
-            // animate
-            this.animate();
+                this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
+                this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
 
-        }
+                this.count += 0.1;
 
-        private onClick = (): void => {
+                let matrix = this.filter.matrix;
 
-            this.switchy = !this.switchy;
+                matrix[1] = Math.sin(this.count) * 3;
+                matrix[2] = Math.cos(this.count);
+                matrix[3] = Math.cos(this.count) * 1.5;
+                matrix[4] = Math.sin(this.count / 3) * 2;
+                matrix[5] = Math.sin(this.count / 2);
+                matrix[6] = Math.sin(this.count / 4);
 
-            if (!this.switchy) {
-                this.stage.filters = [this.filter];
-            } else {
-                this.stage.filters = null;
-            }
-
-        }
-
-        private animate = (): void => {
-
-            this.background.rotation += 0.01;
-            this.bgFront.rotation -= 0.01;
-
-            this.light1.rotation += 0.02;
-            this.light2.rotation += 0.01;
-
-            this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
-            this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
-
-            this.count += 0.1;
-
-            var matrix = this.filter.matrix;
-
-            matrix[1] = Math.sin(this.count) * 3;
-            matrix[2] = Math.cos(this.count);
-            matrix[3] = Math.cos(this.count) * 1.5;
-            matrix[4] = Math.sin(this.count / 3) * 2;
-            matrix[5] = Math.sin(this.count / 2);
-            matrix[6] = Math.sin(this.count / 4);
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
+            });
 
         }
 
     }
 
-}
+}
\ No newline at end of file
diff --git a/pixi.js/tslint.json b/pixi.js/tslint.json
index 56ba128af1..1c78047f30 100644
--- a/pixi.js/tslint.json
+++ b/pixi.js/tslint.json
@@ -1,9 +1,98 @@
 {
-    "extends": "../tslint.json",
+    "jsRules": {
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "no-duplicate-variable": true,
+        "no-eval": true,
+        "no-trailing-whitespace": true,
+        "no-unsafe-finally": true,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "double"
+        ],
+        "semicolon": [
+            true,
+            "always"
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "variable-name": [
+            true,
+            "ban-keywords"
+        ],
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ]
+    },
     "rules": {
-        "forbidden-types": false,
-        "interface-name": false,
-        "no-empty-interface": false,
-        "unified-signatures": false
+        "class-name": true,
+        "comment-format": [
+            true,
+            "check-space"
+        ],
+        "indent": [
+            true,
+            "spaces"
+        ],
+        "no-eval": true,
+        "no-internal-module": true,
+        "no-trailing-whitespace": true,
+        "no-unsafe-finally": true,
+        "no-var-keyword": true,
+        "one-line": [
+            true,
+            "check-open-brace",
+            "check-whitespace"
+        ],
+        "quotemark": [
+            true,
+            "double"
+        ],
+        "semicolon": [
+            true,
+            "always"
+        ],
+        "triple-equals": [
+            true,
+            "allow-null-check"
+        ],
+        "typedef-whitespace": [
+            true,
+            {
+                "call-signature": "nospace",
+                "index-signature": "nospace",
+                "parameter": "nospace",
+                "property-declaration": "nospace",
+                "variable-declaration": "nospace"
+            }
+        ],
+        "variable-name": false,
+        "whitespace": [
+            true,
+            "check-branch",
+            "check-decl",
+            "check-operator",
+            "check-separator",
+            "check-type"
+        ]
     }
-}
+}
\ No newline at end of file
diff --git a/pixi.js/v3/index.d.ts b/pixi.js/v3/index.d.ts
deleted file mode 100644
index aa573b2201..0000000000
--- a/pixi.js/v3/index.d.ts
+++ /dev/null
@@ -1,1747 +0,0 @@
-// Type definitions for Pixi.js 3.0
-// Project: https://github.com/GoodBoyDigital/pixi.js/
-// Definitions by: clark-stevenson <https://github.com/pixijs/pixi-typescript>
-// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
-
-export = PIXI;
-export as namespace PIXI;
-
-declare class PIXI {
-
-    static VERSION: string;
-    static PI_2: number;
-    static RAD_TO_DEG: number;
-    static DEG_TO_RAD: number;
-    static TARGET_FPMS: number;
-    static RENDERER_TYPE: {
-        UNKNOWN: number;
-        WEBGL: number;
-        CANVAS: number;
-    };
-    static BLEND_MODES: {
-        NORMAL: number;
-        ADD: number;
-        MULTIPLY: number;
-        SCREEN: number;
-        OVERLAY: number;
-        DARKEN: number;
-        LIGHTEN: number;
-        COLOR_DODGE: number;
-        COLOR_BURN: number;
-        HARD_LIGHT: number;
-        SOFT_LIGHT: number;
-        DIFFERENCE: number;
-        EXCLUSION: number;
-        HUE: number;
-        SATURATION: number;
-        COLOR: number;
-        LUMINOSITY: number;
-
-    };
-    static DRAW_MODES: {
-        POINTS: number;
-        LINES: number;
-        LINE_LOOP: number;
-        LINE_STRIP: number;
-        TRIANGLES: number;
-        TRIANGLE_STRIP: number;
-        TRIANGLE_FAN: number;
-    };
-    static SCALE_MODES: {
-        DEFAULT: number;
-        LINEAR: number;
-        NEAREST: number;
-    };
-    static RETINA_PREFIX: string;
-    static RESOLUTION: number;
-    static FILTER_RESOLUTION: number;
-    static DEFAULT_RENDER_OPTIONS: {
-        view: HTMLCanvasElement;
-        resolution: number;
-        antialias: boolean;
-        forceFXAA: boolean;
-        autoResize: boolean;
-        transparent: boolean;
-        backgroundColor: number;
-        clearBeforeRender: boolean;
-        preserveDrawingBuffer: boolean;
-        roundPixels: boolean;
-    };
-    static SHAPES: {
-        POLY: number;
-        RECT: number;
-        CIRC: number;
-        ELIP: number;
-        RREC: number;
-    };
-    static SPRITE_BATCH_SIZE: number;
-
-}
-
-declare namespace PIXI {
-
-    export function autoDetectRenderer(width: number, height: number, options?: PIXI.RendererOptions, noWebGL?: boolean): PIXI.WebGLRenderer | PIXI.CanvasRenderer;
-    export var loader: PIXI.loaders.Loader;
-
-    // https://github.com/primus/eventemitter3
-    export class EventEmitter {
-
-        listeners(event: string): Function[];
-        emit(event: string, ...args: any[]): boolean;
-        on(event: string, fn: Function, context?: any): EventEmitter;
-        once(event: string, fn: Function, context?: any): EventEmitter;
-        removeListener(event: string, fn?: Function, context?: any, once?: boolean): EventEmitter;
-        removeAllListeners(event?: string): EventEmitter;
-
-        off(event: string, fn?: Function, context?: any, once?: boolean): EventEmitter;
-        addListener(event: string, fn: Function, context?: any): EventEmitter;
-
-    }
-
-    //////////////////////////////////////////////////////////////////////////////
-    ////////////////////////////////CORE//////////////////////////////////////////
-    //////////////////////////////////////////////////////////////////////////////
-
-    // display
-
-    export class DisplayObject extends EventEmitter implements interaction.InteractiveTarget {
-
-        // begin extras.cacheAsBitmap see https://github.com/pixijs/pixi-typescript/commit/1207b7f4752d79a088d6a9a465a3ec799906b1db
-        protected _originalRenderWebGL: WebGLRenderer;
-        protected _originalRenderCanvas: CanvasRenderer;
-        protected _originalUpdateTransform: boolean;
-        protected _originalHitTest: any;
-        protected _cachedSprite: any;
-        protected _originalDestroy: any;
-
-        cacheAsBitmap: boolean;
-
-        protected _renderCachedWebGL(renderer: WebGLRenderer): void;
-        protected _initCachedDisplayObject(renderer: WebGLRenderer): void;
-        protected _renderCachedCanvas(renderer: CanvasRenderer): void;
-        protected _initCachedDisplayObjectCanvas(renderer: CanvasRenderer): void;
-        protected _getCachedBounds(): Rectangle;
-        protected _destroyCachedDisplayObject(): void;
-        protected _cacheAsBitmapDestroy(): void;
-        // end extras.cacheAsBitmap
-
-        protected _sr: number;
-        protected _cr: number;
-        protected _bounds: Rectangle;
-        protected _currentBounds: Rectangle;
-        protected _mask: Rectangle;
-        protected _cachedObject: any;
-
-        updateTransform(): void;
-
-        position: Point;
-        scale: Point;
-        pivot: Point;
-        rotation: number;
-        renderable: boolean;
-        alpha: number;
-        visible: boolean;
-        parent: Container;
-        worldAlpha: number;
-        worldTransform: Matrix;
-        filterArea: Rectangle;
-
-        x: number;
-        y: number;
-        worldVisible: boolean;
-        mask: Graphics | Sprite;
-        filters: AbstractFilter[];
-        name: string;
-
-        getBounds(matrix?: Matrix): Rectangle;
-        getLocalBounds(): Rectangle;
-        toGlobal(position: Point): Point;
-        toLocal(position: Point, from?: DisplayObject): Point;
-        generateTexture(renderer: CanvasRenderer | WebGLRenderer, scaleMode: number, resolution: number): Texture;
-        setParent(container: Container): Container;
-        setTransform(x?: number, y?: number, scaleX?: number, scaleY?: number, rotation?: number, skewX?: number, skewY?: number, pivotX?: number, pivotY?: number): DisplayObject;
-        destroy(): void;
-        getChildByName(name: string): DisplayObject;
-        getGlobalPosition(point: Point): Point;
-
-        interactive: boolean;
-        buttonMode: boolean;
-        interactiveChildren: boolean;
-        defaultCursor: string;
-        hitArea: HitArea;
-
-        on(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: string, fn: Function, context?: any): EventEmitter;
-
-        once(event: 'click', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'mousedown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'mouseout', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'mouseover', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'mouseup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'mouseclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'mouseupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'rightclick', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'rightdown', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'rightup', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'rightupoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'tap', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'touchend', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'touchendoutside', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'touchmove', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: 'touchstart', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: string, fn: Function, context?: any): EventEmitter;
-
-    }
-
-    export class Container extends DisplayObject {
-
-        protected _renderWebGL(renderer: WebGLRenderer): void;
-        protected _renderCanvas(renderer: CanvasRenderer): void;
-
-        protected onChildrenChange: () => void;
-
-        children: DisplayObject[];
-
-        width: number;
-        height: number;
-
-        addChild(...child: DisplayObject[]): DisplayObject;
-        addChildAt(child: DisplayObject, index: number): DisplayObject;
-        swapChildren(child: DisplayObject, child2: DisplayObject): void;
-        getChildIndex(child: DisplayObject): number;
-        setChildIndex(child: DisplayObject, index: number): void;
-        getChildAt(index: number): DisplayObject;
-        removeChild(child: DisplayObject): DisplayObject;
-        removeChildAt(index: number): DisplayObject;
-        removeChildren(beginIndex?: number, endIndex?: number): DisplayObject[];
-        destroy(destroyChildren?: boolean): void;
-        generateTexture(renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer, resolution?: number, scaleMode?: number): Texture;
-
-        renderWebGL(renderer: WebGLRenderer): void;
-        renderCanvas(renderer: CanvasRenderer): void;
-
-        once(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: string, fn: Function, context?: any): EventEmitter;
-        once(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        once(event: string, fn: Function, context?: any): EventEmitter;
-        on(event: 'added', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: string, fn: Function, context?: any): EventEmitter;
-        on(event: 'removed', fn: (event: interaction.InteractionEvent) => void, context?: any): EventEmitter;
-        on(event: string, fn: Function, context?: any): EventEmitter;
-
-    }
-
-    // graphics
-
-    export class GraphicsData {
-
-        constructor(lineWidth: number, lineColor: number, lineAlpha: number, fillColor: number, fillAlpha: number, fill: boolean, shape: Circle | Rectangle | Ellipse | Polygon);
-
-        lineWidth: number;
-        lineColor: number;
-        lineAlpha: number;
-        fillColor: number;
-        fillAlpha: number;
-        fill: boolean;
-        shape: Circle | Rectangle | Ellipse | Polygon;
-        type: number;
-
-        clone(): GraphicsData;
-
-        protected _lineTint: number;
-        protected _fillTint: number;
-
-    }
-    export class Graphics extends Container {
-
-        protected boundsDirty: boolean;
-        protected dirty: boolean;
-        protected glDirty: boolean;
-
-        fillAlpha: number;
-        lineWidth: number;
-        lineColor: number;
-        tint: number;
-        blendMode: number;
-        isMask: boolean;
-        boundsPadding: number;
-
-        clone(): Graphics;
-        lineStyle(lineWidth?: number, color?: number, alpha?: number): Graphics;
-        moveTo(x: number, y: number): Graphics;
-        lineTo(x: number, y: number): Graphics;
-        quadraticCurveTo(cpX: number, cpY: number, toX: number, toY: number): Graphics;
-        bezierCurveTo(cpX: number, cpY: number, cpX2: number, cpY2: number, toX: number, toY: number): Graphics;
-        arcTo(x1: number, y1: number, x2: number, y2: number, radius: number): Graphics;
-        arc(cx: number, cy: number, radius: number, startAngle: number, endAngle: number, anticlockwise?: boolean): Graphics;
-        beginFill(color: number, alpha?: number): Graphics;
-        endFill(): Graphics;
-        drawRect(x: number, y: number, width: number, height: number): Graphics;
-        drawRoundedRect(x: number, y: number, width: number, height: number, radius: number): Graphics;
-        drawCircle(x: number, y: number, radius: number): Graphics;
-        drawEllipse(x: number, y: number, width: number, height: number): Graphics;
-        drawPolygon(path: number[] | Point[]): Graphics;
-        clear(): Graphics;
-        // todo
-        generateTexture(renderer: WebGLRenderer | CanvasRenderer, resolution?: number, scaleMode?: number): Texture;
-        getBounds(matrix?: Matrix): Rectangle;
-        containsPoint(point: Point): boolean;
-        updateLocalBounds(): void;
-        drawShape(shape: Circle | Rectangle | Ellipse | Polygon): GraphicsData;
-
-    }
-    export interface GraphicsRenderer extends ObjectRenderer {
-        // yikes todo
-    }
-    export interface WebGLGraphicsData {
-        // yikes todo!
-    }
-
-    // math
-
-    export class Point {
-
-        x: number;
-        y: number;
-
-        constructor(x?: number, y?: number);
-
-        clone(): Point;
-        copy(p: Point): void;
-        equals(p: Point): boolean;
-        set(x?: number, y?: number): void;
-
-    }
-    export class Matrix {
-
-        a: number;
-        b: number;
-        c: number;
-        d: number;
-        tx: number;
-        ty: number;
-
-        fromArray(array: number[]): void;
-        toArray(transpose?: boolean, out?: number[]): number[];
-        apply(pos: Point, newPos?: Point): Point;
-        applyInverse(pos: Point, newPos?: Point): Point;
-        translate(x: number, y: number): Matrix;
-        scale(x: number, y: number): Matrix;
-        rotate(angle: number): Matrix;
-        append(matrix: Matrix): Matrix;
-        prepend(matrix: Matrix): Matrix;
-        invert(): Matrix;
-        identity(): Matrix;
-        clone(): Matrix;
-        copy(matrix: Matrix): Matrix;
-        set(a: number, b: number, c: number, d: number, tx: number, ty: number): Matrix;
-        setTransform(a: number, b: number, c: number, d: number, sr: number, cr: number, cy: number, sy: number, nsx: number, cs: number): PIXI.Matrix;
-
-        static IDENTITY: Matrix;
-        static TEMP_MATRIX: Matrix;
-
-    }
-
-    export interface HitArea {
-
-        contains(x: number, y: number): boolean;
-
-    }
-
-    export class Circle implements HitArea {
-
-        constructor(x?: number, y?: number, radius?: number);
-
-        x: number;
-        y: number;
-        radius: number;
-        type: number;
-
-        clone(): Circle;
-        contains(x: number, y: number): boolean;
-        getBounds(): Rectangle;
-
-    }
-    export class Ellipse implements HitArea {
-
-        constructor(x?: number, y?: number, width?: number, height?: number);
-
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        type: number;
-
-        clone(): Ellipse;
-        contains(x: number, y: number): boolean;
-        getBounds(): Rectangle;
-
-    }
-    export class Polygon implements HitArea {
-
-        constructor(points: Point[]);
-        constructor(points: number[]);
-        constructor(...points: Point[]);
-        constructor(...points: number[]);
-
-        closed: boolean;
-        points: number[];
-        type: number;
-
-        clone(): Polygon;
-        contains(x: number, y: number): boolean;
-
-
-    }
-    export class Rectangle implements HitArea {
-
-        constructor(x?: number, y?: number, width?: number, height?: number);
-
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        type: number;
-
-        static EMPTY: Rectangle;
-
-        clone(): Rectangle;
-        contains(x: number, y: number): boolean;
-
-    }
-    export class RoundedRectangle implements HitArea {
-
-        constructor(x?: number, y?: number, width?: number, height?: number, radius?: number);
-
-        x: number;
-        y: number;
-        width: number;
-        height: number;
-        radius: number;
-        type: number;
-
-        static EMPTY: Rectangle;
-
-        clone(): Rectangle;
-        contains(x: number, y: number): boolean;
-
-    }
-
-    // particles
-
-    export interface ParticleContainerProperties {
-
-        scale?: boolean;
-        position?: boolean;
-        rotation?: boolean;
-        uvs?: boolean;
-        alpha?: boolean;
-
-    }
-    export class ParticleContainer extends Container {
-
-        constructor(size?: number, properties?: ParticleContainerProperties, batchSize?: number);
-
-        protected _maxSize: number;
-        protected _batchSize: number;
-        protected _properties: boolean[];
-        protected _buffers: WebGLBuffer[];
-        protected _bufferToUpdate: number;
-
-        protected onChildrenChange: (smallestChildIndex?: number) => void;
-
-        interactiveChildren: boolean;
-        blendMode: number;
-        roundPixels: boolean;
-
-        setProperties(properties: ParticleContainerProperties): void;
-
-    }
-    export interface ParticleBuffer {
-
-        gl: WebGLRenderingContext;
-        vertSize: number;
-        vertByteSize: number;
-        size: number;
-        dynamicProperties: any[];
-        staticProperties: any[];
-
-        staticStride: number;
-        staticBuffer: any;
-        staticData: any;
-        dynamicStride: number;
-        dynamicBuffer: any;
-        dynamicData: any;
-
-        initBuffers(): void;
-        bind(): void;
-        destroy(): void;
-
-    }
-    export interface ParticleRenderer {
-
-    }
-    export interface ParticleShader {
-
-    }
-
-    // renderers
-
-    export interface RendererOptions {
-
-        view?: HTMLCanvasElement;
-        transparent?: boolean;
-        antialias?: boolean;
-        autoResize?: boolean;
-        resolution?: number;
-        clearBeforeRendering?: boolean;
-        preserveDrawingBuffer?: boolean;
-        forceFXAA?: boolean;
-        roundPixels?: boolean;
-        backgroundColor?: number;
-
-    }
-    export class SystemRenderer extends EventEmitter {
-
-        protected _backgroundColor: number;
-        protected _backgroundColorRgb: number[];
-        protected _backgroundColorString: string;
-        protected _tempDisplayObjectParent: any;
-        protected _lastObjectRendered: DisplayObject;
-
-        constructor(system: string, width?: number, height?: number, options?: RendererOptions);
-
-        type: number;
-        width: number;
-        height: number;
-        view: HTMLCanvasElement;
-        resolution: number;
-        transparent: boolean;
-        autoResize: boolean;
-        blendModes: any; // todo?
-        preserveDrawingBuffer: boolean;
-        clearBeforeRender: boolean;
-        roundPixels: boolean;
-        backgroundColor: number;
-
-        render(object: DisplayObject): void;
-        resize(width: number, height: number): void;
-        destroy(removeView?: boolean): void;
-
-    }
-    export class CanvasRenderer extends SystemRenderer {
-
-        protected renderDisplayObject(displayObject: DisplayObject, context: CanvasRenderingContext2D): void;
-        protected _mapBlendModes(): void;
-
-        constructor(width?: number, height?: number, options?: RendererOptions);
-
-        context: CanvasRenderingContext2D;
-        refresh: boolean;
-        maskManager: CanvasMaskManager;
-        roundPixels: boolean;
-        smoothProperty: string;
-
-        render(object: DisplayObject): void;
-        resize(w: number, h: number): void;
-
-    }
-    export class CanvasBuffer {
-
-        protected clear(): void;
-
-        constructor(width: number, height: number);
-
-        canvas: HTMLCanvasElement;
-        context: CanvasRenderingContext2D;
-
-        width: number;
-        height: number;
-
-        resize(width: number, height: number): void;
-        destroy(): void;
-
-    }
-    export class CanvasGraphics {
-
-        static renderGraphicsMask(graphics: Graphics, context: CanvasRenderingContext2D): void;
-        static updateGraphicsTint(graphics: Graphics): void;
-
-        static renderGraphics(graphics: Graphics, context: CanvasRenderingContext2D): void;
-
-    }
-    export class CanvasMaskManager {
-
-        pushMask(maskData: any, renderer: WebGLRenderer | CanvasRenderer): void;
-        popMask(renderer: WebGLRenderer | CanvasRenderer): void;
-        destroy(): void;
-
-    }
-    export class CanvasTinter {
-
-        static getTintedTexture(sprite: DisplayObject, color: number): HTMLCanvasElement;
-        static tintWithMultiply(texture: Texture, color: number, canvas: HTMLDivElement): void;
-        static tintWithOverlay(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
-        static tintWithPerPixel(texture: Texture, color: number, canvas: HTMLCanvasElement): void;
-        static roundColor(color: number): number;
-        static cacheStepsPerColorChannel: number;
-        static convertTintToImage: boolean;
-        static vanUseMultiply: boolean;
-        static tintMethod: Function;
-
-    }
-    export class WebGLRenderer extends SystemRenderer {
-
-        protected _useFXAA: boolean;
-        protected _FXAAFilter: filters.FXAAFilter;
-        protected _contextOptions: {
-            alpha: boolean;
-            antiAlias: boolean;
-            premultipliedAlpha: boolean;
-            stencil: boolean;
-            preseveDrawingBuffer: boolean;
-        };
-        protected _renderTargetStack: RenderTarget[];
-
-        protected _initContext(): void;
-        protected _createContext(): void;
-        protected handleContextLost: (event: WebGLContextEvent) => void;
-        protected _mapGlModes(): void;
-        protected _managedTextures: Texture[];
-
-        constructor(width?: number, height?: number, options?: RendererOptions);
-
-        drawCount: number;
-        shaderManager: ShaderManager;
-        maskManager: MaskManager;
-        stencilManager: StencilManager;
-        filterManager: FilterManager;
-        blendModeManager: BlendModeManager;
-        currentRenderTarget: RenderTarget;
-        currentRenderer: ObjectRenderer;
-
-        render(object: DisplayObject): void;
-        renderDisplayObject(displayObject: DisplayObject, renderTarget: RenderTarget, clear: boolean): void;
-        setObjectRenderer(objectRenderer: ObjectRenderer): void;
-        setRenderTarget(renderTarget: RenderTarget): void;
-        updateTexture(texture: BaseTexture | Texture): BaseTexture | Texture;
-        destroyTexture(texture: BaseTexture | Texture, _skipRemove?: boolean): void;
-
-    }
-    export class AbstractFilter {
-
-        protected vertexSrc: string[];
-        protected fragmentSrc: string[];
-
-        constructor(vertexSrc?: string | string[], fragmentSrc?: string | string[], uniforms?: any);
-
-        uniforms: any;
-
-        padding: number;
-
-        getShader(renderer: WebGLRenderer): Shader;
-        applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget, clear?: boolean): void;
-        syncUniform(uniform: WebGLUniformLocation): void;
-
-    }
-    export class SpriteMaskFilter extends AbstractFilter {
-
-        constructor(sprite: Sprite);
-
-        maskSprite: Sprite;
-        maskMatrix: Matrix;
-
-        applyFilter(renderer: WebGLRenderbuffer, input: RenderTarget, output: RenderTarget): void;
-        map: Texture;
-        offset: Point;
-
-    }
-    export class BlendModeManager extends WebGLManager {
-
-        constructor(renderer: WebGLRenderer);
-
-        setBlendMode(blendMode: number): boolean;
-
-    }
-
-    export class FilterManager extends WebGLManager {
-
-        constructor(renderer: WebGLRenderer);
-
-        filterStack: any[];
-        renderer: WebGLRenderer;
-        texturePool: any[];
-
-        onContextChange: () => void;
-        setFilterStack(filterStack: any[]): void;
-        pushFilter(target: RenderTarget, filters: any[]): void;
-        popFilter(): AbstractFilter;
-        getRenderTarget(clear?: boolean): RenderTarget;
-        protected returnRenderTarget(renderTarget: RenderTarget): void;
-        applyFilter(shader: Shader | AbstractFilter, inputTarget: RenderTarget, outputTarget: RenderTarget, clear?: boolean): void;
-        calculateMappedMatrix(filterArea: Rectangle, sprite: Sprite, outputMatrix?: Matrix): Matrix;
-        capFilterArea(filterArea: Rectangle): void;
-        resize(width: number, height: number): void;
-        destroy(): void;
-
-    }
-
-    export class MaskManager extends WebGLManager {
-
-        stencilStack: StencilMaskStack;
-        reverse: boolean;
-        count: number;
-        alphaMaskPool: any[];
-
-        pushMask(target: RenderTarget, maskData: any): void;
-        popMask(target: RenderTarget, maskData: any): void;
-        pushSpriteMask(target: RenderTarget, maskData: any): void;
-        popSpriteMask(): void;
-        pushStencilMask(target: RenderTarget, maskData: any): void;
-        popStencilMask(target: RenderTarget, maskData: any): void;
-
-    }
-    export class ShaderManager extends WebGLManager {
-
-        protected _currentId: number;
-        protected currentShader: Shader;
-
-        constructor(renderer: WebGLRenderer);
-
-        maxAttibs: number;
-        attribState: any[];
-        tempAttribState: any[];
-        stack: any[];
-
-        setAttribs(attribs: any[]): void;
-        setShader(shader: Shader): boolean;
-        destroy(): void;
-
-    }
-    export class StencilManager extends WebGLManager {
-
-        constructor(renderer: WebGLRenderer);
-
-        setMaskStack(stencilMaskStack: StencilMaskStack): void;
-        pushStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void;
-        bindGraphics(graphics: Graphics, webGLData: WebGLGraphicsData): void;
-        popStencil(graphics: Graphics, webGLData: WebGLGraphicsData): void;
-        destroy(): void;
-        pushMask(maskData: any[]): void;
-        popMask(maskData: any[]): void;
-
-    }
-    export class WebGLManager {
-
-        protected onContextChange: () => void;
-
-        constructor(renderer: WebGLRenderer);
-
-        renderer: WebGLRenderer;
-
-        destroy(): void;
-
-    }
-    export class Shader {
-
-        protected attributes: any;
-        protected textureCount: number;
-        protected uniforms: any;
-
-        protected _glCompile(type: any, src: any): Shader;
-
-        constructor(shaderManager: ShaderManager, vertexSrc: string, fragmentSrc: string, uniforms: any, attributes: any);
-
-        uuid: number;
-        gl: WebGLRenderingContext;
-        shaderManager: ShaderManager;
-        program: WebGLProgram;
-        vertexSrc: string;
-        fragmentSrc: string;
-
-        init(): void;
-        cacheUniformLocations(keys: string[]): void;
-        cacheAttributeLocations(keys: string[]): void;
-        compile(): WebGLProgram;
-        syncUniform(uniform: any): void;
-        syncUniforms(): void;
-        initSampler2D(uniform: any): void;
-        destroy(): void;
-
-    }
-    export class ComplexPrimitiveShader extends Shader {
-
-        constructor(shaderManager: ShaderManager);
-
-    }
-    export class PrimitiveShader extends Shader {
-
-        constructor(shaderManager: ShaderManager);
-
-    }
-    export class TextureShader extends Shader {
-
-        constructor(shaderManager: ShaderManager, vertexSrc?: string, fragmentSrc?: string, customUniforms?: any, customAttributes?: any);
-
-    }
-    export interface StencilMaskStack {
-
-        stencilStack: any[];
-        reverse: boolean;
-        count: number;
-
-    }
-    export class ObjectRenderer extends WebGLManager {
-
-        start(): void;
-        stop(): void;
-        flush(): void;
-        render(object?: any): void;
-
-    }
-    export class RenderTarget {
-
-        constructor(gl: WebGLRenderingContext, width: number, height: number, scaleMode: number, resolution: number, root: boolean);
-
-        gl: WebGLRenderingContext;
-        frameBuffer: WebGLFramebuffer;
-        texture: Texture;
-        size: Rectangle;
-        resolution: number;
-        projectionMatrix: Matrix;
-        transform: Matrix;
-        frame: Rectangle;
-        stencilBuffer: WebGLRenderbuffer;
-        stencilMaskStack: StencilMaskStack;
-        filterStack: any[];
-        scaleMode: number;
-        root: boolean;
-
-        clear(bind?: boolean): void;
-        attachStencilBuffer(): void;
-        activate(): void;
-        calculateProjection(protectionFrame: Matrix): void;
-        resize(width: number, height: number): void;
-        destroy(): void;
-
-    }
-    export interface Quad {
-
-        gl: WebGLRenderingContext;
-        vertices: number[];
-        uvs: number[];
-        colors: number[];
-        indices: number[];
-        vertexBuffer: WebGLBuffer;
-        indexBuffer: WebGLBuffer;
-
-        map(rect: Rectangle, rect2: Rectangle): void;
-        upload(): void;
-        destroy(): void;
-
-    }
-
-    // sprites
-
-    export class Sprite extends Container {
-
-        static fromFrame(frameId: string): Sprite;
-        static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
-
-        protected _texture: Texture;
-        protected _width: number;
-        protected _height: number;
-        protected cachedTint: number;
-
-        protected _onTextureUpdate(): void;
-
-        constructor(texture?: Texture);
-
-        anchor: Point;
-        tint: number;
-        blendMode: number;
-        shader: Shader | AbstractFilter;
-        texture: Texture;
-
-        width: number;
-        height: number;
-
-        getBounds(matrix?: Matrix): Rectangle;
-        getLocalBounds(): Rectangle;
-        containsPoint(point: Point): boolean;
-        destroy(destroyTexture?: boolean, destroyBaseTexture?: boolean): void;
-
-    }
-    export class SpriteRenderer extends ObjectRenderer {
-
-        protected renderBatch(texture: Texture, size: number, startIndex: number): void;
-
-        vertSize: number;
-        vertByteSize: number;
-        size: number;
-        vertices: number[];
-        positions: number[];
-        colors: number[];
-        indices: number[];
-        currentBatchSize: number;
-        sprites: Sprite[];
-        shader: Shader | AbstractFilter;
-
-        render(sprite: Sprite): void;
-        flush(): void;
-        start(): void;
-        destroy(): void;
-
-    }
-
-    // text
-
-    export interface TextStyle {
-
-        font?: string;
-        fill?: string | number;
-        align?: string;
-        stroke?: string | number;
-        strokeThickness?: number;
-        wordWrap?: boolean;
-        wordWrapWidth?: number;
-        lineHeight?: number;
-        dropShadow?: boolean;
-        dropShadowColor?: string | number;
-        dropShadowAngle?: number;
-        dropShadowDistance?: number;
-        padding?: number;
-        textBaseline?: string;
-        lineJoin?: string;
-        miterLimit?: number;
-
-    }
-    export class Text extends Sprite {
-
-        static fontPropertiesCache: any;
-        static fontPropertiesCanvas: HTMLCanvasElement;
-        static fontPropertiesContext: CanvasRenderingContext2D;
-
-        protected _text: string;
-        protected _style: TextStyle;
-
-        protected updateText(): void;
-        protected updateTexture(): void;
-        protected determineFontProperties(fontStyle: TextStyle): TextStyle;
-        protected wordWrap(text: string): boolean;
-
-        constructor(text?: string, style?: TextStyle, resolution?: number);
-
-        canvas: HTMLCanvasElement;
-        context: CanvasRenderingContext2D;
-        dirty: boolean;
-        resolution: number;
-        text: string;
-        style: TextStyle;
-
-        width: number;
-        height: number;
-
-    }
-
-    // textures
-
-    export class BaseTexture extends EventEmitter {
-
-        static fromImage(imageUrl: string, crossorigin?: boolean, scaleMode?: number): BaseTexture;
-        static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): BaseTexture;
-
-        protected _glTextures: any;
-
-        protected _sourceLoaded(): void;
-
-        constructor(source: HTMLImageElement | HTMLCanvasElement, scaleMode?: number, resolution?: number);
-
-        uuid: number;
-        resolution: number;
-        width: number;
-        height: number;
-        realWidth: number;
-        realHeight: number;
-        scaleMode: number;
-        hasLoaded: boolean;
-        isLoading: boolean;
-        source: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement;
-        premultipliedAlpha: boolean;
-        imageUrl: string;
-        isPowerOfTwo: boolean;
-        mipmap: boolean;
-
-        update(): void;
-        loadSource(source: HTMLImageElement | HTMLCanvasElement): void;
-        destroy(): void;
-        dispose(): void;
-        updateSourceImage(newSrc: string): void;
-
-        on(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        on(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        on(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        on(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        on(event: string, fn: Function, context?: any): EventEmitter;
-
-        once(event: 'dispose', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        once(event: 'error', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        once(event: 'loaded', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        once(event: 'update', fn: (baseTexture: BaseTexture) => void, context?: any): EventEmitter;
-        once(event: string, fn: Function, context?: any): EventEmitter;
-
-    }
-    export class RenderTexture extends Texture {
-
-        protected renderWebGL(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void;
-        protected renderCanvas(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void;
-
-        constructor(renderer: CanvasRenderer | WebGLRenderer, width?: number, height?: number, scaleMode?: number, resolution?: number);
-
-        width: number;
-        height: number;
-        resolution: number;
-        renderer: CanvasRenderer | WebGLRenderer;
-        valid: boolean;
-
-        render(displayObject: DisplayObject, matrix?: Matrix, clear?: boolean, updateTransform?: boolean): void;
-        resize(width: number, height: number, updateBase?: boolean): void;
-        clear(): void;
-        destroy(): void;
-        getImage(): HTMLImageElement;
-        getPixels(): number[];
-        getPixel(x: number, y: number): number[];
-        getBase64(): string;
-        getCanvas(): HTMLCanvasElement;
-
-    }
-    export class Texture extends BaseTexture {
-
-        static fromImage(imageUrl: string, crossOrigin?: boolean, scaleMode?: number): Texture;
-        static fromFrame(frameId: string): Texture;
-        static fromCanvas(canvas: HTMLCanvasElement, scaleMode?: number): Texture;
-        static fromVideo(video: HTMLVideoElement | string, scaleMode?: number): Texture;
-        static fromVideoUrl(videoUrl: string, scaleMode?: number): Texture;
-        static addTextureToCache(texture: Texture, id: string): void;
-        static removeTextureFromCache(id: string): Texture;
-        static EMPTY: Texture;
-
-        protected _frame: Rectangle;
-        protected _uvs: TextureUvs;
-
-        protected onBaseTextureUpdated(baseTexture: BaseTexture): void;
-        protected onBaseTextureLoaded(baseTexture: BaseTexture): void;
-        protected _updateUvs(): void;
-
-        constructor(baseTexture: BaseTexture, frame?: Rectangle, crop?: Rectangle, trim?: Rectangle, rotate?: boolean);
-
-        noFrame: boolean;
-        baseTexture: BaseTexture;
-        trim: Rectangle;
-        valid: boolean;
-        requiresUpdate: boolean;
-        width: number;
-        height: number;
-        crop: Rectangle;
-        rotate: boolean;
-
-        frame: Rectangle;
-
-        update(): void;
-        destroy(destroyBase?: boolean): void;
-        clone(): Texture;
-
-    }
-    export class TextureUvs {
-
-        x0: number;
-        y0: number;
-        x1: number;
-        y1: number;
-        x2: number;
-        y2: number;
-        x3: number;
-        y3: number;
-
-        set(frame: Rectangle, baseFrame: Rectangle, rotate: boolean): void;
-
-    }
-    export class VideoBaseTexture extends BaseTexture {
-
-        static fromVideo(video: HTMLVideoElement, scaleMode?: number): VideoBaseTexture;
-        static fromUrl(videoSrc: string | any | string[] | any[]): VideoBaseTexture;
-
-        protected _loaded: boolean;
-        protected _onUpdate(): void;
-        protected _onPlayStart(): void;
-        protected _onPlayStop(): void;
-        protected _onCanPlay(): void;
-
-        constructor(source: HTMLVideoElement, scaleMode?: number);
-
-        autoUpdate: boolean;
-
-        destroy(): void;
-
-    }
-
-    // utils
-
-    export class utils {
-
-        static uuid(): number;
-        static hex2rgb(hex: number, out?: number[]): number[];
-        static hex2string(hex: number): string;
-        static rgb2hex(rgb: Number[]): number;
-        static canUseNewCanvasBlendModel(): boolean;
-        static getNextPowerOfTwo(number: number): number;
-        static isPowerOfTwo(width: number, height: number): boolean;
-        static getResolutionOfUrl(url: string): number;
-        static sayHello(type: string): void;
-        static isWebGLSupported(): boolean;
-        static sign(n: number): number;
-        static TextureCache: any;
-        static BaseTextureCache: any;
-
-    }
-
-    //////////////////////////////////////////////////////////////////////////////
-    ////////////////////////////EXTRAS////////////////////////////////////////////
-    //////////////////////////////////////////////////////////////////////////////
-
-    export namespace extras {
-
-        export interface BitmapTextStyle {
-
-            font?: string | {
-
-                name?: string;
-                size?: number;
-
-            };
-            align?: string;
-            tint?: number;
-
-        }
-        export class BitmapText extends Container {
-
-            static fonts: any;
-
-            protected _glyphs: Sprite[];
-            protected _font: string | {
-                tint: number;
-                align: string;
-                name: string;
-                size: number;
-            };
-            protected _text: string;
-
-            protected updateText(): void;
-
-            constructor(text: string, style?: BitmapTextStyle);
-
-            textWidth: number;
-            textHeight: number;
-            maxWidth: number;
-            maxLineHeight: number;
-            dirty: boolean;
-
-            tint: number;
-            align: string;
-            font: string | {
-                tint: number;
-                align: string;
-                name: string;
-                size: number;
-            };
-            text: string;
-
-        }
-        export class MovieClip extends Sprite {
-
-            static fromFrames(frame: string[]): MovieClip;
-            static fromImages(images: string[]): MovieClip;
-
-            protected _textures: Texture[];
-            protected _durations: number[];
-            protected _currentTime: number;
-
-            protected update(deltaTime: number): void;
-
-            constructor(textures: Texture[]);
-
-            animationSpeed: number;
-            loop: boolean;
-            onComplete: () => void;
-            currentFrame: number;
-            playing: boolean;
-
-            totalFrames: number;
-            textures: Texture[];
-
-            stop(): void;
-            play(): void;
-            gotoAndStop(frameName: number): void;
-            gotoAndPlay(frameName: number): void;
-            destroy(): void;
-
-        }
-        export class TilingSprite extends Sprite {
-
-            // This is really unclean but is the only way :(
-            // See http://stackoverflow.com/questions/29593905/typescript-declaration-extending-class-with-static-method/29595798#29595798
-            // Thanks bas!
-            static fromFrame(frameId: string): Sprite;
-            static fromFrame(frameId: string, width?: number, height?: number): TilingSprite;
-
-            static fromImage(imageId: string, crossorigin?: boolean, scaleMode?: number): Sprite;
-            static fromImage(imageId: string, width?: number, height?: number, crossorigin?: boolean, scaleMode?: number): TilingSprite;
-
-            protected _tileScaleOffset: Point;
-            protected _tilingTexture: boolean;
-            protected _refreshTexture: boolean;
-            protected _uvs: TextureUvs[];
-
-            constructor(texture: Texture, width: number, height: number);
-
-            tileScale: Point;
-            tilePosition: Point;
-
-            width: number;
-            height: number;
-            originalTexture: Texture;
-
-            getBounds(): Rectangle;
-            generateTilingTexture(renderer: WebGLRenderer | CanvasRenderer, texture: Texture, forcePowerOfTwo?: boolean): Texture;
-            containsPoint(point: Point): boolean;
-            destroy(): void;
-
-        }
-
-    }
-
-    //////////////////////////////////////////////////////////////////////////////
-    ///////////////////////////////FILTERS////////////////////////////////////////
-    //////////////////////////////////////////////////////////////////////////////
-
-    namespace filters {
-
-        export class AsciiFilter extends AbstractFilter {
-            size: number;
-        }
-        export class BloomFilter extends AbstractFilter {
-
-            blur: number;
-            blurX: number;
-            blurY: number;
-
-        }
-        export class BlurFilter extends AbstractFilter {
-
-            protected blurXFilter: BlurXFilter;
-            protected blurYFilter: BlurYFilter;
-
-            blur: number;
-            passes: number;
-            blurX: number;
-            blurY: number;
-
-        }
-        export class BlurXFilter extends AbstractFilter {
-
-            passes: number;
-            strength: number;
-            blur: number;
-
-        }
-        export class BlurYFilter extends AbstractFilter {
-
-            passes: number;
-            strength: number;
-            blur: number;
-
-        }
-        export class SmartBlurFilter extends AbstractFilter {
-
-        }
-        export class ColorMatrixFilter extends AbstractFilter {
-
-            protected _loadMatrix(matrix: number[], multiply: boolean): void;
-            protected _multiply(out: number[], a: number[], b: number[]): void;
-            protected _colorMatrix(matrix: number[]): void;
-
-            matrix: number[];
-
-            brightness(b: number, multiply?: boolean): void;
-            greyscale(scale: number, multiply?: boolean): void;
-            blackAndWhite(multiply?: boolean): void;
-            hue(rotation: number, multiply?: boolean): void;
-            contrast(amount: number, multiply?: boolean): void;
-            saturate(amount: number, multiply?: boolean): void;
-            desaturate(multiply?: boolean): void;
-            negative(multiply?: boolean): void;
-            sepia(multiply?: boolean): void;
-            technicolor(multiply?: boolean): void;
-            polaroid(multiply?: boolean): void;
-            toBGR(multiply?: boolean): void;
-            kodachrome(multiply?: boolean): void;
-            browni(multiply?: boolean): void;
-            vintage(multiply?: boolean): void;
-            colorTone(desaturation: number, toned: number, lightColor: string, darkColor: string, multiply?: boolean): void;
-            night(intensity: number, multiply?: boolean): void;
-            predator(amount: number, multiply?: boolean): void;
-            lsd(multiply?: boolean): void;
-            reset(): void;
-
-        }
-        export class ColorStepFilter extends AbstractFilter {
-
-            step: number;
-
-        }
-        export class ConvolutionFilter extends AbstractFilter {
-
-            constructor(matrix: number[], width: number, height: number);
-
-            matrix: number[];
-            width: number;
-            height: number;
-
-        }
-        export class CrossHatchFilter extends AbstractFilter {
-
-        }
-        export class DisplacementFilter extends AbstractFilter {
-
-            constructor(sprite: Sprite, scale?: number);
-
-            map: Texture;
-
-            scale: Point;
-
-        }
-        export class DotScreenFilter extends AbstractFilter {
-
-            scale: number;
-            angle: number;
-
-        }
-        export class BlurYTintFilter extends AbstractFilter {
-
-            blur: number;
-
-        }
-        export class DropShadowFilter extends AbstractFilter {
-
-            blur: number;
-            blurX: number;
-            blurY: number;
-            color: number;
-            alpha: number;
-            distance: number;
-            angle: number;
-
-        }
-        export class GrayFilter extends AbstractFilter {
-
-            gray: number;
-
-        }
-        export class InvertFilter extends AbstractFilter {
-
-            invert: number;
-
-        }
-        export class NoiseFilter extends AbstractFilter {
-
-            noise: number;
-
-        }
-        export class PixelateFilter extends AbstractFilter {
-
-            size: Point;
-
-        }
-        export class RGBSplitFilter extends AbstractFilter {
-
-            red: number;
-            green: number;
-            blue: number;
-
-        }
-        export class SepiaFilter extends AbstractFilter {
-
-            sepia: number;
-
-        }
-        export class ShockwaveFilter extends AbstractFilter {
-
-            center: number[];
-            params: any;
-            time: number;
-
-        }
-        export class TiltShiftAxisFilter extends AbstractFilter {
-
-            blur: number;
-            gradientBlur: number;
-            start: number;
-            end: number;
-
-            updateDelta(): void;
-
-        }
-        export class TiltShiftFilter extends AbstractFilter {
-
-            blur: number;
-            gradientBlur: number;
-            start: number;
-            end: number;
-
-        }
-        export class TiltShiftXFilter extends AbstractFilter {
-
-            updateDelta(): void;
-
-        }
-        export class TiltShiftYFilter extends AbstractFilter {
-
-            updateDelta(): void;
-
-        }
-        export class TwistFilter extends AbstractFilter {
-
-            offset: Point;
-            radius: number;
-            angle: number;
-
-        }
-        export class FXAAFilter extends AbstractFilter {
-
-            applyFilter(renderer: WebGLRenderer, input: RenderTarget, output: RenderTarget): void;
-
-        }
-    }
-
-    //////////////////////////////////////////////////////////////////////////////
-    ////////////////////////////INTERACTION///////////////////////////////////////
-    //////////////////////////////////////////////////////////////////////////////
-
-    export namespace interaction {
-
-        export interface InteractionEvent {
-
-            stopped: boolean;
-            target: any;
-            type: string;
-            data: InteractionData;
-            stopPropagation(): void;
-
-        }
-
-        export class InteractionData {
-
-            global: Point;
-            target: DisplayObject;
-            originalEvent: Event;
-            identifier: number;
-
-            getLocalPosition(displayObject: DisplayObject, point?: Point, globalPos?: Point): Point;
-
-        }
-
-        export class InteractionManager {
-
-            protected interactionDOMElement: HTMLElement;
-            protected eventsAdded: boolean;
-            protected _tempPoint: Point;
-
-            protected setTargetElement(element: HTMLElement, resolution: number): void;
-            protected addEvents(): void;
-            protected removeEvents(): void;
-            protected dispatchEvent(displayObject: DisplayObject, eventString: string, eventData: any): void;
-            protected onMouseDown: (event: Event) => void;
-            protected processMouseDown: (displayObject: DisplayObject, hit: boolean) => void;
-            protected onMouseUp: (event: Event) => void;
-            protected processMouseUp: (displayObject: DisplayObject, hit: boolean) => void;
-            protected onMouseMove: (event: Event) => void;
-            protected processMouseMove: (displayObject: DisplayObject, hit: boolean) => void;
-            protected onMouseOut: (event: Event) => void;
-            protected processMouseOverOut: (displayObject: DisplayObject, hit: boolean) => void;
-            protected onTouchStart: (event: Event) => void;
-            protected processTouchStart: (DisplayObject: DisplayObject, hit: boolean) => void;
-            protected onTouchEnd: (event: Event) => void;
-            protected processTouchEnd: (displayObject: DisplayObject, hit: boolean) => void;
-            protected onTouchMove: (event: Event) => void;
-            protected processTouchMove: (displayObject: DisplayObject, hit: boolean) => void;
-            protected getTouchData(touchEvent: InteractionData): InteractionData;
-            protected returnTouchData(touchData: InteractionData): void;
-
-            constructor(renderer: CanvasRenderer | WebGLRenderer, options?: { autoPreventDefault?: boolean; interactionFrequence?: number; });
-
-            renderer: CanvasRenderer | WebGLRenderer;
-            autoPreventDefault: boolean;
-            interactionFrequency: number;
-            mouse: InteractionData;
-            eventData: {
-                stopped: boolean;
-                target: any;
-                type: any;
-                data: InteractionData;
-            };
-            interactiveDataPool: InteractionData[];
-            last: number;
-            currentCursorStyle: string;
-            resolution: number;
-            update(deltaTime: number): void;
-
-            mapPositionToPoint(point: Point, x: number, y: number): void;
-            processInteractive(point: Point, displayObject: DisplayObject, func: (displayObject: DisplayObject, hit: boolean) => void, hitTest: boolean, interactive: boolean): boolean;
-            destroy(): void;
-
-        }
-
-        export interface InteractiveTarget {
-
-            interactive: boolean;
-            buttonMode: boolean;
-            interactiveChildren: boolean;
-            defaultCursor: string;
-            hitArea: HitArea;
-
-        }
-
-    }
-
-    //////////////////////////////////////////////////////////////////////////////
-    ///////////////////////////////LOADER/////////////////////////////////////////
-    //////////////////////////////////////////////////////////////////////////////
-    // https://github.com/englercj/resource-loader/blob/master/src/Loader.js
-
-    export namespace loaders {
-        export interface LoaderOptions {
-
-            crossOrigin?: boolean;
-            loadType?: number;
-            xhrType?: string;
-
-        }
-        export interface ResourceDictionary {
-
-            [index: string]: PIXI.loaders.Resource;
-        }
-        export class Loader extends EventEmitter {
-
-            constructor(baseUrl?: string, concurrency?: number);
-
-            baseUrl: string;
-            progress: number;
-            loading: boolean;
-            resources: ResourceDictionary;
-
-            add(name: string, url: string, options?: LoaderOptions, cb?: () => void): Loader;
-            add(url: string, options?: LoaderOptions, cb?: () => void): Loader;
-            // todo I am not sure of object literal notional (or its options) so just allowing any but would love to improve this
-            add(obj: any, options?: LoaderOptions, cb?: () => void): Loader;
-
-            on(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter;
-            on(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
-            on(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
-            on(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
-            on(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter;
-            on(event: string, fn: Function, context?: any): EventEmitter;
-
-            once(event: 'complete', fn: (loader: loaders.Loader, object: any) => void, context?: any): EventEmitter;
-            once(event: 'error', fn: (error: Error, loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
-            once(event: 'load', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
-            once(event: 'progress', fn: (loader: loaders.Loader, resource: Resource) => void, context?: any): EventEmitter;
-            once(event: 'start', fn: (loader: loaders.Loader) => void, context?: any): EventEmitter;
-            once(event: string, fn: Function, context?: any): EventEmitter;
-
-            before(fn: Function): Loader;
-            pre(fn: Function): Loader;
-
-            after(fn: Function): Loader;
-            use(fn: Function): Loader;
-
-            reset(): void;
-
-            load(cb?: (loader: loaders.Loader, object: any) => void): Loader;
-
-        }
-        export class Resource extends EventEmitter {
-
-            static LOAD_TYPE: {
-                XHR: number;
-                IMAGE: number;
-                AUDIO: number;
-                VIDEO: number;
-            };
-
-            static XHR_READ_STATE: {
-                UNSENT: number;
-                OPENED: number;
-                HEADERS_RECIEVED: number;
-                LOADING: number;
-                DONE: number;
-            };
-
-            static XHR_RESPONSE_TYPE: {
-                DEFAULT: number;
-                BUFFER: number;
-                BLOB: number;
-                DOCUMENT: number;
-                JSON: number;
-                TEXT: number;
-            };
-
-            constructor(name?: string, url?: string | string[], options?: LoaderOptions);
-
-            name: string;
-            texture: Texture;
-			textures: Texture[];
-            url: string;
-            data: any;
-            crossOrigin: string;
-            loadType: number;
-            xhrType: string;
-            error: Error;
-            xhr: XMLHttpRequest;
-
-            complete(): void;
-            load(cb?: () => void): void;
-
-        }
-    }
-
-    //////////////////////////////////////////////////////////////////////////////
-    ///////////////////////////////MESH///////////////////////////////////////////
-    //////////////////////////////////////////////////////////////////////////////
-
-    export namespace mesh {
-
-        export class Mesh extends Container {
-
-            static DRAW_MODES: {
-                TRIANGLE_MESH: number;
-                TRIANGLES: number;
-            };
-
-            constructor(texture: Texture, vertices?: number[], uvs?: number[], indices?: number[], drawMode?: number);
-
-            texture: Texture;
-            uvs: number[];
-            vertices: number[];
-            indices: number[];
-            dirty: boolean;
-            blendMode: number;
-            canvasPadding: number;
-            drawMode: number;
-            shader: Shader | AbstractFilter;
-
-            getBounds(matrix?: Matrix): Rectangle;
-            containsPoint(point: Point): boolean;
-
-            protected _texture: Texture;
-
-            protected _renderCanvasTriangleMesh(context: CanvasRenderingContext2D): void;
-            protected _renderCanvasTriangles(context: CanvasRenderingContext2D): void;
-            protected _renderCanvasDrawTriangle(context: CanvasRenderingContext2D, vertices: number, uvs: number, index0: number, index1: number, index2: number): void;
-            protected renderMeshFlat(Mesh: Mesh): void;
-            protected _onTextureUpdate(): void;
-
-        }
-        export class Rope extends Mesh {
-
-            protected _ready: boolean;
-
-            protected getTextureUvs(): TextureUvs;
-
-            constructor(texture: Texture, points: Point[]);
-
-            points: Point[];
-            colors: number[];
-
-            refresh(): void;
-
-        }
-        export class Plane extends Mesh {
-
-            segmentsX: number;
-            segmentsY: number;
-
-            constructor(texture: Texture, segmentsX?: number, segmentsY?: number);
-
-        }
-
-
-        export class MeshRenderer extends ObjectRenderer {
-
-            protected _initWebGL(mesh: Mesh): void;
-
-            indices: number[];
-
-            constructor(renderer: WebGLRenderer);
-
-            render(mesh: Mesh): void;
-            flush(): void;
-            start(): void;
-            destroy(): void;
-
-        }
-
-        export interface MeshShader extends Shader { }
-
-    }
-
-    namespace ticker {
-
-        export var shared: Ticker;
-
-        export class Ticker {
-
-            protected _tick(time: number): void;
-            protected _emitter: EventEmitter;
-            protected _requestId: number;
-            protected _maxElapsedMS: number;
-
-            protected _requestIfNeeded(): void;
-            protected _cancelIfNeeded(): void;
-            protected _startIfPossible(): void;
-
-            autoStart: boolean;
-            deltaTime: number;
-            elapsedMS: number;
-            lastTime: number;
-            speed: number;
-            started: boolean;
-
-            FPS: number;
-            minFPS: number;
-
-            add(fn: (deltaTime: number) => void, context?: any): Ticker;
-            addOnce(fn: (deltaTime: number) => void, context?: any): Ticker;
-            remove(fn: (deltaTime: number) => void, context?: any): Ticker;
-            start(): void;
-            stop(): void;
-            update(): void;
-
-        }
-
-    }
-}
diff --git a/pixi.js/v3/pixi.js-tests.ts b/pixi.js/v3/pixi.js-tests.ts
deleted file mode 100644
index ec4c5329c0..0000000000
--- a/pixi.js/v3/pixi.js-tests.ts
+++ /dev/null
@@ -1,2739 +0,0 @@
-namespace basics {
-
-    export class Basics {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private bunny: PIXI.Sprite;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a texture from an image path
-            var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
-
-            // create a new Sprite using the texture
-            this.bunny = new PIXI.Sprite(texture);
-
-            // center the sprite's anchor point
-            this.bunny.anchor.x = 0.5;
-            this.bunny.anchor.y = 0.5;
-
-            // move the sprite to the center of the screen
-            this.bunny.position.x = 200;
-            this.bunny.position.y = 150;
-
-            // add it to the stage
-            this.stage.addChild(this.bunny);
-
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.bunny.rotation += 0.1;
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class Click {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private sprite: PIXI.Sprite;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
-            this.sprite.position.set(230, 264);
-            this.sprite.interactive = true;
-            this.sprite.on('mousedown', this.onDown, this);
-            this.sprite.on('touchstart', this.onDown, this);
-
-            // add it to the stage
-            this.stage.addChild(this.sprite);
-
-            // start animatng
-            this.animate();
-
-        }
-
-        private onDown = (eventData: PIXI.interaction.InteractionData): void => {
-
-            this.sprite.scale.x += 0.3;
-            this.sprite.scale.y += 0.3;
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class Container {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private container: PIXI.Container;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.container = new PIXI.Container();
-
-            this.stage.addChild(this.container);
-
-            for (var j = 0; j < 5; j++) {
-
-                for (var i = 0; i < 5; i++) {
-
-                    var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
-                    bunny.x = 40 * i;
-                    bunny.y = 40 * j;
-                    this.container.addChild(bunny);
-
-                }
-
-            }
-
-            /*
-             * All the bunnies are added to the container with the addChild method
-             * when you do this, all the bunnies become children of the container, and when a container moves,
-             * so do all its children.
-             * This gives you a lot of flexibility and makes it easier to position elements on the screen
-             */
-            this.container.x = 100;
-            this.container.y = 60;
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class CustomFilter {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Sprite;
-
-        private filter: CustomizedFilter;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.background = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg');
-            this.background.scale.set(1.3, 1);
-            this.stage.addChild(this.background);
-
-
-            PIXI.loader.add('shader', '../../_assets/basics/shader.frag');
-            PIXI.loader.once('complete', this.onLoaded, this);
-            PIXI.loader.load();
-
-        }
-
-        private onLoaded(loader: PIXI.loaders.Loader, res: any) {
-
-            var fragmentSrc = res.shader.data;
-
-            this.filter = new CustomizedFilter(fragmentSrc);
-            this.background.filters = [this.filter];
-
-            this.animate();
-
-
-        }
-
-        private animate = (): void => {
-
-            this.filter.uniforms.customUniform.value += 0.04;
-
-            this.renderer.render(this.stage);
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-    export class CustomizedFilter extends PIXI.AbstractFilter {
-
-        constructor(fragmentSource: string | string[]) {
-            super(null, fragmentSource, {
-                customUniform: {
-                    type: '1f',
-                    value: 0
-                }
-            });
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class Graphics {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private graphics: PIXI.Graphics;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            this.graphics = new PIXI.Graphics();
-
-            // draw a shape
-            this.graphics.moveTo(50, 50);
-            this.graphics.lineTo(250, 50);
-            this.graphics.lineTo(100, 100);
-            this.graphics.lineTo(50, 50);
-            this.graphics.endFill();
-
-            // set a fill and a line style again and draw a rectangle
-            this.graphics.lineStyle(2, 0x0000FF, 1);
-            this.graphics.beginFill(0xFF700B, 1);
-            this.graphics.drawRect(50, 250, 120, 120);
-
-            // draw a rounded rectangle
-            this.graphics.lineStyle(2, 0xFF00FF, 1);
-            this.graphics.beginFill(0xFF00BB, 0.25);
-            this.graphics.drawRoundedRect(150, 450, 300, 100, 15);
-            this.graphics.endFill();
-
-            // draw a circle, set the lineStyle to zero so the circle doesn't have an outline
-            this.graphics.lineStyle(0);
-            this.graphics.beginFill(0xFFFF0B, 0.5);
-            this.graphics.drawCircle(470, 90, 60);
-            this.graphics.endFill();
-
-            this.stage.addChild(this.graphics);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class RenderTexture {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private container: PIXI.Container;
-
-        private renderTexture: PIXI.RenderTexture;
-
-        private sprite: PIXI.Sprite;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.container = new PIXI.Container();
-
-            this.stage.addChild(this.container);
-
-            for (var j = 0; j < 5; j++) {
-
-                for (var i = 0; i < 5; i++) {
-
-                    var bunny: PIXI.Sprite = PIXI.Sprite.fromImage('../../_assets/basics/bunny.png');
-                    bunny.x = 40 * i;
-                    bunny.y = 40 * j;
-                    bunny.rotation = Math.random() * (Math.PI * 2);
-                    this.container.addChild(bunny);
-
-                }
-
-            }
-
-            this.renderTexture = new PIXI.RenderTexture(this.renderer, 300, 200, PIXI.SCALE_MODES.LINEAR, 0.1);
-
-            this.sprite = new PIXI.Sprite(this.renderTexture);
-            this.sprite.x = 450;
-            this.sprite.y = 60;
-            this.stage.addChild(this.sprite);
-
-            this.container.x = 100;
-            this.container.y = 60;
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.renderTexture.render(this.container);
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class SpriteSheet {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private movie: PIXI.extras.MovieClip;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            PIXI.loader.add('../../_assets/basics/fighter.json').load((loader: PIXI.loaders.Loader, object: any): void => {
-
-                // create an array of textures from an image path
-                var frames: PIXI.Texture[] = [];
-
-                for (var i = 0; i < 30; i++) {
-
-                    var val = i < 10 ? '0' + i : i;
-
-                    // magically works since the spritesheet was loaded with the pixi loader
-                    frames.push(PIXI.Texture.fromFrame('rollSequence00' + val + '.png'));
-                }
-
-
-                // create a MovieClip (brings back memories from the days of Flash, right ?)
-                this.movie = new PIXI.extras.MovieClip(frames);
-
-                /*
-                 * A MovieClip inherits all the properties of a PIXI sprite
-                 * so you can change its position, its anchor, mask it, etc
-                 */
-                this.movie.position.set(300);
-                this.movie.anchor.set(0.5);
-                this.movie.animationSpeed = 0.5;
-                this.movie.play();
-
-                this.stage.addChild(this.movie);
-
-                this.animate();
-
-            });
-
-        }
-
-        private animate = (): void => {
-
-            this.movie.rotation += 0.01;
-
-            // render the stage container
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class Text {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private basicText: PIXI.Text;
-
-        private richText: PIXI.Text;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.basicText = new PIXI.Text('Basic Text in Pixi');
-            this.basicText.x = 30;
-            this.basicText.y = 90;
-
-            this.stage.addChild(this.basicText);
-
-            var style: PIXI.TextStyle = {
-                font: '36px Arial bold italic',
-                fill: PIXI.utils.hex2string(0xF7EDCA),
-                stroke: '#4a1850',
-                strokeThickness: 5,
-                dropShadow: true,
-                dropShadowColor: '#000000',
-                dropShadowAngle: Math.PI / 6,
-                dropShadowDistance: 6,
-                wordWrap: true,
-                wordWrapWidth: 440
-            };
-
-            this.richText = new PIXI.Text('Rich Text with a lot of options and across multiple lines', style);
-            this.richText.x = 30;
-            this.richText.y = 180;
-
-            this.stage.addChild(this.richText);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class TexturedMesh {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private strip: PIXI.mesh.Rope;
-
-        private graphics: PIXI.Graphics;
-
-        private count: number;
-
-        private points: PIXI.Point[];
-
-        private ropeLength: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.count = 0;
-
-            this.ropeLength = 918 / 20;
-            this.ropeLength = 45;
-
-            this.points = [];
-
-            for (var i = 0; i < 25; i++) {
-                this.points.push(new PIXI.Point(i * this.ropeLength, 0));
-            }
-
-            this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points);
-            this.strip.position.x = -40;
-            this.strip.position.y = 300;
-            this.stage.addChild(this.strip);
-
-            this.graphics = new PIXI.Graphics();
-            this.graphics.x = this.strip.x;
-            this.graphics.y = this.strip.y;
-            this.stage.addChild(this.graphics);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.1;
-
-            // make the snake
-            for (var i = 0; i < this.points.length; i++) {
-
-                this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
-
-                this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20;
-
-            }
-
-            // render the stage
-            this.renderer.render(this.stage);
-
-            this.renderPoints();
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-        private renderPoints(): void {
-
-            this.graphics.clear();
-
-            this.graphics.lineStyle(2, 0xffc2c2);
-            this.graphics.moveTo(this.points[0].x, this.points[0].y);
-
-            for (var i = 1; i < this.points.length; i++) {
-                this.graphics.lineTo(this.points[i].x, this.points[i].y);
-            }
-
-            for (var i = 1; i < this.points.length; i++) {
-                this.graphics.beginFill(0xff0022);
-                this.graphics.drawCircle(this.points[i].x, this.points[i].y, 10);
-                this.graphics.endFill();
-            }
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class TilingSprite {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private texture: PIXI.Texture;
-
-        private tilingSprite: PIXI.extras.TilingSprite;
-
-        private count: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a texture from an image path
-            this.texture = PIXI.Texture.fromImage('../../_assets/p2.jpeg');
-
-            /* create a tiling sprite ...
-             * requires a texture, a width and a height
-             * in WebGL the image size should preferably be a power of two
-             */
-            this.tilingSprite = new PIXI.extras.TilingSprite(this.texture, this.renderer.width, this.renderer.height);
-            this.stage.addChild(this.tilingSprite);
-
-            this.count = 0;
-
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.005;
-
-            this.tilingSprite.tileScale.x = 2 + Math.sin(this.count);
-            this.tilingSprite.tileScale.y = 2 + Math.cos(this.count);
-
-            this.tilingSprite.tilePosition.x += 1;
-            this.tilingSprite.tilePosition.y += 1;
-
-            // render the root container
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace basics {
-
-    export class Video {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private texture: PIXI.Texture;
-
-        private videoSprite: PIXI.Sprite;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a video texture from a path
-            this.texture = PIXI.Texture.fromVideo('../../_assets/testVideo.mp4');
-
-            // create a new sprite using the video texture (yes it's that easy)
-            this.videoSprite = new PIXI.Sprite(this.texture);
-            this.videoSprite.width = this.renderer.width;
-            this.videoSprite.height = this.renderer.height;
-            this.stage.addChild(this.videoSprite);
-
-            this.stage.addChild(this.videoSprite);
-
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // render the stage
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class AlphaMask {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Container;
-
-        private cells: PIXI.Sprite;
-
-        private mask: PIXI.Sprite;
-
-        private target: PIXI.Point;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            this.background = PIXI.Sprite.fromImage('../../_assets/bkg.jpg');
-            this.stage.addChild(this.background);
-
-            this.cells = PIXI.Sprite.fromImage('../../_assets/cells.png');
-            this.cells.scale.set(1.5, 1.5);
-
-            this.mask = PIXI.Sprite.fromImage('../../_assets/flowerTop.png');
-            this.mask.anchor.set(0.5);
-            this.mask.position.x = 310;
-            this.mask.position.y = 190;
-
-            this.cells.mask = this.mask;
-
-            this.stage.addChild(this.mask);
-
-            this.stage.addChild(this.cells);
-
-            this.target = new PIXI.Point();
-
-            this.reset();
-
-            this.animate();
-
-        }
-
-        private reset(): void {
-
-            this.target.x = Math.floor(Math.random() * 550);
-            this.target.y = Math.floor(Math.random() * 300);
-
-        }
-
-        private animate = (): void => {
-
-            this.mask.position.x += (this.target.x - this.mask.x) * 0.1;
-            this.mask.position.y += (this.target.y - this.mask.y) * 0.1;
-
-            if (Math.abs(this.mask.x - this.target.x) < 1) {
-                this.reset();
-            }
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class Batch {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private sprites: PIXI.ParticleContainer;
-
-        private maggots: BatchDude[];
-
-        private tick: number;
-
-        private dudeBounds: PIXI.Rectangle;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.sprites = new PIXI.ParticleContainer(10000, {
-
-                scale: true,
-                position: true,
-                rotation: true,
-                uvs: true,
-                alpha: true
-
-            });
-            this.stage.addChild(this.sprites);
-
-            // create an array to store all the sprites
-            this.maggots = [];
-
-            var totalSprites = this.renderer instanceof PIXI.WebGLRenderer ? 10000 : 100;
-
-            for (var i = 0; i < totalSprites; i++) {
-
-                // create a new Sprite
-                var dude = new BatchDude(PIXI.Texture.fromImage('../../_assets/tinyMaggot.png'));
-
-                dude.tint = Math.random() * 0xE8D4CD;
-
-                // set the anchor point so the texture is centerd on the sprite
-                dude.anchor.set(0.5);
-
-                // different maggots, different sizes
-                dude.scale.set(0.8 + Math.random() * 0.3);
-
-                // scatter them all
-                dude.x = Math.random() * this.renderer.width;
-                dude.y = Math.random() * this.renderer.height;
-
-                dude.tint = Math.random() * 0x808080;
-
-                // create a random direction in radians
-                dude.direction = Math.random() * Math.PI * 2;
-
-                // this number will be used to modify the direction of the sprite over time
-                dude.turningSpeed = Math.random() - 0.8;
-
-                // create a random speed between 0 - 2, and these maggots are slooww
-                dude.speed = (2 + Math.random() * 2) * 0.2;
-
-                dude.offset = Math.random() * 100;
-
-                // finally we push the dude into the maggots array so it it can be easily accessed later
-                this.maggots.push(dude);
-
-                this.sprites.addChild(dude);
-
-            }
-
-            // create a bounding box box for the little maggots
-            var dudeBoundsPadding = 100;
-            this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
-                -dudeBoundsPadding,
-                this.renderer.width + dudeBoundsPadding * 2,
-                this.renderer.height + dudeBoundsPadding * 2);
-
-            this.tick = 0;
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // iterate through the sprites and update their position
-            for (const dude of this.maggots) {
-                dude.scale.y = 0.95 + Math.sin(this.tick + dude.offset) * 0.05;
-                dude.direction += dude.turningSpeed * 0.01;
-                dude.position.x += Math.sin(dude.direction) * (dude.speed * dude.scale.y);
-                dude.position.y += Math.cos(dude.direction) * (dude.speed * dude.scale.y);
-                dude.rotation = -dude.direction + Math.PI;
-
-                // wrap the maggots
-                if (dude.position.x < this.dudeBounds.x) {
-                    dude.position.x += this.dudeBounds.width;
-                } else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
-                    dude.position.x -= this.dudeBounds.width;
-                }
-
-                if (dude.position.y < this.dudeBounds.y) {
-                    dude.position.y += this.dudeBounds.height;
-                } else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
-                    dude.position.y -= this.dudeBounds.height;
-                }
-            }
-
-            // increment the ticker
-            this.tick += 0.1;
-
-            // time to render the stage !
-            this.renderer.render(this.stage);
-
-            // request another animation frame...
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-    export class BatchDude extends PIXI.Sprite {
-
-        direction: number;
-        speed: number;
-        turningSpeed: number;
-        offset: number;
-
-        constructor(texture: PIXI.Texture) {
-
-            super(texture);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class BlendModes {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Sprite;
-
-        private dudeArray: BlendModesDude[];
-
-        private totalDudes: number;
-
-        private dudeBounds: PIXI.Rectangle;
-
-        private tick: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a new background sprite
-            this.background = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg');
-            this.stage.addChild(this.background);
-
-            // create an array to store a reference to the dudes
-            this.dudeArray = [];
-
-            this.totalDudes = 20;
-
-            for (var i = 0; i < this.totalDudes; i++) {
-
-                // create a new Sprite that uses the image name that we just generated as its source
-                var dude = new BlendModesDude(PIXI.Texture.fromImage('../../_assets/flowerTop.png'));
-
-                dude.anchor.set(0.5);
-
-                // set a random scale for the dude
-                dude.scale.set(0.8 + Math.random() * 0.3);
-
-                // finally let's set the dude to be at a random position...
-                dude.position.x = Math.floor(Math.random() * this.renderer.width);
-                dude.position.y = Math.floor(Math.random() * this.renderer.height);
-
-                // The important bit of this example, this is how you change the default blend mode of the sprite
-                dude.blendMode = PIXI.BLEND_MODES.ADD;
-
-                // create some extra properties that will control movement
-                dude.direction = Math.random() * Math.PI * 2;
-
-                // this number will be used to modify the direction of the dude over time
-                dude.turningSpeed = Math.random() - 0.8;
-
-                // create a random speed for the dude between 0 - 2
-                dude.speed = 2 + Math.random() * 2;
-
-                // finally we push the dude into the dudeArray so it it can be easily accessed later
-                this.dudeArray.push(dude);
-
-                this.stage.addChild(dude);
-
-            }
-
-            // create a bounding box box for the little maggots
-            var dudeBoundsPadding = 100;
-            this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
-                -dudeBoundsPadding,
-                this.renderer.width + dudeBoundsPadding * 2,
-                this.renderer.height + dudeBoundsPadding * 2);
-
-            this.tick = 0;
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // iterate through the dudes and update the positions
-            for (const dude of this.dudeArray) {
-                dude.direction += dude.turningSpeed * 0.01;
-                dude.position.x += Math.sin(dude.direction) * dude.speed;
-                dude.position.y += Math.cos(dude.direction) * dude.speed;
-                dude.rotation = -dude.direction - Math.PI / 2;
-
-                // wrap the dudes by testing their bounds...
-                if (dude.position.x < this.dudeBounds.x) {
-                    dude.position.x += this.dudeBounds.width;
-                } else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
-                    dude.position.x -= this.dudeBounds.width;
-                }
-
-                if (dude.position.y < this.dudeBounds.y) {
-                    dude.position.y += this.dudeBounds.height;
-                } else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
-                    dude.position.y -= this.dudeBounds.height;
-                }
-            }
-
-            // increment the ticker
-            this.tick += 0.1;
-
-            // time to render the stage !
-            this.renderer.render(this.stage);
-
-            // request another animation frame...
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-    export class BlendModesDude extends PIXI.Sprite {
-
-        direction: number;
-        speed: number;
-        turningSpeed: number;
-        offset: number;
-
-        constructor(texture: PIXI.Texture) {
-
-            super(texture);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class CacheAsBitmap {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private aliens: PIXI.Sprite[];
-
-        private alienContainer: PIXI.Container;
-
-        private count: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // load resources
-            PIXI.loader
-                .add('spritesheet', '../../_assets/monsters.json')
-                .load(this.onAssetsLoaded);
-
-            // holder to store aliens
-            this.aliens = [];
-
-            this.count = 0;
-
-            // create an empty container
-            this.alienContainer = new PIXI.Container();
-            this.alienContainer.position.x = 400;
-            this.alienContainer.position.y = 300;
-
-            // make the stage interactive
-            this.stage.interactive = true;
-
-            this.stage.addChild(this.alienContainer);
-
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
-
-        }
-
-        private onClick = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.alienContainer.cacheAsBitmap = !this.alienContainer.cacheAsBitmap;
-
-            // feel free to play with what's below
-            // var sprite = new PIXI.Sprite(this.alienContainer.generateTexture());
-            // this.stage.addChild(sprite);
-            // sprite.position.x = Math.random() * 800;
-            // sprite.position.y = Math.random() * 600;
-
-        }
-
-        private onAssetsLoaded = (): void => {
-
-            // add a bunch of aliens with textures from image paths
-
-            var alienFrames = ['eggHead.png', 'flowerTop.png', 'helmlok.png', 'skully.png'];
-
-            for (var i = 0; i < 100; i++) {
-
-                var frameName = alienFrames[i % 4];
-
-                // create an alien using the frame name..
-                var alien = PIXI.Sprite.fromFrame(frameName);
-                alien.tint = Math.random() * 0xFFFFFF;
-
-                /*
-                 * fun fact for the day :)
-                 * another way of doing the above would be
-                 * var texture = PIXI.Texture.fromFrame(frameName);
-                 * var alien = new PIXI.Sprite(texture);
-                 */
-                alien.position.x = Math.random() * 800 - 400;
-                alien.position.y = Math.random() * 600 - 300;
-                alien.anchor.x = 0.5;
-                alien.anchor.y = 0.5;
-                this.aliens.push(alien);
-                this.alienContainer.addChild(alien);
-
-            }
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // let's rotate the aliens a little bit
-            for (var i = 0; i < 100; i++) {
-                var alien = this.aliens[i];
-                alien.rotation += 0.1;
-            }
-
-            this.count += 0.01;
-
-            this.alienContainer.scale.x = Math.sin(this.count);
-            this.alienContainer.scale.y = Math.sin(this.count);
-
-            this.alienContainer.rotation += 0.01;
-
-            // render the stage
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class DraggableBunny extends PIXI.Sprite {
-
-        // todo I dont know what event.data is at this time
-        private data: any;
-
-        private dragging: boolean;
-
-        constructor(texture?: PIXI.Texture) {
-
-            super(texture);
-
-            // enable the bunny to be interactive... this will allow it to respond to mouse and touch events
-            this.interactive = true;
-
-            // this button mode will mean the hand cursor appears when you roll over the bunny with your mouse
-            this.buttonMode = true;
-
-            // center the bunny's anchor point
-            this.anchor.set(0.5);
-
-            // make it a bit bigger, so it's easier to grab
-            this.scale.set(3);
-
-            // setup events
-            this
-            // events for drag start
-                .on('mousedown', this.onDragStart)
-                .on('touchstart', this.onDragStart)
-            // events for drag end
-                .on('mouseup', this.onDragEnd)
-                .on('mouseupoutside', this.onDragEnd)
-                .on('touchend', this.onDragEnd)
-                .on('touchendoutside', this.onDragEnd)
-            // events for drag move
-                .on('mousemove', this.onDragMove)
-                .on('touchmove', this.onDragMove);
-
-        }
-
-        private onDragStart = (event: PIXI.interaction.InteractionEvent): void => {
-
-            // store a reference to the data
-            // the reason for this is because of multitouch
-            // we want to track the movement of this particular touch
-            this.data = event.data;
-            this.alpha = 0.5;
-            this.dragging = true;
-
-        }
-
-        private onDragEnd = (event: PIXI.interaction.InteractionEvent): void => {
-
-            // set interactiondata to null
-            this.data = null;
-            this.alpha = 1;
-            this.dragging = false;
-
-        }
-
-        private onDragMove = (event: PIXI.interaction.InteractionEvent): void => {
-
-            if (this.dragging) {
-                var newPosition = this.data.getLocalPosition(this.parent);
-                this.position.x = newPosition.x;
-                this.position.y = newPosition.y;
-            }
-
-        }
-
-    }
-
-    export class Dragging {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private texture: PIXI.Texture;
-
-        private data: PIXI.interaction.InteractionData;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a texture from an image
-            this.texture = PIXI.Texture.fromImage('../../_assets/bunny.png');
-
-            for (var i = 0; i < 10; i++) {
-                this.createBunny(Math.floor(Math.random() * 800), Math.floor(Math.random() * 600));
-            }
-
-            // start animating
-            this.animate();
-
-        }
-
-        private createBunny(x: number, y: number): void {
-
-            // create our little bunny friend..
-            var bunny = new DraggableBunny(this.texture);
-
-            // move the sprite to its designated position
-            bunny.position.x = x;
-            bunny.position.y = y;
-
-            // add it to the stage
-            this.stage.addChild(bunny);
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class GraphicsDemo {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private thing: PIXI.Graphics;
-
-        private graphics: PIXI.Graphics;
-
-        private count: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            this.graphics = new PIXI.Graphics();
-
-            // set a fill and line style
-            this.graphics.beginFill(0xFF3300);
-            this.graphics.lineStyle(10, 0xffd900, 1);
-
-            // draw a shape
-            this.graphics.moveTo(50, 50);
-            this.graphics.lineTo(250, 50);
-            this.graphics.lineTo(100, 100);
-            this.graphics.lineTo(250, 220);
-            this.graphics.lineTo(50, 220);
-            this.graphics.lineTo(50, 50);
-            this.graphics.endFill();
-
-            // set a fill and line style again
-            this.graphics.lineStyle(10, 0xFF0000, 0.8);
-            this.graphics.beginFill(0xFF700B, 1);
-
-            // draw a second shape
-            this.graphics.moveTo(210, 300);
-            this.graphics.lineTo(450, 320);
-            this.graphics.lineTo(570, 350);
-            this.graphics.quadraticCurveTo(600, 0, 480, 100);
-            this.graphics.lineTo(330, 120);
-            this.graphics.lineTo(410, 200);
-            this.graphics.lineTo(210, 300);
-            this.graphics.endFill();
-
-            // draw a rectangle
-            this.graphics.lineStyle(2, 0x0000FF, 1);
-            this.graphics.drawRect(50, 250, 100, 100);
-
-            // draw a circle
-            this.graphics.lineStyle(0);
-            this.graphics.beginFill(0xFFFF0B, 0.5);
-            this.graphics.drawCircle(470, 200, 100);
-            this.graphics.endFill();
-
-            this.graphics.lineStyle(20, 0x33FF00);
-            this.graphics.moveTo(30, 30);
-            this.graphics.lineTo(600, 300);
-
-            this.stage.addChild(this.graphics);
-
-            // let's create a moving shape
-            this.thing = new PIXI.Graphics();
-            this.stage.addChild(this.thing);
-            this.thing.position.x = 620 / 2;
-            this.thing.position.y = 380 / 2;
-
-            this.count = 0;
-
-            // Just click on the stage to draw random lines
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private onClick = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.graphics.lineStyle(Math.random() * 30, Math.random() * 0xFFFFFF, 1);
-            this.graphics.moveTo(Math.random() * 620, Math.random() * 380);
-            this.graphics.bezierCurveTo(Math.random() * 620, Math.random() * 380,
-                Math.random() * 620, Math.random() * 380,
-                Math.random() * 620, Math.random() * 380);
-        }
-
-        private animate = (): void => {
-
-            this.thing.clear();
-
-            this.count += 0.1;
-
-            this.thing.clear();
-            this.thing.lineStyle(10, 0xff0000, 1);
-            this.thing.beginFill(0xffFF00, 0.5);
-
-            this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-
-            this.thing.rotation = this.count * 0.1;
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class Interactivity {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Sprite;
-
-        private buttons: InteractivityButton[];
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a background...
-            this.background = PIXI.Sprite.fromImage('../../_assets/button_test_BG.jpg');
-            this.background.width = this.renderer.width;
-            this.background.height = this.renderer.height;
-
-            // add background to stage...
-            this.stage.addChild(this.background);
-
-            this.buttons = [];
-
-            var buttonPositions = [
-                175, 75,
-                655, 75,
-                410, 325,
-                150, 465,
-                685, 445
-            ];
-
-            function noop(): void {
-                console.log('click');
-            }
-
-            // create some textures from an image path
-            var textureButton = PIXI.Texture.fromImage('../../_assets/button.png');
-            var textureButtonDown = PIXI.Texture.fromImage('../../_assets/buttonDown.png');
-            var textureButtonOver = PIXI.Texture.fromImage('../../_assets/buttonOver.png');
-
-            for (var i = 0; i < 5; i++) {
-
-                var button = new InteractivityButton(textureButton, textureButtonDown, textureButtonOver);
-
-                button.position.x = buttonPositions[i * 2];
-                button.position.y = buttonPositions[i * 2 + 1];
-
-                button.tap = noop;
-                button.click = noop;
-
-                // add it to the stage
-                this.stage.addChild(button);
-
-                // add button to array
-                this.buttons.push(button);
-
-            }
-
-            // set some silly values...
-            this.buttons[0].scale.set(1.2);
-
-            this.buttons[2].rotation = Math.PI / 10;
-
-            this.buttons[3].scale.set(0.8);
-
-            this.buttons[4].scale.set(0.8, 1.2);
-            this.buttons[4].rotation = Math.PI;
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-    export class InteractivityButton extends PIXI.Sprite {
-
-        private textureButton: PIXI.Texture;
-        private textureButtonDown: PIXI.Texture;
-        private textureButtonOver: PIXI.Texture;
-
-        tap: Function;
-        click: Function;
-
-        isdown: boolean;
-        isOver: boolean;
-
-        constructor(textureButton: PIXI.Texture, textureButtonDown: PIXI.Texture, textureButtonOver: PIXI.Texture) {
-
-            super(textureButton);
-
-            // create some textures from an image path
-            this.textureButton = textureButton;
-            this.textureButtonDown = textureButtonDown;
-            this.textureButtonOver = textureButtonOver;
-
-            this.buttonMode = true;
-            this.anchor.set(0.5);
-
-            // make the button interactive...
-            this.interactive = true;
-
-            this
-            // set the mousedown and touchstart callback...
-                .on('mousedown', this.onButtonDown)
-                .on('touchstart', this.onButtonDown)
-
-            // set the mouseup and touchend callback...
-                .on('mouseup', this.onButtonUp)
-                .on('touchend', this.onButtonUp)
-                .on('mouseupoutside', this.onButtonUp)
-                .on('touchendoutside', this.onButtonUp)
-
-            // set the mouseover callback...
-                .on('mouseover', this.onButtonOver)
-
-            // set the mouseout callback...
-                .on('mouseout', this.onButtonOut);
-
-            // you can also listen to click and tap events :
-            // .on('click', this.noop)
-
-        }
-
-        private onButtonDown = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isdown = true;
-            this.texture = this.textureButtonDown;
-            this.alpha = 1;
-
-        }
-
-        private onButtonUp = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isdown = false;
-
-            if (this.isOver) {
-                this.texture = this.textureButtonOver;
-            } else {
-                this.texture = this.textureButton;
-            }
-        }
-
-        private onButtonOver = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isOver = true;
-
-            if (this.isdown) {
-                return;
-            }
-
-            this.texture = this.textureButtonOver;
-
-        }
-
-        private onButtonOut = (event: PIXI.interaction.InteractionEvent): void => {
-
-            this.isOver = false;
-
-            if (this.isdown) {
-                return;
-            }
-
-            this.texture = this.textureButton;
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class Masking {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private bg: PIXI.Sprite;
-
-        private container: PIXI.Container;
-
-        private bgFront: PIXI.Sprite;
-
-        private light1: PIXI.Sprite;
-
-        private light2: PIXI.Sprite;
-
-        private panda: PIXI.Sprite;
-
-        private thing: PIXI.Graphics;
-
-        private count: number;
-
-        private help: PIXI.Text;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, antialias: true });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            this.bg = PIXI.Sprite.fromImage('../../_assets/BGrotate.jpg');
-            this.bg.anchor.x = 0.5;
-            this.bg.anchor.y = 0.5;
-
-            this.bg.position.x = this.renderer.width / 2;
-            this.bg.position.y = this.renderer.height / 2;
-
-            this.stage.addChild(this.bg);
-
-            this.container = new PIXI.Container();
-            this.container.position.x = this.renderer.width / 2;
-            this.container.position.y = this.renderer.height / 2;
-
-            // add a bunch of sprites
-
-            this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg');
-            this.bgFront.anchor.x = 0.5;
-            this.bgFront.anchor.y = 0.5;
-
-            this.container.addChild(this.bgFront);
-
-            this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png');
-            this.light2.anchor.x = 0.5;
-            this.light2.anchor.y = 0.5;
-            this.container.addChild(this.light2);
-
-            this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png');
-            this.light1.anchor.x = 0.5;
-            this.light1.anchor.y = 0.5;
-            this.container.addChild(this.light1);
-
-            this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png');
-            this.panda.anchor.x = 0.5;
-            this.panda.anchor.y = 0.5;
-
-            this.container.addChild(this.panda);
-
-            this.stage.addChild(this.container);
-
-            // let's create a moving shape
-            this.thing = new PIXI.Graphics();
-            this.stage.addChild(this.thing);
-            this.thing.position.x = this.renderer.width / 2;
-            this.thing.position.y = this.renderer.height / 2;
-            this.thing.lineStyle(0);
-
-            this.container.mask = this.thing;
-
-            this.count = 0;
-
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
-
-            this.help = new PIXI.Text('Click to turn masking on / off.', { font: 'bold 12pt Arial', fill: 'white' });
-            this.help.position.y = this.renderer.height - 26;
-            this.help.position.x = 10;
-            this.stage.addChild(this.help);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.bg.rotation += 0.01;
-            this.bgFront.rotation -= 0.01;
-
-            this.light1.rotation += 0.02;
-            this.light2.rotation += 0.01;
-
-            this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
-            this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
-
-            this.count += 0.1;
-
-            this.thing.clear();
-
-            this.thing.beginFill(0x8bc5ff, 0.4);
-            this.thing.moveTo(-120 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-320 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(120 + Math.cos(this.count) * 20, -100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(120 + Math.sin(this.count) * 20, 100 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-120 + Math.cos(this.count) * 20, 100 + Math.sin(this.count) * 20);
-            this.thing.lineTo(-120 + Math.sin(this.count) * 20, -300 + Math.cos(this.count) * 20);
-            this.thing.lineTo(-320 + Math.sin(this.count) * 20, -100 + Math.cos(this.count) * 20);
-            this.thing.rotation = this.count * 0.1;
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-        private onClick = (event: PIXI.interaction.InteractionEvent): void => {
-
-            if (!this.container.mask) {
-                this.container.mask = this.thing;
-            } else {
-                this.container.mask = null;
-            }
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class MovieClipDemo {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            PIXI.loader
-                .add('spritesheet', '../../_assets/mc.json')
-                .load(this.onAssetsLoaded);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private onAssetsLoaded = (loader: PIXI.loaders.Loader): void => {
-
-            // create an array to store the textures
-            var explosionTextures: PIXI.Texture[] = [];
-            var i: number;
-
-            for (i = 0; i < 26; i++) {
-
-                var texture = PIXI.Texture.fromFrame('Explosion_Sequence_A ' + (i + 1) + '.png');
-                explosionTextures.push(texture);
-
-            }
-
-            for (i = 0; i < 50; i++) {
-
-                // create an explosion MovieClip
-                var explosion = new PIXI.extras.MovieClip(explosionTextures);
-
-                explosion.position.x = Math.random() * 800;
-                explosion.position.y = Math.random() * 600;
-                explosion.anchor.x = 0.5;
-                explosion.anchor.y = 0.5;
-
-                explosion.rotation = Math.random() * Math.PI;
-
-                explosion.scale.set(0.75 + Math.random() * 0.5);
-
-                explosion.gotoAndPlay(Math.random() * 27);
-
-                this.stage.addChild(explosion);
-
-            }
-
-            // start animating
-            this.animate();
-        }
-
-        private animate = (): void => {
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class RenderTextureDemo {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private renderTexture: PIXI.RenderTexture;
-        private renderTexture2: PIXI.RenderTexture;
-        private currentTexture: PIXI.RenderTexture;
-
-        private outputSprite: PIXI.Sprite;
-        private stuffContainer: PIXI.Container;
-        private items: PIXI.Sprite[];
-
-        private count: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create two render textures... these dynamic textures will be used to draw the scene into itself
-            this.renderTexture = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height);
-            this.renderTexture2 = new PIXI.RenderTexture(this.renderer, this.renderer.width, this.renderer.height);
-            this.currentTexture = this.renderTexture;
-
-            // create a new sprite that uses the render texture we created above
-            this.outputSprite = new PIXI.Sprite(this.currentTexture);
-
-            // align the sprite
-            this.outputSprite.position.x = 400;
-            this.outputSprite.position.y = 300;
-            this.outputSprite.anchor.set(0.5);
-
-            // add to stage
-            this.stage.addChild(this.outputSprite);
-
-            this.stuffContainer = new PIXI.Container();
-
-            this.stuffContainer.position.x = 400;
-            this.stuffContainer.position.y = 300;
-
-            this.stage.addChild(this.stuffContainer);
-
-            // create an array of image ids..
-            var fruits = [
-                '../../_assets/spinObj_01.png',
-                '../../_assets/spinObj_02.png',
-                '../../_assets/spinObj_03.png',
-                '../../_assets/spinObj_04.png',
-                '../../_assets/spinObj_05.png',
-                '../../_assets/spinObj_06.png',
-                '../../_assets/spinObj_07.png',
-                '../../_assets/spinObj_08.png'
-            ];
-
-            // create an array of items
-            this.items = [];
-
-            // now create some items and randomly position them in the stuff container
-            for (var i = 0; i < 20; i++) {
-
-                var item = PIXI.Sprite.fromImage(fruits[i % fruits.length]);
-                item.position.x = Math.random() * 400 - 200;
-                item.position.y = Math.random() * 400 - 200;
-
-                item.anchor.set(0.5);
-
-                this.stuffContainer.addChild(item);
-
-                this.items.push(item);
-
-            }
-
-            // used for spinning!
-            this.count = 0;
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            for (const item of this.items) {
-                // rotate each item
-                item.rotation += 0.1;
-            }
-
-            this.count += 0.01;
-
-            // swap the buffers ...
-            var temp = this.renderTexture;
-            this.renderTexture = this.renderTexture2;
-            this.renderTexture2 = temp;
-
-            // set the new texture
-            this.outputSprite.texture = this.renderTexture;
-
-            // twist this up!
-            this.stuffContainer.rotation -= 0.01;
-            this.outputSprite.scale.set(1 + Math.sin(this.count) * 0.2);
-
-            // render the stage to the texture
-            // the 'true' clears the texture before the content is rendered
-            this.renderTexture2.render(this.stage, null, false);
-
-            // and finally render the stage
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class StripDemo {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private count: number;
-
-        private points: PIXI.Point[];
-
-        private strip: PIXI.mesh.Rope;
-
-        private snakeContainer: PIXI.Container;
-
-        private ropeLength: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.count = 0;
-
-            // build a rope!
-            this.ropeLength = 918 / 20;
-
-            this.points = [];
-
-            for (var i = 0; i < 20; i++) {
-                this.points.push(new PIXI.Point(i * this.ropeLength, 0));
-            }
-
-            this.strip = new PIXI.mesh.Rope(PIXI.Texture.fromImage('../../_assets/snake.png'), this.points);
-            this.strip.x = -459;
-
-            this.snakeContainer = new PIXI.Container();
-            this.snakeContainer.position.x = 400;
-            this.snakeContainer.position.y = 300;
-
-            this.snakeContainer.scale.set(800 / 1100);
-            this.stage.addChild(this.snakeContainer);
-
-            this.snakeContainer.addChild(this.strip);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.1;
-
-            // make the snake
-            for (var i = 0; i < this.points.length; i++) {
-
-                this.points[i].y = Math.sin((i * 0.5) + this.count) * 30;
-
-                this.points[i].x = i * this.ropeLength + Math.cos((i * 0.3) + this.count) * 20;
-
-            }
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class TextDemo {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private bitmapFontText: PIXI.extras.BitmapText;
-
-        private background: PIXI.Sprite;
-
-        private textSample: PIXI.Text;
-
-        private spinningText: PIXI.Text;
-
-        private countingText: PIXI.Text;
-
-        private count: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            PIXI.loader
-                .add('desyrel', '../../_assets/desyrel.xml')
-                .load(this.onAssetsLoaded);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private onAssetsLoaded = (): void  => {
-
-            this.bitmapFontText = new PIXI.extras.BitmapText('bitmap fonts are\n now supported!', { font: '35px Desyrel', align: 'right' });
-
-            this.bitmapFontText.position.x = 600 - this.bitmapFontText.textWidth;
-            this.bitmapFontText.position.y = 20;
-
-            this.stage.addChild(this.bitmapFontText);
-
-            // add a shiny background...
-            this.background = PIXI.Sprite.fromImage('../../_assets/textDemoBG.jpg');
-            this.stage.addChild(this.background);
-
-            // create some white text using the Snippet webfont
-            this.textSample = new PIXI.Text('Pixi.js can has\n multiline text!', { font: '35px Snippet', fill: 'white', align: 'left' });
-            this.textSample.position.set(20);
-
-            // create a text object with a nice stroke
-            this.spinningText = new PIXI.Text('I\'m fun!', { font: 'bold 60px Arial', fill: '#cc00ff', align: 'center', stroke: '#FFFFFF', strokeThickness: 6 });
-
-            // setting the anchor point to 0.5 will center align the text... great for spinning!
-            this.spinningText.anchor.set(0.5);
-            this.spinningText.position.x = 310;
-            this.spinningText.position.y = 200;
-
-            // create a text object that will be updated...
-            this.countingText = new PIXI.Text('COUNT 4EVAR: 0', { font: 'bold italic 60px Arvo', fill: '#3e1707', align: 'center', stroke: '#a4410e', strokeThickness: 7 });
-
-            this.countingText.position.x = 310;
-            this.countingText.position.y = 320;
-            this.countingText.anchor.x = 0.5;
-
-            this.stage.addChild(this.textSample);
-            this.stage.addChild(this.spinningText);
-            this.stage.addChild(this.countingText);
-
-            this.count = 0;
-
-        }
-
-        private animate = (): void => {
-
-
-            this.renderer.render(this.stage);
-
-            this.count += 0.05;
-
-            // update the text with a new string
-            this.countingText.text = 'COUNT 4EVAR: ' + Math.floor(this.count);
-
-            // let's spin the spinning text
-            this.spinningText.rotation += 0.03;
-
-            requestAnimationFrame(this.animate);
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class TextureSwap {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private bol: boolean;
-
-        private texture: PIXI.Texture;
-        private secondTexture: PIXI.Texture;
-
-        private dude: PIXI.Sprite;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.bol = false;
-
-            // an image path
-            this.texture = PIXI.Texture.fromImage('../../_assets/flowerTop.png');
-
-            // create a second texture
-            this.secondTexture = PIXI.Texture.fromImage('../../_assets/eggHead.png');
-
-            // create a new Sprite using the texture
-            this.dude = new PIXI.Sprite(this.texture);
-
-            // center the sprites anchor point
-            this.dude.anchor.set(0.5);
-
-            // move the sprite to the center of the screen
-            this.dude.position.x = this.renderer.width / 2;
-            this.dude.position.y = this.renderer.height / 2;
-
-            this.stage.addChild(this.dude);
-
-            // make the sprite interactive
-            this.dude.interactive = true;
-
-            this.dude.on('click', (): void => {
-                this.bol = !this.bol;
-
-                if (this.bol) {
-                    this.dude.texture = this.secondTexture;
-                } else {
-                    this.dude.texture = this.texture;
-                }
-            });
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // just for fun, let's rotate mr rabbit a little
-            this.dude.rotation += 0.1;
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class Tinting {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private totalDudes: number = 10;
-        private aliens: TintingDude[];
-
-        private dudeBounds: PIXI.Rectangle;
-
-        private tick: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // holder to store the aliens
-            this.aliens = [];
-
-            this.tick = 0;
-
-            for (var i = 0; i < this.totalDudes; i++) {
-
-                // create a new Sprite that uses the image name that we just generated as its source
-                var dude = new TintingDude();
-
-                // set the anchor point so the texture is centerd on the sprite
-                dude.anchor.set(0.5);
-
-                // set a random scale for the dude - no point them all being the same size!
-                dude.scale.set(0.8 + Math.random() * 0.3);
-
-                // finally lets set the dude to be at a random position..
-                dude.position.x = Math.random() * this.renderer.width;
-                dude.position.y = Math.random() * this.renderer.height;
-
-                dude.tint = Math.random() * 0xFFFFFF;
-
-                // create some extra properties that will control movement :
-                // create a random direction in radians. This is a number between 0 and PI*2 which is the equivalent of 0 - 360 degrees
-                dude.direction = Math.random() * Math.PI * 2;
-
-                // this number will be used to modify the direction of the dude over time
-                dude.turningSpeed = Math.random() - 0.8;
-
-                // create a random speed for the dude between 0 - 2
-                dude.speed = 2 + Math.random() * 2;
-
-                // finally we push the dude into the aliens array so it it can be easily accessed later
-                this.aliens.push(dude);
-
-                this.stage.addChild(dude);
-
-            }
-
-            // create a bounding box for the little dudes
-            var dudeBoundsPadding = 100;
-            this.dudeBounds = new PIXI.Rectangle(-dudeBoundsPadding,
-                -dudeBoundsPadding,
-                this.renderer.width + dudeBoundsPadding * 2,
-                this.renderer.height + dudeBoundsPadding * 2);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // iterate through the dudes and update their position
-            for (const dude of this.aliens) {
-                dude.direction += dude.turningSpeed * 0.01;
-                dude.position.x += Math.sin(dude.direction) * dude.speed;
-                dude.position.y += Math.cos(dude.direction) * dude.speed;
-                dude.rotation = -dude.direction - Math.PI / 2;
-
-                // wrap the dudes by testing their bounds...
-                if (dude.position.x < this.dudeBounds.x) {
-                    dude.position.x += this.dudeBounds.width;
-                } else if (dude.position.x > this.dudeBounds.x + this.dudeBounds.width) {
-                    dude.position.x -= this.dudeBounds.width;
-                }
-
-                if (dude.position.y < this.dudeBounds.y) {
-                    dude.position.y += this.dudeBounds.height;
-                } else if (dude.position.y > this.dudeBounds.y + this.dudeBounds.height) {
-                    dude.position.y -= this.dudeBounds.height;
-                }
-
-            }
-
-            // increment the ticker
-            this.tick += 0.1;
-
-            requestAnimationFrame(this.animate);
-
-            this.renderer.render(this.stage);
-
-        }
-
-    }
-
-    export class TintingDude extends PIXI.Sprite {
-
-        direction: number;
-        speed: number;
-        turningSpeed: number;
-
-        constructor() {
-            super(PIXI.Texture.fromImage('../../_assets/eggHead.png'));
-        }
-
-    }
-
-}
-
-namespace demos {
-
-    export class TransparentBackground {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private bunny: PIXI.Sprite;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600, { backgroundColor: 0x1099bb, transparent: true });
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            // create a new Sprite from an image path.
-            this.bunny = PIXI.Sprite.fromImage('../../_assets/bunny.png');
-
-            // center the sprite's anchor point
-            this.bunny.anchor.set(0.5);
-
-            // move the sprite to the center of the screen
-            this.bunny.position.x = 200;
-            this.bunny.position.y = 150;
-
-            this.stage.addChild(this.bunny);
-
-            // start animating
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            // just for fun, let's rotate mr rabbit a little
-            this.bunny.rotation += 0.1;
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace filters {
-
-    export class Blur {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private bg: PIXI.Sprite;
-
-        private littleDudes: PIXI.Sprite;
-        private littleRobot: PIXI.Sprite;
-
-        private blurFilter1: PIXI.filters.BlurFilter;
-        private blurFilter2: PIXI.filters.BlurFilter;
-
-        private count: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600);
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-
-            this.bg = PIXI.Sprite.fromImage('../../_assets/depth_blur_BG.jpg');
-            this.bg.width = this.renderer.width;
-            this.bg.height = this.renderer.height;
-            this.stage.addChild(this.bg);
-
-            this.littleDudes = PIXI.Sprite.fromImage('../../_assets/depth_blur_dudes.jpg');
-            this.littleDudes.position.x = (this.renderer.width / 2) - 315;
-            this.littleDudes.position.y = 200;
-            this.stage.addChild(this.littleDudes);
-
-            this.littleRobot = PIXI.Sprite.fromImage('../../_assets/depth_blur_moby.jpg');
-            this.littleRobot.position.x = (this.renderer.width / 2) - 200;
-            this.littleRobot.position.y = 100;
-            this.stage.addChild(this.littleRobot);
-
-            this.blurFilter1 = new PIXI.filters.BlurFilter();
-            this.blurFilter2 = new PIXI.filters.BlurFilter();
-
-            this.littleDudes.filters = [this.blurFilter1];
-            this.littleRobot.filters = [this.blurFilter2];
-
-            this.count = 0;
-
-            // nimate
-            this.animate();
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.005;
-
-            var blurAmount = Math.cos(this.count);
-            var blurAmount2 = Math.sin(this.count);
-
-            this.blurFilter1.blur = 20 * (blurAmount);
-            this.blurFilter2.blur = 20 * (blurAmount2);
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
-
-namespace filters {
-
-    export class DisplacementMap {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private container: PIXI.Container;
-
-        private padding: number;
-
-        private bounds: PIXI.Rectangle;
-
-        private maggots: DisplacementMapDude[];
-
-        private displacementSprite: PIXI.Sprite;
-
-        private displacementFilter: PIXI.filters.DisplacementFilter;
-
-        private ring: PIXI.Sprite;
-
-        private bg: PIXI.Sprite;
-
-        private count: number;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600);
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            this.container = new PIXI.Container();
-            this.stage.addChild(this.container);
-
-            this.padding = 100;
-
-            this.bounds = new PIXI.Rectangle(-this.padding, -this.padding, this.renderer.width + this.padding * 2, this.renderer.height + this.padding * 2);
-            this.maggots = [];
-
-            for (var i = 0; i < 20; i++) {
-
-                var maggot = new DisplacementMapDude();
-                maggot.anchor.set(0.5);
-                this.container.addChild(maggot);
-
-                maggot.direction = Math.random() * Math.PI * 2;
-                maggot.speed = 1;
-                maggot.turnSpeed = Math.random() - 0.8;
-
-                maggot.position.x = Math.random() * this.bounds.width;
-                maggot.position.y = Math.random() * this.bounds.height;
-
-                maggot.scale.set(1 + Math.random() * 0.3);
-                maggot.original = maggot.scale.clone();
-                this.maggots.push(maggot);
-
-            }
-
-            this.displacementSprite = PIXI.Sprite.fromImage('../../_assets/displace.png');
-            this.displacementFilter = new PIXI.filters.DisplacementFilter(this.displacementSprite);
-
-            this.stage.addChild(this.displacementSprite);
-
-            this.container.filters = [this.displacementFilter];
-
-            this.displacementFilter.scale.x = 110;
-            this.displacementFilter.scale.y = 110;
-
-            this.ring = PIXI.Sprite.fromImage('../../_assets/ring.png');
-
-            this.ring.anchor.set(0.5);
-
-            this.ring.visible = false;
-
-            this.stage.addChild(this.ring);
-
-            this.bg = PIXI.Sprite.fromImage('../../_assets/bkg-grass.jpg');
-            this.bg.width = this.renderer.width;
-            this.bg.height = this.renderer.height;
-
-            this.bg.alpha = 0.4;
-
-            this.container.addChild(this.bg);
-
-            this.stage
-                .on('mousemove', this.onPointerMove)
-                .on('touchmove', this.onPointerMove);
-
-            this.count = 0;
-
-            this.animate();
-
-        }
-
-        private onPointerMove = (eventData: PIXI.interaction.InteractionEvent): void => {
-
-            this.ring.visible = true;
-
-            this.displacementSprite.x = eventData.data.global.x - 100;
-            this.displacementSprite.y = eventData.data.global.y - this.displacementSprite.height / 2;
-
-            this.ring.position.x = eventData.data.global.x - 25;
-            this.ring.position.y = eventData.data.global.y;
-
-        }
-
-        private animate = (): void => {
-
-            this.count += 0.05;
-
-            for (const maggot of this.maggots) {
-                maggot.direction += maggot.turnSpeed * 0.01;
-                maggot.position.x += Math.sin(maggot.direction) * maggot.speed;
-                maggot.position.y += Math.cos(maggot.direction) * maggot.speed;
-
-                maggot.rotation = -maggot.direction - Math.PI / 2;
-
-                maggot.scale.x = maggot.original.x + Math.sin(this.count) * 0.2;
-
-                // wrap the maggots around as the crawl
-                if (maggot.position.x < this.bounds.x) {
-                    maggot.position.x += this.bounds.width;
-                } else if (maggot.position.x > this.bounds.x + this.bounds.width) {
-                    maggot.position.x -= this.bounds.width;
-                }
-
-                if (maggot.position.y < this.bounds.y) {
-                    maggot.position.y += this.bounds.height;
-                } else if (maggot.position.y > this.bounds.y + this.bounds.height) {
-                    maggot.position.y -= this.bounds.height;
-                }
-            }
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-    export class DisplacementMapDude extends PIXI.Sprite {
-
-        direction: number;
-        speed: number;
-        turnSpeed: number;
-        original: PIXI.Point;
-
-        constructor() {
-
-            super(PIXI.Texture.fromImage('../../_assets/maggot.png'));
-
-        }
-
-    }
-
-}
-
-namespace filters {
-
-    export class Filter {
-
-        private renderer: PIXI.CanvasRenderer | PIXI.WebGLRenderer;
-
-        private stage: PIXI.Container;
-
-        private background: PIXI.Sprite;
-
-        private filter: PIXI.filters.ColorMatrixFilter;
-
-        private container: PIXI.Container;
-
-        private bgFront: PIXI.Sprite;
-        private light2: PIXI.Sprite;
-        private light1: PIXI.Sprite;
-        private panda: PIXI.Sprite;
-
-        private count: number;
-        private switchy: boolean;
-
-        private help: PIXI.Text;
-
-        constructor() {
-
-            this.renderer = PIXI.autoDetectRenderer(800, 600);
-            document.body.appendChild(this.renderer.view);
-
-            // create the root of the scene graph
-            this.stage = new PIXI.Container();
-            this.stage.interactive = true;
-
-            // create a texture from an image path
-            var texture: PIXI.Texture = PIXI.Texture.fromImage("../../_assets/basics/bunny.png");
-
-            this.background = PIXI.Sprite.fromImage('_assets/BGrotate.jpg');
-            this.background.anchor.set(0.5);
-
-            this.background.position.x = this.renderer.width / 2;
-            this.background.position.y = this.renderer.height / 2;
-
-            this.filter = new PIXI.filters.ColorMatrixFilter();
-
-            this.container = new PIXI.Container();
-            this.container.position.x = this.renderer.width / 2;
-            this.container.position.y = this.renderer.height / 2;
-
-            this.bgFront = PIXI.Sprite.fromImage('../../_assets/SceneRotate.jpg');
-            this.bgFront.anchor.set(0.5);
-
-            this.container.addChild(this.bgFront);
-
-            this.light2 = PIXI.Sprite.fromImage('../../_assets/LightRotate2.png');
-            this.light2.anchor.set(0.5);
-            this.container.addChild(this.light2);
-
-            this.light1 = PIXI.Sprite.fromImage('../../_assets/LightRotate1.png');
-            this.light1.anchor.set(0.5);
-            this.container.addChild(this.light1);
-
-            this.panda = PIXI.Sprite.fromImage('../../_assets/panda.png');
-            this.panda.anchor.set(0.5);
-
-            this.container.addChild(this.panda);
-
-            this.stage.addChild(this.container);
-
-            this.stage.filters = [this.filter];
-
-            this.count = 0;
-            this.switchy = false;
-
-            this.stage.on('click', this.onClick);
-            this.stage.on('tap', this.onClick);
-
-
-            this.help = new PIXI.Text('Click to turn filters on / off.', { font: 'bold 12pt Arial', fill: 'white' });
-            this.help.position.y = this.renderer.height - 25;
-            this.help.position.x = 10;
-
-            this.stage.addChild(this.help);
-
-            // animate
-            this.animate();
-
-        }
-
-        private onClick = (): void => {
-
-            this.switchy = !this.switchy;
-
-            if (!this.switchy) {
-                this.stage.filters = [this.filter];
-            } else {
-                this.stage.filters = null;
-            }
-
-        }
-
-        private animate = (): void => {
-
-            this.background.rotation += 0.01;
-            this.bgFront.rotation -= 0.01;
-
-            this.light1.rotation += 0.02;
-            this.light2.rotation += 0.01;
-
-            this.panda.scale.x = 1 + Math.sin(this.count) * 0.04;
-            this.panda.scale.y = 1 + Math.cos(this.count) * 0.04;
-
-            this.count += 0.1;
-
-            var matrix = this.filter.matrix;
-
-            matrix[1] = Math.sin(this.count) * 3;
-            matrix[2] = Math.cos(this.count);
-            matrix[3] = Math.cos(this.count) * 1.5;
-            matrix[4] = Math.sin(this.count / 3) * 2;
-            matrix[5] = Math.sin(this.count / 2);
-            matrix[6] = Math.sin(this.count / 4);
-
-            this.renderer.render(this.stage);
-
-            requestAnimationFrame(this.animate);
-
-        }
-
-    }
-
-}
diff --git a/pixi.js/v3/tsconfig.json b/pixi.js/v3/tsconfig.json
deleted file mode 100644
index 3fd699ff88..0000000000
--- a/pixi.js/v3/tsconfig.json
+++ /dev/null
@@ -1,28 +0,0 @@
-{
-    "compilerOptions": {
-        "module": "commonjs",
-        "lib": [
-            "es6",
-            "dom"
-        ],
-        "noImplicitAny": true,
-        "noImplicitThis": true,
-        "strictNullChecks": false,
-        "baseUrl": "../../",
-        "typeRoots": [
-            "../../"
-        ],
-        "types": [],
-        "paths": {
-            "pixi.js": [
-                "pixi.js/v3"
-            ]
-        },
-        "noEmit": true,
-        "forceConsistentCasingInFileNames": true
-    },
-    "files": [
-        "index.d.ts",
-        "pixi.js-tests.ts"
-    ]
-}
\ No newline at end of file
diff --git a/pixi.js/v3/tslint.json b/pixi.js/v3/tslint.json
deleted file mode 100644
index dca585dadc..0000000000
--- a/pixi.js/v3/tslint.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-    "extends": "../tslint.json",
-    "rules": {
-        "forbidden-types": false,
-        "no-empty-interface": false,
-        "unified-signatures": false
-    }
-}