ALGO

ここではコアとなるALGOクラスの使い方を説明します。

このクラスをnew ALGO()と宣言すると、指定したcanvasの初期化や各種プロパティとイベントの付与、WebGLレンダラーの作成が行われます。 プロパティやイベントについては下記をご覧下さい。

ex.

// initialize
var param = {
  id: 'canvas',
  width: window.innerWidth,
  height: window.innerHeight,
  backgroundAuto: true
};

// scene
var algo = new ALGO( param );
algo.background = 0xffffff;

// display object
var circle;

// setup
algo.bind('setup', function(){
  circle = new ALGO.Circle( 300, 300, 100 );
  circle.color = 0x000000;
  algo.add( circle );
});

// frame
algo.bind('frame', function(){
circle.x += 0.1;
});

// resize
algo.bind('resize', function(){
  var w = window.innerWidth;
  var h = window.innerHeight;
  algo.size( w, h );
});

Property

.width

ステージの横幅を指定します

.height

ステージの高さを指定します

.blendMode

ステージのブレンドモードを変更します

  • ALGO.BLEND_NONE
  • ALGO.BLEND_ADD
  • ALGO.BLEND_MULTIPLY
  • ALGO.BLEND_SCREEN
  • ALGO.BLEND_ALPHA

.background( hex )

hex --- 0xffffff のような16進数で指定

毎フレームの画面更新を指定した色で行います

var param = {...};
var algo = new ALGO( param );
algo.background( 0xffffff );

.backgroundAlpha( alpha )

alpha --- 0 から 1 の間で指定

毎フレームの画面更新の濃さを変更します

var param = {...};
var algo = new ALGO( param );
algo.backgroundAlpha( 0.3 );

.backgroundAuto

毎フレームの画面更新を自動で行わなくします

.framerate

フレームレートを変更します。(1 - 60 まで)

.circleResolution

円の分割数を変更します

.canvas

ALGO.JSを適用するキャンバスを指定します。(セットアップ後の変更できるかは未確認)

.displayObjects

ステージ上に作成されている表示オブジェクトを返します

.children

ステージ上に作成されている表示オブジェクトを返します

Method

.bind

イベントを監視します

.unbind

イベントを監視から外します

.size

ステージのサイズを変更します

.add

ステージに表示オブジェクトを追加します

.remove

ステージから表示オブジェクトを削除します

.readPixels

ステージのピクセルを取得します

.setBackgroundAuto

backgroundAutoを変更します。(仕様策定中)

Event

.bind('setup', function(){...})

初期化のタイミングで実行されます

.bind('frame', function(){...})

毎フレーム実行されます

.bind('destroy', function(){...})

作成したALGO.JSクラスを破棄します

.bind('mouseover', function(){...})

表示オブジェクトにマウスオーバーしたタイミングで実行されます

.bind('mouseout', function(){...})

表示オブジェクトからマウスオーバーしたタイミングで実行されます

.bind('mousedown', function(){...})

表示オブジェクトにマウスダウンしたタイミングで実行されます

.bind('mouseup', function(){...})

表示オブジェクトからマウスアップしたタイミングで実行されます

.bind('mousemove', function(){...})

ステージ上でマウスが動いたタイミングで実行されます

.bind('keydown', function(){...})

キーが押されたタイミングで実行されます

.bind('keyup', function(){...})

キーが離されたタイミングで実行されます

.bind('resize', function(){...})

ステージがリサイズされたタイミングで実行されます