tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step02 ピースのタッチ処理とゲームクリア処理を実装しよう | TM Life
今回は, ピースをタッチした際にひっくり返るようにして, 更にすべてタッチし終わったらスコアを表示するようにします. この Step でなんとなくゲームとして遊べるようになります. Table of contents チュートリアル目次 サンプル ソースコード 解説 まとめ チュートリアル目次 前半 Step00 ゲームのひな形を作ろう (サンプル) Step01 ピースを定義して並べよう (サンプル) Step02 ピースのタッチ処理とゲームクリア処理を実装しよう (サンプル)←いまココ 後半 Step03 UI を実装しよう(サンプル) Step04 タイトル画面とリザルト画面を追加しよう( サンプル ) Step05 BGM, SE を鳴らそう( サンプル ) up サンプル 今回作るサンプルです. タッチするとひっくり返ってグレイになるのがわかると思います. また, 全てタッチし終
gl.enchant.js 入門 – ざっくりと作る流れをまとめてみました!! | TM Life
ついに enchant.js の拡張プラグイン gl.enchant.js の β版が公開されました. これは内部的に WebGL を使っているので高速で豊かな 3D 表現が可能です. OpenGL や 3D プログラミングは仕事柄, 専門というか得意分野なので, ついにキターって感じです♪ さっそく使ってみて, ついでに簡単なプログラムを作る流れをまとめてみました. 以前書いてたくさんの方に見ていただいた『enchant.js を使ってゲームを作ろう!!』同様, step 形式で細かく区切っています. 参考になれば幸いです. Sample and Download 今回制作するサンプルはこちら. 球体を表示して, キーボードやマウスで回転できるようにしただけの単純なサンプルです. ジンバルロック対応は気が向いたらやります. また, クロスドメインの規制でローカルではテクスチャが使えないの
gl.enchant.js で3D空間を動き回るウォークスループログラムを作ってみた | TM Life
gl.enchant.js で 3D 空間を動きまわるウォークスルー(Walk Through)プログラムを作ってみました. 3D プログラミングで基礎を学ぶにもってこいなウォークスループログラム. プレイヤーの移動やカメラの挙動など基本的な部分を学ぶことができます. コードはダウンロードできるようにしてあるので, よかったらイジって遊んでみてください. Sample and Download サンプルはこちら. 十字キーもしくはタッチで移動できます. 視点は, コックピット, 近, 遠の３タイプあり, スペースキーで切り替えることができます. ダウンロードはこちらからできます. Code Walk Through プログラム全体のコードです. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <!-- <base target="_
CoffeeScript と gl.enchant.js を使って15分で 3D ゲームを作ってみた. 動画もあるよ♪ | TM Life
またまたまた前回に引き続き CoffeeScript についてのエントリーです. 今回は, タイトルの通り CoffeeScript と gl.enchant.js を使って 15 分で 3D ゲームを作ってみました. 作ったゲームは以前書いたエントリー『gl.enchant.js を使って 10 分で 3D ゲームプログラミングしてみた. んで, その様子をビデオキャプチャーしてみました!!』で 作ったゲームと同じです. 狙いとして「 JavaScript で 10分掛かったけど, CoffeeScript だと 5分で作れちゃったよ～」ってエントリーにしようと考えていたのですが 何分 CoffeeScript はまだ不慣れなもので 15分も掛かってしまいましたw ただ, 慣れさえすれば Python のように流れるようにコードを書けるのでいくつかゲームなりツールなり作ればホントに 5分
弾幕シューティングが簡単に作れちゃう!! 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
怒濤の執筆!!「enchant.js開発のレシピ」を執筆しました(サンプル付き) | TM Life
いきなりですがゴメンナサイ… サンプルをお知らせするのを忘れておりました!! 以前, 『 怒濤の執筆!!「enchant.js開発のレシピ」を執筆しました.』という エントリーを書きました. 今回はその紹介に加え, サンプルページの紹介を追加しました. 良かったら参考にしてください. ってことで本題. 8月24日に私が執筆した「enchant.js開発のレシピ」という本が出版されました. enchant.js でゲーム開発をする際に使える実践的なサンプルを 集めたレシピ集です. 今年は『日本国民全員プログラマ化計画』に向けて大きく動きます!! Table of contents 本の内容 目次&サンプルページ 執筆にあたり 振り返り & 謝辞 もう一冊の enchant.js 本 姉妹書 本の内容 HTML5とJavaScriptベースのゲームエンジン「enchant.js」開発者向けの実
[New] JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた | TM Life
以前『JavaScript ライブラリ tmlib.js で円同士の衝突プログラムを作ってみた』 というエントリーを書いたのですが, tmlib.js の仕様が色々と変わってしまい動かない状態だったので, 修正しました. よかったら参考にしてください. 自作ライブラリ tmlib.js を使って, 円同士の衝突プログラムを作ってみました. やっているのは, 円同士の衝突判定 めり込みの補正 衝突後の反発 です. ちゃんと計算するなら, 衝突時間を調べてその分ベクトルの長さを調整して… ってやんないといけないのですが, 速度的に問題があるってのと難易度が上がってしまう(ホントはめんどくさい)のでちょっと省略しています. サンプルは jsdo.it の方に移植してあるので, 実際に 動かしたり, fork してイジったりして頂けると嬉しいです. Table of contents Code T
JavaScript ライブラリ tmlib.js を使って10秒で遊べるゲームを作りました | TM Life
TM Life!!(ティーエム ライフ) 「Time is money」をモットーとしたサイトです. 主にプログラミングについて描いています.日本国民全員プログラマ化計画進行中!! http://tmlife.io に引っ越しました. こちらでWebやプログラミングに関する情報をバンバン発信, 更新しているのでよかったら rss 登録していただけると幸いです. 先日公開した tmlib.js を使って 10秒で遊べる簡単なゲームを作ってみました. 今回制作したゲーム『Enclose Circle』は クリックもしくはタッチをして, どれだけのサークルを消せるかを競うゲームです. tmlib.js の処理で簡単にスマホ対応できるので, PC のブラウザでも iPhone や Android でもプレイすることができます. 自前サーバーを用意してランキングってまではやっていませんが, Twee
CSS3 で 3Dっぽいボールを作ってバウンドさせてみた | TM Life
※ phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです. CSS3 で 3Dっぽいボールを作ってバウンドさせてみました. 元ネタは『CREATING AN ANIMATED 3D BOUNCING BALL WITH CSS3』です. 元ネタは英語なのと色々と説明を端折っていたので, 私なりに作っていく過程を jsdo.it を使って Step by Step 形式でまとめてみました. 正月に CSS3 で鏡餅の年賀状を作ったとき(こちら)は ちょっと苦労しましたが, 今回は見た目のわりには手間が少なかったのでぜひみなさんも作ってみてください. すべて jsdo.it で作っているので実際に動かしたり, fork してコードをイジったりして遊んで下さい. Demo
最新版 FPS を表示する JavaScript ライブラリ 『Stats.js』 の使い方 | TM Life
半年ほど前に『FPS を表示する JavaScript ライブラリ『Stats.js』 の使い方メモ』 で Stats.js の使い方を解説しました. 最新版を見ると, ちょっと仕様が変更されていたので改めて解説書きました. また, サンプルをjsdo.itでも見られるようにしています. 実行したり fork して負荷テストして遊んでもらえると嬉しいです. Demo jsdo.it Download About Stats.js とは three.js の開発者でもある Mr.doob が開発された JavaScript パフォーマンスモニターです. 最近は Canvas を使った描画や webgl を使った処理負荷の高い 3D 描画を JavaScript 上で簡単に行えるようになりました. そこで自ずと必要になるのがパフォーマンスチェックです. そのパフォーマンスチェックを簡単に行える
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tmlife.net