phi-jp / tmlib.js Goto Github PK

tm.Class = {
    // クラスを作る
    create: function() { ... },
    // クラスを定義
    define: function() { ... },
    // デフォルトパスをプッシュ
    pushd: function() { ... },
    // デフォルトパスをポップド
    popd: function() { ... },
    // 取得
    using: function() { ... },
};

example

// グローバル領域に Hoge というクラスが定義される
tm.Class.define("Hoge", { ... });

// カレントが foo になる
tm.Class.pushd("foo");

// foo.Hoge というクラスが定義される
tm.Class.define("Hoge", { ... });

tm.dom.Attr のremove で特定の値のみ削除できるようにする.

引数が一個のときは removeAttribute(name) .
引数が二個のときは classList の remove 的な挙動をさせる.

Texture や WebAudio の同期読み込み対応する.

Image の同期読み込みは,
xhr の async:false で binary 形式で読み込んで
base64 に変換して url に入れればいけるかな?

memo

• EventDispatcher とか継承して, load 時とかにちゃんと load を発火させる.
• ~Manager とか使わなくても独立して使えるよう意識して作る.
• ~Manager はあくまでオプショナル

引数で HTMLElement を受け取っていたが,
tm.dom.Element も受け取るようにする.

デフォルトは tm.dom.Element を受け取り
HTMLElement だった場合はは tm.dom.Element(HTMLElement) としてから保持する.

標準のものを使うか, 自分で作るか検討中.

昔自分で作った記憶があるがコードが見つからない...orz

縦書対応する

あと, Label の描画方法を毎回レンダリングするのではなく
Sprite に書き込んで描画する形式にするかも.

おそらくそっちのほうが高速.

描画幅はダミーで canvas 作ってその context 経由で
measureText を使って幅を取得する.

そのサイズで canvas 作って shape と同じ要領で描画する.

ついでに改行も対応するかも.

いつもお世話になっています。
表題の通り、2回目のLoadingSceneの呼び出しでnextSceneへreplaceされずにハングアップします。
tm.asset.AssetManager.onloadに登録している処理が、1回目のローディング完了時点でしか呼び出されないためではないかと思います。

以上、よろしくお願いします。

getPointingStart 時に deltaPosition の値をリセットする

最初の deltaPosition の値がバカでかくなっちゃうので...

popScene関数を利用後、returnされる値はexitが呼ばれる予定のシーンとなっています。
私の感覚的にはpop後のシーンが取得できるのかと思っていましたが、この動作は仕様でしょうか。

pop後のシーンをreturnするのであれば、popSceneの戻り値は「e.target」になるかと思います。

javascriptの性質上、行末にセミコロンを付けなくてもよいですが、気になりましたので修正頂ければと思います。

title が Sencha Docs のままになっちゃっているので修正する.

https://github.com/senchalabs/jsduck/wiki/Config-file

Titled Map Editor に対応させる.
マップチップもだしオブジェクトレイヤーも.

要検討

メリット

• CanvasApp を複数使うときにそれぞれマネージャが独立しているので安全
• preload やローディング中のプログレスバー表示などがしやすい

デメリット

• 静的でなくなると CanvasApp がないときに使えなくなる
• 汎用性がなくなる
• 共通して使っていたので使うのでメモリが増える

ボックスに合わせた自動改行とか,
縦書とか対応する.

文字送りする MessageBox 的なやつも対応するかも.

下記リンク先のサンプルを実行後、以下の手順で操作をしてください。

http://jsdo.it/omatoro/mp3D

• chromeなどのデバッグ用コンソール画面を開いてください
• メニューボタンを押下してください
• ScreenInScrollPullDown - updateが実行されているのが確認できます(pop対象のクラスに所属しているクラスです)
• 完了ボタンを押下してください
• popScene後に、再度ScreenInScrollPullDown - updateが実行されているのが確認できます

ScreenInScrollPullDownクラスは、popScene後にpopされ削除されるシーンクラスに所属するクラスとなります。

できれば、popScene後は、popされるクラスに所属するクラスであってもupdateは実行されないほうが個人的に望ましいです。
(上記に上げたURLのサンプルでまずい処理をかませてるのでしょうか)

良い解決方法があればご教授頂きたいです。

以上、よろしくお願いします。

同じブラウザでもOS環境によってラベルの位置がずれるみたい。
Chromeで見た時に
Snow LeopardとLionでズレるのを確認しました。

恐らくSnow Leopardだとずれてるみたい。

下記検討

現在は高速化の為, enable のデフォルト値は false となっているが
サクッとゲームを作るってことを考えると true でも良いのかもしれない.

重ければ明示的に false にする的な対応を推奨する.

(function() {...})() だと最後の括弧を書き忘れたり,
そもそも読みにくかったりするので下記の機能を実装する

tm.namespace = function(ns, fn)
{
    fn(ns);

    //fn.call(ns, ns);
};


var hoge = {};

tm.namespace(hoge, function(ns) {

    ns.test = function() {
        alert("test");
    };

    tm.namespace(ns.test, function(ns) {
        ns.test = function() {
            alert("nest test");
        }
    });

});

hoge.test();
hoge.test.test();

TypeScript の module に近い感じ.
https://sites.google.com/site/jun1sboardgames/programming/typescript

AnimationクラスのisAnimationがtrueの場合のみ、refreshを行う処理を作っていました。
すると、finishの値に届く前にisAnimationがfalseとなってしまい、途中でアニメーションが終了してしまいます。

tm.app.Animation.prototype.updateの処理にて、アニメーションの終了チェックがthis.tweens.length <= 0となっていますが、this.tweens.length < 0と変更すると最後までアニメーションすることを確認しています。

