tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step05 BGM, SE を鳴らそう | TM Life
これが最後の Step となります. 音を読み込んで再生することで 一気にゲーム感が増します! Table of contents チュートリアル目次 サンプル ソースコード 解説 まとめ チュートリアル目次 前半 Step00 ゲームのひな形を作ろう (サンプル) Step01 ピースを定義して並べよう (サンプル) Step02 ピースのタッチ処理とゲームクリア処理を実装しよう (サンプル) 後半 Step03 UI を実装しよう(サンプル) Step04 タイトル画面とリザルト画面を追加しよう( サンプル ) Step05 BGM, SE を鳴らそう( サンプル )←いまココ up サンプル 今回作るサンプルです. 音データを読み込んで再生しています. up ソースコード main.js 最初に ASSETS というオブジェクトを定義して, そこに音データのキーとパスをセットしていま
Unity 使ってみた | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. 今更ながら Unity 使ってみました. 前からとても興味のあった Scaleform が Unity に統合されるということで 今のうちに使い慣れておこうということで. 本当にただ使ってみただけって感じですが, ちょっとしたゲーム(?)も作ってみたのでよかったら遊んでやって下さい. Game 作ってみたゲーム(?)はこちらでプレイできます. 何秒間球を落とさずにいられるかというゲームです. Web Player 用にビルドするのも設定をちょこっと変えるだけで簡単♪♪ Flow 制作フロー フィールド用Cube(Field) を設置 障害物用Cube(Cube) を Field の上に4つ設置 平行光源(Di
tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step02 ピースのタッチ処理とゲームクリア処理を実装しよう | TM Life
今回は, ピースをタッチした際にひっくり返るようにして, 更にすべてタッチし終わったらスコアを表示するようにします. この Step でなんとなくゲームとして遊べるようになります. Table of contents チュートリアル目次 サンプル ソースコード 解説 まとめ チュートリアル目次 前半 Step00 ゲームのひな形を作ろう (サンプル) Step01 ピースを定義して並べよう (サンプル) Step02 ピースのタッチ処理とゲームクリア処理を実装しよう (サンプル)←いまココ 後半 Step03 UI を実装しよう(サンプル) Step04 タイトル画面とリザルト画面を追加しよう( サンプル ) Step05 BGM, SE を鳴らそう( サンプル ) up サンプル 今回作るサンプルです. タッチするとひっくり返ってグレイになるのがわかると思います. また, 全てタッチし終
CSS3 で追加された HSL の使い方 | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. CSS3 から色指定に HSL 色空間が追加されました. ここ最近は, ほぼ色指定には RGB ではなく HSL を多用するようになったので ざっくりとまとめました. 視認性を意識した色指定を直感的にできるのでぜひ使ってみてください. Example 実際に HSL を使ったサンプルです. Code <style> .example-wrap { display: -webkit-box; display: -moz-box; margin: 5px; padding: 5px; border: 1px solid black; } div[class^="box"] { margin: 10px; widt
[JavaScript]for 内でイベントリスナとか登録するときにやっちゃいがちな間違い. とその対処法を３つほど. | TM Life
つい先日, というか今日, @webryone さんからのコードレビュー依頼を受け @awebprogrammer さんとレビューしてたときに見つかったバグが あまりにもあるあるw だったのでエントリーとして書かせて頂きました.(許可済) そのバグというのは, for 内でイベントリスナを登録する際に 関数と関連づけられていない変数を使ってしまい最後の変数を参照してしまうというものです. JavaScript を勉強されている方であれば誰もが通る道…のはず. いまいち文章ではわかりにくいと思うので サンプルを作ってみました. Table of contents バグの Sample 対応その１: クロージャを使う 対応その２: event.targetを使う 対応その３: forEach を使う 対応その４ : this を使う @webryone さんのライブラリ webryone.js
HTML5 Canvas で縦書き対応してみた | TM Life
表題の通り, HTML5 Canvas で縦書き対応してみました. 友人からずっと『tmlib.js で縦書き対応してくれ〜』って言われていたのですが, 自分が使う機会がなかったので実装渋ってました. ごめんなさい. 割とサクッとやれたので解説がてらサンプル載せておきます. tmlib.js は次のバージョン(0.1.6)から対応版リリース予定です. 近々リリースします!! Table of contents HTML5 Canvas 縦書きデモ HTML5 Canvas 縦書きする方法 HTML5 Canvas 縦書きデモ up HTML5 Canvas 縦書きする方法 縦書き描画の実装は下記のコードになります. tategakiという関数を実装しています.(ローマ字でごめんなさい, 良い感じの名前が思いつかなかったのでw) var tategaki = function(context
HTML5 Canvas で Polygon(多角形)描画 | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. 今, JavaScript のゲームライブラリを制作しています. まだ公開前ではありますが, 整理がてら その中からチョコチョコと機能を晒していこうと思います. では早速, 今回は Polygon(多角形) を描画するサンプルを作りました. この多角形描画処理を使えば簡単に下図のようなキレイな三角形や色々な多角形を描画することができます. Sample and Download 今回制作したサンプルはこちらです. サンプルはこちらからダウンロードできます. Code Script ポリゴンを描画する関数を定義しているスクリプト(tm.polygon.js)のコードです. /** * @author phi *
JavaScript のコードからモダンなドキュメントをさくっと生成してくれる『JSDuck』の使い方 – 導入編 | TM Life
今回は, JavaScript のコードから洒落乙なドキュメントをサクッと生成してくれる 『JSDuck』について紹介します. コード中のコメントやコードを解析して 見やすくて使いやすいドキュメントを生成してくれます. 実は私が開発しているJavaScriptライブラリ『tmlib.js』のドキュメントも JSDock を使って生成していたりします.Docs とてもオススメなので良かったら使ってみてください. Table of contents jsduck とは？ jsduck のインストール jsduck の使い方 jsduck デモ jsduck とは？ jsduck とは Sencha JavaScript フレームワークのために作られた API ドキュメント生成ツールです. Sencha JavaScript のために作られたといっても, 普通の JavaScript コードでも
超便利!! Web 上で 差分表示(diff) できちゃうjsライブラリ『mergely』を使ってみたよ♪ | TM Life
web 上で差分(diff)を表示するjsライブラリ『Mergely』を使ってみました. fullscreen で見るとキレイだよ♪ Sample Mergely とは Mergely とは, Web 上で差分(diff)を表示してくれるライブラリです. 簡単に組み込めて, リアルタイムで diff してくれるイケてる作りになっています!! もともと Web サービス『Mergely』としてリリースされていたようです そこから差分(diff)を表示する機能を切り出してライブラリとしてリリースされています. 今回は, そのライブラリを使って簡単なサンプルを作ってみました. Mergely の使い方 使い方は簡単♪ jquery を読み込む codemirror の js/css を読み込む mergely の js/css を読み込む $(…).mergely を実行 たったこれだけで di
tmlib.js でちょっとしたペイントツール作ってみた | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. tmlib.js でちょっとしたペイントツール作ってみた. JavaScript のコードはたったの90行!! tmlib.js を使うと, 簡単に dom を操作できたり, マウス位置, タッチ位置をサクッと取得できるので最小限のコードでこういったサンプルを作ることができます. よかったら実行したり fork してイジって遊んで下さいな♪ Sample 主な機能 カラーパレットで色変更 スライドでライン幅調整 Save ボタンで画像を保存 Clear ボタンでビューをクリア Tips マウス or タッチ位置の取得 ブラウザでは, mousemove や touchmove といったイベント発行時に 呼ばれ
Web 上で簡単にワイヤーフレームを作成, 公開できるツール – wireframe.cc | TM Life
以前紹介した『rvl.ioの使い方』エントリーが好評だったので, またまたWebツールについての紹介です. 今回は, Web 上で簡単にワイヤーフレームを作成, 公開できるサービス『Wireframe.cc』について 紹介します. Table of contents Wireframe.cc って？ Wireframe.cc の使い方 Wireframe.cc って？ Wireframe.cc は, ウェブサイトとモバイルアプリ用の簡単なフレームワークを作成, 公開できる Web ツールです. 下のリンクから Go!! View 直感的に操作でき, 機能も最低限に絞っているので 簡単に使い始めることが出来ます. 作成した内容を URL で保存するってのも気軽に使えて 良いですね. up Wireframe.cc の使い方 マウスで領域をドラッグするとそこにワイヤーフレームボックスが作成され
tmlib.js と WebAudio API で MML 対応してみたよ♪ | TM Life
tmlib.js と WebAudio API で MML 対応してみましたー!! MML 系の情報は少なかったのですが, 良質なものが多かったのでわりと サクッと実装できました!! 動的に入力した MML から音楽を再生するサンプルを作ってみたので よかったら色々打ち込んで遊んで下さい♪ これで tmlib.js は画像データ, 音データどちらも動的に 作って再生できるようになりましたー＼(＾o＾)／ もちろんサンプルは jsdo.it で作ってあるので, その場で実行できます. tweet ボタンを押すと, 入力した MML を保存した状態で Twitter に投稿できます!! 作った音楽をみんなに自慢しよう♪ あと iPhone でも iOS6 だったら鳴ります!! Table of contents Sample MML って何? Flash の SiON Reference Sa
tmlib.js の WebAudio API 機能でピアノ作ってみた!! iPhone でも鳴るよん♪ | TM Life
tmlib.js でピアノを作ってみました. iPhone でも音鳴ります!! 以前作っていた『tmlib.js examples – Piano』は tm.sound.Sound(Audio 要素)を使って作っていました. 今回は, それを tm.sound.WebAudio(WebAudio API)を使って作り直してみました. WebAudio API は cross domain の制約があるってのは痛いけど, iPhone でもバンバン音が鳴るので良い感じ♪ サンプルは jsdo.it で作っているので, 良かったら実行したり fork して遊んで下さい. @daishi_hmr さんや, @minimo が pull request 送ってくれて 良い感じで開発できてる. tmlib.js は, 『これを使えばネイティブで開発なんかしなくても 色々なものが作れるよ♪』と胸を張っ
tmlib.js で様々なソートをビジュアル化してみた | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. 昔作ってた visual sort を tmlib.js で作りなおしてみました. 色々なソートをビジュアル化してます. ビジュアル的にソートの流れが分かるよん♪ 個人的には bidirectionalBubbleSort が好き♪♪ jsdo.it で作っているので, 気軽に実行できます. まだまだ色々なソートがあるので fork して実装してくれると凄く嬉しいです. Sample Demo Check out this Pen! bubbleSort /** * バブルソート */ var bubbleSort = function(list) { var sortProcess = []; var le
弾幕シューティングが簡単に作れちゃう!! tmlib.js x BulletML を使ってみよう | TM Life
.@daishi さんが tmlib.js でサクっと BulletML を使えるようにしてくれていたので, 使ってみました!! ん～超良い感じ～♪ 用意したサンプルは jsdo.it で作ってあるので, fork して パラメータをイジってもらえれば色々と遊べると思います. Sample Demo Table of contents tmlib.js とは？ BulletML とは？ tmlib.js x BulletML を使ったサンプル tmlib.js x BulletML で作られたゲーム tmilb.js とは？ そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです. 詳しくは下記のリンクにて tmlib.js とは 以前, 勉強会で発表させていただいたスライドです. GitHub tml
tmlib.js x three.js(WebGL) で10000個のパーティクルを表示してみた | TM Life
tmlib.js x three.js(WebGL) でパーティクル表示してみました! 10000 個表示しても 30 fps でるのは脅威!! jsdo.it で作ってあるので実際に実行したり, fork して遊んでもらえると幸いです. Table of contens tmlib.js とは？ three.js とは？ コード 解説 『Global Game Jam 2013 【新宿会場】with tmlib.js』やります!! tmlib.js とは？ そもそも tmlib.js って何って方のために軽く紹介. 簡単に言うとゲームやツールを簡単に作るための JavaScript ライブラリです. 詳しくは下記のリンクにて tmlib.js とは 以前, 勉強会で発表させていただいたスライドです. GitHub tmlib.js は GitHub で管理しています. Documents
3D ゲームも簡単に作れる! tmlib.js x three.js(WebGL) で 3D プログラミング出来るようにしてみた!! | TM Life
私の方でずっと作っている JavaScript ライブラリ『tmlib.js(ティーエムリブ ジェイエス)』ですが, この度, 晴れて『three.js』と結ばれることとなりました. っとはいっても一方的にですけどねw tmlib.js は, 2Dゲームだったりツールを作る機能は揃っていましたが 3D に関する機能は今までありませんでした. WebGL をラップして自前で作ったりもしていたのですが, なかなかピンとこず… そこで今回は割りきって three.js をそのまま取り込んでtmlib.js の基本インターフェースと同じように使えるようにしてみました. サンプルをいくつか用意したので遊んで頂けると幸いです. もちろん jsdo.it で♪ Table of contents tmlib.js とは？ three.js とは？ tmlib.js x three.js で作ったサンプル
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tmlib.js の WebAudio API の音源位置指定機能を使って遊んでみた | TM Life
tmlib.js の WebAudio API 機能を使ってビジュアライザを作ってみたよん♪ | TM Life
今日はバレンタイン!! ってことで tmlib.js でハート描画対応してみた | TM Life
