忍者ブログ

Memeplexes

プログラミング、3DCGとその他いろいろについて

StageXL 0.12.0でキャンバスに描画が出来ない時には

StageXLの最新バージョン0.12.0にして描画ができなくなってしまいハマったので解決方法をメモしておきます。
解決方法はこれです。

描画し終わった後、applyCache()メソッドを呼ぶ。

詳しくは以下をお読みください。


最新版ではRenderEngineがWebGLに

最新版のStageXL0.12.0では描画がデフォルトでWebGLになっています。
今までは描画エンジンがCanvas2Dだったので、WebGLになってパフォーマンスが向上したということでしょうか?
しかしそのせいで、今まで動いていたコードが動かなくなってしまった、ということもありえます。

今まで動いていたコード

import 'dart:html';
import 'package:stagexl/stagexl.dart';

void main() {
  RenderLoop renderLoop = new RenderLoop();
  CanvasElement canvas = querySelector("#canvas");
  Stage stage = new Stage(canvas);
  Sprite sprite = new Sprite();
  sprite.graphics.rect(0, 0, canvas.width, canvas.height);
  sprite.graphics.fillColor(Color.SkyBlue);
  stage.addChild(sprite);
  renderLoop.addStage(stage);
}

これはキャンバスいっぱいにSkyBlueの空色を描くコードです。
しかし…これはバージョンを0.11.0から0.12.0に変更すると、全く何も描かれなくなってしまいます。
キャンバスは真っ白のままです。

解決するには次のように、描画処理の後applyCache()を呼んでみましょう。

最新版0.12.0でも動くコード


import 'dart:html';
import 'package:stagexl/stagexl.dart';

void main() {
  RenderLoop renderLoop = new RenderLoop();
  CanvasElement canvas = querySelector("#canvas");
  Stage stage = new Stage(canvas);
  Sprite sprite = new Sprite();
  sprite.graphics.rect(0, 0, canvas.width, canvas.height);
  sprite.graphics.fillColor(Color.SkyBlue);
  sprite.applyCache(0, 0, canvas.width, canvas.height);
  stage.addChild(sprite);
  renderLoop.addStage(stage);
}

これできちんとキャンバスが空色になります!

拍手[0回]

PR