１０分でできる!!Monacaとtmlib.jsでゲームアプリを作る環境を作る方法!!｜By U Zensen.
＊ はじめに!! 初めましてぴーすけと申します。 私ごとになりますが、今年の目標としてハイブリットアプリを開発し、公開をするという目標があります。そして私が作りたいアプリはゲームアプリです。構想はいろいろありますが、とりあえずは開発環境を整える必要があります。 そこで私が選んだのが、開発プラットフォームとしてブラウザがあればどこでも簡単に開発ができ、HTML5、JavaScriptで作成することができる「Monaca」とゲーム開発用のJavaScriptライブラリである「tmlib.js」を使用することにしました。 【注意】 この記事は2015/7/1に実際に「Monaca」や「tmlib.js」を使うための設定や登録を行い、その過程を書いたものになります。今後「Monaca」や「tmlib.js」に変更があれば登録や使用方法が変わるかもしれないので、ご注意ください。 ※ 登録、設定、動作
ハンズオン！tmlib.jsゆるふわ勉強会タッチゲームを作ろうに参加した
こんにちは。ゲーム大好き、JavaScript大好きのカグア！です。 昨日、幸運にもライブラリ作者さん主催のtmlib.jsのハンズオン勉強会に参加してきました。ドアキーパーで募集して速攻埋まるという人気の勉強会をレポートします（まあ会場を借りる橋渡しをしたので厳密には居候ですが）。 tmlib.jsとは、JavaScript製でつくられた、ゲーム制作を効率化するための便利なライブラリです。すでに多くのゲームが作られていて、国内でも人気が高まっているゲームエンジンの1つです。 ＞＞Home | tmlib.js tmlib.js勉強会の内容 勉強会の参加メンバーはライブラリ作者のphiさん含め8名。少人数でしたので、がっつり質問とかも出来て超感激でした。参加者は、ゲームエンジニアもいればエンジニア、WEB制作者などなど開発に関わる方ばかりでしたが、わたしのような門外漢にもやさしく教えていた
tmlib.js 入門 – タッチゲームを作ろう – Step02 タッチ時の処理とゲームクリア処理を実装しよう | tmlife
『tmlib.js 入門 – タッチゲームを作ろう』 の Step02 になります. 今回は, ピースをタッチに反応するようにして, 更にすべてタッチし終わったらリザルト画面に遷移するようにします. この Step でなんとなくゲームとして遊べるようになります. 今回の目標サンプル 前回はピースを表示するところまで実装しました. 今回はそこから, ピースのタッチ判定とクリア判定までを実装します. [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったところから作業していきます. 2. タイマーとタッチする対象インデックス用変数を定義 GameScene の init 関数内で, 時間を測定する際に使う変数と, タッチ対象となるピースのインデックスの値を保持する変数それぞれを定義します.
人気のゲームエンジン 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 入門 – タッチゲームを作ろう – Step01 ピースを並べて表示しよう | tmlife
『tmlib.js 入門 – タッチゲームを作ろう』 の Step01 になります. 今回作るゲームにおいてもっとも重要なステップです. ピースを画面に表示していきます. いっきに画面がゲームっぽくなりますよ. 今回の目標サンプル 前回はひな形の作成まででしたが, 今回はそこから縦横に敷き詰められたピースを表示するところまで作ります! [runstant] 実装 まずは実装していきましょう. 1. 作業用 runstant を開く こちらを開いて下さい. [runstant] 前回作ったひな形のところから作業していきます. 2. 開始シーンをタイトルからゲームに変えよう 毎回実行し直す度にタイトル画面から始まるのは面倒なので. setup の startLabel で指定していた値を ‘title’ から ‘game’ に変更しましょう. // 初期化 tm.game.setup({
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 v0.3.0]クリッピング機能の紹介 - Qiita
はじめに tmlib.jsの製作者である@phiさんにお誘い頂き、Qiitaを始めてみました。 記事を書くのは慣れていないので分かりにくい点が多々あるかもしれませんが、どうぞよろしくお願いします。 tmlib.jsはゲーム制作を目的としたライブラリなので、当然ゲーム制作に最も適しているのですが、 ちょっとしたWebアプリをお手軽に作りたい！という時にも非常に役立ってくれます。 ですが、ドキュメント面がまだまだ乏しく、あまり知られていない機能も数多くあるようです。 今回はv0.3.0の新機能である「クリッピング機能」についてご紹介したいと思います。 クリッピングとは？ クリッピングとは画像処理で主に使われる用語で、必要な部分だけを切り抜く操作の事です。 親要素の形に合わせて子要素を自動的に切り抜いてくれます。 文章だけでは何のことかさっぱり分かりませんので、さっそくサンプルを見てみましょう。
![[tmlib.js v0.3.0]クリッピング機能の紹介 - Qiita](https://cdn-ak-scissors.b.st-hatena.com/image/square/c8a543fb757a6984b1ebc30ca7633ec8e1a6c791/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-dGV4dD9peGxpYj1yYi00LjAuMCZ3PTk3MiZoPTM3OCZ0eHQ9JTVCdG1saWIuanMlMjB2MC4zLjAlNUQlRTMlODIlQUYlRTMlODMlQUElRTMlODMlODMlRTMlODMlOTQlRTMlODMlQjMlRTMlODIlQjAlRTYlQTklOUYlRTglODMlQkQlRTMlODElQUUlRTclQjQlQjklRTQlQkIlOEImdHh0LWFsaWduPWxlZnQlMkN0b3AmdHh0LWNvbG9yPSUyMzNBM0MzQyZ0eHQtZm9udD1IaXJhZ2lubyUyMFNhbnMlMjBXNiZ0eHQtc2l6ZT01NiZzPWRmNGMzY2FiODUxNzA4MDdkYTBhZWM2NDYwMDI0ZGQ5%26mark-x%3D120%26mark-y%3D96%26blend64%3DaHR0cHM6Ly9xaWl0YS11c2VyLWNvbnRlbnRzLmltZ2l4Lm5ldC9-dGV4dD9peGxpYj1yYi00LjAuMCZoPTc2Jnc9OTcyJnR4dD0lNDBNb2d5RmFybSZ0eHQtY29sb3I9JTIzM0EzQzNDJnR4dC1mb250PUhpcmFnaW5vJTIwU2FucyUyMFc2JnR4dC1zaXplPTM2JnR4dC1hbGlnbj1sZWZ0JTJDdG9wJnM9ZWU0NDdlMGUzMzcxZjFiMjE2MjNlMWRiOGVlMGUzYzk%26blend-x%3D120%26blend-y%3D500%26blend-mode%3Dnormal%26s%3Ddd3a079b91edd7fed00b6e058c56e08f)
『runstant』早くもアップデート! コンソール対応とかテーマ設定とかしてみた - Qiita
先日『runstant』という Webツールを公開しました. アクセスログ見ると結構な人が使ってくれたみたいでありがとうございます! 思いつきで適当に作ったわりに良いあんばいで落ち着いたので良かったです^^ それはそうと本題ですが, リリースしてからというもの あれができないだの, これ対応してくれだのと無責任なユーザーたちからありがたい意見が たくさん届いたので実装してみました. 今回はそのアップデート内容についてさらっと紹介します. 今回のアップデートの目玉です!! 昨日 『ドットインストール』と『runstant』って実は相性良いんじゃね？って話 という エントリーを公開したのですが, そこのコメントで @fainder さんから console.log の結果を見たいという大変おこがましい ありがたい要望が届きました. 確かになと思ったし, ドットインストールとの連携を勧めるなら
[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リソースの
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 というオブジェクトを定義して, そこに音データのキーとパスをセットしていま
怒首領蜂再現を目標にしたWebベースの弾幕STG·GL-Shooter2 MOONGIFT
GL-Shooter2はHTML5/JavaScript製のソフトウェア（ソースコードは公開されていますがライセンスは明記されていません）です。 HTML5で作られるゲームジャンルが多彩になっています。今回は弾幕シューティングゲームをHTML5で再現したGL-Shooter2を紹介します。コンセプトとして怒首領蜂（どどんぱち）再現を掲げています。 ローディング中。すぐに終わります。 立ち上がりました。奇麗なグラフィックスです。 スペースキーでメニューを選択します。 いきなり弾幕。今は弾に当たっても死ぬことはありませんので安心です。 こちらのミサイルはCキーで発射します。 Cキーを押し続けるとビームになります。 今のところ当たっても死なないのでCキーを押してどんどん敵を倒していく楽しさだけを味わえます。エンジンにtmlib.jsを使っています。今後の開発が楽しみなソフトウェアです。 MOON
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
tmlib vs enchant
TEST CORDING » Sassの@functionの使い方まとめ – プログラマブルな処理は@function
http://chromiumnisio.github.io/slide001/
TEST CORDING » node.js 怒濤の50サンプル!! – socket.io編