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

tmlib勉強会

こんにちは。ゲーム大好き、JavaScript大好きのカグア!です。

昨日、幸運にもライブラリ作者さん主催のtmlib.jsのハンズオン勉強会に参加してきました。ドアキーパーで募集して速攻埋まるという人気の勉強会をレポートします(まあ会場を借りる橋渡しをしたので厳密には居候ですが)。

tmlib.jsとは、JavaScript製でつくられた、ゲーム制作を効率化するための便利なライブラリです。すでに多くのゲームが作られていて、国内でも人気が高まっているゲームエンジンの1つです。

>>Home | tmlib.js

tmlib.js勉強会の内容

ファイさん

勉強会の参加メンバーはライブラリ作者のphiさん含め8名。少人数でしたので、がっつり質問とかも出来て超感激でした。参加者は、ゲームエンジニアもいればエンジニア、WEB制作者などなど開発に関わる方ばかりでしたが、わたしのような門外漢にもやさしく教えていただいてありがたかったです。

tmlib.jsハンズオン勉強会の流れは以下です。最初に軽く自己紹介とtmlib.jsの紹介をして、ハンズオンに突入でした。

・タッチゲームを作ってみよう
・基本のシーン
・基本テンプレート
・thisの考え方
・タッチイベントを取得
・完成!
・LT、ブレスト、懇親などなど

なんと約2時間半でタッチゲームが出来てしまいました。いやはや感動。途中つまづきながらも丁寧に教えていただき、また私のコードの間違いもレビューしてくださるなど、ハンズオンって楽しいですね!

個人的にささったレバレッジメモ

・話題となった「ブロック崩さぬ」はtmlib.js製
>>逆転の発想「ブロック崩さぬ」人気 「往年の名作ゲームに真っ向からケンカ」 – ITmedia ニュース
・tm.game.setup はメソッド
・ゲームシーンというクラス
・120fpsに上げたかったので、settimeoutを使っている
・shuffle() はシャッフルできるメソッドがあるなど、思わず同意の関数が目白押し。
・appはつねにミリ秒を計測している。

達人の、こういうちょっとしたTIPSというか考え方が、生で聞けるのがハンズオン勉強会の魅力ですよね。私のような初心者には、そういうちょっとした考えの蓄積が圧倒的に足りないので、つまづいたときに解決方法の引き出しやアプローチが限定的になっちゃうんですよね。

思わずへぇ~なtmlib.js豆知識

ゆるふわ

今回、tmlib.jsの作者であるphiさんにお会いすることが出来たので、聞きづらいこともガンガン聞いちゃいました。それにも笑顔で答えてくれてイケメンすぎます。

・tmlib.jsのtmは、タイムイズマネーの頭文字。
・広める勉強会やブログは書いて構わない。
・キャラクターのひよこトマトはphiさん曰くはピヨヒコと呼んでいるらしい。
(ブログとかでも紹介記事などであれば使って構わないとのこと)
・自分がゲームエンジニアとして使ってた行列処理なども実装してる。
・ランスタントのコンソールはかなり気合を入れて作っていて、Chromeのデベロッパーツールととほぼ同じことができる。
・レンダリング先を変えられ、デフォルトがキャンバスになっているだけ。

タイムイズマネーって、なるほどです。

ライブラリなど自作モノにはtmと付けるそうなので、座右の銘っぽいですが、たしかに、ゲーム制作って工数すごくかかるもの。それを効率化してくれるtmlib.jsはまさにタイムイズマネーで助けてくれるものだと思いました。

目からうろこのハンズオンの進め方

P5301201

個人的に今回の勉強会でなるほどなあと刺さったのが進め方です。

コードをスクリーンに投影して、少しづつ完成をさせていくというものですが、その途中途中で進捗をスプレッドシートに報告するのです。さらに、ちょっとしたURLの共有はGitHub内のギッターというチャットルームで行いました。こんなにも快適で一体感のあるハンズオンははじめてでした。

スプレッドシートの縦軸には参加者名(ハンドルネームのふりがななども助かる!)、横軸には学習進捗のステップ。完成したら、本人がどんどんそのステップのセルに入力をしていきます。たしかにこれは、メンターが勝手に進めて苦手な人は置いてきぼり、ということも少なそうです。実際、大学講義でも使って好評だったとか。

さらにそれを支えていますのが、ランスタントというリアルタイムコーディングのWEB。

tmlib.jsを書いていきますと、プレビューできるのですが、それをURLで保存するような働きをするのです。参加者のマシン環境の違いを吸収してくれ、なんとも画期的です。デフォルトでは、tmlib.jsのバージョン0.5が動くそうです。

>>>>template – tmlib.js | runstant

ランスタンとのメリットはそこにとどまりません。

URLを提出すれば進捗が管理できるだけでなく、たとえばつまづいた場合、そのURLを提出すればメンターがすぐに自分の環境でチェックできる、という。これにより解決したつまづきもありました。

もちろん、もともと学習ステップもブログ記事になっていて、タイピングが遅い人でもコピペでついていけるように配慮もされていました。

>>tmlib.js 入門 – タッチゲームを作ろう – Step00 ゲームのひな形を作ろう | tmlife

ブログで理解できても参加する意義はおおいにある

tmlib

ブログに書いてあるのだから、勉強会に行く必要あるの?と思われる方もいるのではないでしょうか。たしかに、記事レベルをはるかに凌駕する実力の持ち主でしたら、そうかもしれません。

しかし、ブログを読めばなんとかはわかる、という人でしたら、こういったハンズオンの勉強会は間違いなくおすすめ。理解度や情報量がぜんぜん違います。

おそらくは、その場で集中して手を動かせる、間違いもよしんば指摘してもらえる、講師が発する言葉が参考になる(あー、このメソッド名、そういう読み方するのか!これオブジェクトじゃなくてメソッドだったんだ!とか)、ディスカッションなど交流で知見や視野が広がるなどで、理解や知見がより深まるのでしょうね。

phiさんが今後も続けたいとのこと。興味がある人は、イベント開催用ページのドアキーパーのコミュニティに参加されると良いと思います。

>>tmlib.js User Group | Doorkeeper

tmlib.js、ほんと面白いですよ!ゲームプログラマの方はもちろん、ちょっとでもゲームづくりをしたことがある方ならぜひ。おすすめですよ。

>>Home | tmlib.js

最後に、phiさん、皆さん、ほんとうにお疲れ様でした!そしてありがとうございました!


JavaScript本格入門 ~モダンスタイルによる基礎からAjax・jQueryまで: 山田 祥寛: 本

・ ・ ・ ・ ・

>>安っ!アマゾンで半額以下になっている食品タイムセール
セール特設ページを見る

↓↓↓無料のニュースレターを配信中です

jQueryライクに書けるところもあってほんと便利。