Kon

お前も tsdo.it にしてやろうか!

Works

弾幕なのかー

## 概要なのかー 弾幕系シューティングゲーム的な何か。 HTML5/Canvas でスプライト数百個を 60fps で動かすゲームは作れるのか?というテストを兼ねたデモです。 キャラクターなどは東方プロジェクト作品の2次創作です。 ## 遊び方なのかー Chrome, Firefox, IE で動くのを確認しました。 Opera だと動かないのは既知の問題ですが、直すの面倒なので放置(どうせそのうち Webkit に移行するし)。 画面サイズは 800px x 600px 固定なので、 [フルスクリーン](http://jsdo.it/Kon/shooter/fullscreen)にした後でブラウザで適当に調整してください。 操作は矢印で移動、z でショット、シフト押しながら矢印で低速移動です。 右側のスクリプト編集ボタンを押すと、動的に弾幕生成のスクリプトを編集することができます。 ただのデモなのでゲームバランスなどというモノはありません。 適当に弾幕スクリプトの数字をいじってみてください。 弾幕スクリプト編集画面の左上のリンクをクリックすると、サンプルのコードがロードされます。 全方向ランダムと n-way 弾の2種類のサンプルだけ用意してあります。 ## コードの説明なのかー 基本的にはぜんぶ Canvas に描いています。弾はアルファ値つき PNG の画像を Canvas に `globalCompositeOperation = 'lighter'` で `drawImage` しているだけです。 デフォルトの `src-over` でもいいのですが、`lighter` のほうが弾が光っているっぽく見えます。 UI は DOM で作るか全部 Canvas に描くか迷ったのですが、 右側のライフゲージなんかはとりあえず DOM で img を並べてあります。 これだと画面全体にエフェクトをかけるのが難しくなるので、 全部 Canvas に描いたほうが柔軟ではあるのですが、 いかんせん UI ツールキットをゼロから作るのはめんどいです。 Canvas にも HTML レンダリングの機能は欲しいね。 [html2canvas](https://github.com/niklasvh/html2canvas) みたいなやつ。 雲なんかは画面全体を覆うような大きな半透明の画像を `lighter` で2枚も描いています。 ローカルで作っていた時は弾幕スクリプトを別ファイルに書いて ajax で読み込んでいたのですが、 jsdo.it ではそれが不可能なので HTML に弾幕スクリプトを含めてしまっています。 `ResourceLoader` というクラスは ajax でいろいろリソースを取ってくるときに便利なように書いたんですが、 jsdo.it 版では全然役に立っていません。 弾とキャラクタのあたり判定は、単純に総当たりで距離を調べているだけです。 この辺りはチューニングでパフォーマンスが改善できる余地が大きいと思います。 ## 考察なのかー 自分の環境では Chrome だと十分 60 fps で動くんですが、Firefox や IE だとかなり苦しいです。 パフォーマンスチューニングの類はまだしていないのですが、 もしかしたら頑張ってチューニングすれば 60 fps でるようになるかもです。 Firefox 上で実行したときのボトルネックが画面描画なのか、あたり判定とかなのかもまだ不明。 開発の最初期段階では Firefox でももうちょっとパフォーマンス出ていた気がする……。 Chrome に限定すれば1000個以上の弾も十分可能じゃないかと思います。

  • 5980
  • 8

TypeScript遊園地

