Examples with Surface playn.core.Surface used on opensource projects

Example 1 with Surface

use of playn.core.Surface in project playn by threerings.

the class SubImageTest method init.

@Override
public void init() {
    // create a canvas image and draw subimages of that
    int r = 30;
    CanvasImage cimg = graphics().createImage(2 * r, 2 * r);
    Canvas canvas = cimg.canvas();
    canvas.setFillColor(0xFF99CCFF);
    canvas.fillCircle(r, r, r);
    fragment("CanvasImage", cimg, 250, 160);
    // draw subimages of a simple static image
    Image orange = assets().getImage("images/orange.png");
    orange.addCallback(new Callback<Image>() {

        public void onSuccess(Image orange) {
            fragment("Image", orange, 250, 10);
            float pw = orange.width(), ph = orange.height(), phw = pw / 2, phh = ph / 2;
            final Image.Region orangerep = orange.subImage(0, phh / 2, pw, phh);
            orangerep.setRepeat(true, true);
            // tile a sub-image, oh my!
            ImageLayer tiled = graphics().createImageLayer(orangerep);
            tiled.setSize(100, 100);
            addTest(10, 10, tiled, "ImageLayer tiled with subimage of Image");
            // use a subimage as a fill pattern
            CanvasImage pat = graphics().createImage(100, 100);
            pat.canvas().setFillPattern(orangerep.toPattern());
            pat.canvas().fillRect(0, 0, 100, 100);
            addTest(10, 160, graphics().createImageLayer(pat), "Canvas filled with subimage");
            // tile a sub-image of a surface image, oh my!
            SurfaceImage surf = graphics().createSurface(orange.width(), orange.height());
            surf.surface().drawImage(orange, 0, 0);
            Image.Region surfrep = surf.subImage(0, phh / 2, pw, phh);
            surfrep.setRepeat(true, true);
            ImageLayer surftiled = graphics().createImageLayer(surfrep);
            surftiled.setSize(100, 100);
            addTest(10, 300, surftiled, "ImageLayer tiled with subimage of SurfaceImage");
            // draw a subimage to a canvas
            CanvasImage split = graphics().createImage(orange.width(), orange.height());
            split.canvas().drawImage(orange.subImage(0, 0, phw, phh), phw, phh);
            split.canvas().drawImage(orange.subImage(phw, 0, phw, phh), 0, phh);
            split.canvas().drawImage(orange.subImage(0, phh, phw, phh), phw, 0);
            split.canvas().drawImage(orange.subImage(phw, phh, phw, phh), 0, 0);
            addTest(140, 10, graphics().createImageLayer(split), "draw subimg into Canvas", 80);
            // draw a subimage in an immediate layer
            final Image.Region orangemid = orange.subImage(0, phh / 2, pw, phh);
            ImmediateLayer imm = graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

                public void render(Surface surf) {
                    surf.drawImage(orangemid, 0, 0);
                    surf.drawImage(orangemid, orangemid.width(), 0);
                    surf.drawImage(orangemid, 0, orangemid.height());
                    surf.drawImage(orangemid, orangemid.width(), orangemid.height());
                }
            });
            addTest(130, 100, imm, 2 * orangemid.width(), 2 * orangemid.height(), "draw subimg into Surface", 100);
            // draw a subimage whose bounds oscillate
            osci = orange.subImage(0, 0, orange.width(), orange.height());
            addTest(130, 190, graphics().createImageLayer(osci), "ImageLayer with subimage with changing width", 100);
        }

        public void onFailure(Throwable err) {
            log().warn("Failed to load orange image", err);
        }
    });
}

Example 2 with Surface

use of playn.core.Surface in project playn by threerings.

the class ShaderTest method init.

