tmlib.js ガイド@ Wiki

tmlib.jsリンク集

2014-07-16T20:48:10+09:00

2014/07/10更新 *公式、準公式 -[[公式HP>>http://phi-jp.github.io/tmlib.js/]] チュートリアルページはしんでるぴよ。 -[[公式Docs>>http://phi-jp.github.io/tmlib.js/docs/index.html]] 最新の名前空間なので、古いソース見てるとわかりづらいぴよ。クラス名で検索ぴよ。Ajax検索なので便利ぴよ。 -[[公式Usage>>http://phi-jp.github.io/tmlib.js/usage.html]] -[[公式Example>>http://phi-jp.github.io/tmlib.js/example.html]] -[[公式ブログ>>http://tmlife.net/]] サンプル多数ぴよ。最終更新2013。サンプルが0.1.xどまりぴよ。 -[[公式jsdo.it>>http://jsdo.it/phi]] サンプル多数ぴよ。検索性悪いけど、0.3.xのサンプルもあるぴよ。 -[[おそらく公式Git>>https://github.com/phi-jp/tmlib.js]] Git上の実体（最新 2014/07/10時点で0.3.0）　直リンはほどほどにするぴよ。 http://phi-jp.github.io/tmlib.js/build/tmlib.js Git上の実体（0.2.0）　直リンはほどほどにするぴよ。 http://rawgit.com/phi-jp/tmlib.js/0.2.0/build/tmlib.js -[[おそらく公式実験場>>http://junk.tmlife.net/lib/tmlib.js/test/display/#tests.mapsprite.DemoScene00]] --[[canvasapp>>http://junk.tmlife.net/lib/tmlib.js/test/display/scripts/canvasapp.js]] --[[canvaselement>>http://junk.tmlife.net/lib/tmlib.js/test/display/scripts/canvaselement.js]] --[[label>>http://junk.tmlife.net/lib/tmlib.js/test/display/scripts/label.js]] --[[animationsprite>>http://junk.tmlife.net/lib/tmlib.js/test/display/scripts/animationsprite.js]] --[[mapsprite>>http://junk.tmlife.net/lib/tmlib.js/test/display/scripts/mapsprite.js]] --[[example>>http://junk.tmlife.net/lib/tmlib.js/test/display/scripts/example.js]] --[[benchmark>>http://junk.tmlife.net/lib/tmlib.js/test/display/scripts/benchmark.js]] 最新サンプルが手に入るぴよ。レアなMapSpriteのサンプルもあるぴよ。 HTMLソースを辿らないと見えないので貼っとくぴよ。 *勝手 -[[tmlib備忘録>>http://blz.x0.com/lab/tmlib/]] 大きく仕様変更された0.2.xについて基本をまとめてる。まずここを読むと新旧サンプル混在の混乱を避けれるぴよ。 -[[tmlib.js 入門>>http://vivi.dyndns.org/tech/puzzle/SBP.html]] -[[typeOf 'aki_mana'>>http://blog.livedoor.jp/aki_mana/search?q=tmlib]] tmlib.jsの不足機能のハック＆拡張方法などがあるぴよ。 -[[TEST CORDING>>http://testcording.com/?cat=16]] -[[QIITA YFukuyama>>http://qiita.com/YFukuyama]] 0.1.xだけど、CoffeeScriptでtmlib.jsを扱ってるぴよ。 -[[javascriptでゲームを作りたいブログ>>http://childhood-s-end.tumblr.com/]] *サンプル **0.3.x phi's フレームアニメーション(frameIndex) - tmlib.js 0.3 [[http://jsdo.it/phi/4pVs>>http://jsdo.it/phi/4pVs]] **0.2.x 一定じゃないフレーム数や、フレーム順番変更などの、拡張アニメーション。おっぱいぴよ。 [[http://blz.x0.com/lab/tmlib/02.html>>http://blz.x0.com/lab/tmlib/02.html]] 逃走ゲーム（仮）Level5-4 巡回する敵を実装する [[http://jsdo.it/kneesockscollector/escape17>>http://jsdo.it/kneesockscollector/escape17]] **0.1.x 04:「画像を表示してアニメーションさせてみよう(スプライトアニメーション)」 – tmlib.js入門用チュートリアル！避けゲーを作ってみよう。サンプルが古いぴよ？ [[http://testcording.com/?p=1614>>http://testcording.com/?p=1614]] マップチップ表示 + スプライトアニメーション - tmlib.js 擬似パッドも。 [[http://jsdo.it/omatoro/sVun>>http://jsdo.it/omatoro/sVun]] *メモ「tmlib.js download」でぐぐると入門サイトが多数出てくるぴよ。

このサイトについて

2014-07-16T20:39:57+09:00

このサイトは、管理人のtmlib.jsの情報集積メモぴよ。 tmlib.jsの情報は0.1.x系と0.2.x系に大きく分かれるけど、ネット上ではバージョンが明記されず、混在してるので、情報の整理場所としてつくったぴよ。学習するなら、まず0.2.x以降で覚えて、過去の遺産を参照したい場合に、0.1.xに手を出すべきぴよ。

tmlib.jsとは

2014-07-16T20:36:22+09:00

tmlib.jsとは、enchant.jsやら他のJSゲームライブラリのイイトコどりをしたライブラリぴよ。 tmlib.jsだけで完結してるので、他のJSライブラリとの親和性が高いぴよ。 JSの3Dライブラリthree.jsや、フリーの統合開発環境Intel XDKのJS（旧jqMobi）とよく馴染むぴよ。ブラウザ上のjsdo.it上でも動作するので、いつでもどこでもちょこっと開発できるぴよ。問題は、0.2.xで整理されたクラスと、ネットで見つかるサンプルの大半が0.1.xで、完全な互換性がなく、動かすのに、ソースに手入れが必要だけど、その情報が足りてないことぴよ。更新頻度の高いオープンソースの宿命とはいえ、サンプルが0.1.xなのか、0.2.x以降なのか明示して欲しいぴよ。 Node.jsなんかは、動作バージョン明記が多いので、今後のドキュメントづくりでは、見習っていきたいところぴよ。

tmxファイル

2014-07-16T17:36:44+09:00

タイルマップの共通形式tmx エディタ Tiled http://www.mapeditor.org/ Tiledの使い方参考 Tiled Map Editor を Cocos2d-html5 と使用する方法 https://developer.tizen.org/ja/documentation/articles/how-use-tiled-map-editor-cocos2d-html5?langredirect=1 TiledのXML形式と、エクスポートしたJSON形式に対応してる模様。（吐き出したJSON形式は、手動で、拡張子をtmxにする？未確認）ただしXML形式の場合、以下のプロパティを手動で、追加する必要がある。（Tiledのバージョンアップに伴い、XML形式の記述がコロコロ変わるのが、原因？）その辺の製作者のやりとり https://www.google.co.jp/url?sa=t&rct=j&q=&esrc=s&source=web&cd=5&cad=rja&uact=8&ved=0CDgQFjAE&url=https%3A%2F%2Fgroups.google.com%2Fd%2Ftopic%2Ftmlib%2FXpAtVrlVKTw&ei=6zPGU-WkBtO48gXOhYJw&usg=AFQjCNEBNAErYQ21zr-Coth2ysc2igS3DA&bvm=bv.71126742,d.dGc またtmx形式は、あくまでもタイルマップのマッピング情報なので、タイルとして利用した元画像も必要。参考 H4sIAAAAAAAAC2NkYGBgHMWDBgMAjw2X0pABAAA= H4sIAAAAAAAAC2NgGAWDCQAADA0iRpABAAA=

メニュー

2014-07-16T16:58:24+09:00

-[[このサイトについて]] -[[tmlib.jsとは]] -[[tmlib.jsリンク集]] ---- **tmlib.js(0.3.0) -[[tm.app.AnimationSprite]] (x) -[[tm.app.CanvasApp]] (x) -[[tm.app.Object2D]] -[[tm.app.Scene]] -[[tm.app.TitleScene]] -[[tm.createClass]] (x) -[[tm.display.AnimationSprite]] -[[tm.display.CanvasApp]] -[[tm.display.TriangleShape]] -[[クラスの書き方]] -[[tmssファイル]] -[[tmxファイル]] -[[エラー事例]] ---- **メニュー -[[トップページ]] -[[プラグイン紹介>プラグイン]] -[[まとめサイト作成支援ツール]] -[[メニュー]] -[[メニュー2]] ---- **リンク -[[@wiki>>http://atwiki.jp]] -[[@wikiご利用ガイド>>http://atwiki.jp/guide/]] **他のサービス -[[2ch型掲示板レンタル>>http://atchs.jp]] -[[無料掲示板レンタル>>http://atbbs.jp]] // リンクを張るには "[" 2つで文字列を括ります。 // ">" の左側に文字、右側にURLを記述するとリンクになります //**更新履歴 //#recent(20) &link_editmenu(text=ここを編集)

tmssファイル

2014-07-16T16:57:31+09:00

tmlib.js専用のSpriteSheetファイル。中身はJSON形式。あらかじめ読み込んだASSETSのスプライト画像名をimageに指定する。例 { "image": "chiruno", "frame": { "width": 64, "height": 64, "count": 40 }, "animations": { "run": { "frames": [1, 2, 11, 12], "next": "run", "frequency": 6 }, "idle": { "frames": [0, 10], "next": "idle", "frequency": 16 }, "idle2": { "frames": [2, 12], "next": "idle2", "frequency": 16 }, "idle3": { "frames": [3, 13], "next": "idle3", "frequency": 16 }, "jump": { "frames": [7, 17, 5, 15], "next": "fly", "frequency": 8 }, "fly": { "frames": [8, 18], "next": "fly", "frequency": 4 }, "shoot": { "frames": [7, 17], "next": "shooting", "frequency": 4 }, "shooting": { "frames": [4, 14], "next": "shooting", "frequency": 4 }, "landing": { "frames": [6, 16], "next": "landing", "frequency": 4 } } }

tm.createClass

2014-07-14T17:40:30+09:00

0.1.xでのクラス生成。 0.2.x系ではtm.createClass();は廃止されたため、クラス生成はtm.define();によって行う。 tm.define("クラス名",{ init:function(){ }, });

クラスの書き方

2014-07-14T17:37:32+09:00

*tm.display.TriangleShapeを継承 tm.define("Player", { // クラス名 superClass: "[[tm.display.TriangleShape]]", // 継承するtmlib.jsクラス init: function(){ // クラスメソッド this.superInit(); // 親クラスのInit関数呼び出し }, }); *tm.display.AnimationSpriteを継承 tm.define("user.Player", { superClass: "[[tm.display.AnimationSprite]]", init: function(){ var ss = tm.asset.SpriteSheet({ image: "chick",// ローディングクラスで読み込んだASSETS画像のラベル名 frame: { width: 32, // スプライト幅 height: 32, // スプライト高さ count: 64 //スプライトコマ数 }, "animations": { // Walk // ひよこ chick_walk: { frames: [1, 2, 3, 2], next: "chick_walk", frequency: 4 }, play: { frames: [0, 1, 2, 2, 3, 4, 5], next: "play", frequency: 2, }, }, }); this.superInit(ss); this.direct = "left"; this.isMobile = tm.isMobile; this.vx = -4; }, update: function(app){ if(app.frame % 2 == 0) { this.frameIndex++; } // move this.x += this.vx; if(this.x < 0) { this.x = 0; this.vx *= -1; this.scaleX *= -1; } else if(this.x > SCREEN_WIDTH) { this.x = SCREEN_WIDTH; this.vx *= -1; this.scaleX *= -1; } }, });

エラー事例

2014-07-14T17:31:28+09:00

---- *Uncaught TypeError: Cannot read property 'frequency' of undefined tmlib.js:15124 >(anonymous function) tmlib.js:15124 >tm.define.fire tmlib.js:1990 >tm.define._update tmlib.js:12410 >tm.app.BaseApp.[[tm.createClass]]._updateElement tmlib.js:11732 >tm.app.BaseApp.tm.createClass._updateElement tmlib.js:11738 >tm.app.BaseApp.tm.createClass._update tmlib.js:11724 >tm.app.BaseApp.tm.createClass._loop tmlib.js:11579 >(anonymous function) tmlib.js:11556 >temp tmlib.js:253 [[tm.display.AnimationSprite]]クラスに、与えたスプレッドシートに存在しない、アニメーションラベルがgotoAndPlay()で指定された際に発生。 ---- *Uncaught TypeError: Cannot set property 'x' of null tmlib.js:12293 >tm.define.setPosition tmlib.js:12293 >tm.define.init index_user_scripts.js:103 >tm_class tmlib.js:101 >(anonymous function) index_user_scripts.js:66 >tm.define.fire tmlib.js:1990 >tm.define._dispatchPointingEvent tmlib.js:12500 >tm.define.__checkPointing tmlib.js:12483 >tm.define._checkTouch tmlib.js:12443 >tm.define._update tmlib.js:12414 >tm.app.BaseApp.tm.createClass._updateElement tmlib.js:11732 >tm.app.BaseApp.tm.createClass._update tmlib.js:11724 >tm.app.BaseApp.tm.createClass._loop tmlib.js:11579 >(anonymous function) tmlib.js:11556 >temp tmlib.js:253 [[tm.app.AnimationSprite]]のthis.superInit()を呼ばずにsetPosition()した際に発生

tm.app.Object2D

2014-07-11T16:35:15+09:00

*説明 Object2D *公式ドキュメント [[tm.app.Object2D>>http://phi-jp.github.io/tmlib.js/docs/index.html#!/api/tm.app.Object2D]]