wise9 / enchant.js Goto Github PK

enchant.jsのバグなのか、safari側の不具合なのかわかりませんが、
標題の通りsafari環境下でspriteの移動と拡大または回転を同時に行う事ができません。

旧safariでは正常に動作していたので、safariのバグである可能性が高いですが、
一応報告させて頂きます。

具体的には回転、または拡大を同じイベント内で同時に処理すると移動が行われず、
拡大、回転の処理だけ行われます。(処理順番を入れ替えてもダメ)
ただ、内部的な数値(x座標やy座標)は更新されており、生成されるタグのleft,topの数値も変化はしているようですが、
表示に反映されないようです。

Blender(2.6)からExportしたcolladaファイルの読み込みが出来ません。
原因としては、Blenderがではなくを使ったファイルを吐き出すためであることが考えられます。

そこで、
・Collada Refineryを使ってtrianglesを使ったものに変換
ブラウザ(Chrome)側で「GL_INVALID_OPERATION : glDrawXXX: attempt to access out of range vertices」のエラー
・FBXに書きだしたものをFBX Converterを使って変換
gl.enchant.jsの1047行目で「Uncaught TypeError: Cannot set property 'src' of undefined 」のエラー。
これを無視しても、Refineryを使ったものと同様のエラー
と、２つ手法を試しましたが、上記エラーが発生しました。

collada.gl.enchant.jsで使用できるcolladaファイルを書き出せるソフトのアナウンス、
もしくは、ソースコードの修正をお願いいたします。

初めまして、宜しくお願いします。

さて、enchant.jsにサンプルとして入っているRPG風のデモですが、
Google ChromeのみSpriteが表示されません。
また、アクションゲーム風のSpriteも、
他のブラウザと違い、状況によってアニメーションが止まります。

自分で簡単に検証してみたのですが、
どうやらMapの上にSpriteが乗った状態で、xやyの値を動かしている間だけ
アニメーションがストップするようです（.frameの値は変化しています）。
xやyの移動が無くなった時点で、アニメーションが再開されます。

【検証環境】
・Windows7 Pro 64bit
・Google Chrome 20.0.1132.57 m

以上、検証のほう宜しくお願い致します。

Avatar.preload()の実装中に見つけました。
開発者ツールを開きながらavatar.enchant.jsのサンプル（examples / avatar / index.html）を実行すると、キャラクタの画像が2回ダウンロードされていることがわかります。10KiB超と大きめの画像なので、ダウンロード時間がUXに及ぼす影響がわりと大きいです。

リクエスト自体を1回に減らせないか調べたのですが、なんとなく無理そうな気がします（すみませんわかりません）。1回目がAvatar.loadImage()実行時、2回目がavatarをaddChild()したあとの再描画時です。
キャッシュを利用せず愚直に2度ダウンロードする理由はHTTPレスポンスヘッダが適切に設定されていないためではないかと考えますが、ヘッダ設定によって解決するかは未検証です。

リクエストを1回に減らすか、キャッシュが利用されるようになれば、ゲームの快適さが随分と改善されるのではと思います。よろしければご確認ください。

まだ使い始めたばかりなのでよくわかっていない為、とんちんかんな事を言っていたら申し訳ありません。

ソースコードを見たところ、94行目では new enchant.twitter.TwitterRequest(id, path, option, checkError); としているのですが、この TwitterRequestは143行目でenchant.nineleap.twitter.TwitterRequestとして定義されているようで、名前空間が異なっているように思います。

試しに名前空間を合わせてみたところ、問題なく動作しました。ご報告まで。

Chrome の仕様でローカル環境では他のファイルを読み込めません。
バグと見分けがつかないので、ローカルファイルが利用できない環境ではテクスチャを貼らないか、
何らかのアラートを出すべきです

enchant.js v0.4.3