protected void init(final Image orange) {
    // add the normal orange
    float dx = orange.width() + 25;
    graphics().rootLayer().addAt(graphics().createImageLayer(orange), 25, 25);
    // add a sepia toned orange
    ImageLayer olayer = graphics().createImageLayer(orange);
    olayer.setShader(createSepiaShader());
    graphics().rootLayer().addAt(olayer, 25 + dx, 25);
    // create a shader that rotates things around the (3D) y axis
    IndexedTrisShader rotShader = new IndexedTrisShader(graphics().ctx()) {

        @Override
        protected String vertexShader() {
            return VERT_UNIFS + "uniform float u_Angle;\n" + "uniform vec2 u_Eye;\n" + VERT_ATTRS + PER_VERT_ATTRS + VERT_VARS + "void main(void) {\n" + // Rotate the vertex per our 3D rotation
            "  float cosa = cos(u_Angle);\n" + "  float sina = sin(u_Angle);\n" + "  mat4 rotmat = mat4(\n" + "    cosa, 0, sina, 0,\n" + "    0,    1, 0,    0,\n" + "   -sina, 0, cosa, 0,\n" + "    0,    0, 0,    1);\n" + "  vec4 pos = rotmat * vec4(a_Position - u_Eye, 0, 1);\n" + // Perspective project the vertex back into the plane
            "  mat4 persp = mat4(\n" + "    1, 0, 0, 0,\n" + "    0, 1, 0, 0,\n" + "    0, 0, 1, -1.0/200.0,\n" + "    0, 0, 0, 1);\n" + "  pos = persp * pos;\n" + "  pos /= pos.w;\n" + "  pos += vec4(u_Eye, 0, 0);\n;" + // Transform the vertex per the normal screen transform
            "  mat4 transform = mat4(\n" + "    a_Matrix[0],      a_Matrix[1],      0, 0,\n" + "    a_Matrix[2],      a_Matrix[3],      0, 0,\n" + "    0,                0,                1, 0,\n" + "    a_Translation[0], a_Translation[1], 0, 1);\n" + "  pos = transform * pos;\n" + "  pos.x /= (u_ScreenSize.x / 2.0);\n" + "  pos.y /= (u_ScreenSize.y / 2.0);\n" + "  pos.z /= (u_ScreenSize.y / 2.0);\n" + "  pos.x -= 1.0;\n" + "  pos.y = 1.0 - pos.y;\n" + "  gl_Position = pos;\n" + VERT_SETTEX + VERT_SETCOLOR + "}";
        }

        @Override
        protected Core createTextureCore() {
            return new RotCore(vertexShader(), textureFragmentShader());
        }

        class RotCore extends ITCore {

            private final Uniform1f uAngle = prog.getUniform1f("u_Angle");

            private final Uniform2f uEye = prog.getUniform2f("u_Eye");

            public RotCore(String vertShader, String fragShader) {
                super(vertShader, fragShader);
            }

            @Override
            public void activate(int fbufWidth, int fbufHeight) {
                super.activate(fbufWidth, fbufHeight);
                uAngle.bind(elapsed * FloatMath.PI);
                uEye.bind(0, orange.height() / 2);
            }
        }
    };
    // add an image that is rotated around the (3D) y axis
    CanvasImage image = graphics().createImage(orange.width(), orange.height());
    image.canvas().setFillColor(0xFF99CCFF);
    image.canvas().fillRect(0, 0, image.width(), image.height());
    image.canvas().drawImage(orange, 0, 0);
    ImageLayer rotlayer = graphics().createImageLayer(image);
    rotlayer.setShader(rotShader);
    graphics().rootLayer().addAt(rotlayer, 25 + 2 * dx + orange.width(), 25);
    // add an immediate layer that draws a quad and an image (which should rotate)
    ImmediateLayer irotlayer = graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFFCC99FF);
            surf.fillRect(0, 0, orange.width(), orange.height());
            surf.drawImage(orange, 0, 0);
        }
    });
    irotlayer.setShader(rotShader);
    graphics().rootLayer().addAt(irotlayer, 25 + 3 * dx + orange.width(), 25);
}

Example 3 with Surface

use of playn.core.Surface in project playn by threerings.

the class SurfaceDrawLayerTest method addTests.

protected void addTests(Image orange) {
    float owidth = orange.width(), oheight = orange.height();
    float twidth = 3 * owidth, theight = oheight;
    // create a small subgraph of a couple of image layers
    final GroupLayer group = graphics().createGroupLayer();
    group.addAt(graphics().createImageLayer(orange), owidth / 2, 0);
    rotator = graphics().createImageLayer(orange);
    group.addAt(rotator.setOrigin(owidth / 2, oheight / 2), 2 * owidth, oheight / 2);
    rotator.setRotation(FloatMath.PI / 2);
    // add the subgraph to the scene directly
    final float gap = 25;
    float x = gap, y = gap;
    graphics().rootLayer().addAt(group, x, y);
    addDescrip("Added to rootLayer", x, y + theight + gap, twidth);
    x += twidth + gap;
    // render the subgraph in an immediate layer, with a few variants
    graphics().rootLayer().addAt(graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            // since the group layer has a +gap+gap offset, we adjust for that here
            surf.translate(-gap, -gap).drawLayer(group);
        }
    }), x, y);
    addDescrip("ImmediateLayer drawLayer", x, y + theight + gap, twidth);
    x += twidth + gap;
    graphics().rootLayer().addAt(graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.translate(-gap, -gap).drawLayer(group);
        }
    }).setTint(0xFFDD0000), x, y);
    addDescrip("ImmediateLayer drawLayer (with tint)", x, y + theight + gap, twidth);
    x += twidth + gap;
    graphics().rootLayer().addAt(graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.translate(-gap, -gap).drawLayer(group);
        }
    }).setShader(createSepiaShader()), x, y);
    addDescrip("ImmediateLayer drawLayer (with sepia shader)", x, y + theight + gap, twidth);
    x += twidth + gap;
    // lastly create a surface image and render the layer thereinto; this one won't animate
    SurfaceImage image = graphics().createSurface(twidth, theight);
    image.surface().translate(-gap, -gap).drawLayer(group);
    graphics().rootLayer().addAt(graphics().createImageLayer(image), x, y);
    addDescrip("SurfaceImage drawLayer (won't animate)", x, y + theight + gap, twidth);
    x += twidth + gap;
}