TypeScript のコンパイラを Web 上で試せる公式サービス、[TypeScript Playground](http://www.typescriptlang.org/Playground/) の劣化コピーです。 TypeScript のコンパイラサービスを自分の Web サービスに組み込むときの参考にどうぞ。 とりあえず Chrome と Firefox で動くのは確認しました。ページレイアウトはすごく適当なので、環境によっては崩れてるかも? TypeScript コンパイラはセルフホスティングされているので、Web 上でコンパイルできたりするのです。 たった一個のファイル typescript.js だけを参照すればコンパイラを呼び出すことができるので配置も簡単です。 TypeScript は JavaScript のだいたいスーパーセットになっているので、JavaScript の構文チェックに使うという強引な応用も可能。 eval で構文エラーが起きたときに、ソースコード上の構文エラーのある位置がわからないよ! とお嘆きのあなたにもたいへんお勧めの製品となっております(謎)。 [このあいだ書いた弾幕ゲー](http://jsdo.it/Kon/shooter) の弾幕生成スクリプトを TypeScript で書けるようにしようかと思いったっての実験です。 実装に必要なコード自体はそれほど多くないけれど、 コンパイラのインターフェイスが .d.ts にまとめられたりしてないので、 自分で適当にインターフェイスをコピーしたりする必要があります。 構文エラーとそのほかのコンパイルエラーが別の箇所で報告されるのもちょっと謎設計。 コンパイラもまだまだベータ版なので、今後コンパイラの API が大きく変更される可能性もありますので注意が必要ですね。 それ以前に、そもそもコンパイラの安定性に大きな不安があるので、ちゃんとしたプロジェクトへの採用には勇気という名の無謀さが求められます。 ※[フルスクリーン表示](http://jsdo.it/Kon/tsplayground/fullscreen) にすると、上部のヘッダのせいでそのぶんページの下部がはみ出し、コンパイルするボタンが見えなくなります。 その場合 `Close Header` のボタンを押すと正常に見ることができるようになると思います。 (jsrun.it の `#containerView` なる要素が `height: 100%` で、その子要素 `#sectGeneratedSite` も `height: 100%` なのですが、 `position: relative` なのでヘッダの高さのぶん下にズレてます。原因わかったけど、これはどちらかというと jsrun.it 側の問題な気がする。 とりあえず `#sectGeneratedSite{ height: calc(100% - 70px); }` が思いついたけど、calc ってどのくらいの環境で動くんだっけな……。 自分はCSS 苦手だし直すのめんどい)

  • 2363
  • 1

強いられているんだ!!

“上”のヤツらは裕福な生活を送りながら、 くだらない思想 (ダックタイピングとかプロトタイプベースオブジェクト指向とか) をぶつけ合っている。 俺達は、そのしわ寄せでこんなコーディングを……**強いられているんだ!!** URLを指定して好きな画像を強いることができるので、自由に強いてみてください。 ネタを考えるのから始めて1時間くらいですべて終わらせるよう強いられました。 コードは酷いクオリティだったので、後ほどの修正を強いられています。 元ネタを知らない人は[ニコニコ大百科](http://dic.nicovideo.jp/a/%E5%BC%B7%E3%81%84%E3%82%89%E3%82%8C%E3%81%A6%E3%81%84%E3%82%8B%E3%82%93%E3%81%A0!) 等で理解を自らに強いることができます。

  • 3209
  • 10

超物理ブロック崩し 鬼 帝 顕 現

(動作確認ブラウザ:Chrome 21.0, Firefox 15.0, Opera 12.0。ボールが水平方向に跳ね返りやすいバグが直りました。でも詰み防止のためにほんの僅かに重力を残してあります) おお、いつかの若者じゃねえか。今日はテトリス屋じゃないのかって?もうテトリスじゃ客足が伸びなくてなあ。新しい商売始めたわけよ。 今度のゲームはモダンだぜ。聞いて驚くな、このゲームは時代の最先端を行くおしゃれゲーム、ブロック崩しだ。……え?ブロック崩しとかレトロすぎるってか。やだなあ兄ちゃん、2010年のクソゲーオブザイヤー携帯機部門大賞作品もブロック崩しだぜ?間違いなくナウでヤングな若者たちに大ウケよ。ブロック崩し屋の全国チェーン展開も夢じゃねえさ。 ほう、とっくに手垢にまみれたゲームだっていうからには、腕はたつんだろうな?まあとにかくやってみろや。操作は普通のブロック崩しとだいたい同じさ。マウスをクリックすると弾が発射されるぜ。弾が全部なくなってもブロックが残っていたらゲームオーバーだから頑張りな。 ……ああ、早速『鬼帝』の餌食になっちまったか。最初だからまあしゃーねーな。え?ボールの反射がおかしい?っていうかそもそもパドルが丸いって?そのあたりの凶悪さが『鬼帝』って呼ばれる所以よ。本家『鬼帝』に比べれば可愛いもんだけどな。まあ何回でも挑戦してみてくれや。 もう兄ちゃんは常連だし、特別に俺の秘密のテクニックを教えてやるよ。一回しか言わねえから、よく聞いとけよ? 『鬼帝撃破拳・紅蓮』 燃え上がる鬼帝への怒りをもって、前方にパドルを素早く移動させながら弾を跳ね返す。パドルの運動エネルギーが弾に加わり、速度が大きくなることで鬼帝を烈火のごとく攻撃する。ただし、弾が速くなるので打ち返すのが難しくなる諸刃の剣でもある。 『鬼帝撃破拳・止水』 鬼帝に奪われた貴重な時間すら受け入れる穏やかな水面のような心で、パドルを静止して弾を受ける。弾の運動エネルギーがパドルにも分散され、「紅蓮」で加速した弾の速度を低減することができる。 『鬼帝撃破拳・影分身』 大根を針の穴に通すような精緻に研ぎ澄まされた集中力で、クリックを連打する。同時に複数の弾で攻撃でき、弾どうしが衝突することで生まれる複雑な動きが鬼帝をも翻弄する。

  • 5040
  • 6

ヘタリス (テトリス?)

おう、ちょっとそこの兄ちゃん、テトリスやっていきなよ、テトリス。 やったことくらいあるだろ?方向キーでピースの移動、 方向キー上や Ctrl,Shift で回転だ。 Chrome だと音が出るから気をつけな。 え?なんかこのテトリス、動きがおかしいって? なんかピースがうまくはまらないし、落ちたあとのピースもグラグラしているってか? ……あー。ついにこいつも年食ってガタが来やがったな。 物も人も寄る年波には勝てねえってこった。ははっ。 まあアレだ。ちょっとこう、ピースをグイってやって、 無理やりねじ込む感じでやってみてくれや。 ……そうそう、なんとかなるもんだろ? 近頃の若いもんは、やれ3Dだの萌えキャラだのに群がっちまってよう、 古くせえテトリスなんて見向きもされなくなっちまった。 俺のテトリス屋もこれっきりかもしれねえな。 まあ最後に兄ちゃんが遊んでくれて、こっちも満足して店をたためるってもんよ。 ありがとな。

  • 3644
  • 3

Box2D サンドボックス (2D物理シミュレーション)

物理シミュレーション空間上にオブジェクトを追加してそれらの振る舞いを試すことができるツールです。現時点では動的なオブジェクト(木箱)と静的なオブジェクト(青黒い矩形) を追加することができ、木箱を掴んで振り回すことができます。Phun みたいなソフトのすごく簡単なものっていう感じです。 多少機能の増えた最新版→ http://phyzkit.net/ Chrome がおすすめですが、Firefox, Opera, Safari でも一応動きました。 操作: * shift+マウスドラッグで視点の移動 * マウスホイールで拡大縮小 あとはフィーリングで。 Box2D でそのうちジャンプアクションゲームでも作ろうかなと。そのためにはいろいろ準備が必要なので、その一環として Box2D で遊べるようにいろいろ作りました。 いろいろ未調整なので、レイアウトが崩れやすいです。フルスクリーンにしてお試しください。 Box2D 空間全体のシリアライズは懸念材料のひとつだったんですが、案外簡単に実装できてしまいました。まあフォーマットは全部 JSON に頼りきりです。やったぞ JSON ! すごいぞ JSON ! Box2D の内部を熟知していないと作れないかもと思っていたのですが、これでひと安心です。これがやがてアクションゲームのレベルエディタになる予定です。たまに再現に失敗しますが原因は調査中。 本当は three.js featuring ammo.js とか cannon.js の 3D の物理シミュレーションで遊びたいんだけど、まだライブラリが成熟してないのでいろいろ苦労が絶えない。自分の非力なパソコンだと動作も重い……。しょうがないので、しばらくは Box2D で遊ぼうと思います。 画像をアップロードするとローカルで試す時とURLが変わっちゃって、書き換えるの面倒ですよね。今回はスクリーンショットを撮影する機能があるんですが、クロスドメインで画像をロードするとtoDataURL() のセキュリティ制限でそれがエラーになっちゃうので、外部に画像を置いとくこともできないんです……。

  • 3591
  • 6

enchant.js に勝つには 熱いハートとクールな TypeScript だ

enchant.js に付属する[クラス継承のサンプル]( https://github.com/wise9/enchant.js/blob/master/examples/beginner/new_class/main.js )を TypeScript に移植したものです。 enchant.js でも TypeScript を使いたいけど、どうやって書いたらいいかわかんねーよ!という人が多そうなので書いてみました。 特に enchant.js のクラスの継承あたりがわかりづらいようなので、そのあたりのサンプルを選んでいます。 enchant.js のクラス継承についての詳しい解説は[こっち](http://phyzkit.net/typescript/#chapter4_section8)です。 基本的には JavaScript のソースをコピーした後でひたすらインターフェイスと型注釈を書き加えるだけで、 コードの流れそのものは JavaScript で書いているときとまったく同じです。 アンビエント宣言はなるべく厳密にタイプセーフになるように書いていますので、わざと関数呼び出しの型を間違えてみたり識別子をタイプミスすると、 ちゃんとコンパイルエラーがでるのがわかると思います。コンパイル後のコードでは型注釈がきれいさっぱり取り除かれて、オリジナルの JavaScript のコードとほとんど同じになります。 ちなみに、ここではなるべく厳密にタイプセーフになるようにアンビエント宣言を書いていますが、最小で declare var enchant; だけ書いておけば enchant.js で動くコードは書けます。ライブラリがちゃんと一つのモジュールにまとめられて定義されていれば、 それを `any` で宣言するだけで `enchant.Class` も `any` になり、そのため `enchant.Class.create` も `any` になって芋づる式にアクセスできるわけです。 JavaScript → TypeScript の移植なんてそれだけで済みますから簡単ですよ。あとは好みに応じて気の済むまで型注釈を書くだけです。 ここでは enchant.js のアンビエント宣言ファイルは最低限だけ書かれていますが、誰か定義を完成させてくれないかな!俺は面倒くさいからやだ!

  • 4261
  • 2

おっさん・イン・リバプール (ビリヤード的ゲーム)

よう若者、また会ったな。この間のブロック崩しはなかなか手強かっただろう?また新しいゲームを仕入れたからさ、早速遊んでいってくれや。今度はビリヤードを改造してみたんだよ。とはいっても、もはやビリヤードとは似ても似つかなくなっちまってな。ありきたりなゲームは作らないのが俺の主義でよ。 まず忘れずに全画面表示にしとけよ。画面上のボールがすべて静止したら操作できるようになるぜ。画面上をドラッグすると青いボールから線が伸びるだろう?ボタンを離すと線が伸びたのとは反対側に青いボールを打ち出す。もし赤いボールが他のボールと衝突すると、ボールの色が赤から緑に変わる。すべての赤いボールを緑に変えればゲームクリアって寸法さ。 赤いボールを緑に変えると 100 ポイント。色に関係なくとにかくボールがぶつかっても10ポイントだ。さらに、連続して色を変えるとチェインボーナスがついてそのたびにポイントが2倍になるぜ。ただし、一打でひとつも色を変えられないと、ペナルティとしてスコアが半分になるから気をつけな。 ……ははっ、また随分豪快に打ちやがるな。ちゃんと計画的に潰して行かないと、すぐにペナルティがかさんで得点が低くなっちまうぜ。え?いまいち正確に飛ばないからヤケクソだって?まあ物理エンジンの限界ってやつでさ、なんでも予定通りに行かないのは人生も物理シミュレーションも同じってこったな。 ところで、この変なゲーム名はどういう意味かって?そりゃお前、ビリヤードといったらプール、プールといったらリバプールだろうがよ。ビリヤードの本場の名前を借りたのさ。なかなか格好いいだろう?……え?リバプールとビリヤードって特に関係ないの?ま、まあ、いいじゃねえか。ダンディな俺と、イギリスはリバプールのおしゃれな街並み。まさにぴったりじゃねえか。行ったことねえけど。

  • 2509
  • 2

俺のキャノン砲を試してみるかい?

物理シミュレーションライブラリ cannon.js のテスト。箱を100個くらいだらしない感じで積み上げてみた。 JavaScript で一から書かれているので、C++ のライブラリを自動的にトランスレートした bullet.js や ammo.js に比べれば効率はいいようだ。JavaScriptで使える物理エンジンはまだ決定的なのがない気がする。cannon.js は開発途中みたいだけど応援したい。現時点ではConstraint がないのがちょっとネックか。なんか壁突き抜けたりすることあるし、よくわからない事が多い。

  • 3027
  • 0

WebGL / Three.js サンプルコード

3Dゲーム向きライブラリ three.js のサンプル。 WebGL が有効なブラウザで実行可能です。

  • 3754
  • 1

TypeScript でお絵かきツールのテスト

ヤバイ。TypeScriptヤバイ。まじでヤバイよ、マジヤバイ。 TypeScriptヤバイ。 まず堅牢。もう堅牢なんてもんじゃない。超堅牢。 堅牢とかっても「Dartくらい?」とか、もう、そういうレベルじゃない。 何しろ静的型付け。スゲェ!なんか実行時型エラーとか無いの。プロトタイプとかを超越してる。静的型付けだし超堅牢。 しかも型推論してるらしい。ヤバイよ、型推論だよ。 だって適当にvariant型とかにされたら困るじゃん。デバッグとか超むずいとか困るっしょ。 トランスコンパイルして、Dartのときは17行だったのに、JavaScriptときは17260行とか泣くっしょ。 だからTypeScriptとか膨張しない。話のわかるヤツだ。 けどDartはヤバイ。そんなの気にしない。膨張しまくり。最も遠くから到達する光とか観測してもよくわかんないくらいでかい。ヤバすぎ。 DartはChromeに搭載されるっていたけど、もしかしたらChromeだけかもしんない。でもとりあえずDart使うって事にすると 「じゃあ、Dartが他のブラウザに搭載されるのいつよ?」 って事になるし、それは誰もわからない。ヤバイ。誰にも分からないなんてヤバすぎる。 あとTypeScript超コンパイル早い。約1秒。分で言うと1/60分。ヤバイ。早すぎ。バナナで釘打つ暇もなくコンパイル終わる。怖い。 それにJavaScriptの標準ライブラリなんかのAPIも型エラーが超無い。超スイスイ。それに超柔軟。Structural Subtypingとか平気で出てくる。Structural Subtypingて。Perlでも言わねぇよ、最近。 なんつってもTypeScriptは馬力が凄い。クラスとか平気だし。 JSXなんてあれこれ欲張ってジェネリクス導入したり、int とかプリミティブ型に加えてみたり、MayBeUndefined使ったりするのに、 TypeScriptなら全然平気。JavaScriptの型をそのまま扱ってる。凄い。ヤバイ。 とにかく貴様ら、TypeScriptのヤバさをもっと知るべきだと思います。 そんなヤバイTypeScriptを作ったヘルスバーグ先生たちとか超偉い。もっとがんばれ。超がんばれ。

  • 4961
  • 4

Skills

Awards

Hot tags

Categories

HTML / CSS / JavaScript