tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます.

今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました.

サンプルは jsdo.it で作成しております.

以前『JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた』 というエントリーを書いたのですが, tmlib.js の仕様が色々と変わってしまい動かない状態だったので, 修正しました.

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

自作ライブラリ tmlib.js を使って, 円同士の衝突プログラムを作ってみました.

やっているのは,

• 円同士の衝突判定
• めり込みの補正
• 衝突後の反発

です.

ちゃんと計算するなら, 衝突時間を調べてその分ベクトルの長さを調整して… ってやんないといけないのですが, 速度的に問題があるってのと難易度が上がってしまう(ホントはめんどくさい)のでちょっと省略しています.

サンプルは jsdo.it の方に移植してあるので, 実際に 動かしたり, fork してイジったりして頂けると嬉しいです.

tmlib.js のハッカソンイベントをやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います.

今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました.

怒濤って何？って方はこちらをどうぞ

• enchant.js 怒涛の 100 tips
• CoffeeScript 入門! 怒濤の 100 サンプル!!

tmlib.js で定義されている tm.graphics.Canvas クラスは HTML5 Canvas を拡張したものなので HTML5 Canvas の機能は基本的にそのまま使えます. なので HTML5 Canvas の勉強にもなるかと思います.

また, それに加え星型や多角形といった複雑な図形を簡単に描画したり, モノクロフィルタやブラーフィルタを掛けて遊んだりってことができます. ゲームへの応用も簡単にできます.(ゲームへの応用は次回やる Application 編で詳しく説明します)

もちろんサンプルは jsdo.it に全て移植してあるので実際に実行したり, fork してイジッたりして遊んでもらえると嬉しいです.

【TechBuzz】第3回.js系開発技術勉強会 で tmlib.js について発表してきました!!

ちなみに発表に使ったスライドはこちらです. Web 上で作ったのでリンクをクリックするだけで見れます.

セミナーの内容は

• yeomanでフロントエンド開発を効率化する方法
• CoffeeScriptとTypeScriptの比較
• tmlib.js をよろしくお願いします
• 懇親会

ってな感じでした.

もう１週間経っちゃいましたがざっくりとレポートを書きたいと思います.

テーマはじゃんけんです.

ふといくつかゲームを思いついたので私も作ってみました.

テーマがじゃんけんなのに作ったのはパズルゲーム! 最近ハマっているパズドラに影響されちゃってますw

よかったら遊んで下さいな♪

今回は tmlib.js を使って様々な図形を描画する方法について紹介します.

tmlib.js ってなんぞや？って方は『JavaScript ライブラリ 『tmlib.js』と 10 個のサンプルを公開しました.』へ.

GitHub Docs

tmlib.js は標準の HTML5 Canvas をラップして機能を拡張しているので 様々な図形を簡単に描画することができます.

単純な図形描画の他にもグラデーションをかけたり, フィルターをかけたり 画像として保存したりってことも簡単にできるのでぜひ使ってみて下さい.

もちろんサンプルは jsdo.it で作成しています. なので, 実際に動かしたり fork してコードをイジったりしてもらえると嬉しいです.