tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step05 BGM, SE を鳴らそう | TM Life

2013/07/17 18 users tmlib.js 流行 フラットデザイン タッチゲーム

これが最後の Step となります. 音を読み込んで再生することで 一気にゲーム感が増します! Table of contents チュートリアル目次 サンプル ソースコード 解説 まとめ チュートリアル目次 前半 Step00 ゲームのひな形を作ろう (サンプル) Step01 ピースを定義して並べよう (サンプル) Step02 ピースのタッチ処理とゲームクリア処理を実装しよう (サンプル) ... 続きを読む

tmlib.js ゲームプログラミングチュートリアル – 今流行のフラットデザインを使ったタッチゲームを作ろう | TM Life

2013/06/14 118 users tmlib.js チュート enchant.js 知名度 流行

先日, @omatoro さんが『私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由』というエントリーを 公開されました. これがすごい反響だったらしく, 私の方にも様々な意見や質問がきました. おかげで tmlib.js の知名度が一気に上がり実際に触ってくれてる人も増えました. 本当にありがとうございます. ただ, ここで一つ問題が… tmlib.js には公式のチュート... 続きを読む

nvm(Node Version Manager)でNode.js をインストールしよう♪ | TM Life

2013/03/19 23 users nvm node.js インストール バージョン その他

もうかれこれ６回ぐらい環境作る度に nvm インストールしてってことを やってるのでいい加減メモっておきます. nvm(Node Version Manager) を使って Node.js をインストール, バージョン管理する方法について紹介します. Table of contents nvm ってなに？ nvm のインストール方法 ターミナル起動時に nvm を起動する nvm のその他の機能 ... 続きを読む

Web 上で簡単にワイヤーフレームを作成, 公開できるツール – wireframe.cc | TM Life

2013/03/01 21 users ワイヤーフレーム rvl.io Wireframe.cc

以前紹介した『rvl.ioの使い方』エントリーが好評だったので, またまたWebツールについての紹介です. 今回は, Web 上で簡単にワイヤーフレームを作成, 公開できるサービス『Wireframe.cc』について 紹介します. Table of contents Wireframe.cc って？ Wireframe.cc の使い方 Wireframe.cc って？ Wireframe.cc は... 続きを読む

tmlib.js の WebAudio API の音源位置指定機能を使って遊んでみた | TM Life

2013/02/26 11 users tmlib.js WebAudio イヤホン メソッド クラス

tmlib.js の WebAudio API の音源位置指定機能を使って遊んでみました!! tmlib.js の WebAudio API をサポートしたクラス, tm.sound.WebAudio には setPosition というメソッドがあります. これに位置を渡すことで音源位置を指定することができます. イヤホンやヘッドフィンで聞くと楽しめるかと思います. 左右それぞれ違う音楽を流して... 続きを読む

tmlib.js と WebAudio API で MML 対応してみたよ♪ | TM Life

2013/02/25 20 users MML tmlib.js WebAudio API サンプル

