iio Engineを試してみた - 奈良橿原プログラミング・アカデミー技術ノート

まずは「Download Full SDK」ボタンを押してダウンロード。SDKと名前がついてますが、ただのjsライブラリです。

はろーわーるど

まずはGetting Startをやってみました。
http://www.programming-academy.jp/samples/iioengine/hello.html

<!DOCTYPE html>

<meta charset="utf-8">
<title>iio Engine sample - hello</title>

<body>
<script src="../../lib/iioEngineSDK/core/iioEngine.js"></script>
<script>
  Helloiio = function(io) {
    io.addObj(new iio.ioText("Hello iio!!", io.canvas.center)
      .setFont("30px Consolas")
      .setTextAlign("center")
      .setFillStyle("black"));
  };
  iio.start(Helloiio);
</script>
</body>

最初、いつものクセでbody要素を省略していたのですが、それだと動いてくれませんでした。

上記のようにiio.startにアプリ関数しか指定しない場合、body要素いっぱいに広がったcanvasが自動的に配置されるのですが、iio.startメソッドには、

body要素いっぱいにcanvasを自動配置する
canvas要素のidを指定する
canvasの親となる要素のidを指定する

という3通りの使い方があります。それぞれ、次のようにパラメータを指定して利用します。第3・第4引数があるかないかで、idがキャンバス自体を指すのかその親要素を指すのか意味が違ってくる、ちょっとわかりにくいAPIです。

  iio.start(Helloiio); // bodyいっぱいにcanvas配置
  iio.start(Helloiio, "hello-canvas"); // canvas指定
  iio.start(Helloiio, "container", 300, 450); // canvasの親指定

ただ、3つ目の親要素指定にはバグがあるようで、iioEngine.jsの2188行目（v1.2.2の場合）を次のように編集してあげる必要があります。

// else document.getElementById(id).appendChild(this.cnvs[i])
else document.getElementById(attachId).appendChild(this.cnvs[i])

図形などを配置してみる

キャンバス中央に四角形を描いてみます。
http://www.programming-academy.jp/samples/iioengine/addObj01.html

app = function(io) {
  io.addObj(new iio.ioRect(io.canvas.center, 80)
    .setStrokeStyle("#c71585", 3)
    .setFillStyle("#ffc0cb")
    .setShadow("#ccc", 5, 5, 5));
};
iio.start(app);

配置場所は座標で指定することもできます。指定するのは図形の中心座標。左上頂点じゃないので注意です。
http://www.programming-academy.jp/samples/iioengine/addObj02.html

io.addObj(new iio.ioRect(55, 55, 100)
  .setStrokeStyle("#ccc", 1));

円とか多角形も表示してみます。
http://www.programming-academy.jp/samples/iioengine/addObj03.html

まずは円。ついでですが、位置指定はこんなかんじで中心を起点に算出することもできます。

io.addObj(new iio.ioCircle(
    io.canvas.center.x, 
    io.canvas.center.y - 30, 
    50)
  .setFillStyle("rgba(255 , 0, 0, .5)"));
io.addObj(new iio.ioCircle(
    io.canvas.center.x - 30 * Math.cos(Math.PI / 6), 
    io.canvas.center.y + 30 * Math.sin(Math.PI / 6),
    50)
  .setFillStyle("rgba(0 , 255, 0, .5)"));
io.addObj(new iio.ioCircle(
    io.canvas.center.x + 30 * Math.cos(Math.PI / 6), 
    io.canvas.center.y + 30 * Math.sin(Math.PI / 6), 
    50)
  .setFillStyle("rgba(0 , 0, 255, .5)"));

続いて多角形。正五角形を描いてみました。多角形の位置座標は、その多角形を包含する矩形の左上頂点でした。まあ多角形の中心座標とか言われてもピンとこないですしね。

io.addObj(new iio.ioPoly(10, 10, [90, 47, 55, 94, 0, 76, 0, 18, 55, 0])
  .setStrokeStyle("#ff8c00", 3));

画像の配置

画像は、矩形オブジェクトを作成してそこに設定します。位置がわかりやすいように矩形に枠線をつけておきました。
http://www.programming-academy.jp/samples/iioengine/addObj04.html

var img = new Image();
img.src = "images/pipo-enemy036.png";
img.onload = function() {
  io.addObj(new iio.ioRect(65, 170, 120)
    .setStrokeStyle("#ccc", 1)
    .addImage(img));
};

図形を動かす

オブジェクトにはenableKinematicsメソッドがあって、これを呼び出すことでsetVelとsetTorqueが使えるようになります。setVel(x, y) で移動速度、setTorque(deg)で回転速度を指定できます。あとはフレームレートを設定すれば、オブジェクトは動き始めます。
http://www.programming-academy.jp/samples/iioengine/kinematics01.html

app = function(io) {
   
  io.addObj(new iio.ioRect(50, 50, 60)
    .setStrokeStyle("#c71585", 3)
    .enableKinematics()
    .setVel(2, 0)
    .setTorque(.05));
  
  io.setFramerate(50);
};
iio.start(app);

オブジェクトごとに別々のフレームレートを設定することも可能。io.setFramerateメソッドは第2引数にオブジェクトを指定することで、オブジェクトの追加とフレームレートの設定を同時に実行します。
http://www.programming-academy.jp/samples/iioengine/kinematics02.html

app = function(io) {
    
  var rect1 = new iio.ioRect(50, 50, 60)
    .setStrokeStyle("#c71585", 3)
    .enableKinematics()
    .setVel(2, 0)
    .setTorque(.05);

  var rect2 = new iio.ioRect(50, 150, 60)
    .setStrokeStyle("#4169e1", 3)
    .enableKinematics()
    .setVel(2, 0)
    .setTorque(.05);

  io.setFramerate(50, rect1);
  io.setFramerate(25, rect2);
};
iio.start(app);

とりあえずざっと触ってみただけですが、これからも折を見て使ってみる予定です。物理演算のサンプルもちらっと見ましたが、ほとんどbox2dをそのまま使ってるだけのようなコードで、enchant.jsを使ったほうが簡単に書けそうな印象。