flashゲーム作成記

2010.02.07 Sunday

今日２／７は「超むりげー」イベントの日

イベントの告知でっす。
本日（２０１０／２／７）はイベント「超むりげー」の日です。

自分も参加します。壇上でなんかしゃべる気がします。イベント内容としては、過去のむりげー作品の紹介、１時間でゲーム作ってみる、第６回むりげー作品発表なんかがあります。

自分は第６回むりげーにゲーム作って出展する形で参加させて頂きます。実はゲームは今（12:30現在）まだ作っててもうすぐ完成するのですが、今回新しい試みを入れすぎて本当にちゃんと動くのか！？っていう不安がかなりあるのですが、多分面白い作品になりそうなので、お楽しみに！

あと、自分は業界の話は疎いのでよく知らないんですけど、あんなゲームやこんなゲームを作った有名な方（プロの方）とか、あとDJ急行さんや杏野はるなさんをはじめとするタレントな人も顔を出してくれるみたいなので、そんな方達を見るだけでも楽しくなれると思われます。

会場はASAGAYA LOFT Aという所で１９：３０からスタートです。誰でも参加可能です（ゲーム・Web関係の学生さん、社会人さんは無料！、一般の方は１５００円）

普段、自分のゲームを遊んでくれている方にもぜひぜひお会いしたいです。名刺交換の時間があるらしいので、来場して頂ければ色々絡めると思います。「あのゲームはどうやって作ってるんですか？」とか「あのゲームのコツはありますか」とか、大抵の事ならなんでも答えちゃいます。あ、ちなみに今回のゲームにはガッツリ裏技を仕込んであるので、会場に来て頂ければこっそり教えちゃいますよ～！

という訳なので、とっても寒いですがとっても楽しいイベントになると思いますのでぜひ足を運んでみてくださいー。

author : ぽりＧ

その他 | 12:12 | comments(0) | trackbacks(0)

2010.01.12 Tuesday

Best of 2009

去年２月頃作った「Transmover」というゲームがあります。ロードランナーとPortalを足して２で割ったようなゲームです。国内・海外から結構な数リンクして頂いたゲームです。リリースしてから約一年で大体累計１８００００アクセス位です。（プラス、モゲラの方のアクセスが４００００位）

オンライン登録されたステージも４０００以上あって、リリース後もうすぐ一年たつのに未だに増え続けております。作った本人である俺でさえクリアできない面が沢山あって（ちっちゃい小バグを上手く利用しないとクリアできないような面とか）もうついていけません。ゲームが独り歩きし出した感じ。

そのTransmoverが、海外の巨大flashゲーム紹介サイト「Casual Gameplay」で、2009年に紹介された面白いゲームを決める祭典「Best of 2009」に出展されました～。ゲーム作り始めて１年くらいの頃のやつなのにこのような事になって大変光栄なんでございます。

しかし同じように出展されている他のゲームは、どれもクオリティ高いわ。絵で言ったらウチのが一番チャッチイんじゃないか。

まあCredit見るとどこも大体プログラムとグラフィックは複数人で分業して作ってるからね

「こちとら一人でやってんじゃい！タイマンで勝負しろコラ！」

とか画面に向かって叫んでもしょうがないんだが。あ、でも「Polygon Gmen」っていうサイト名だから、なんか自分複数人の開発チームだと思われてるみたい。なんか損

という訳で、よかったらVote（投票の事ね）してやってください。

今年は２を作ろうかなー・・・

author : ぽりＧ

その他 | 10:14 | comments(0) | trackbacks(0)

2010.01.09 Saturday

自作で名刺作ってみました

そういえば、年末にむりげー忘年会（っていうかニコニコ生放送ｗ）に行くにあたって、名刺を作ったんでした。

↓こんな感じで

jpeg画像に落としたから写真は荒いけど、本物はもっとシャープな感じにしあがっております。作ろうと思い立ってから自作名刺の作り方調べて、近所のPCデポに名刺印刷用紙買いに行って、画像作って印刷で位置合わせ思考錯誤・・・とかやってたら、普通に４～５時間かかった！まあでもイメージ通りのものが出来たのでよしとしています。ちょっとイメージより薄っぺらいけど、まあ趣味で作ってるものだしまあいいかぁっ・・て感じです。

