*

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

公開日: : 最終更新日:2015/05/30 アプリマーケティング


LINE facebook twitter URLコピー
B! pocket Evernote 楽天


tmlibjs3

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

関連記事
>>ハンズオン!tmlib.jsゆるふわ勉強会タッチゲームを作ろうに参加した

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

tmlib.jsとは

tmlibjs2

国産の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

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

重要キーワード

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

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

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

tm.game.setup({
    title: "タイトル",
    startLabel: 'title',
    query: "#world",
    width: 640,
    height: 960,
    background: '#444',
});
tm.define("GameScene", {
    superClass: "Scene",
    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 に変更。

さて、それでは以下、0.5系の最新版の情報を考慮した情報源まとめです。ご参考になれば幸いです。

バージョン 0.5 を考慮した入門情報

まずはここから。本家のチュートリアル(Usageは0.3対応)は 0.5 に非対応。

>>tmlib.js 入門

バージョンについてのコメントが役立ちます。このページを見て、そうだったのかとようやく腹落ち。

>>tmlib.js ガイド@ Wiki – tmlib.jsリンク集

バージョン 0.5 対応の最新情報を得る

バージョン 0.5 対応の、おそらく最新っぽいリファレンス。

>>Test | tmlib.js

バージョン 0.5 で作られたタイピングゲーム。

>>typing game | tmlib.js

バージョン 0.3 で作られたポーズ画面のサンプル。

>>ポーズを簡単に作る : tmlib.js – jsdo.it – Share JavaScript, HTML5 and CSS

開発者さんの日々の投稿。ここを追わないと最新情報が得られません。

>>phi-jp/tmlib.js – Gitter

シーン遷移のサンプル。0.4で書かれてます。

>>ManagerScene sample – tmlib.js | runstant

ドキュメントや画像の表示など

tmlib.jsで画像を画面全体にフィット。

>>tmlib備忘録 AnimationSpriteの応用

たぶん最新っぽいドキュメント。上級者向け。

>>API Documentation – tmlib.js docs

バージョン 0.2 対応の最小のテンプレート。0.1 対応のよりは良いが、できれば 0.3 以上が良い。

>>template – tmlib.js 0.2.2 – jsdo.it – Share JavaScript, HTML5 and CSS

トラフィックはあまり多くありませんが、ディスカッションです。

>>(9)tmlib.js developers – Google グループ

0.2系で発表されたノベルゲーム制作プラグイン。

>>phi-jp/tmlib.novel.js

過去バージョンも含めたサンプルソース

過去のサンプルは、とりあえず0.2以上で見たほうが良いと思います。0.1 のものは、そのバージョンのtmlib.jsが必要です。

・jsdo.it

>>tmlib.js – jsdo.it – Share JavaScript, HTML5 and CSS

・QIITA

>>tmlib.jsに関する120件の投稿 – Qiita

・GitHub

>>phi-jp/tmlib.js

・tmlib.jsアドベントカレンダー(QIITAでの関連投稿がまとまってます)

>>tmlib.js Advent Calendar 2014 – Qiita


javascriptでテトリスを作る一部始終 プログラマーの赤ちゃんシリーズ 電子書籍: 中澤健一: Kindleストア

「ゲーム作りは楽しいよ。」
  • このエントリーをはてなブックマークに追加
  • Pocket

Profile



Yoshihiko Yoshida
メディア運営業界23年目。Googleアナリティクス公式コミュニティ・アンサリスト最高ランク「レジェンド」国内初獲得。「マツコの知らない世界」Googleマップ案内人TV出演。Googleストリートビュー認定フォトグラファー。教育システム情報学会会員。元立教大学非常勤講師。主な著書「Googleアナリティクス基礎講座」(技術評論社)。趣味はデジカメとゲームとパン作り。>>もっと読む

Instagram

◆代表者略歴 ◆受賞歴
◆おもな著書 ◆TV出演歴
◆新聞掲載歴 ◆雑誌/連載歴
 <<お問い合わせはこちら>>

Facebook

このブログをRSS購読しよう!(無料)

follow us in feedly

よろしければ「いいね」して下さい!

 
PAGE TOP ↑