774行目

 document.addEventListener('keydown', function(e) {
      game.dispatchEvent(new enchant.Event('keydown'));
      if ((37 <= e.keyCode && e.keyCode <= 40) || e.keyCode == 32) {
          e.preventDefault();
          e.stopPropagation();
      }
      ～
 }, true);

この部分でkeyCodeによりevent.preventDefaultを行なっていますが、
利用者側でこの部分での対象keyCodeの指定を行えるようにご検討願えますでしょうか。
宜しくお願い致します。

PC用Webブラウザで開いたときにスクロールバーが出るケースが非常に多いです。わざわざウィンドウにあわせて大きさを調整しているようですが、これでは意味がありません。

ゲームが開始してからユーザーが初めて画面をtouchするまでgameStartグローバル変数が未定義なため、
「ユーザーが画面をtouchしたか＝もうゲームを始めて良いか」を知るためにgameStartを参照できません（ReferenceErrorが出るため）。
(typeof gameStart !== 'undefined')とするか、ライブラリ呼び出し側でgameStart=falseを実行しておく必要がありました。

下記パッチのようにgame.start() 実行時にgameStartを定義するか、gameStart変数をGameクラスのプロパティに変更するといった変更を行うのが直感的ではないでしょうか。

diff --git a/plugins/nineleap.enchant.js b/plugins/nineleap.enchant.js
index 12b1d88..c31500b 100755
--- a/plugins/nineleap.enchant.js
+++ b/plugins/nineleap.enchant.js
@@ -33,6 +33,7 @@ enchant.nineleap.Game = enchant.Class.create(enchant.Game, {
this.endScene = new SplashScene();
this.endScene.image = this.assets['end.png'];
this.scoreQueue = false;

•        gameStart=false;
   });
  

  },

v0.4.3 のころから、enchant.Gameクラスのイベント処理で

                stage.addEventListener('touchstart', function(e) {
                    var tagName = (e.target.tagName).toLowerCase();
                    if(tagName !== "input" && tagName !== "textarea"){
                        e.preventDefault();
                    }
                }, true);

と書いてありますが、下記のようにしたい・・・とか今後出てくると思います。

                    if(tagName !== "input" && tagName !== "textarea" && tagName !== "select"){
                        e.preventDefault();
                    }

なのであれば、いっそ下記のようにされてはいかがでしょうか。

// initialize のどこか
this.useDefaultEventTags = ["input", "textarea", "select"];
var that = this;


//従来の箇所
                stage.addEventListener('touchstart', function(e) {
                    var tagName = (e.target.tagName).toLowerCase();
                    if(that.useDefaultEventTags.indexOf(tagName) === -1){
                        e.preventDefault();
                    }
                }, true);

このようにすれば、利用者側で任意のタグをpreventDefaultしない対象に変更することも出来ます。
ご検討ください。
本来、pull request にてお願いするべき内容ですが、 issue report にて失礼します。

　HAXEでenchant.jsのラッパーを書いています。

　名前が衝突しないように、例えばNode　ではなく、enchant.Node　のように使いたいのですが、ソースのいくつかで enchant.　が抜けているため enchant()　をしないと動作しません。
X new Surface
O new enchant.Surface

修正していただけるとありがたいです。よろしくお願いします。
　

単純にGetterの逆数でいいのでは。

    bind: function(obj){
        obj.__defineGetter__("mx", function(){
            return Math.floor(this.x * this.parentNode.column / this.parentNode.width);
        });
        obj.__defineSetter__("mx", function(arg){
            this.x = Math.floor(arg * this.parentNode.width / this.parentNode.column);
        });
        obj.__defineGetter__("my", function(){
            return Math.floor(this.y * this.parentNode.row / this.parentNode.height);
        });
        obj.__defineSetter__("my", function(arg){
            this.y = Math.floor(arg * this.parentNode.height / this.parentNode.row);
        });
        this.addChild(obj);
    }

先日のleapfestではありがとうございました。LTで使ったDataURIについての機能追加を送らせていただきます。
Safari 5.1.2 on OSX 10.7.2でのみ動作を確認しています。