年末のむりげーの集まりなんかで１０～１５枚くらいは配ったかな？まだあと７０枚近くあるので、オフで会えた人にはもれなく配ろうかと。今のところ予定は１／１６むりげーメンバーの新年会と、２／１７の超むりげーイベントかな？むりげーイベントの方は一般の方でも参加できますので、こよなく当サイトゲーム楽しんで頂いている方にはぜひお会いしたいものです。

で！名刺の話でしたね、一応今回やった名刺の作り方をまとめてみたので、自分でも作ってみようかなあーと思っている方は参考にしてみてください。っていうかもっと効率良い作り方があると思いますけど。

■背景画像の作成

①名刺画像用のFlashファイルを１つ作る。
枠の大きさは、505px × 308pxくらい。まわりは白い枠で囲う（印刷フォーマットはみっちり隣接しているため、若干ずれても大丈夫なように）

②実行したゲームからハードコピーを取る。
各ゲームを実行し、キャラクターのハードコピーをとる。このとき、背景がグラデーションや雲などの場合は、ゲーム側のFlashファイルを弄り背景を同じ色（単色）に変更してから実行したものをハードコピーする。ハードコピーでPNG画像を作成したら、そのキャラクタの部分だけ抜き取り、背景を透明にする。

※背景を透明にするやり方：ダブルクリックでFireworksで開き「画像プレビュー」→「形式をPNG 8」→「マットをクリックしてから、背景をクリック（マットの色が背景の色になる）」→「インデックス透明カラー」を選択、「書き出し」で別名で新しくPNGファイルを作成する。Fireworks閉じると保存しますかと聞かれるので「いいえ」
　※境界線が背景色でちょっと残るが、これは上記手順の通りハードコピー時に背景色を統一しておけば分かりづらくなる

③シンボルをコピーする
・MovieClip等のシンボルで作成したものは、手順②のハードコピーではなく、シンボルを直接コピーして使う。

④実行して、ハードコピーを取る。
①のFlashファイルに、②③で集めた画像やシンボルを貼り付けて名刺の画像イメージを作る。出来上がったら実行してハードコピーを取る。このとき、レイアウトを確認するために文字はいれていいが、実行時はvisible=falseにする（文字はハードコピーすると汚くなるので、次の手順であるExcel側で入れる）

■Excelで印刷用ファイルをつくる
・Flashで作った背景画像をExcelに貼りつける。
・背景画像の上に文字を挿入する。Excelは文字のデザイン加工がいろいろできるので活用する（文字を選択すると文字の枠線なども指定できるので利用する。）
・左上には色が薄くて小さい四角を配置。（レイアウトを一応あわせるためのもの）
・左上に１つ名刺イメージができたら、横２個×縦５個コピーして並べる。

■印刷する
・ELECOMの「なっとく。名刺　クリアカット」（A4サイズ）を買ってくる。
・Excelを白紙に印刷して、名刺の用紙と重ねてレイアウトがずれないよう合わせていく。
・レイアウトが問題なければ、カラープリンタで、手ざしで印刷（表が印刷側、奥が上にくるように）手ざしは丁寧に１枚づつやらないと、ズレるので注意。
・印刷設定は、あざやか・きれい・普通紙（厚紙）にする。

author : ぽりＧ

その他 | 20:14 | comments(4) | trackbacks(0)

2010.01.02 Saturday

JavascriptをActionScript内に隠ぺいして実行

FlashのActionScriptからJavascriptを呼びだして実行する方法です。例えば、URL情報はActionScriptでは取得できませんので、Javascriptを呼びだして取得する必要があります。また、mixiアプリでマイミク情報を取得する場合、Ajaxで取得する必要があるため、やはりJavascriptをActionScriptから実行する必要があります。

ActionScriptからJavascriptを呼びだして実行する場合flash.external.ExternalInterfaceを使います。（getURLという命令もありますが、こちらは古いので最近のFlashではExternalInterfaceを使うよう、公式ページでは書かれています）

例えば、URL情報を取得する場合は以下のように記述します。
------------------------------------------------------
var url:String = String(ExternalInterface.call("function() { return window.location.href; }"));
------------------------------------------------------

