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 というオブジェクトを定義して, そこに音データのキーとパスをセットしていま
tmlib.js ゲームプログラミングチュートリアル – 今流行のフラットデザインを使ったタッチゲームを作ろう | TM Life
先日, @omatoro さんが『私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由』というエントリーを 公開されました. これがすごい反響だったらしく, 私の方にも様々な意見や質問がきました. おかげで tmlib.js の知名度が一気に上がり実際に触ってくれてる人も増えました. 本当にありがとうございます. ただ, ここで一つ問題が… tmlib.js には公式のチュートリアルというものがないのです!! せっかく触ろうとしてくれてる人がいるのに, それを学ぶための公式資料がない… 本当に申し訳ない. 怠惰な自分に反省!! ってことで今回は Step by Step で tmlib.js を学びながらゲームを作ることができる チュートリアルを書いてみました. よかったら参考にしてくださいな♪ 最近何かと話題のフラットデザインを取り入れています. すいません, まだ
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 *
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 で作ったサンプル
Google Chart API – LaTeX を使って数式画像を動的に生成するツールを作ってみた | TM Life
Google Chart API は Google 大先生のサービスのひとつで, URL にパラメータを指定することでグラフ画像を生成してくれます. 現在は, 折れ線グラフや棒グラフ, ベン図, QRコードなどに対応していてこれらの画像を簡単に生成することができます. その中でも今回取り上げるのは LaTeX です. LaTeX にも対応していることはあまり知られていないようで, wikiでも漏れていましたw 最近, 数式をページに埋め込みたい場面がちょくちょく出てきたので LaTeX を打ち込むと, それを画像として生成するツールを作ってみました. Demo 今回制作したツールはこちらです. テキストエリアに LaTex を打ち込んで下さい. 行単位で内容に応じて右側に画像と埋め込み用リンクを生成します. サイズと背景色(16進数rgba)とフォントカラー(16進数rgba)も反映されま
Three.js でピッキング(3Dモデルをマウスで選択)してみた | TM Life
久々の 3D プログラミング. Three.js を使ってピッキングしてみたので, 今回はそのやり方について簡単に解説したいと思います. サンプルは jsdo.it で作ってあるので, 実際に動かしたり, fork してイジってもらえると嬉しいです. table of contents キッカケ サンプル ソースコード 解説 マウス位置を求める(Line 5~8) マウス座標を 3D 化する(Line 10~12) マウス位置から 3D ベクトルを作成(Line 15~17) レイを作成(Line 20) レイとメッシュの交差判定(Line 22) 衝突結果の取得(Line25) キッカケ 昨日, @kino_hideyoshi さんから下記のような質問を頂きました. @phi_jp 初めまして。mqo.three.jsについて質問がありTweetさせていただきました．表示されているmqo
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tmlib.js の WebAudio API の音源位置指定機能を使って遊んでみた | TM Life
tmlib.js の WebAudio API 機能を使ってビジュアライザを作ってみたよん♪ | TM Life
今日はバレンタイン!! ってことで tmlib.js でハート描画対応してみた | TM Life
tmlife.net