pixi.js/trim/index2.html at ba6b413c51573572ca6d1c229301380a5d7d94de

Fork: 0
mark / pixi.js
Find file
Newer
Older
pixi.js / trim / index2.html
photonstorm on 8 Jul 2014 7 KB Trim tests for Mat to review (and delete once he's happy with them).
Raw Blame History
<!DOCTYPE HTML>
<html>
<head>
    <title>Pixi Trim</title>
    <script src="../src/pixi/Pixi.js"></script>
    <script src="../src/pixi/core/Point.js"></script>
    <script src="../src/pixi/core/Rectangle.js"></script>
    <script src="../src/pixi/core/Polygon.js"></script>
    <script src="../src/pixi/core/Circle.js"></script>
    <script src="../src/pixi/core/Ellipse.js"></script>
    <script src="../src/pixi/core/Matrix.js"></script>
    <script src="../src/pixi/display/DisplayObject.js"></script>
    <script src="../src/pixi/display/DisplayObjectContainer.js"></script>
    <script src="../src/pixi/display/Sprite.js"></script>
    <script src="../src/pixi/display/SpriteBatch.js"></script>
    <script src="../src/pixi/display/MovieClip.js"></script>
    <script src="../src/pixi/filters/FilterBlock.js"></script>
    <script src="../src/pixi/text/Text.js"></script>
    <script src="../src/pixi/text/BitmapText.js"></script>
    <script src="../src/pixi/InteractionData.js"></script>
    <script src="../src/pixi/InteractionManager.js"></script>
    <script src="../src/pixi/display/Stage.js"></script>
    <script src="../src/pixi/utils/Utils.js"></script>
    <script src="../src/pixi/utils/EventTarget.js"></script>
    <script src="../src/pixi/utils/Detector.js"></script>
    <script src="../src/pixi/utils/Polyk.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLShaderUtils.js"></script>
    <script src="../src/pixi/renderers/webgl/shaders/PixiShader.js"></script>
    <script src="../src/pixi/renderers/webgl/shaders/PixiFastShader.js"></script>
    <script src="../src/pixi/renderers/webgl/shaders/StripShader.js"></script>
    <script src="../src/pixi/renderers/webgl/shaders/PrimitiveShader.js"></script>
    <script src="../src/pixi/renderers/webgl/shaders/ComplexPrimitiveShader.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLGraphics.js"></script>
    <script src="../src/pixi/renderers/webgl/WebGLRenderer.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLMaskManager.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLStencilManager.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLShaderManager.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLSpriteBatch.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLFastSpriteBatch.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/WebGLFilterManager.js"></script>
    <script src="../src/pixi/renderers/webgl/utils/FilterTexture.js"></script>
    <script src="../src/pixi/renderers/canvas/utils/CanvasMaskManager.js"></script>
    <script src="../src/pixi/renderers/canvas/utils/CanvasTinter.js"></script>
    <script src="../src/pixi/renderers/canvas/CanvasRenderer.js"></script>
    <script src="../src/pixi/renderers/canvas/CanvasGraphics.js"></script>
    <script src="../src/pixi/primitives/Graphics.js"></script>
    <script src="../src/pixi/extras/Strip.js"></script>
    <script src="../src/pixi/extras/Rope.js"></script>
    <script src="../src/pixi/extras/TilingSprite.js"></script>
    <script src="../src/pixi/extras/Spine.js"></script>
    <script src="../src/pixi/textures/BaseTexture.js"></script>
    <script src="../src/pixi/textures/Texture.js"></script>
    <script src="../src/pixi/textures/RenderTexture.js"></script>
    <script src="../src/pixi/loaders/AssetLoader.js"></script>
    <script src="../src/pixi/loaders/JsonLoader.js"></script>
    <script src="../src/pixi/loaders/AtlasLoader.js"></script>
    <script src="../src/pixi/loaders/SpriteSheetLoader.js"></script>
    <script src="../src/pixi/loaders/ImageLoader.js"></script>
    <script src="../src/pixi/loaders/BitmapFontLoader.js"></script>
    <script src="../src/pixi/loaders/SpineLoader.js"></script>
    <script src="../src/pixi/filters/AbstractFilter.js"></script>
    <script src="../src/pixi/filters/AlphaMaskFilter.js"></script>
    <script src="../src/pixi/filters/ColorMatrixFilter.js"></script>
    <script src="../src/pixi/filters/GrayFilter.js"></script>
    <script src="../src/pixi/filters/DisplacementFilter.js"></script>
    <script src="../src/pixi/filters/PixelateFilter.js"></script>
    <script src="../src/pixi/filters/BlurXFilter.js"></script>
    <script src="../src/pixi/filters/BlurYFilter.js"></script>
    <script src="../src/pixi/filters/BlurFilter.js"></script>
    <script src="../src/pixi/filters/InvertFilter.js"></script>
    <script src="../src/pixi/filters/SepiaFilter.js"></script>
    <script src="../src/pixi/filters/TwistFilter.js"></script>
    <script src="../src/pixi/filters/ColorStepFilter.js"></script>
    <script src="../src/pixi/filters/DotScreenFilter.js"></script>
    <script src="../src/pixi/filters/CrossHatchFilter.js"></script>
    <script src="../src/pixi/filters/RGBSplitFilter.js"></script>
</head>
<body>

    <script>

    loader = new PIXI.AssetLoader([ "SpriteSheet.json", "SpriteSheetTrimmed.json"]);
    loader.onComplete = onAssetsLoaded
    loader.load();

    var stage = new PIXI.Stage(0x6f6f6f);
    // renderer = PIXI.autoDetectRenderer(800, 600);
    var renderer = new PIXI.CanvasRenderer(800, 600);
    document.body.appendChild(renderer.view);

    var graphics;
    var explosion;
    var explosion2;
    var explosion3;

    function onAssetsLoaded()
    {
        var explosionTextures = [];
        var trimmedExplosionTextures = [];

        for (var i = 0; i < 26; i++)
        {
            explosionTextures.push(PIXI.Texture.fromFrame("Explosion_Sequence_A " + (i+1) + ".png"));
            trimmedExplosionTextures.push(PIXI.Texture.fromFrame("TExplosion_Sequence_A " + (i+1) + ".png"));
        }

        explosion = new PIXI.MovieClip(explosionTextures);
        explosion.animationSpeed = 0.5;
        explosion.gotoAndPlay(0);
        stage.addChild(explosion);

        explosion2 = new PIXI.MovieClip(trimmedExplosionTextures);
        explosion2.animationSpeed = 0.5;
        explosion2.position.x = 242;
        explosion2.gotoAndPlay(0);
        stage.addChild(explosion2);

        explosion3 = new PIXI.MovieClip(trimmedExplosionTextures);
        explosion3.animationSpeed = 0.5;
        explosion3.position.y = 242;
        explosion3.gotoAndPlay(0);
        stage.addChild(explosion3);

        //  Test 1: Trimmed + Scaled - WORKS
        // explosion2.scale.set(2);

        //  Test 2: Trimmed + Anchor - WORKS
        // explosion2.position.x += 120;
        // explosion2.position.y += 120;
        // explosion2.anchor.set(0.5);

        graphics = new PIXI.Graphics();
        stage.addChild(graphics);

        requestAnimFrame( animate );
    }

    function animate()
    {
        graphics.clear();
        graphics.lineStyle(1, 0x0000FF, 1);
        graphics.drawRect(explosion.x, explosion.y, explosion.width, explosion.height);

        //  The trimmed MovieClips
        graphics.lineStyle(1, 0xFF00FF, 1);
        graphics.drawRect(explosion2.x, explosion2.y, explosion2.width, explosion2.height);
        graphics.drawRect(explosion3.x, explosion3.y, explosion3.width, explosion3.height);

        // var bounds = explosion2.getBounds();
        // graphics.lineStyle(1, 0xffff00, 1);
        // graphics.drawRect(bounds.x, bounds.y, bounds.width, bounds.height);

        renderer.render(stage);
        requestAnimFrame(animate);
    }
    </script>

    <p><a href="index.html">Test 1</a></p>
    <p><a href="index2.html">Test 2</a></p>
    <p><a href="index3.html">Test 3</a></p>

    </body>
</html>