上記修正が正しい処理かどうか判断できないため、再考して頂いてよろしいでしょうか。
以上です。

KTween を参考

https://code.google.com/p/kawanet/wiki/KTweenJ

tm.graphics.Canvas に shadowOffsetX と shadowOffsetY を追加する

↓今

var sprite = tm.app.Sprite(幅, 高さ, "画像名");

↓Sprite の引数を一個でも ok にする

var sprite = tm.app.Sprite("画像名");

画像のみ渡された場合はその画像のオリジナルサイズを
幅, 高さとしてとりあえず割り当てる.

その後変更可能.

って考えると, sprite の第一引数って画像じゃね？って思ってきた.

var sprite = tm.app.Sprite("画像名", 幅, 高さ);

tm.app.Object2d に draggable 機能を持たせる.

setDraggable(flag) でドラッグ有効/無効を切り替える

Event

dispach event list

Memo

• setDraggable(true) すると内部で setInteractive(true) も呼ぶ
• タッチの差分(tm.input.Touch.deltaPosition)の値をキャッシュしてタッチ終了後はその平均値で慣性っぽく止まるようにする
• flick~ or drag~ ってプロパティで速度やらなんやら調整できるようにする

Feature

• 親子関係考慮すると死ねるのでとりあえず見送る
• 特定の要素上に来たら drop イベントとか発行させられるようにすると良いかも. (setDroppable(true))

自前で実装する予定だったが, three.js 使った方が良いかも!

今更作っても three.js には追いつけない.
色々な意味で...

ってことで three.js とうまくドッキングして使えるようにする予定

マルチタッチ対応する.

TouchList クラス作ろうかな?
Mouse と合わせるのが面倒そう.

CanvasLayer, GLLayer(or ThreeLayer) を作る.

これらは自分で canvas と render を持っており,
子どもたちの描画先を自分にする.

それを画像として親に描画する.

2d と 3d 描画を同時にやりたいときなどに活用できる.

animation 名だけでなくコマ指定もできるようにする.

as.gotoAndStop("walk");  // walk の 1コマ目
as.gotoAndStop(5);         // 5コマ目

綴りミスってる

tm.app.Tween もしくは tm.app.Tweener の方が良い気がしてきた.

終了時のイベント animationend も AnimationSprite とかぶっちゃってるし.

もう Unifiy, MInify するときに含めちゃう.
一応ライセンスを確認する.

もしくは loadDatGUI とか loadStats とか作る.

tm.dom.Animation で animation-fill-mode に対応させる
http://www.webcyou.com/?p=2132

最初にタッチ終了した箇所から、他のタッチ開始した箇所へスワイプしたことになってしまいます。
本来は、スワイプではなくマルチタッチになるかと思います。

マルチタッチとなるように修正して頂きたいと思います。

tm.graphics.Canvas に createPattern を追加する

preload と main の間に実行する progress メソッドを作る

_progress 的な.

• loaded ... 読み込んだ量
• progress ... トータル量
• loaded/progress*100 ... パーセンテージ

WebGL 描画対応する

daishi さんが作られた『GL-Shooter stage1』を参考にする.

描画は CanvasApp や CanvasElement でやらせるんじゃなくて, 下記のようにシーン単位で
分けた方が良いかも！ daishi さんの拡張も Scene 拡張でやってる.

• CanvasScene
• CanvasElement
• GLScene
• GLElement

あと子供はやっぱり Element じゃなくて ContainerElement 的なものにしか持たせないように
したほうが良いかなぁ〜. 速度的に.

tm.app.LabelにてdummyContext.measureTextを使用し、ラベルの縦書を実装されています。
これと同じ要領で、文字列を描画した際の幅を取得する関数、もしくは変数を用意してもらえると、
http://jsdo.it/omatoro/xsoE/
で色々遊べるので是非お願いします。

想定

var lm = tm.app.LoadManager();

var texture = tm.graphics.Texture("hoge.png");
var sound = tm.sound.WebAudio("hoge.wav");

lm.add(texture);
lm.add(sound);

lm.onload = function() {
    alert("ぜんぶ読み込み終わったよ♪");
};

setEndFunction がちゃんと動いていない.
てか他も動いていないかも...

昔の仕様のままなので修正してテストプログラムを追加する.

jQuery と競合起きてたので...

• CanvasElement から 2D 座標系機能のみを抜き出して Object2D を作る
• Object2D を継承して描画機能を付けたものを CanvasElement とする
• Scene は Element もしくは Object2D を継承させる
• Scene を継承した CanvasScene や ThreeScene を作るかも

もともと 3D もサポートする予定だったので Texture としたが
いまいちピンとこない.

てか昔のtmlibでは実装してた気がする...

どこで落としたのだろう?

タイトルの通り, 名前検討する.

GlossyButtonクラスなどのinteractionオブジェクトにて以下の情報を設定しています。

this.interaction.enabled = true;
this.interaction.boundingType = "rect";

この情報を利用して、isHitPoint関数での衝突判定を自動選択してほしいです。

isHitPointCircle関数とisHitPointRect関数は別途用意する形になりますが、簡易的な衝突判定としてisHitPoint関数を用意しているのであれば有効な実装だと思います。

よろしくお願いします。

名前は ProgressScene もしくは LoadingScene.

要検討.

setAngleは引数にDegree値を取り、toAngleはRadianを使用しています。

私自身の考えですと、数学に知見が無い方や、プログラムの経験が浅い方はDegree値のほうが直感的に分かるかと思います。