Javascriptが長いプログラムの場合は、以下のように記述します。
------------------------------------------------------
var jsCode:String = <![CDATA[
function() {
   return window.location.href;
}
]]>;

var url:String = String(ExternalInterface.call(jsCode));
------------------------------------------------------
ここでポイントとなるのは、文字列を<![CDATA[ ～ ]]>;で括るという部分です。こうすることで、長い文字列を "" + "" + ... で繋ぐ必要が無くなるため、格段に保守性が良くなります。更にこの記述方法の良い点は、JavascriptをActionScriptの内部に書く為、コードを隠ぺいできる点です。

最後にExternalInterfaceを利用する場合の注意点。ExternalInterfaceは、FlashのObjectタグに、id属性を追加し、文字列"external"が入った名前を設定しないと、IEの場合戻り値がnullになってしまします。
以下は設定例です。
---------------------------------------------------------
<script type="text/javascript">
AC_FL_RunContent('width','650','height','650','src','aaaaaa','quality','high','movie','aaaaaa', 'id', 'externalswf' );
</script>

<noscript>
   <object width="650" height="650" id="externalswf">
   <param name="movie" value="aaaaaa.swf" />
   <param name="quality" value="high" />
   <embed src="aaaaaa.swf" quality="high" type="application/x-shockwave-flash" width="650" height="650"></embed>
   </object>
</noscript>
---------------------------------------------------------
※分かりやすくするために、一部記述を省いています。
AC_FL_RunContentとobjectの２箇所にid属性を追加します。

author : ぽりＧ

技術検証 | 12:24 | comments(0) | trackbacks(0)

2009.12.28 Monday

新ゲーム「ファイナルぴーちゃんをゲットせよ」

タイトルの通り新ゲームをリリースしましたよ～
むりげーに出す関係で急いで作りました。

ゲームはこちら

要は見ての通りグラディウスです。オプション（ひよこのぴーちゃん）を沢山付けられるところがちょっと捻ったところで、１ステージ内に何個まで付けられるかな？っていうゲームになってます。ちなみに規定数以上オプション取ってクリアすると別のモードが出てきて・・・ここからはご自分で確認してみてくださいｗ

出てくるキャラは第五回むりげーのお題のFF13のキャラです。FF13はやった事ないし、お題聞いてからやる時間もないので、とりあえずFF13のPVを見て作った感じです。

コンセプトとしては、レーザーやミサイル、バリヤーなどの動きを如何に本物っぽく動かせるかっていうところに注力してます。これどうやって再現してんの！？て質問があればブログでも作り方を公開していこうかと思ってます。唯一残念なのが、レーザーが背景をすり抜けてしまうところですか。あんまりゲーム自体に影響はないところですがこだわりたいところではあったのですが。

逆にキャラクタの絵とかは必要最低限っていうくらい手抜きしてます。（あえての手抜きｗ）

あとは、これだけの沢山のオプションを画面上に出しつつ、パフォーマンスは確保するっていうところもポイントでした。こちらのやり方については過去のエントリーでもやってますが、簡単に言うと１対１、１対多、多対多の当たり判定についてそれぞれ配列での当たり判定と、hitTestPointを上手く使い分けて、負荷がかかりにくいように工夫しています。厳密には自分のショットと敵の当たり判定がおかしいんですけど、時間もないしそれほど違和感ないので、まあいいかって感じで、調整なしですｗ（あえての手抜きその２ｗ）

あと今回特筆すべきは、なんといってもニコニコ生放送に出たこと！ゲーム作る前と作った後の２回出ました。初め遊び行ったときは、「傍らで生放送が見れるかな～？」くらいの軽いノリで行ったんですが、行ってみたらガッツリ出演者になってました（しかも今回のむりげーも参加必須みたいな感じな流れに！）作り終わった後の放送では、やれやれと思ってたら次回もお願いします、みたいな流れに！（準レギュラーみたいな？ｗ）

まあでも未来検索ブラジルの社内も見れたし、生ひろゆきもみれたし、沢山の有名な方とも知り合えたので、自分にとって十分実りのあるイベントとなったかと。なので東京近郊でむりげー参加されている方は、ニコ生遊び来るといいと思いますよ！次回はオフラインイベントをやるみたいなので、いまから楽しみです。

