人気のゲームエンジン tmlib.js、0.5系チュートリアルなどまとめ

X (Twitter) Facebook Hatena Pinterest Email Pocket

tmlib.jsをはじめる前の予備知識をまとめました。

追記：2015年5月7日　ノベルゲームプラグインのリンク追加。
追記：2015年5月6日　学習の進め方を追記しました。runstantで0.4系基本テンプレがいっきに書けるイースターエッグが！
追記：23:12　リンク2本追加しました。神にもブクマして頂き((((；ﾟДﾟ))))ｶﾞｸﾌﾞﾙ！でも、ほんとtmlib.js楽しいよ！

この記事の目次

tmlib.jsとは
tmlib.js 関連情報を探すときのコツ
- 重要キーワード
tmlib.js 0.5系、最新の最小テンプレ使い方
- 学習の進め方
- 開発の公式情報・更新履歴
バージョン 0.5 を考慮した入門情報
バージョン 0.5 対応の最新情報を得る
ドキュメントや画像の表示など
過去バージョンも含めたサンプルソース

tmlib.jsとは

国産のJavaScriptゲームエンジンです。アクションゲームやRPGなどにも使われるほどの高速性が人気です。当たり判定のコリジョンなども含まれていて、現在バージョン0.6が開発中で最新版は 0.5系（2015年5月7日現在0.5.1）です。JavaScriptでゲームづくりをするときに役立つ命令やフレームワークが使えます。国内でも多くのファンをもつ人気のライブラリで、公式サイトは以下。

＞＞Home | tmlib.js

MIT License でどなたでも無料で利用できます。ハイブリッドアプリのmonacaでも動作します。GitHubのパスが掲載されていますので、それを読みこめばすぐに使えます。もちろんダウンロードもできます。また、jQueryでおなじみのチェーンメソッドや、オブジェクトを定義しつつ.addChildTo(this) とかもできるといった独自話法も存在します。

＞＞phi-jp/tmlib.js

tmlib.js 0.5対応の公式の最新チュートリアルはこちらです。

＞＞tmlib.js 入門 – タッチナンバーを作ろう | tmlife

iPhoneやAndroidアプリ開発のmonacaでも使えます（TOP画像）。※iPadのiOS8.3では表示されないこともありました。

ライブコーディングでここまで出来ちゃう！クリックで浮遊してスタートの衝突を避けろ！

＞＞ライブコーディング | tmlib.js プレゼン | 【TechBuzz】第3回.js勉強会 – jsdo.it – Share JavaScript, HTML5 and CSS

NHKの教育アプリまで、tmlib.jsで作られているというから凄い。

＞＞学校の授業が楽しくなるアプリゼミ企画・監修NHKエデュケーショナル開発・提供DeNA

tmlib.js with cordova でphiさんが作られたアプリがこちら。素晴らしい。iPhone開発やAndroidでもいけそうです。

＞＞Flick Arrow on the App Store on iTunes

シューティングゲームのアプリも。

＞＞式神・弐号の蹴鞠道 – Google Play の Android アプリ
＞＞弐号シューティング！ – Google Play の Android アプリ

タイタニウム＆tmlib製アプリ。

＞＞iTunes の App Store で配信中の iPhone、iPod touch、iPad 用 Touch 123

tmlib.js 関連情報を探すときのコツ

さてそんな人気のtmlib.jsですが、いくつか注意があります。

他のゲームエンジンでもそうなのかちょっとわかりませんが、ネット上に広まっているサンプルや情報はほとんどが、以前のバージョンのものです。最新版で動かなかったり、書式自体が変わって警告が出たりするものなど、注意が必要です。なおここ数日間で集めた情報ですので、間違いや言い過ぎがあれば、タイムラインでぜひご指摘ください。

基本的には、tmlib.js公式のGitHubのexamplesからサンプルコードを見るのが良いと思います。

＞＞tmlib.js/examples at develop · phi-jp/tmlib.js

他の国産JavaScriptゲームライブラリってどうなんでしょうね。

