AJ's Riddle - Blog: 2010-11

Google Chrome または Safari を使用される事を強くお薦めしますｗ
他のブラウザでは Javascript の処理が重いです(汗)

2010/11/30

当たり判定完了

障害物との当たり判定を作りました。
自機が障害物で進めなかったり、撃った弾が障害物の所で破裂したりします。

スクリーンショットでは何も伝わりませんがｗ
左上に赤字で「障害物にぶつかってるよ」のメッセージが出ていて、画面中央では撃った弾が障害物に当たって破裂してます。

2010/11/28

「疾走者」で往年の名作 "SeeNa" のようなゲームを作りましたが、今度はそれより更に古い、ATARI 社の "BATTLE ZONE" っぽいゲームの制作に着手しました。

「レトロゲームをブラウザで作ってみる」の第３弾になります。
第１弾は "Dragon's eye" ってことでｗ　あれも昔懐かしい擬似 3D ダンジョン型 RPG という分類で。

何弾目になるかさっぱりわかりませんが、作りかけのアクション RPG もこのシリーズになります。
ええ、もちろん "Y's" ですねｗｗｗ

まだ遊べる状態ではないのでスクリーンショットだけとりあえず。タイトルは「砲撃者たちへ」ですｗ

どっから見ても BATTLE ZONE ですが、本家とまったく同じゲーム作っても仕方がないので、内容は少し変えるつもりです。

2010/11/25

画像の回転　おまけ

きらさんのリクエストにより、回転しながら小さくなって消える、というのを作りました。

↑例によってクリックすると別ページで実行します。
画像に意味はありませんｗ

画像の回転　その２

canvas 使っちゃえ！　てことで画像の回転もやってみました。
IE 対応のために例によってブログに埋め込めませんｗ

↑画像をクリックしてください。はちゅねがぬるぬる回りますｗ

画像を回す事自体は canvas の rotate メソッドを使ってるだけなのでソースを見れば使い方はすぐに分かると思います。

もう１つおまけで SoundManager2 を使ってロイツマを鳴らしてますｗ
「疾走者たちへ」で使ったルーチンなので無駄があったり美しくなかったりしますが、 SoundManager2 の使い方もこれでわかるかと。

※ MP3 データの読み込みが終わるまでは音は出ません。

2010/11/24

線を引く　その５

いつまでやるんだ、このシリーズｗｗ

IE9 は canvas が使えるそうなので（Vista 以降の OS でないと IE9 がインストールできないので未検証)、IE で高速描画にこだわるのはほとんど意味がないとは思いつつ、ググったらなんとか IE8 以前で canvas 機能を実装しようとしている人が結構いました。

Silverlight でレンダリングする uuCanvas.js も面白そうなのですが、自分の環境でやってみたところあまり速度が出ませんでした。

次にやってみたのが FlashCanvas 名前の通り Flash でレンダリングするライブラリです。
結果がこれ。

IE 以外のブラウザでは前回のものと何も変わりません。
（興味のある方用：uuCanvas.js を用いて Siliverlight でレンダリングするバージョンはこちら)
ここまできたら javascript じゃなくて最初から全部 Flash で作れって感じですがｗｗｗ

2010/11/20

線を引く　その４

前回はランダムなラインだったので画像見ても何も面白く有りませんでしたｗ
なので、まともな図形を描画してみました。

↑画像をクリックすると実際のページが開きます。
IE でも動作させるためには <head> におまじないを書かないといけないのでブログに埋め込むことができませんでした。
とはいえ IE では笑っちゃうほど遅いのであんまり意味ないんですけどｗ

いろんなブラウザで開いてみて処理速度の違いを実感してください。

そうそう、背景の星ですが、IEでは VML の v:rect 要素使うより普通に DIV 使う方が倍以上早かったので、VML で描画しているのは線のみです。
他のブラウザではもちろん canvas で描画してます。

データは以前 CAD で作成したものをコンバートしてます。曲線部分のコンバートが面倒でやってないので、エンジンのノズルなどが欠落しています。
どっちみち版権がアレすぎるのでこのままゲームに使うわけにはいきませんｗｗｗ

2010/11/18

線を引く　その３

まだ直線描画をあきらめてなかったりしますｗｗｗ