author : ぽりＧ

自作ゲーム（その３） | 10:43 | comments(0) | trackbacks(0)

2009.12.25 Friday

第五回むりげー企画会議に出席します

はいどーも！いい感じで放置しちゃってますが生きていますよ。ええ。

本日１２／２５クリスマス、第五回むりげー企画会議に行ってきます。むりげーとは、お題が出されてから４８時間以内にゲームを作って公開するという、例のアレです。第四回むりげーで出展した「ばらんす牧場」が、見事モゲラ賞を頂いたので、これは出席せずにはいられないという流れです。しかも今回の企画会議の模様は、ニコニコ生放送で、ネット配信されるとの事。オフ会みたいの初めてなのにいきなりハードル高いｗ

という訳でpoligの中の人がどんな顔なのかとか見てみたい人は、ぜひごらんください。２０：３０～２１：３０です。

author : ぽりＧ

その他 | 12:29 | comments(0) | trackbacks(0)

2009.11.04 Wednesday

「ばらんす牧場」でむりげー４に参加

むりげー４に飛び入り参加してきましたよー。「ばらんす牧場」っていう物理バランスゲームで参戦です。

ゲームはこちら

今回は初のモゲラ限定公開！ってことでPVカウンターが沢山増えてくれるといいなーって思ってます。

２日（月曜日）の朝、そーいえばムリゲーやってたよなっと思ってお題見たら、昔ちょろっと遊んだことある「サンシャイン牧場」というmixiのゲームだったので、１０分でゲームの構想立てて、その日のうちにザッと作り上げました。当初は２日中に作ればいいのかしらとか勝手に思ってて、２３時位に完成したんですが
一応締め切りが２０時だったみたいで、関係者の方に負担をかけてしまった模様（申し訳ございません！m(_ _)m）

んで、とりあえず公開したもののゲーム内容に満足できず、次の日もうちょっとまともに遊べるように修正しました。（イベント的にはずるいかもしれません！m(_ _)m）

効果音とかBGMにもこだわりたいので、今後更に更新するかもしれません。

今回は期限ありの短期勝負な感じで開発を行ったので、必要最小限の機能だけで、時間かかりそうな仕様は一切省きました。最近の自分はTransmover以来、なんか作ろうと思うとあれこれ付け足そうとして結局完成しないというパターンが非常に多い気がするので、むりげーのようなイベントに参加する方が作品は沢山捻出できそうな気がします。

あ、ちなみに今回はテストプレイもそこそこしかやってないので、自分自身収穫物コンプリートまだ出せてませんｗｗ　「コンプできたお！」という方はWebのどこかに書き込んでもらえると、多分見つけて「おお～」っていってますよ俺。

author : ぽりＧ

自作ゲーム（その３） | 17:29 | comments(1) | trackbacks(0)

2009.09.08 Tuesday

hitTestPointの当たり判定漏れ防止策

前回のエントリーでは、「自弾とザコ敵」の当たり判定は二次元配列上で行う方法がパフォーマンス的には有効であると書きましたが、「自機と敵弾」や、「自弾と障害物」の当たり判定は、やはりhitTestPointを利用する方法がいいと思います（※１）。つまり、当たり判定が「１対多」か「多対多」かで手法を分けます。（背景は背景用のスプライトにすべて追加し、１と数えます）

ところがこのスプライトでのhitTestPointは、タイミングによって当たり判定がうまくいかない場合があります。以下のデモを見てください。

デモはこちら

障害物である壁が配置されているSpriteに対し、弾一つ一つがhitTestPointで当たり判定を行っていますが、弾が速いためタイミングによっては壁を弾がすり抜けてしまいます。もちろん弾のスピードを遅くしたり、壁の厚さを広げれば判定漏れは減りますが、見た目やゲームシステム上そうしたくない場合も多々あります。

そこで、当たり判定を広げるため、壁のMovieClipの輪郭に沿って、アルファ0%のビットマップを追加します。（輪郭用のレイヤーを別途追加した方が編集しやすいでしょう。）

これによって、見た目や弾のスピードを変えることなく当たり判定をより正確に行う事が出来るようになります。

