先日, @omatoro さんが『私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由』というエントリーを 公開されました.

これがすごい反響だったらしく, 私の方にも様々な意見や質問がきました. おかげで tmlib.js の知名度が一気に上がり実際に触ってくれてる人も増えました.

本当にありがとうございます.

ただ, ここで一つ問題が… tmlib.js には公式のチュートリアルというものがないのです!! せっかく触ろうとしてくれてる人がいるのに, それを学ぶための公式資料がない… 本当に申し訳ない.

怠惰な自分に反省!!

ってことで今回は Step by Step で tmlib.js を学びながらゲームを作ることができる チュートリアルを書いてみました.

よかったら参考にしてくださいな♪

最近何かと話題のフラットデザインを取り入れています.

すいません, まだ Step の方は途中です>< 今日, 明日中には用意します!! サンプルはひと通り jsdo.it で作ってあるので fork してコードいじるだけでも学べると思います.

土日とかに実際にやってみてくれると嬉しいなぁ〜

Table of contents

• tmlib.js って何？
• サンプル
• チュートリアル
• その他解説エントリー
• ちょっとだけ語らせてちょ♪
• 質問なんでもください. 大好物です.

tmlib.js って何？

そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです.

詳しくは下記のリンクにて

• tmlib.js とは
  • 以前, 勉強会で発表させていただいたスライドです.
• Home
  • tmlib.js ホームページです. 色々なデモがあります.
• GitHub
  • tmlib.js は GitHub で管理しています.
• Documents
  • こちらのドキュメントで機能を把握することができます.

up

サンプル

今回作っていくゲームになります.

1~25 までの数字を順々にタッチしていき全てをタッチし終わるまでの 時間を競うという超画期的なゲームになっています.

ついでに最近流行りのフラットデザインっぽくしてみました.

up

チュートリアル

下記の流れでゲームを作成してきます. 前半の Step00, Step01, Step02 で最短でゲームを遊べるところまでもっていきます. ある程度作りたいものがある人は前半部分でざっくり概要をつかんで 独自のゲームを作り始めても良いかもしれません.

後半の Step03, Step04, Step05 ではゲームの肉付けです. シーンの遷移やUI, SE などの再生を実装していきます. この辺までやるとだいぶゲームっぽく見えてきます. どの Step もそれほど難しいことはやっていないので気軽にやってみてください.

前半

• Step00 ゲームのひな形を作ろう (サンプル)
• Step01 ピースを定義して並べよう (サンプル)
• Step02 ピースのタッチ処理とゲームクリア処理を実装しよう (サンプル)

後半

• Step03 UI を実装しよう(サンプル)
• Step04 タイトル画面とリザルト画面を追加しよう( サンプル )
• Step05 BGM, SE を鳴らそう( サンプル )

up

その他解説エントリー

@omatoro さんや @daishi_hmr さん, @Rosetta_Halt さんのように サンプルコードを見ながら独自に解説エントリーを書いてくれている人もいます.

ざっくりと紹介

• 『JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを作るチュートリアル』
• 『tmlib.jsでシューティングゲームを作るチュートリアル』
• 『tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編』
• 『tmlib.js 入門 – スライドパズルが簡単にできちゃった –』
• 『tmlib.js – NAVER まとめ』

up

ちょっとだけ語らせてちょ♪

@omatoro さんとは色々とやり取りさせてもらっていますが, まさかこういったエントリーを書いてくれるとは思いにもよりませんでした.

ここ数年, Blog や Twitter などをキッカケに様々な方とやりとり するようになりました.

今は, 毎日 Mail や Twitter でプログラミングについて 質問や相談を頂きます.

『一番得意な C/C++ のエントリーも書かんかい!』って同僚からのアドバイスから 『本気でゲームプログラマを目指しているのですがどうしたら良いですか』という 中学生からの相談なんかも.

ムチャぶりなんかもちらほらw 今は東京にいるので実際に会うことができた方もたくさんいます.

本を執筆させてもらったり, セミナーで講演させてもらったり, 専門学校の学生さんに 教えさせてもらったりと, 一歩ずつ, 一歩ずつこのブログを始める際に掲げた 『日本国民全員プログラマ化計画』達成へと足を進めています.

最近は本当に毎日が楽しい. これからも計画達成へむけて尽力していきたいと思います.

いつもこのブログを見てくれているみなさん, Twitter で話しかけてくれるみなさん, 本当にありがとうございます.

そしてこれからもよろしくです♪

up

質問なんでもください. 大好物です.

tmlib.js はまだまだ資料不足です. いざ触っても色々と躓くことがあると思います.

tmlib.js に限らず, 分からないことや気になること, エラーで動かないんだけど見てくんない？とかでも 良いので気軽に @phi_jp もしくは Mail の方までご連絡ください.

必ず返信します.(多分w)

up