とうとう最終手段（？）の canvas です。
どうやら IE でも Google 提供のライブラリ excanvas.js を使えば canvas での描画ができるということなので、やってみました。

まずは FF での結果。　ランダムな座標値で直線を 500 本引きました。右上にあるのが処理時間です。

75 ミリ秒はゲームには少し苦しいですね。

では　Google 提供のライブラリ、 excanvas.js を使って IE8 で描画させてみます。

735 ミリ秒。遅っｗｗｗ
まあもともとブラウザに機能がないのをスクリプトで実現しているのですから遅くて当たり前ですが。

ところでこの excanvas.js はどうやって描画してるんだ？　と思ったら VML なるものを使用しておりました。
というわけで　VML についてググってふむふむなるほど・・・って 2% くらいしか理解していませんが、ともかく今やりたいことは直線を引くだけなんで、 canvas のライブラリなど経由せずに直接 VML で描画すればいいのね、ということで IE の時には VML で描画するように切り分けを入れて実行したのがこれ。

235 ミリ秒。それでも遅いけどｗ　
IE でもプレイ可能なゲームにするためには表示する線の数はかなり減らさないとだめなようです。

にしても excanvas.js のオーバーヘッドは 735 - 235 = 500 ミリ秒ですか。とてつもなくでかかったですね。

最後に Google Chrome での処理時間を見てみましょう。

爆速ｗｗｗ

2010/11/14

オープニングデモ完了

オープニングデモが完成しました。

あともう少し。がんばれワシｗ
(2010/11/15追記：公開しました→こちら)

2010/11/09

あと少し、でもこれがめんどいｗ

「疾走者たちへ(SN-1)」がほぼ完成しましたｖ
意味もなく日本語/英語を選べるようにしたので遊び方説明を作るのがとっても面倒でしたｗ

英語版マニュアルに間違いがあったら指摘くださいませ。

あとやることは細かいバグに気づくたびに修正することと、

デモ画面

あーこれがめんどい。
だったらやらなきゃいいやん、という声もありそうですが、どうしてもデモを作らないと気が済まないのです。どないやねんｗ

来月から忙しくなりそうなヨカーンなので、なんとか今月中に完成させたいです。

字だけだと寂しいので英語版マニュアルの画像でも貼っておきますｗ

2010/11/08

ロゴリドル

最終面も作成でき、エンディングも出来上がりました。
ちょっとでもプレイした人はエンディングに強制的に名前を出しますｗ

最後はやっぱりロゴを出さないと締まらないので、リドルじゃないのに出しましたｗｗｗ

ただ、このロゴの使用規約には「かならずリドルを仕込むこと」とありますので、仕込みましたｗ
もちろんとってもくだらないリドルなのですが、これで胸を張ってこのゲームはリドルだと言えますね！ｗｗｗ

さて、遊び方の説明を作らなくっちゃ。めんどくせー。

2010/11/02

シェーディング強化

なんか IE6 だと壁の表示がおかしくなるよなーと思っていたのですが、ま、どうせ IE6 だし、とあまり気にしてはいませんでした。
ところが Opera でも同じ現象が起きることを確認したので、これは修正せねば、とちょっと本気出して調べました。

具体的にはこんな現象になります。

赤で囲ったところは本来連続している壁なのですが、こんな風に切れてしまいます。
計算誤差か何かかと思いましたが、そうではなく、 div の border の挙動が IE6 と Opera については異なるようです。

本気出して調べた割には、解決方法まで調べていないのですがｗｗｗ　回避策を模索している中で現在壁単位でフラットシェーディングしているのを１枚の壁の中でなめらかに色を変化させるグローシェーディング風の描画ができることに気づきました。
もっと早く気付いても良かったんですがｗｗ

やってみたのがこれ。

ただしあくまでもグローシェーディング「風」で本当のグローシェーディングではありません。

具体的な方法は例によって力技でしてｗ、今まで１枚の壁は１枚の div (の border) で表示していたのを複数の div (の border) で表現するようにしたというだけです。
つまり表示する div の数が無茶苦茶増えていますｗ

当然処理速度が犠牲になるので処理速度に応じて分割数が変化するようにしました。
処理速度の遅い FF や IE8 ではこの程度の分割数になります↓