tmlib.js と WebAudio API で MML 対応してみましたー!! MML 系の情報は少なかったのですが, 良質なものが多かったのでわりと サクッと実装できました!! 動的に入力した MML から音楽を再生するサンプルを作ってみたので よかったら色々打ち込んで遊んで下さい♪ これで tmlib.js は画像データ, 音データどちらも動的に 作って再生できるようになりましたー＼(＾o... 続きを読む

tmlib.js の WebAudio API 機能を使ってビジュアライザを作ってみたよん♪ | TM Life

2013/02/21 15 users ビジュアライザ iPhone OpenGL tmlib.js

tmlib.js でビジュアライザを作ってみました. もちろん WebAudio API を使っているので iPhone でも鳴るよん♪ 昔, C++ & OpenGL で作ってたやつを移植してみたら上手くいった. ディレクトリ掘ったら昔作ってたサンプルが色々と出てきたので, 全部 jsdo.it に移植して公開しようと思ってます. なので, 良かったらまた覗きに来て下さい:D 続きを読む

tmlib.js の WebAudio API 機能でピアノ作ってみた!! iPhone でも鳴るよん♪ | TM Life

2013/02/20 9 users iPhone tmlib.js PIANO SOUND 制約

tmlib.js でピアノを作ってみました. iPhone でも音鳴ります!! 以前作っていた『tmlib.js examples – Piano』は tm.sound.Sound(Audio 要素)を使って作っていました. 今回は, それを tm.sound.WebAudio(WebAudio API)を使って作り直してみました. WebAudio API は cross domain の制約が... 続きを読む

tmlib.js で様々なソートをビジュアル化してみた | TM Life

2013/02/19 11 users tmlib.js fork ソート jsdo.it

昔作ってた visual sort を tmlib.js で作りなおしてみました. 色々なソートをビジュアル化してます. ビジュアル的にソートの流れが分かるよん♪ 個人的には bidirectionalBubbleSort が好き♪♪ jsdo.it で作っているので, 気軽に実行できます. まだまだ色々なソートがあるので fork して実装してくれると凄く嬉しいです. 続きを読む

弾幕シューティングが簡単に作れちゃう!! tmlib.jx x BulletML を使ってみよう | TM Life

2013/01/29 43 users fork tmlib.js ザク パラメータ イジ

daishi さんが tmlib.js でサクっと BulletML を使えるようにしてくれていたので, 使ってみました!! ん～超良い感じ～♪ 用意したサンプルは jsdo.it で作ってあるので, fork して パラメータをイジってもらえれば色々と遊べると思います. Table of contens tmlib.js とは？ BulletML とは？ tmlib.js x BulletML ... 続きを読む

tmlib.js x three.js(WebGL) で10000個のパーティクルを表示してみた | TM Life

2013/01/24 27 users WebGL tmlib.js fork パーティクル FPS

tmlib.js x three.js(WebGL) でパーティクル表示してみました! 10000 個表示しても 60 fps でるのは脅威!! jsdo.it で作ってあるので実際に実行したり, fork して遊んでもらえると幸いです. Table of contens tmlib.js とは？ three.js とは？ コード 解説 『Global Game Jam 2013 【新宿会場】wi... 続きを読む

3D ゲームも簡単に作れる! tmlib.js x three.js(WebGL) で 3D プログラミング出来るようにしてみた!! | TM Life

2013/01/21 67 users WebGL tmlib.js three.js 自前 ゲーム

私の方でずっと作っている JavaScript ライブラリ『tmlib.js(ティーエムリブ ジェイエス)』ですが, この度, 晴れて『three.js』と結ばれることとなりました. っとはいっても一方的にですけどねw tmlib.js は, 2Dゲームだったりツールを作る機能は揃っていましたが 3D に関する機能は今までありませんでした. WebGL をラップして自前で作ったりもしていたのですが... 続きを読む

Google Chart API – LaTeX を使って数式画像を動的に生成するツールを作ってみた | TM Life

2013/01/19 27 users LaTeX パラメータ WIKI ベン図 棒グラフ

Google Chart API は Google 大先生のサービスのひとつで, URL にパラメータを指定することでグラフ画像を生成してくれます. 現在は, 折れ線グラフや棒グラフ, ベン図, QRコードなどに対応していてこれらの画像を簡単に生成することができます. その中でも今回取り上げるのは LaTeX です. LaTeX にも対応していることはあまり知られていないようで, wikiでも漏れ... 続きを読む

Three.js でピッキング(3Dモデルをマウスで選択)してみた | TM Life

2013/01/16 28 users ピッキング three.js マウス fork 選択

久々の 3D プログラミング. Three.js を使ってピッキングしてみたので, 今回はそのやり方について簡単に解説したいと思います. サンプルは jsdo.it で作ってあるので, 実際に動かしたり, fork してイジってもらえると嬉しいです. table of contents キッカケ サンプル ソースコード 解説 マウス位置を求める(Line 5~8) マウス座標を 3D 化する(Li... 続きを読む

車輪の再発明×jsdo.itのススメ. 色々なコードを tmlib.js で作りなおしてみた | TM Life

2013/01/15 52 users tmlib.js 車輪 jsdo.it プログラミング ススメ

jsdo.it にある色々なコードを勉強がてら tmlib.js で作りなおしてみました. せっかくなので作ったコードを紹介したいと思います. っとその前にプログラミングを学んでいる方向けに, 車輪の再発明×jsdo.it の良さについて軽く書きたいと思います. Table of contents 車輪の再発明って？ 車輪の再発明×jsdo.it サンプル Hexagon Phase 2 – tm... 続きを読む

reveal.jsベースのプレゼンをWeb上で作れちゃうオンラインエディタ『rvl.io』の使い方をrvl.ioを使って解説してみた | TM Life

2013/01/14 56 users プレゼン rvl.io オンラインエディタ オンライ WEB上

なんか昨日, koba04さんの『「プログラミング未経験のタワレコ店員がエンジニアになって思ったこと」というスライドを書いてみた』というエントリーがキッカケで １年前に公開したエントリー『オシャレなスライドショーを簡単に作れちゃう reveal.js の使い方を reveal.js を使って解説してみた.』へのアクセス数が急上昇しました. これに便乗して, 今回は reveal.js の オンライ... 続きを読む

怒濤の執筆!!「enchant.js開発のレシピ」を執筆しました(サンプル付き) | TM Life

2012/12/18 18 users 怒濤 ench ゴメンナサイ 執筆 本題

いきなりですがゴメンナサイ… サンプルをお知らせするのを忘れておりました!! 以前, 『 怒濤の執筆!!「enchant.js開発のレシピ」を執筆しました.』という エントリーを書きました. 今回はその紹介に加え, サンプルページの紹介を追加しました. 良かったら参考にしてください. ってことで本題. 8月24日に私が執筆した「enchant.js開発のレシピ」という本が出版されました. ench... 続きを読む

tmlib.js の AnimationSprite を使ってコマ送りアニメーションさせてみよう | TM Life

2012/12/14 28 users tmlib.js ani コマ送り クラス 参考

tmlib.js の最新版には AnimationSprite と SpriteSheet というクラスが定義されています. これらのクラスを使う事で ActionScript ライクにコマ送りアニメーションさせることができます. 幾つかサンプルを用意しましたのでよかったら参考にしてください. Table of contents tmlib.js って何？ SpriteSheet って何？ Ani... 続きを読む

enchant.js を使ってたった50行でゲームを作ってみた | TM Life

2012/12/07 25 users enchant.js Windows Inc ゲーム 50行

どうも〜今回は久々に enchant.js のエントリーです. 最近は, enchant.js 関連のエントリーは書いているものの公開は控えておりました. 一応 enchant.js がバージョンアップしたこと, windows 8 に対応したこと, アメリカで enchant.js, Inc. が設立されること, enchant MOON なるものが 作られようとしていること. ひと通りキャッチ... 続きを読む

Mac で確認用ダイアログを Tab, Space で操作できるようにしよう | TM Life

2012/12/05 29 users TAB Space Arrow confirm Mac

以前, 『 Mac を買ったら真っ先にやるキーボード設定』というエントリーを 書きました. で今回はその追記です. みなさん Windows で確認用ダイアログ(Confirm)が出たときってどう操作されてました? マスクでクリック, なんてせずにキーボードで操作されていた方も多いと思います. 私もそうでした. そしていざ Mac を使うと…あれ？ フォーカスが動かない… Tab も, Arrow... 続きを読む

CSS3 の text-shadow を使って文字を強調したり装飾したり | TM Life

2012/12/04 23 users text-shadow display Box プロパティ

久々に CSS3 についてのエントリーです. 以前書いた, 『CSS3 の display:box; を使ったフレキシブルな段組みレイアウト』 が大変好評だったので, CSS3 関連のエントリーもちょくちょく投稿していこうかなと思います. 今回は, text-shadow についてまとめました. text-shadow はその名の通りテキストに影をつけるプロパティです. しかし, そんな単純なプロ... 続きを読む

tmlib.js でモーダルウィンドウを作ってみた | TM Life

2012/12/02 24 users モーダルウインドウ tmlib.js イベントリスナ DOM

tmlib.js には tm.dom.Element というクラスが定義されており, これを使うことで様々な DOM 操作を行うことができます. 今回はそのサンプルとして tmlib.js でモーダルウィンドウを作ってました. サンプルは jsdo.it で作成しております. Table of contents サンプルについて ソースコードの解説 DOM 要素をクエリで取得 イベントリスナをさく... 続きを読む

[New] JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた | TM Life

2012/11/25 23 users tmlib.js ライブラリ 補正 自作ライブラリ 衝突判定

以前『JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた』 というエントリーを書いたのですが, tmlib.js の仕様が色々と変わってしまい動かない状態だったので, 修正しました. よかったら参考にしてください. 自作ライブラリ tmlib.js を使って, 円同士の衝突プログラムを作ってみました. やっているのは, 円同士の衝突判定 めり込みの補正 衝突後... 続きを読む

JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた | TM Life

2012/11/25 14 users tmlib.js ティーエム ライブラリ 補正 反発

TM Life!!(ティーエム ライフ) 「Time is money」をモットーとしたサイトです. 主にプログラミングについて描いています.日本国民全員プログラマ化計画進行中!! 自作ライブラリ tmlib.jsを使って, 円同士の衝突プログラムを作ってみました. やっているのは, 円同士の衝突判定 めり込みの補正 衝突後の反発 です. ちゃんと計算するなら, 衝突時間を調べてその分ベクトルの長... 続きを読む

tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編 | TM Life

2012/11/22 49 users tmlib.js Graphics 怒濤 ハッカソンイベント

tmlib.js のハッカソンイベントをやることになりました!! っということでそれまでにバンバン tmlib.js のエントリーを投稿していこうと思います. 今回はその第一弾! Graphics(HTML5 Canvas) 編です. このサイトでお馴染みの怒濤シリーズ. tmlib.js の Graphics 周りの機能についてのサンプルを作りまくってみました. 怒濤って何？って方はこちらをどう... 続きを読む