HTML5テクニカルノート

EaselJS NEXT: StageGL()コンストラクタ

ID: FN1705010
Technique: HTML5 / JavaScript
Library: EaselJS NEXT

StageGLインスタンスは、WebGLに最適化された表示リストの最上位となるContainerオブジェクトです。これまでのStageに替えて、基本的に同じように使えます。ただし、WebGLの仕様にもとづく注意点はあります。

StageGL()コンストラクタ
文法	StageGL(canvas: HTMLCanvasElement \| String \| Object, options: Object): StageGL
概要	WebGLで描くStageGLインスタンスをつくって返す。
引数	canvas － `<canvas>`要素の参照または要素の`id`属性を示す文字列。 options －つぎのようなオプションのプロパティを定めたオブジェクト。このオブジェクトそのものを含めて、いずれも省略して構わない。ブラウザによって対応しないオプションもある。 preserveBuffer: Boolean = false `true`を与えると、Canvasは前の描画を残したまま重ねて領域を描く。塗り重ねる効果が得られる。その場合の負荷は高まる。 antialias: Boolean = false ブラウザのWebGLがアンチエイリアシングを行う(`true`)か行わないか(`false`)を定める。アンチエイリアシングはイメージを滑らかにするため、2の累乗サイズのテクスチャによる線形ピクセルサンプリングを用いる。 transparent: Boolean = false `true`にするとCanvasが透過する。負荷は極めて高いので、気をつけて使うのがよい。 premultiply: Boolean = false 色の扱いについて、`true`にするとシェーダは先に乗算されたアルファを考慮するものとされる。他の素材とのハロー効果を避けることに役立つものの、別の素材と問題が起こることもある。 autoPurge: Integer = 1200 使われていないテクスチャは、`StageGL.purgeTextures()`メソッドにより`autoPurge` / 2の描画更新時ごとに破棄される。

説明

StageGLインスタンスは、表示リストの最上位につくられるWebGLに最適化されたContainerオブジェクトです。Ticker.tickイベントでStageGL()コンストラクタに渡した第1引数のCanvasオブジェクトが描き直されます。ただし、WebGLと互換性のない表示オブジェクトは描かれません。デバイスやブラウザがWebGLに対応していないときは、自動的に2Dレンダリングコンテキスト(CanvasRenderingContext2D)に描画されます。

StageGLの描画について確認しておくこと

ShapeとShadow、およびTextインスタンスは、表示リストに加えただけでは表示されない。
前記のWebGLで表示できないオブジェクトは、いずれもキャッシュすることにより描画される(DisplayObject.cache()メソッド参照)。
ImageオブジェクトはWebGLのテクスチャとしてラップされる。グラフィックスカードは、扱えるテクスチャの数にかぎりがある。数が多すぎると、処理の速さは大きく損なわれる。
キャッシュひとつひとつがテクスチャとして数えられる。SpriteSheetやSpriteSheetBuilderを使うことは、テクスチャの数が減らすうえで望ましい。
イメージノード(DOMの<Image>要素または<canvas>要素)を複数のStageGLインスタンスで使うときは要素を複製しなければならない。そうしないと、GPUがテクスチャを読み込んだり参照するときに問題が生じる。
StageGLインスタンスがつくられたあと、<canvas>要素の大きさを変えたとき表示に正しく反映されない問題を避けるには、StageGL.updateViewport()メソッドを呼び出す。メモリのWebGLコンテキストのサイズが改められる。
テクスチャメモリを手動で厳密に管理すれば最高のパフォーマンスが得られる。けれど、デフォルトでも自動で適切に管理される(StageGL.releaseTexture()メソッド参照)。

例

つぎのコードは、StageGLインスタンスの子にBitmapオブジェクトを加え、Ticker.tickイベントで水平に動かします。


var stage = new createjs.StageGL('myCanvas');
var image = new createjs.Bitmap('image.png');
stage.addChild(image);
createjs.Ticker.addEventListener('tick', handleTick);
function handleTick(eventObject) {
	image.x += 10;
	stage.update();
}

[参考] 「CreateJS: StageGL ー EaselJSのWebGL対応が新たに」、「CreateJS次期バージョンのStageGLでStageを置き替える」。

作成者: 野中文雄
作成日: 2016年5月25日