canvas - PlayN のピクセルレベルのグラフィック

Question

メイン ターゲットが HTML5 である PlayN ゲームでピクセル レベルのグラフィックスを作成したいと考えています。ただし、PlayN のオブジェクトは、クラスや関数Canvasへのアクセスを提供しません。各ピクセルの使用がかなり遅くなるのではないかと心配しています。それを行うより良い方法はありますか？CanvasPixelArrayputImageDatagetImageDatadrawPoint

Answer 1

現在、PlayN のピクセル操作 API はありません。

HTML5 のみをターゲットにしたい場合は、GWT メソッドを使用して ImageData オブジェクトを作成および操作し、最近追加した画像変換用のメカニズムを介してそれらを PlayN に挿入できます。

// 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;
  }
});

ちょっとしたハックです。ある時点で、画像のピクセル データを取得して操作するためのメカニズムを追加する予定です。このメカニズムは、サポートできるバックエンドに期待できるほど高速です。