・現在の最新バージョンは、0.5系。
・ネット上のサンプルは、半分以上は 0.1系。※あくまで主観。
・いろいろな記事やjsdo.itで、おすすめ！とされているサンプルはほとんど0.1系。
・最新バージョンの0.5系と0.1系はまったく別もの。
・できれば0.3系以上だと安心。
・app.run(); とかあると、たいてい 0.2系以前。
・tm.game.setup とか使われてると、たいていOK。ただし検索ではほとんど見つからない。
・賢者は内部ソースを見て、ごにょごにょする。
＞＞GitHubでtmlib.js0.51を見る

・0.1系からの賢者がすでに神なので、入門者向けのサンプルはなかなか落ちてない。
・海外ユーザーの情報はほとんどない。
・サンプルで読み込んでいるtmlib.jsのURLを見てもバージョンはすぐにわからない。
（その場合はたいてい 0.1系）
・他も含めゲームエンジン解説の書籍は2015年5月4日現在存在しません。
・学習にはとにかく、runstantが神！
（ありがとうございます！！！）
＞＞template – tmlib.js | runstant

ただ、このサイトの情報もすぐに古くなる可能性は大です。ご注意を！！！

重要キーワード

・シーン（ページみたいなもの）
・スプライト（レイヤみたいなもの）
・スーパークラス（デフォルトで用意されている大枠）
・クラス（部品の金型）
・インスタンス（クラスで作った部品）
・タイムライン、フレーム（時間軸）
・ツイーン（変化するものの補完情報）
・ｘｘマネージャー（一元管理するもの）
・アセット（最初に読み込んでおく、画像や音声など）

tmlib.js 0.5系、最新の最小テンプレ使い方

公式サイトからお借りしました。0.5系の最小のテンプレです。0.1系とはごっそり変わっています。

tm.game.setup({
    title: &quot;タイトル&quot;,
    startLabel: 'title',
    query: &quot;#world&quot;,
    width: 640,
    height: 960,
    background: '#444',
});
tm.define(&quot;GameScene&quot;, {
    superClass: &quot;Scene&quot;,
    init: function() {
        this.superInit();
        // ここにメインを書きます。
    },
});

学習の進め方

・基本の情報はGitterとjsメインソース解読から
・runstantで、デフォルトの console.log(～) を削除して、tmlib とだけ打ってrunしてみよう！0.4系の基本テンプレが、一気に挿入されるぞ！（イースターエッグみたいな感じですが、感謝です！）※参考YouTube

＞＞phi-jp/tmlib.js – Gitter
＞＞runstant
＞＞tmlib.js 0.5.0 ソースコード
（デフォルト値などがわかります）
＞＞tmlib | search – jsdo.it – Share JavaScript, HTML5 and CSS
＞＞tmlib.jsに関する新着投稿 – Qiita
＞＞Issues · phi-jp/tmlib.js

開発の公式情報・更新履歴

現在開発中のバージョンは、0.6です。GitHubに公開されていますリリースバージョンはこちらです。古いバージョンが必要なときはこちらから。

＞＞Releases · phi-jp/tmlib.js

あとは2015年3月から、基本的にこちらで開発トークがされていますので、全部目を通しておくと良いでしょう。

＞＞phi-jp/tmlib.js – Gitter

・0.6
tm.game.ResultScene のデザインを変更
pointing の機能を強化( startPosition 保持したり, 数フレーム分の移動値をキャッシュしたり )
テスト改修
リファクタリング
マルチタッチ対応

・0.5
getFinalMatrix の位置が origin によってズレるバグを修正
tm.util.GridSystem を実装
checkHierarchy のデフォルト値を true に変更
tm.display.Grid を実装
getChildIndex の機能が getChildAt になっていたのを修正
tm.app.Element.prototype.getChildAt を実装
tm.app.Object2D の left, right, top, bottom それぞれの setter を実装
tm.sound.SoundManager を実装
tm.game.CountScene を作成
JavaScript ファイルのAsset対応
scene namespace を game namespace に変更
tm.game.setup で Canvas ゲーム開発を簡略化
tm.game.SplashScene を実装

・0.3
tm.ui.LoadingScene
clipping 機能を追加

・0.2
tm.asset.AssetManager が tm.asset.Manager と tm.asset.Loader に変更。