JQueryでゲーム製作する可能性(1)
閉じる
閉じる

新しい記事を投稿しました。シェアして読者に伝えましょう

×

JQueryでゲーム製作する可能性(1)

2014-03-03 10:11

    JQueryで作ったゲーム

    音声録りだよ。なんと滑舌が悪い111をフォローすべく原稿もついてくる豪華版

    喋ってること:
    ニコニコだと[ゆきゆきてモンスター軍]が有名かも知れない111です、初めまして。

    ゆきモンは約2年前の作品でツクールVXで作りましたが、そもそも自分は、ツクール2003が発売したばかりだった18歳頃からゲームを作り始め、今年でそろそろ11年めとなります。

    ニコニコ自作ゲームフェス3のトップ画面に「クリエイターインタビュー」って項目がありますが、元々フリーゲーム畑としては、泉和良=アンディー・メンテが先輩、SmokingWolfさんが同期くらい。
    ウディタも出始めの頃に触って、2作くらい作りましたね…
    簡単なダンジョンRPGと、世紀末FPS

    かつてコンテストパークというのがあって、自分はそれに応募してカスりもしませんでしたが、SmokingWolfさんは金賞取ってましたね…、当時から才能溢れてる人が才能あふれる感じになった訳です。
    いやこっちはあっちを知っていても、あっちはこっちを知らないでしょうが…。


    で、今回作った[ねこばこれくしょん]はJQueryというJavaScriptのライブラリを使って作った、いわゆるブラウザゲーです。
    そもそもこのJQueryというライブラリは、まあwebサイトなんかを作る時にはもう大定番と言われるくらいではあるんですが、ゲーム製作用かっていうと疑問が残ります。
    というかゲーム製作としては、割と変態的なアプローチであるかも知れない。

    大体webゲームを作る時はFLASH、あと最近ではHTML5とJavaScriptを組み合わせたりしますが、今回ではHTML5の機能を使ってない…と思う。
    音鳴らすとかはどうだろう、ライブラリ使ったんで不明瞭だけど、裏方では使ってるかも。

    そもそもゲーム画面を表示するって考えた時に、デスクトップなり、スマホアプリなり…まあ家庭用のゲームなりでも良いんですが、まず画面を確保して、その上に何を描くか、って考える。
    言うなら設計図を元に、何を書くか、何を消すか、付け加えたりするか? これが前提。

    ところが今回の手法では、webサイトでよくみる、ボタンや画像表示や文字表示…そういう一個一個のパーツで全て構成されてる訳ですね。
    言うなら"絵を描くんじゃなく"、あらかじめ用意した人形を使って、人形劇みたいに動かす感覚です。

    だから三角を画面に描こう、としても出来ない。
    描ける方法がない。

    JavaScriptはブラウザが用意するパーツに対して操作を行えるんですね。
    で、そもそもブラウザは何をする為のものかって言ったら、webサイトを表示する為のもの。
    でwebページ上で用意された画像表示しようってのはよくあるんですが、三角を描こうなんて、普通はしない。
    だから三角を表示する、みたいなパーツがそもそも無いんです。

    …最近になって出て来ましたが。これがHTML5ですね、まあ今回は使ってないので…
    なのでやろうとしたら、"三角の画像"をペイントだかで描いて保存、それを表示する、というやり方になる。

    ねこばこれくしょんの行動バーだって、普通のゲームプログラムなら
    FillRect(0 , 0 , 200 , 20)
    みたいに、四角の左上と右下を指定すると描画される、ってやる所でしょう。

    だけど四角を描画する機能ってのも無いから、ねこばこれくしょんは
    横200ピクセル、縦20ピクセルみたいな青色の四角画像をまず用意。
    横200ってのは100%溜まった時で、1%なら、横2ピクセルであればいい。

    で、画像、画像というパーツにはwidthって指定ができるんですね。
    ここでwidth="2"みたいに指定してやると、ブラウザはそれをちゃんと理解して、その大きさにしてくれる。

    という事は、2ずつ足してあげれば、1%ずつ溜まって横に伸びていくみたいに見える…本当は本来の大きさに近づいていくんですけど、見てる人からはそういう風に見える、という具合です。

    更にねこばこれくしょんでは、100%になったら色が変わってるんですが、
    これも普通のゲームプログラムなら、
    FillRect.color = Color.new(255 , 255 , 0)
    みたいな、色を指定して変えるかも知れないですが、これまたブラウザでは何で色調を指定できなくちゃいけないんだ、という所があるので、ここはもう、別の画像、黄色の四角画像を用意して、100%になったら差し替えている訳です。

    なので、%が溜まっていくごとに、色が変わるようにして! と言われると困っちゃう訳ですね。
    100段階ぶんの色調の画像を用意しよう…とかなっちゃうんで。

    ねこばこれくしょんは、「生産」ってボタンを押すと、とことこ歩く二足歩行のネコが表示されてますし、あるいはウッフィーが戦闘に入ると回りながらコインが落ちてきますが、実はあれも画像を切り替えてない…
    "画像を切り替えるプログラムを書いてる"訳じゃないです。

    実はあれ、GIFアニメです。
    まとめブログとかでたまに面白いGIFアニメがあると思うんですけど、あのGIFアニメ。

    いちおう画像を一定時間で切り替える、みたいな手法でアニメぽい事はできるんですけど、
    ものがブラウザだから、webページで新しい画像を開いた時みたいに、2枚めのコイン画像にしたらまだその画像を読み込んでるとか、あとアニメごとに色々プログラムで設定を書いて、割と大変になったりするんですね。

    でもGIFアニメなら、ゲーム側としてはGIF画像を指定するだけですから。
    あとはGIFが持ってる設定通りに、ブラウザが解釈してアニメさせてくれる。
    まあツクールでは戦闘アニメとかってありますが、あれをGIFアニメとして加工して流すんですね…

    こんな感じで、普通のゲームプログラムとはかなり違う、出来ないことも多い。
    マニアックなやり方なのは間違いない。
    でなぜJQueryでゲームを作ろうと思ったか…を、次回話そうと思います。


    ニコニコでJQueryで探すと、2本ほどそれっぽい動画が出てきましたぞ…
    [JavaScript と jQuery でタイピングゲームを作ってみた]
    [ニコ生で超簡単ゲーム制作講座その1]
    広告
    コメントを書く
    コメントをするには、
    ログインして下さい。