人気のゲームエンジン tmlib.js、0.5系チュートリアルなどまとめ
tmlib.jsをはじめる前の予備知識をまとめました。 関連記事 ＞＞ハンズオン！tmlib.jsゆるふわ勉強会タッチゲームを作ろうに参加した 追記：2015年5月7日 ノベルゲームプラグインのリンク追加。 追記：2015年5月6日 学習の進め方を追記しました。runstantで0.4系基本テンプレがいっきに書けるイースターエッグが！ 追記：23:12 リンク2本追加しました。神にもブクマして頂き((((；ﾟДﾟ))))ｶﾞｸﾌﾞﾙ！でも、ほんとtmlib.js楽しいよ！ tmlib.jsとは 国産のJavaScriptゲームエンジンです。アクションゲームやRPGなどにも使われるほどの高速性が人気です。当たり判定のコリジョンなども含まれていて、現在バージョン0.6が開発中で最新版は 0.5系（2015年5月7日現在0.5.1） です。JavaScriptでゲームづくりをするときに役立つ命令
tmlib.js 入門 – タッチナンバーを作ろう | tmlife
個人的にずっと作ってるゲームライブラリ tmlib.js のゲームプログラミングチュートリアルです. 最近は, iPhone アプリや Andorid アプリ, 勉強会や教育機関などでも使われてきている tmlib.js. 4月に 0.5.0 をリリースし, 大幅アップデートしてだいぶ仕様も固まり使いやすくなってきました. なので, そろそろ真剣にチュートリアルを充実させていきます!!(今までサボっててごめんなさい) 今回はタッチナンバーという, 超画期的よくあるカジュアルゲームを作っていきます. tmlib.js って何？ さっそく作る前に tmlib.js って何？って方もいると思うので軽く説明させてください. ざっくり言うと tmlib.js は アイディアを即座に形にできるライブラリです. 『てぃーえむ りぶ ドット じぇいえす』と読みます. tmlib.js を使えば, ゲ
[tmlib.js] ManagerSceneでのシーン管理 - Qiita
tmlibのシーン管理についてちょうど数日前に良い方法を知れたので共有しておこうと思います。 今までのシーン移動 ほんとはもっとスマートな方法もあるんでしょうが自分はだいたい以下の2パターンくらいでした。 // ちょっと動的にやってみる var sceneList = { "hoge": HogeScene, "piyo": PiyoScene, "fuga": FugaScene, } var sceneName = "hoge"; app.replaceScene(sceneList[sceneName]()); なんかイケてない…。 tm.scene.ManagerScene!? なんかDocsに謎の存在が！ tm.scene.ManagerScene - tmlib.js docs イマイチ使い方わからないのでちょうど日本語版が出たスタック・オーバーフローで質問してみたらphiさん
![[tmlib.js] ManagerSceneでのシーン管理 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/6a712c736dd27d92b94ef7e0875e166337f9bd08/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Fadvent-calendar-ogp-background-7940cd1c8db80a7ec40711d90f43539e.jpg%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCdG1saWIuanMlNUQlMjBNYW5hZ2VyU2NlbmUlRTMlODElQTclRTMlODElQUUlRTMlODIlQjclRTMlODMlQkMlRTMlODMlQjMlRTclQUUlQTElRTclOTAlODYmdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTI3ZmQxOTFhZTNmOWI4Y2IxMjNhOGEyZTNhZTgyYjcz%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBoYWx0X2pwJnR4dC1jb2xvcj0lMjMzQTNDM0MmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz01MjA0NTE4MzVkYmQ4YjkwOTA1OGMzZDQ2OTM4NjYxNA%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3D82bca4a253e12605c494ac617de1dd09)
tmlib.jsで3Dモデル表示 - Qiita
tmlib.js Advent Calendar 2014の13日目の記事です。 (three.jsでつまづいて投稿が遅れてすいません) tmlib.js x three.js tmlibはthree.jsとの連携もサポートしてます（three.jsのver.57以前までなら動作OKでした） 最新のver.69までサポートしてくれるとモーフアニメーションも使えるので、今後のサポートに期待してますっ！ という訳で今回はtmlib.jsで3Dモデル表示してみました〜♪ （WSADキー or 矢印キーで視点操作できます） １）まずはblenderでモデル作成 tmlibはひよこが公式キャラなのでblenderでなんとなく作ってみる。 Web用に3Dモデル作るなら以下の点でblenderがオススメです！ 1. 無料でMacもWindowsもソフトが動く 2. three.js用にインポート/エクス
[tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita
tm.display.Spriteのテクスチャに、プログラムで動的に生成した画像を利用する方法を紹介します。 やり方は至って簡単。 tm.graphics.Canvasオブジェクトを画像アセット名の代わりにコンストラクタに渡すだけです。 // キャンバスを用意 var t = tm.graphics.Canvas(); ... // いろいろ描く // スプライトに利用する tm.display.Sprite(t); // 100x100を横に12個並べたテクスチャを生成します var texture = tm.graphics.Canvas().resize(100 * 12, 100); for (var i = 0; i < 12; i++) { // 初期位置を保存しておきます texture.save(); // 右に100ずつずらします texture.translate(10
![[tmlib.js] スプライトのテクスチャをプログラムで生成する - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/a0b3ba13ce5cce3bc88938462fb291aecbfcf864/height=288;version=1;width=512/https%3A%2F%2Fqiita-user-contents.imgix.net%2Fhttps%253A%252F%252Fcdn.qiita.com%252Fassets%252Fpublic%252Farticle-ogp-background-412672c5f0600ab9a64263b751f1bc81.png%3Fixlib%3Drb-4.0.0%26w%3D1200%26mark64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCdG1saWIuanMlNUQlMjAlRTMlODIlQjklRTMlODMlOTclRTMlODMlQTklRTMlODIlQTQlRTMlODMlODglRTMlODElQUUlRTMlODMlODYlRTMlODIlQUYlRTMlODIlQjklRTMlODMlODElRTMlODMlQTMlRTMlODIlOTIlRTMlODMlOTclRTMlODMlQUQlRTMlODIlQjAlRTMlODMlQTklRTMlODMlQTAlRTMlODElQTclRTclOTQlOUYlRTYlODglOTAlRTMlODElOTklRTMlODIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzIxMjEyMSZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPTRiZTI4MjJlZjY0Y2M4MGE0ZDJkYTQ2MzNmYjlmYzEy%26mark-x%3D142%26mark-y%3D57%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9NzcwJnR4dD0lNDBkYWlzaGlfaG1yJnR4dC1jb2xvcj0lMjMyMTIxMjEmdHh0LWZvbnQ9SGlyYWdpbm8lMjBTYW5zJTIwVzYmdHh0LXNpemU9MzYmdHh0LWFsaWduPWxlZnQlMkN0b3Amcz0wOWUxZTI0ZjYyN2VhYTIxZjdmMWI2MjQ2Njk4ODZlMg%26blend-x%3D142%26blend-y%3D486%26blend-mode%3Dnormal%26s%3D11ea46d9876852948e9b1b1b19c3686a)
tmlib.jsでのアセットのロード - Qiita
tmlib.jsでは、画像や音声等の素材を使用する前にロードしておくためにtm.ui.LoadingSceneを使います。 画像のロード 以下、"hiyoko.png"という画像をスプライトに貼って画面に出すコード例です。 tm.main(function() { var app = tm.display.CanvasApp("#app"); // LoadingSceneを作成 // "hiyoko.png"をロードし、"piyo"という名前で登録する // ロード完了後、MainSceneへ遷移する var loadingScene = tm.ui.LoadingScene({ assets: { "piyo": "hiyoko.png" }, nextScene: MainScene }); app.replaceScene(loadingScene); app.run(); });
[tmlib.js] Array(配列)を便利にする変数, メソッドたち
03 Apr 2014 on javascript | tmlib.js [tmlib.js] Array(配列)を便利にする変数, メソッドたち どうも phi です. 久々に書きます. tmlib.js はゲームライブラリだと思われがちですが, コア機能を拡張してたり, ゲーム意外でも使える汎用的な機能やDOM を操作する機能などもあります. 今回はその中から Array(配列) を拡張して使えるようにしている 便利変数, メソッドを紹介します. ちなみにこれから紹介する変数, メソッドは すべて tmlib.js を読み込む(下記一行を追加する)だけで使えるようになります. <script src="http://rawgithub.com/phi-jp/tmlib.js/0.2.2/build/tmlib.js"></script> また, Array 以外にも Number や
![[tmlib.js] Array(配列)を便利にする変数, メソッドたち](https://cdn-ak-scissors.b.st-hatena.com/image/square/73910506a013efeb613f3e9b3a7ccb638baf2752/height=288;version=1;width=512/http%3A%2F%2Ftmlife.io%2Fcontent%2Fimages%2F2014%2FApr%2Ftomapiko.png)
tmlib.js : オブジェクトを知っておく。 : typeOf 'aki_mana'
てことで、メモをペタっ！ （2013-10-16改訂：0.2.0 に向けた修正） [tm.util]：#１ユーティリティ tm.util.Random .. 乱数ジェネレータ tm.util.Timeline .. タイムライン処理を行うクラス（remove系が未実装なので不要かも） tm.util.QueryString .. URLのクエリストリング処理関数群 tm.util.Type .. オブジェクトの型チェック用スタティック関数群 [tm.util]：#２データリソース tm.util.Ajax .. HTTP通信を用いたWebリソースへのアクセス機能（リクエストヘッダの追加はできない） tm.util.File .. Ajax を用いたWebリソースの読み込み機能（FileManager.load()で呼ばれる ） tm.util.FileManager .. Webリソースの
怒首領蜂再現を目標にしたWebベースの弾幕STG·GL-Shooter2 MOONGIFT
GL-Shooter2はHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 HTML5で作られるゲームジャンルが多彩になっています。今回は弾幕シューティングゲームをHTML5で再現したGL-Shooter2を紹介します。コンセプトとして怒首領蜂（どどんぱち）再現を掲げています。 ローディング中。すぐに終わります。 立ち上がりました。奇麗なグラフィックスです。 スペースキーでメニューを選択します。 いきなり弾幕。今は弾に当たっても死ぬことはありませんので安心です。 こちらのミサイルはCキーで発射します。 Cキーを押し続けるとビームになります。 今のところ当たっても死なないのでCキーを押してどんどん敵を倒していく楽しさだけを味わえます。エンジンにtmlib.jsを使っています。今後の開発が楽しみなソフトウェアです。 MOON
Home | tmlib.js
tmlib.js って何？ ゲームやツールを簡単に作る事ができる JavaScript ライブラリだよ♪ PC とスマートフォンどちらでも動くんだ 『プログラミングって気軽にできるもんなんだ』 『ゲームってこんなに簡単に作れるんだ』 って感じてもらえると嬉しいな かんたんに使えるよ♪ tmlib.js は初心者から上級者まで 幅広く使えるライブラリだよ Usage を見ればすぐに tmlib.js を 使ってプログラミングを始められるよ
tmlib.js で今流行のフラットデザインを使ったタッチゲームを作ろう – Step02 ピースのタッチ処理とゲームクリア処理を実装しよう | TM Life
今回は, ピースをタッチした際にひっくり返るようにして, 更にすべてタッチし終わったらスコアを表示するようにします. この Step でなんとなくゲームとして遊べるようになります. Table of contents チュートリアル目次 サンプル ソースコード 解説 まとめ チュートリアル目次 前半 Step00 ゲームのひな形を作ろう (サンプル) Step01 ピースを定義して並べよう (サンプル) Step02 ピースのタッチ処理とゲームクリア処理を実装しよう (サンプル)←いまココ 後半 Step03 UI を実装しよう(サンプル) Step04 タイトル画面とリザルト画面を追加しよう( サンプル ) Step05 BGM, SE を鳴らそう( サンプル ) up サンプル 今回作るサンプルです. タッチするとひっくり返ってグレイになるのがわかると思います. また, 全てタッチし終
サービス終了のお知らせ - NAVER まとめ
サービス終了のお知らせ NAVERまとめは2020年9月30日をもちましてサービス終了いたしました。 約11年間、NAVERまとめをご利用・ご愛顧いただき誠にありがとうございました。
JavaScriptライブラリ「tmlib.js」でシンプルなタッチゲームを作るチュートリアル
This domain may be for sale!
JavaScript+canvasでiPhone風ピッカーを作ってみた – tmlib.js
This domain may be for sale!
javascript+canvasでiPhoneのピッカーを作ってみた - jsdo.it - Share JavaScript, HTML5 and CSS
blog - http://testcording.com/?p=1225 スマホでも触ってみてください。 2013/04/25 - パラメータ名の変更＋追加、メニュー内要素のフェードアウト開始位置の変更 2013/04/30 - ドラッグ処理をgithubからダウンロードするように変更 : https://github.com/omatoro/tmlib.js_drag // forked from omatoro's "canvasだけでプルダウンメニュー - プロトタイプ ver.0.6" http://jsdo.it/omatoro/u69f // forked from omatoro's "canvasだけでプルダウンメニュー - プロトタイプ ver.0.5" http://jsdo.it/omatoro/mp3D // forked from omatoro's "canv
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
http://chromiumnisio.github.io/slide001/
http://phi1618.github.io/tmlib.js/
私がenchant.jsではなくtmlib.jsでゲームを作る5つの理由
JavaScriptライブラリ「tmlib.js」でローグライクを作ってみた