Question

I want to do pixel level graphics on a PlayN game whose main target is HTML5. However, PlayN’s Canvas object does not provide access to the CanvasPixelArray class, or the putImageData and getImageData functions. I’m worried that using drawPoint for each pixel will be pretty slow; is there a better way of doing it?

Answer 1

There’s no pixel manipulation API for PlayN at the moment.

If you only want to target HTML5, you can use the GWT methods to create and manipulate ImageData objects and then inject those into PlayN via a mechanism I recently added for transforming images.

// use this canvas and context to create as many image data objects as you want
CanvasElement canvas = Document.get().createElement("canvas").<CanvasElement>cast();
Context2d ctx = canvas.getContext2d();
final ImageData data = ctx.createImageData(width, height);
// push those pixels

// use this PlayN image as a factory for creating PlayN images from your ImageData objects
CanvasImage image = PlayN.graphics().createImage(1, 1); // dummy image
Image pixelImage = image.transform(new HtmlBitmapTransformer() {
  public ImageElement transform(ImageElement elem) {
    // we ignore the element passed in and just create a new CanvasElement
    // and draw our bitmap data on it
    CanvasElement canvas = Document.get().createElement("canvas").<CanvasElement>cast();
    canvas.setWidth(width);
    canvas.setHeight(height);
    canvas.getContext2d().putImageData(data, 0, 0);
    return canvas;
  }
});

It’s a bit of a hack. At some point, I’ll add a mechanism for obtaining and manipulating pixel data for an image that is as fast as could be hoped for the backends that can support it.