Example 4 with Surface

use of playn.core.Surface in project playn by threerings.

the class SurfaceTest method addTests.

protected void addTests(final Image orange, Image tile) {
    final Pattern pattern = tile.toPattern();
    // make samples big enough to force a buffer size increase
    final int samples = 128, hsamples = samples / 2;
    final float[] verts = new float[(samples + 1) * 4];
    final int[] indices = new int[samples * 6];
    tessellateCurve(0, 40 * (float) Math.PI, verts, indices, new F() {

        public float apply(float x) {
            return (float) Math.sin(x / 20) * 50;
        }
    });
    float ygap = 20, ypos = 10;
    // draw some wide lines
    ypos = ygap + addTest(10, ypos, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            drawLine(surf, 0, 0, 50, 50, 15);
            drawLine(surf, 70, 50, 120, 0, 10);
            drawLine(surf, 0, 70, 120, 120, 10);
        }
    }, 120, 120, "drawLine with width");
    ypos = ygap + addTest(20, ypos, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFF0000FF).fillRect(0, 0, 100, 25);
            // these two alpha fills should look the same
            surf.setFillColor(0x80FF0000).fillRect(0, 0, 50, 25);
            surf.setAlpha(0.5f).setFillColor(0xFFFF0000).fillRect(50, 0, 50, 25).setAlpha(1f);
        }
    }, 100, 25, "left and right half both same color");
    ypos = ygap + addTest(20, ypos, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFF0000FF).fillRect(0, 0, 100, 50);
            surf.setAlpha(0.5f);
            surf.drawImage(orange, 55, 5);
            surf.fillRect(0, 50, 50, 50);
            surf.drawImage(orange, 55, 55);
            surf.setAlpha(1f);
        }
    }, 100, 100, "fillRect and drawImage at 50% alpha");
    ypos = 10;
    ypos = ygap + addTest(160, ypos, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            // fill some shapes with patterns
            surf.setFillPattern(pattern).fillRect(10, 0, 100, 100);
            // use same fill pattern for the triangles
            surf.translate(0, 160);
            // render a sliding window of half of our triangles to test the slice rendering
            surf.fillTriangles(verts, offset * 4, (hsamples + 1) * 4, indices, offset * 6, hsamples * 6, offset * 2);
            offset += doff;
            if (offset == 0)
                doff = 1;
            else if (offset == hsamples)
                doff = -1;
        }

        private int offset = 0, doff = 1;
    }, 120, 210, "ImmediateLayer patterned fillRect, fillTriangles");
    SurfaceImage patted = graphics().createSurface(100, 100);
    patted.surface().setFillPattern(pattern).fillRect(0, 0, 100, 100);
    ypos = ygap + addTest(170, ypos, graphics().createImageLayer(patted), "SurfaceImage patterned fillRect");
    ypos = 10;
    // fill a patterned quad in a clipped group layer
    final int twidth = 150, theight = 75;
    GroupLayer group = graphics().createGroupLayer();
    ypos = ygap + addTest(315, 10, group, twidth, theight, "Clipped pattern should not exceed grey rectangle");
    group.add(graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFFCCCCCC).fillRect(0, 0, twidth, theight);
        }
    }));
    group.add(graphics().createImmediateLayer(twidth, theight, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillPattern(pattern).fillRect(-10, -10, twidth + 20, theight + 20);
        }
    }));
    // draw some randomly jiggling dots inside a bounded region
    dotBox = new Rectangle(315, ypos, 200, 100);
    ypos = ygap + addTest(dotBox.x, dotBox.y, new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            surf.setFillColor(0xFFCCCCCC).fillRect(0, 0, dotBox.width, dotBox.height);
        }
    }, dotBox.width, dotBox.height, "Randomly positioned SurfaceImages");
    for (int ii = 0; ii < 10; ii++) {
        SurfaceImage dot = graphics().createSurface(10, 10);
        dot.surface().setFillColor(0xFFFF0000);
        dot.surface().fillRect(0, 0, 5, 5);
        dot.surface().fillRect(5, 5, 5, 5);
        dot.surface().setFillColor(0xFF0000FF);
        dot.surface().fillRect(5, 0, 5, 5);
        dot.surface().fillRect(0, 5, 5, 5);
        ImageLayer dotl = graphics().createImageLayer(dot);
        dotl.setTranslation(dotBox.x + random() * (dotBox.width - 10), dotBox.y + random() * (dotBox.height - 10));
        dots.add(dotl);
        // System.err.println("Created dot at " + dotl.transform());
        graphics().rootLayer().add(dotl);
    }
    // add a surface layer that is updated on every call to paint (a bad practice, but one that
    // should actually work)
    paintUpped = graphics().createSurface(100, 100);
    ypos = ygap + addTest(315, ypos, graphics().createImageLayer(paintUpped), "SurfaceImage updated in paint()");
}