diff --git a/enchant.js b/enchant.js
index 9323d4a..a25f2d9 100755
--- a/enchant.js
+++ b/enchant.js
@@ -836,8 +836,7 @@ enchant.Game = enchant.Class.create(enchant.EventTarget, {
     load: function(src, callback) {
         if (callback == null) callback = function() {};

-        var ext = src.match(/\.\w+$/)[0];
-        if (ext) ext = ext.slice(1).toLowerCase();
+        var ext = findExt(src);
         switch (ext) {
             case 'jpg':
             case 'gif':
@@ -2561,9 +2560,9 @@ enchant.Sound = enchant.Class.create(enchant.EventTarget, {
  */
 enchant.Sound.load = function(src, type) {
     if (type == null) {
-        var ext = src.match(/\.\w+$/)[0];
+        var ext = findExt(src);
         if (ext) {
-            type = 'audio/' + ext.slice(1).toLowerCase();
+            type = 'audio/' + ext;
         } else {
             type = '';
         }
@@ -2627,4 +2626,16 @@ enchant.Sound.load = function(src, type) {

 enchant.Sound.enabledInMobileSafari = false;

+function findExt(path) {
+    var matched = path.match(/\.\w+$/);
+    if (matched && matched.length > 0) {
+        return matched[0].slice(1).toLowerCase();
+    }
+
+    // for data URI
+    if (path.indexOf('data:') === 0) {
+        return path.split(/[\/;]/)[1].toLowerCase();
+    }
+    return null;
+}
 })();

iPhone4S iOS5にて

の記述で警告が出ていましたので下記の様に"px"を削除して対応しました。

viewport.setAttribute('content', 'width=640px');
↓
viewport.setAttribute('content', 'width=640');

remove: function(){
    if(this._listener){
        this.clearEventListener();
    }    
    if(this.parentNode){
        this.removeChild(this);                                                                                                                             
    }    
}    

this.removeChildではなく
this.parentNode.removeChildが正しい

http://jsdo.it/Ryohei.Fushimi/uYfJ/edit
http://jsrun.it/Ryohei.Fushimi/uYfJ

参考: https://twitter.com/#!/anagaoka/status/184155704762961920

onactiontickの引数名がfuncでかぶっているため、callでエラーになります。
func→eにしたら動きます。

    waitUntil: function(func) {
        var timeline = this;
        this.add(new enchant.tl.Action({
            onactionstart: func,
            onactiontick: function(e) {
                if (func.call(this)) {
                    timeline.next();
                }
            }
        }));
        return this;
    },

以下のようなコードを書くと

enchant();

window.onload = function(){
    var game = new Game(320, 320 );
    game.fps = 24;
    game.preload('chara1.gif');

    game.onload = function(){
        bear = new Sprite (32,32);
        bear.x = 8;
        bear.y = 8;
        bear.frame = 0;
        bear.image = game.assets['chara1.gif'];
        bear.addEventListener('enterframe', function(){
        })
        game.rootScene.addEventListener('touchmove',function(e){
            bear.x = e.localX;
        });
        game.rootScene.addChild(bear);
    }
    game.start();
}

エラーになります。

Uncaught TypeError: Cannot read property 'width' of null

以下のように書き換えると正しく動きます。

       bear.image = game.assets['chara1.gif'];
       bear.frame = 0;

dev/enchant.js:2302

    intersect: function(other) {
        return this.x < other.x + other.width && other.x < this.x + this.width &&
            this.y < other.y + other.height && other.y < this.y + this.height;
    },

_offsetX, _offsetY を用いる必要があります

たまに最初の読み込み時は上手く表示されたりするんですが、再読み込みすると座標が(0, 0)になってしまいます。
Chrome ではちゃんと動きます。Mac と iPhone の Safari で確認しました。

以下は再現コードです。

enchant();

window.onload = function() {
  game = new Game(320, 320);

  game.preload('icon0.gif');

  game.onload = function() {
    // scale しなければ移動されてます。
    var a = new A
    //a.scale(3, 3);
    a.frame = 0;
    a.x = 10;
    a.y = 100;

    // scale すると座標が 0, 0 になってしまいます。
    var b = new A
    b.frame = 1;
    b.scale(2, 2);
    b.x = 100;
    b.y = 100;

    // 直接 Sprite を作成すれば問題なく移動されています。
    var c = new Sprite(16, 16);
    c.image = game.assets['icon0.gif'];
    c.frame = 2;
    c.scale(3, 3);
    c.x = 200;
    c.y = 100;

    game.rootScene.addChild(c);
  };

  game.start();
};

var A = enchant.Class.create(enchant.Sprite, {
  initialize: function() {
    enchant.Sprite.call(this, 16, 16);

    this.image = game.assets['icon0.gif'];

    game.rootScene.addChild(this);
  }
});

box2d.enchant.jsのコメントに書かれているサンプルコードに問題があるように思います。

 * 四角形の物理シミュレーション用Sprite
 * @example
 *   var bear = new PhyBoxSprite(32, 32, DYNAMIC_SPRITE, 1.0, 0.5, 0.3, true);

...

* 円の物理シミュレーション用Sprite
* @example
*   var bear = new PhyCircleSprite(16, DYNAMIC_SPRITE, 1.0, 0.5, 0.3, true);

正しくは

 *   var bear = new PhyBoxSprite(32, 32, enchant.box2d.DYNAMIC_SPRITE, 1.0, 0.5, 0.3, true);

...

 *   var bear = new PhyCircleSprite(16, enchant.box2d.DYNAMIC_SPRITE, 1.0, 0.5, 0.3, true);

になるかと思います。

こんにちは。

対象バージョン：enchant.js v0.4.3

1678行目　-(frame % row) * this._width, 'px '
1683行目　style.left = -(frame % row) * this._width + 'px'
にてrowの値が０の時に0割が発生し、演算の結果がNaNとなります。
background-position'の値にNaNが指定されるのでCSSのパース時にエラーとなっています。

以下の様に対応いたしました。
1678行目　-(frame % row | 0) * this._width, 'px '
1683行目　style.left = -(frame % row | 0) * this._width + 'px'

上記修正で問題なければ対応願います。

enchant();

window.onload = function(){
var game = new Game(320, 320 );
game.fps = 24;
game.preload('chara1.gif');

game.onload = function(){
    bear = new Sprite (32,32);
    bear.x = 8;
    bear.y = 8;
    bear.frame = 0;
    bear.image = game.assets['chara1.gif'];
    bear.addEventListener('enterframe', function(){
    })
    game.rootScene.addEventListener('touchmove',function(e){
        bear.x = e.localX;
    });
    game.rootScene.addChild(bear);
}
game.start();

}

hello,guys,I really appreciate your work on this project ,but I wonder how to convert tiled map to the data array which needed by enchant.js,is there any tools to help?
thanks

Groupオブジェクトでrotateをサポートできませんか？　また、Groupに登録する際にオフセット値を付けられませんか？　

こんにちは。
下記環境でenchantPRO対応ゲームをプレイしました。

9leapアプリ　バージョン1.0.11
確認機種　AQUOS PHONE　SH-12C
OSバージョン　2.3.3

ですが、click to Start!　ボタンをクリックすると画面が真っ白になったり、
アプリが強制終了されたりでゲームをプレイすることが出来ません。

http://9leap.net/games/804
こちらの「ARサンプル」では、Start ARをクリックすると強制終了されます。
確認した環境に問題があるのでしょうか？

rpgサンプルを基に、
こちらでAndroidアプリを公開させて頂いているのですが、
https://play.google.com/store/apps/details?id=com.beverlyparksoft.escape1

どうもREGZA Phone T01C (tg03)の一部端末と
Xperia X10 (SO-01B)にて、
表示化け？が発生しているようです。

こちらで該当する端末がないので動作確認ができないのですが、
試しに、純粋なrpgサンプルを単純にWevViewに載せて
エミュレータで確認したところ、
解像度によっては以下のような化けが発生していて、
もしかすると、これにも関係があるのでは？と思いました：
http://beverlyparksoft.com/escape/others/enchant.js_rpg_sample_on_andorid_emu_300x400.png

ご確認をお願い出来ますでしょうか？

もう修正されていられるのかも知れませんが、
removeEventListenerがremoveEventListnerになってるのに気づいたのでお知らせします。

現在は後からaddChildしたモノほど手前に描画されるというルールに前後関係の設定が縛れてしまうのでz-indexのプロパティが追加され、柔軟に設定出来るようになると嬉しいです。

現状ではスプライトのインスタンスごとにパターンデータを抱えていますが、同じ種類のパターンを多く表示する場合などで無駄が多いです。スプライト登録は、パターン登録とスプライト自体の登録に分離できませんか？　一般的なスプライトハードウェアを参照してもらえれば感じはわかると思います。

scaleXで拡大縮小の基準点を変更したいのですが、方法はあるのでしょうか。デフォルトでは、Spriteの**が基準になっており、どのように変更すればよいのか、その方法は実装されているのかを知りたいと思います。よろしくお願い致します。

chrome だとType error、IE9だと別のエラーです。

this.context.putImageData(pixel, x, y, 1, 1);

の最後の「, 1, 1」が要らないです。

はじめまして、こんにちは。mkd214ともうします

enchnat.jsでARゲームが作れると聞いて，試してみたんですが，AR表示ができませんでした．
具体的には，最新版の9leapアプリをAndroid端末にインストールし，マーカを印刷し，9leapアプリ上でARサンプルを使用しました．
しかし，マーカ上に3Dモデルは表示されませんでした．

使用した端末は
SO-01B
GalaxyS-Ⅱ
TF-201
です．

9leapのバージョンは1.0.7です．
ARゲームが遊べないので，どうしたらいいか教えて下さい．

現在の enchant.util.MutableText の実装ではsetText関数が実行された段階でthis.heightとthis.widthが上書きされるため、コンストラクタに渡したwidth/heightが使われません。
widthはreturnLengthの計算に使われるためそれなりに反映はされるようですが、heightは完全に無視されてしまう状態です。

個人的にはsetText関数内のheight/width上書き部分を削除してしまうべきと思っているのですが、互換性を損なう変更のためpull requestの前に皆さんのご意見をいただきたく思いIssueを作成しました。いかがでしょう？

なお削除しない場合はsetText関数内でSurfaceの再作成を行う必要があるのではと思っています。未検証ですが、MutableTextのサイズとSurfaceのサイズが一致しなくなるので。

enchant.js: 0.5.0
tl.enchant.js: 0.4
端末: iPhone4(iOS5.1.1)

tl.enchant.jsを使って、回転しながら移動するアニメーションを適用しようと moveTo と rotateByを and() でつないだのですが、
rotateByの回転しか適用されません。
moveToをscaleToにすると動作しました。
moveTo単独では動作しますし、andを付けずに順番に実行すると大丈夫でした。
PCのChromeで実行するとandが正常に動作します。
SpriteをCanvasGroupに追加すると正常に動作しました(iPhoneでCanvasGroupだと遅かったので避けようとして今回の現象になりました。)

このようなコードで試しました。
https://gist.github.com/3356846

enchant.jsの4.1を使わせていただいています。

Spriteクラスに、Entryから継承したbuttonModeというフィールドがありますが、ソフトボタンを作成するためにこのフィールドに'a'という文字列を指定したところ、以下のようなエラーになりました。エラーはIE9のものです。

SCRIPT5009: 'button' は定義されていません。
enchant.js, 行 1218 文字13

enchant.jsを以下のように修正したところ、期待通り動作するようになりました。

    @@ -1215,14 +1215,14 @@
             this.addEventListener('touchstart', function() {
                 if (!this.buttonMode) return;
                 this.buttonPressed = true;
    -            var e = new Event(button + 'buttondown');
    +            var e = new Event(this.buttonMode + 'buttondown');
                 this.dispatchEvent(e);
                 game.dispatchEvent(e);
             });
             this.addEventListener('touchend', function() {
                 if (!this.buttonMode) return;
                 this.buttonPressed = false;
    -            var e = new Event(button + 'buttonup');
    +            var e = new Event(this.buttonMode + 'buttonup');
                 this.dispatchEvent(e);
                 game.dispatchEvent(e);
             });

ご確認いただけますでしょうか。

Hi,

I've been developing a game with Enchant and I'm very impressed with it's simplicity and clean abstractions.

My only issue is that the website claims it works with IE9 but nowhere can I find any documentation on how to get this to work.

If IE9 is not supported may I suggest that this claim is removed from the website. Otherwise it it possible that I can be pointed to some documentation or instructions on how to get it to work in this browser?

Regards,
Jacob

度々 質問です．
enchantPROで3Dモデル(collada(.dae))をARで表示したいのですが，表示できません．
ちなみにcubeは表示されました．

ARSampleのmain.js内の
var box = new Cube();
を
var box = Sprite3D();
box.set(game.assets['droid.dae']);
に書き換えたんですが，うまくいきませんでした．

Android device SO-01B
9leap ver 1.0.12

どうすればうまく表示されるか教えて下さい．

うまく動きません。
直してみました。参考にしてください。(Chrome18,Firefox11,IE9で動作を確認)
widthとheightを削除した理由がわかりませんが尊重しました。

それとこれは要望ですが、insertBefore が使いたい状況があるので、それも加えています。

/**
 * マップライクな Group
 * addChildで Sprite 等を追加すると、自動的に mx, my プロパティが追加され、 
 * VirtualMap内での座標で Sprite を操作できる
 *
 * 使い方
 * //20 x 20 メッシュの縦横320ピクセルの盤を作り、その上に16 x 16の駒を8つ並べる
 * var board = new VirtualMap(20, 20);
 * board.width = 320;
 * board.height = 320;
 * for(var i=0; i<8; i++){
 *     var piece = new Sprite(16, 16);
 *     piece.image = game.assets['icon0.gif'];
 *     board.addChild(piece);
 *     piece.mx = i + 3;
 *     piece.my = 16;
 * }
 * game.rootScene.addChild(board);
 */
enchant.util.VirtualMap = enchant.Class.create(enchant.Group, {
    initialize: function (column, row) {
        enchant.Group.call(this);
        this.column = column || 16;
        this.row = row || 16;
    },
    addChild: function (obj) {
        enchant.Group.prototype.addChild.call(this, obj);
        this.bind(obj);
    },
    insertBefore: function (obj, reference) {
        enchant.Group.prototype.insertBefore.call(this, obj, reference);
        this.bind(obj);
    },
    bind: function (obj) {
        Object.defineProperties(obj, {
            "mx": {
                get: function () {
                    return Math.floor(this.x * this.parentNode.column / this.parentNode.width);
                },
                set: function (arg) {
                    this.x = Math.floor(arg * this.parentNode.width / this.parentNode.column);
                }
            },
            "my": {
                get: function () {
                    return Math.floor(this.y * this.parentNode.row / this.parentNode.height);
                },
                set: function (arg) {
                    this.y = Math.floor(arg * this.parentNode.height / this.parentNode.row);
                }
            }
        });
    }
});

groupをaddChildするときに、
childNodesの要素が反転してしまうことがありました。

ちょっと強引ですがこんな場合↓

var g1 = new Group();
var g2 = new Group();

var s1 = new Sprite(100, 100);
s1.backgroundColor = 'red';

var s2 = new Sprite(100, 100);
s2.x = 10;
s2.y = 10;
s2.backgroundColor = 'black';

g1.addChild(s1);
g1.addChild(s2);
g2.addChild(g1);

game.rootScene.addChild(g2); // ここでchildNodesが反転（表示上は問題なし）

game.rootScene.removeChild(g2);
game.rootScene.addChild(g2); // 再度addすると反転しているのがわかります

2161行目の以下処理で反転してしまっているようです。
push.apply(nodes, node.childNodes.reverse());

その前の行と同じように、slice()でコピーをつくってから
処理すればよいのかなと。

ご確認していただけるとありがたいです！

enchant.jsから動的に生成した要素のデザインをCSSで指定するために、
以下のような感じでidやclassにアクセスできると嬉しいです。必要ならpatchを書かせていただきます。

var label = new Label('Hello, world!');
label.id = 'title';

ゲームだと、ある座標の真下にあるマップチップがなんなのか知りたい場合が多いので

checkTile: function(x, y,layer) {
    if (x < 0 || this.width <= x || y < 0 || this.height <= y) {
        return false;
    }
    var width = this._image.width;
    var height = this._image.height;
    var tileWidth = this._tileWidth || width;
    var tileHeight = this._tileHeight || height;
    x = x / tileWidth | 0;
    y = y / tileHeight | 0;
    var data = this._data[layer];
    return data[y][x];
},

こういう関数を追加して欲しいなー

描画ツリーが
Group---Group1---Node1
　　　--Group2---Node2
　　　--Group3---Node3
の時にGroup3に所属するNode3をGroup1に移動した場合、つまり下記のようなコードの時

group3.removeChild(node3);
group1.addChild(node3);

描画順はNode1→Node3→Node2を期待しますが、Node1→Node2→Node3のままになります。
描画ツリーが
Scene---Group1---Node1
　　　--Group2---Node2
　　　--Group3---Node3
の場合は期待通りに動作します。Group#addChildのソースコードがSceneでない場合は単純にノードを追加するだけのコードになっているのが問題のようです。

develop ブランチではビルドツールを rake -> grunt.js に移行しましたが、言語別ファイル生成のみは rake に頼っています。これを grunt.js のタスクとして登録する必要があります。

• 現状では、Tween クラスは Tween が実行された時点で移動先の値を計算・確定するが、この仕様に問題がある

• 具体的には、例えば moveBy を and で重ねがけすると正常に動作しない

• 以下の例では、(120, 120) に移動することが期待されるが、実際には (120, 0) に移動する

  sprite.tl.moveBy(120, 0, 30).and().moveBy(0, 120, 30)

IE9の場合、enchant.jsの161行目で、navigator.vendorが未定義のためエラーとなり
ゲームが動作しないようです。
ご確認お願いいたします。

理由

Issue #38 #72 など、DOMベースで描画を行なっていることに起因するバグが増えており、これに逐次対応するコストが大きいため。

ワークフロー

• 現在、DOMベースで行なっている描画を Canvas ベースに変更する。 (終了)
• Game.rootScene を切り替え、現在の Group を DOMGroup に変更する。 (終了)
• Entity, Game などで行なっている DOM 特有の処理を取り除く (終了)

議題

• DOMベース/Canvasベースを切り替え可能にするかどうか (→する)
• mouseover, mouseoutや、mousemove のサポート (カラーマップの生成→完了)

変更後

• enchant.CanvasScene, enchant.DOMScene, (enchant.GLScene) を用意し、enchant.Scene としてどれを用いるかによって描画エンジンを切り替えます

enchant.jsで設定されるイベントリスナーがtouchstartを取得してしまう為、スマフォでクリッカブルマップが使用できませんでした。
※ブラウザなどマウスクリックは問題なく動作していました。

enchant.js v0.4.3
799行目
if(tagName !== "input" && tagName !== "textarea"){
↓
タグも除外するようにしました。
if(tagName !== "input" && tagName !== "textarea" && tagName !== "area"){

上記修正でクリッカブルマップに対応できました。