[enchant.js] 今までのサンプル

jsdo.itに登録したサンプルを公開しておきます。

スロットみたいに回転するやつ
http://jsdo.it/anagaoka/5pWv

画像ボタン、オンマウスで切り替え
http://jsdo.it/anagaoka/test_button

こんな感じで。

USB-RGB3/D購入

IOデータのUSBグラフィックアダプター USB-RGB3/Dを購入しました。
http://www.iodata.jp/product/av/ga/usb-rgb3d/

今まではACCELL UltraVideo DisplayPort to DVI Multi-Monitor Adapter
というDisplayPortをDVIx3にできるのを使ってました。
http://www.accellcables.com/products/DisplayPort/DP/dp_dvi_multimonitor.html

これはすぐれもので、PCのグラフィックを使って表示するので遅延もなく動画も
サクサク表示されるのですが、複数のモニタがPC側では１台のモニタと認識される
ので、タスクバーが全画面に表示されてしまいます。

あと、カラーの調整が自動ではいまいちでPC側での調整が必要ですが、スリープして
起動するとその設定が元に戻ってしまいいちいち設定しなおさないといけないという、
かなり面倒な事になっていました。

さらに僕はモニタ2台で使っていましたが、ダイアログは通常画面の真ん中に表示されると
思いますが、2台のモニタが1台のモニタと認識される関係上、2台のモニタの間に
表示される形となってしまってました。

ということでもろもろ面倒になってきたので、USBのグラフィックアダプターを買ったのでした。
以前はUSB2.0対応で、チップもDL-195というものが主流でしたが、最近はDL-3100という
USB3.0対応の更に性能の良いものが出てきてるみたいで、このIOデータのアダプターもそれを
採用しています。

使用しているPCは、ThinkPad T410sでUSB3.0には対応していませんが、USB2.0でも以前より
高速になっているという説明を信じて買ってみました。
構成は、T410sをドックというポートなどを拡張するものに接続していて、2ポートあるDVIに
それぞれモニタを接続、さらにUSB-RGB3/Dに別モニタを接続しています。
合計モニタ3台です。

で、結果としては全く問題なし。

YouTubeで適当な動画を表示してみましたが問題なく表示されます。
解像度が高い動画とかはもしかしたらコマ落ちもあるかもしれませんが、サブディスプレイで
使用するので動画は表示しないため僕の使用状況では問題ありません。

ただ、これはしょうがないかもしれないし前もなってましたが、スリープから復帰した時に
複数ウィンドウをそれぞれのモニタに配置していたのが、配置が変になっていることが
結構あります。
マルチディスプレイ環境は前から使ってますが、これはしょうがないのかも。
特にモニタ3台だと良くなるような気がします。

ともかく、以前の3つの問題は解決したのでよしとしよう。

[enchant.js]画像ボタン

enchant.jsで、画像のボタンの追加。
ラベルにcssクラスを設定して、あとはCSSで記述してます。
どうやらラベルは表示されると<div>になるみたいです。


enchant();
window.onload = function() {
//ゲームオブジェクトの生成
var game = new Game(320, 320);

var buttonStart = new Label();
buttonStart._element.setAttribute('class','button');
buttonStart.width = 90;
buttonStart.addEventListener(Event.TOUCH_START,function(e){
//タッチ時に処理させたいコード記入部分
alert('クリックしました');
});
game.rootScene.addChild(buttonStart);

//ゲームの開始
game.start();
};


あとはCSSでどのようにでもなるので、Javascriptは便利ですね。

enchant.jsでのゲーム作成。スロットみたいにグルグル

enchant.jsでゲーム作成することになりました。
が、わからないことだらけ。
とりあえず作成するゲームに必要なことを勉強中です。

まずは、スロットみたいに数字画像を回転しているように
見せるサンプル。
縦に1,2,1と並べた画像をimage.gifという名前で作成しています。


enchant();
window.onload = function() {
//ゲームオブジェクトの生成
var game = new Game(320, 320);
game.fps = 32;
game.preload ('image.gif');

game.onload = function() {
//サーフェイスの生成
var surface = new Surface(32, 32);
//回転させる数字画像
var numimg = game.assets['image.gif'];

//サーフェイスに1を描画
surface.draw(numimg, 0, 0, 32, 32, 0, 0, 32, 32);

//スプライトの生成
var sprite = new Sprite(32, 32);
sprite.image=surface;
sprite.x = 10;
sprite.y = 10;
game.rootScene.addChild(sprite);

sprite.tick = 0;
sprite.addEventListener(Event.ENTER_FRAME, function() {
sprite.tick += 8;
surface.draw(numimg, 0, sprite.tick, 32, 32, 0, 0, 32, 32);
sprite.image=surface;

if (sprite.tick == 64) {
sprite.tick = 0;
}
console.log("tick:"+sprite.tick);
});

};

//ゲームの開始
game.start();
};


32x32の画像を立てに3つ並べていて、徐々にずらして表示しています。
これが正解なのかどうかはわかりませんが、、、とりあえずやりたかった
ことはこれです。