JavaScript
HTML5
tmlib.js
ゲーム制作
More than 1 year has passed since last update.

Qiitaで初めての記事になります。simiraaaaと申します。
よろしくお願いします。
tmlib.jsを知らない人向けに紹介していきます。

tmlib.jsとは

JavaScriptでゲームやWebアプリが簡単に作れるライブラリです。
http://phi-jp.github.io/tmlib.js/

phina.jsについて 追記

tmlib.jsは現在phina.jsというライブラリに名前を変えて開発を進めております。
http://phinajs.com/

tmlib.jsを再設計し、さらに使いやすくなっていると思います。

ここがすごい!

phi_jpという神がサポートしてくれる!(敬称略)

phi_jpさんはtmlib.jsの作者です。
「こんなエラーが出てどうしたらいいかわからない」
「これはどうしたらできますか?」
など、質問すると真剣に答えてくれます。
※できるだけ自分で調べましょう。

こんなすごいゲームが作れる!

TM-Shooter
tmshooter

TM-Shooter スコア重視プレイ その1(7426億6900万1027)
TM-Shooter スコア重視プレイ その2(7426億6900万1027)

このゲームはdaishi_hmrというすごいお方が作ったものです。
ブラウザゲーで初めて真剣に攻略したかもしれません。
ほかにはこんなゲームを作ってます。
http://daishihmr.github.io/
どれも面白いので、ぜひプレイしてみてください。

サンプルがいっぱいある!

tmlib.js サンプル集
tmlib.js 怒濤の 100 サンプル!! – Graphics(HTML5 Canvas) 編
解説もある!
tmlib.js 100 サンプル!! 解説一覧
ほかにも調べきれないぐらいサンプルがあります。
jsdo.itなどで調べるとたくさん出てきます。
誰かが作ったゲームの公開されているソースなどを参考にすることもできます。

追記2015/07/16

[tmlib.js] リファレンスのようなものというサンプル付きのリファレンスのようなものを書いてます。
よかったら参考にしてみてください。

初心者でもすぐにゲームが作れる!

ゲーム作ったことないし、JavaScriptもほとんど触ったことない。
という自分でもゲームが作れるまで成長しました。
tmlib.jsがなかったら今の自分はないし、この記事も書いてないと思います。
tmlib.js感謝!
この動画を参考にして作りました。
tmlib.jsでゲームを作ってみよう(1)
daishi_hmrさんの動画です。勝手に師匠だとか恩師だとか思ってます。
まず動画のコードをほとんど丸写しで、動くようにしました。
そのあと、ちょっとずつ調べながら弾の種類を増やしたり、ボスを作ったり、
ボスに弾幕を撃たせたりと遊べるゲームにするまで改造していきました。
そして、出来たゲームがこれです。
弾幕シューティング(仮)
弾幕シューティング(仮)
実はこの間、6面のボスを作り、難易度調整をして、とりあえず完成というところまで持って行きました。
なぜか、画像を使わない縛りをしています。

9leap APIも使える!

9leapというHTML5 JavaScriptで作ったゲームを投稿できるサイトで
ゲームのセーブデータを保存したりランキング情報を取得するAPIが使えるようになっています。
弾幕シューティング(仮)にもセーブ機能があります。
実は自分でセーブ機能をつけようとして分からなかったので、daishi_hmrさんに相談したらtmlib.jsで簡単に9leapAPIが使えるようにしてくれました!本当にありがたい!

3Dゲームも作れる!

Three.jsと組み合わせて使うと簡単にできるみたいです!
作ったことがないので、うまく紹介できません...
擬似3Dなら自分ではこんなの作りました。
メテオクラッシャー
メテオクラッシャー

runstantというすごいWebエディタがある!

runstant
URLにソースコードを圧縮して保存する事で、サーバを使わずにコードを保存しています。
ここで書いたコードはツイッターなどのSNSで簡単にシェアすることができます。
Twitterで #runstant タグで検索するといろいろ出てきます。

最後に

まだゲームを作ったことがなくてJavaScriptでゲームを作りたい
という人がいたら
tmlib.jsをぜひ使ってください。

なんか頭悪そうな記事になってしまってすみません。