デモはこちら

※１：hitTestPointを使った手法とは、ある１つのSprite（例えば背景なら背景全体）に対して、弾の座標(x,y)が当たっているか否かを判別する手法です。

author : ぽりＧ

技術検証 | 11:03 | comments(0) | trackbacks(0)

2009.08.29 Saturday

シューティングゲームの当たり判定を高速化

ゲームを作る上で大きな課題の一つとして「当たり判定を如何に高速化できるか」というのがあります。今回は当たり判定を配列に置き換えて高速化する、という手法を思い付いたのでやってみました。

先ずはデモをご覧下さい。

デモはこちら

敵は弾が当たると白く光り、５回弾が当たると爆発するようになってます。

よくある手法として、弾をある１つのスプライトにすべて配置し、敵一つ一つに対して、弾のスプライト（全体）とhitTestする事によって当たっているか、否かを判定する方法があります。この方法は非常に高速に当たり判定を処理できますが、どの弾と当たったか、を判定できないので、当たった球を消せない、という欠点があります。

では、弾一つ一つと敵一つ一つをそれぞれ当たり判定しようとすると、これは膨大な量の判定を行わなければならなくなり、デモのような沢山の弾・沢山の敵が出現するシステムでは非常に重くなってしまいます。
単純な例として、敵が１００匹、弾が１００発画面上にあったら、１００×１００＝１００００回の判定が毎回必要になってしまいます。

そこで、座標を大きなマス目に置き換え、それぞれのマス目内で判定を行います。デモでは背景にマス目がありますが、これが当たり判定を行っている単位です。
意外とマス目は大きく感じますが、当たり判定にはそれ程違和感がありません。これは弾が速いのと、「敵に弾があたる」という行為自体、判定が広くても潜在的に不満は起こらない為だと思います。（これが自機の当たり判定となると、もっとシビアにやらないと不満が出ます。）

具体的な判定ロジックとしては、

・縦横の二次配列Aを用意（初期化）する。（マス目の数に合わせた配列、デモは１５×１５）
・画面に表示されている敵の座標からマス目座標を算出し（※１）、配列Aに敵（の参照）を当てていく。
（配列位置が重複した場合も特に気にせす上書きしちゃう）
・画面に表示されている弾一つ一つに対し、マス目座標で配列Aに敵がいるか判定（配列A[x][y]!=undefinedかどうか）、いたら当たり処理を行う。

この方法ですと、配列作成で１５回ループ、敵を配列代入で１００回ループ、弾当たり判定１００回ループ、で２１５回のループで全ての判定が行えます（しかも実際の当たり判定処理は１００回のみ）。マシンスペックによっては２１５回でも重いでしょうけど、１００００回判定と比べると雲泥の差です。

※１例えばマス目の大きさが40x30で、敵の座標が（300,100）だったら、マス目座標は、（300/40, 100/30）で、（8,4）といった具合。

author : ぽりＧ

技術検証 | 13:59 | comments(1) | trackbacks(0)

2009.05.22 Friday

Transmoverいじったり

最近やった事とかだらだら書きます。

この頃モゲラのTransmover掲示板にちょくちょく書き込みしてもらっているので、出てきた要望なんかをちょこちょこ追加してます。（作成者検索とか新しいブロックの追加とか）いつもは完成後に「直したいなあー」と思っても次の作品に生かそうっていうことで弄らないんですが、やはり掲示板なんかで楽しんでもらえてる反応が見れると、ついついサービスで機能追加してしまいます。まあ、Transmoverはシステム自体が汎用性高いからちょっと弄っただけでも世界が広がるのがうれしい。

あとは次作品（ブログで進捗晒してる物理演算ボクシングゲーム）、コンテンツ部分は８～９割方完成してるから、あとはタイトルやメニューを追加して、徐々に形にしていきたい。こいつは内容よりも見た目で楽しめる一発ネタ的なゲームなので、なにか盛り上がっているイベントに出したいんだが・・・。年末のFlash紅白まで寝かせるか・・・？ｗ（てゆうかやるのかな？）

author : ぽりＧ

その他 | 19:50 | comments(0) | trackbacks(0)

▲このページの先頭へ