Example 5 with Surface

use of playn.core.Surface in project playn by threerings.

the class ClippedGroupTest method init.

@Override
public void init() {
    GroupLayer rootLayer = graphics().rootLayer();
    final CanvasImage img = graphics().createImage(100, 50);
    img.canvas().setFillGradient(graphics().createLinearGradient(0, 0, 100, 100, new int[] { 0xFF0000FF, 0xFF00FF00 }, new float[] { 0, 1 }));
    img.canvas().fillRoundRect(0, 0, 100, 50, 10);
    // create an immediate layer that draws the boundaries of our clipped group layers
    rootLayer.add(graphics().createImmediateLayer(new ImmediateLayer.Renderer() {

        public void render(Surface surf) {
            // draw the border of our various clipped groups
            surf.setFillColor(0xFF000000);
            outline(surf, g1);
            outline(surf, g2);
            outline(surf, g3);
            outline(surf, g4);
            outline(surf, g5);
        }

        protected void outline(Surface surf, Layer.HasSize ly) {
            drawRect(surf, ly.tx() - ly.originX(), ly.ty() - ly.originY(), ly.width(), ly.height());
        }

        protected void drawRect(Surface surf, float x, float y, float w, float h) {
            float left = x - 1, top = y - 1, right = x + w + 2, bot = y + h + 2;
            surf.drawLine(left, top, right, top, 1);
            surf.drawLine(right, top, right, bot, 1);
            surf.drawLine(left, top, left, bot, 1);
            surf.drawLine(left, bot, right, bot, 1);
        }
    }));
    // create a group layer with a static clip, and a rotating image inside
    g1 = graphics().createGroupLayer(100, 100);
    // test the origin not being at zero/zero
    g1.setOrigin(50, 0);
    i1 = graphics().createImageLayer(img);
    i1.setOrigin(i1.width() / 2, i1.height() / 2);
    g1.addAt(i1, 50, 50);
    rootLayer.addAt(g1, 75, 25);
    // static image inside and animated clipped width
    g2 = graphics().createGroupLayer(100, 100);
    g2.setOrigin(50, 50);
    g2.addAt(graphics().createImageLayer(img), (100 - img.width()) / 2, (100 - img.height()) / 2);
    rootLayer.addAt(g2, 200, 75);
    // nest a group layer inside with an animated origin
    inner = graphics().createGroupLayer();
    inner.addAt(graphics().createImageLayer(img), (100 - img.width()) / 2, (100 - img.height()) / 2);
    g3 = graphics().createGroupLayer(100, 100);
    g3.add(inner);
    rootLayer.addAt(g3, 275, 25);
    // create a group layer with a static clip, and a rotating surface image inside
    g4 = graphics().createGroupLayer(100, 100);
    SurfaceImage si = graphics().createSurface(100, 50);
    si.surface().setFillColor(0xFF99CCFF).fillRect(0, 0, 100, 50);
    s1 = graphics().createImageLayer(si);
    s1.setOrigin(s1.width() / 2, s1.height() / 2);
    g4.addAt(s1, 50, 50);
    rootLayer.addAt(g4, 400, 25);
    // put a large clipped group inside a small one
    g5Inner = graphics().createGroupLayer(150, 150);
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), -img.width(), -img.height());
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), -img.width(), img.height());
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), img.width(), -img.height());
    g5Inner.addAt(graphics().createImageLayer(img).setScale(2), img.width(), img.height());
    g5 = graphics().createGroupLayer(100, 100);
    g5.addAt(g5Inner, -25, -25);
    rootLayer.addAt(g5, 525, 25);
}