プチメタ3.0

刺激を受けた物事に対する感想や考察、自己成長や資産運用、ゲーム作りに関することなど。


謎解きブログ「100階建ての無人ホテル」のプロモーションビデオを作りました


nobodyhotel.hateblo.jp


昨日公開したばかりの謎解きブログ「100階建ての無人ホテル」ですが、
前作でいろいろ試したプロモーション活動のうち
効果的だったものはどんどんなぞっていこうと考えていて
まずはプロモーション動画を作りました。


曲は一新しつつも構成や見せ方は前作と同じです。
1作目で苦労しながら試行錯誤したおかげで
曲選びから映像作成まで2時間半ほどで完成させることができました。


自分でも割と気に入っているデキですが、
この動画をきっかけにして
謎解きブログに挑戦してくれる人が出ることを願っています。



www.gamer.ne.jp


プレスリリースも前回同様に送りまくって
無事、記事として取り上げられました。

プレスリリースを送ってニュースサイトに載ることに成功した


自分が手掛けたものが報道メディアに載るというのは
クリエイターの目標のひとつだろうが、
そういう報道関係者に自分から情報を送る
「プレスリリース」という手段がある。


以前からずっと関心があったのだが、
単なる個人が報道メディアに連絡することに
なかなか決心がつかず後回しにしていた。


そんな中、仕事でプレスリリースに関する
セミナーを見学させてもらえる機会があり、
せっかくなのでその勢いで作ってみることにした。

謎解きブログをニュース素材に使ってみた

プレスリリースを出すということは何かニュースが必要だが、
取り立てて「ニュース」と言われると困る。


これまでいろんなものを作ってきたが、
プレスリリースにはある程度の情報価値と鮮度が必要ということなので
一番最後に作った謎解きブログ「夜の小学校」を使うことにした。


nightschool.hateblo.jp


といってもこの作品を公開したのは5年前だ。
とても新鮮なニュースとはいえないため、
最近達成した「プレイ人数1万6千人達成」をネタにすることにした。




プレスリリースは報道メディアに伝えたい情報を
A4用紙1枚にわかりやすくまとめるということなので、
このようなデータを作り、PDFファイルにして
ゲームの情報を扱う複数のメディアに送信してみた。


見知らぬ人にメールを送る勇気がいるだけなく、
同じ文章をいろいろな宛先に送信する作業が
迷惑メールを送りつけているようで、かなり罪悪感を感じた。

利用する編集者の都合を考えて作り直した

数日待ってみたが一向に掲載される気配がないため、
何か問題があったのではないかと
改めてプレスリリースに関して調べ直すことにした。
(ニュースとして価値がなかった可能性が一番大きいが)


先日受けたセミナーは一般企業向けだったため、
よりゲーム向けに特化した情報を探して問題点を洗い出す。


gamewriter.jp


そしてプレスリリースは忙しい編集者が
少ない手間で記事にできることに意味があるわけだから、
文章をコピーペーストしにくいPDF形式に
画像まで埋め込んだのは間違いだったと気づいた。


そこでPDFとともにWord形式のファイルも同梱し、
メール本文にも同じ内容を記載した上に
画像については縮小していないものを別途添付することにした。




文書ファイルは文字情報だけに限定し、
さらに謎解きブログのURLだけでなく
ジャンルや価格、プロモーションビデオや作者の情報も
箇条書きにしてまとめることにした。




メールアドレスに直接送るパターン以外に
問い合わせフォームに送るサイトもあったが、
フォーム経由だとファイルが添付できないので
Googleドライブに置いたZIpファイルの
共有リンクを記載した原稿も用意した。


作り直したとはいえ似たようなプレスリリースを
また送りつけるのは失礼かとも思ったが、
向こうはゴミメールを受け取り慣れた
プロのはずだと自分を納得させることにした。

いきなり載った

20~30ほどの報道メディアに送った日の夕方、
謎解きブログへのアクセス数が急に上がり始めた。


アクセス元のドメイン名をたどってみると、
Gamerというサイトにいきなり載っていた




www.gamer.ne.jp


プレスリリースを送ってからわずか1時間ほど。
事前の通知すらなくこんなに急に載るのかと驚いた。




自分の作品の紹介が記事となって
ニュースサイトに載っているのは新鮮だった。
自作ゲームを取り上げてもらった経験は以前にもあったが、
プレスリリースによって自力で記事を生み出した感覚は初めてだ。




よく見ると記事の後半は私の書いた原稿そのままだった。
プレスリリースの内容がそのまま流用されているので
編集者の手間が少なく、記事になるのも早いのだろうが、
そのつもりでしっかり原稿を書く必要がある。


また、記事を読んだ人の興味を引く意味で
プロモーション動画を先に作っておいたのは
かなり正解だったように思う。
記事の中にもしっかり紹介されているし、
ゲームをプレイするより動画を観る方がハードルが低い。

謎解きブログへのアクセス数が跳ね上がった


ニュースサイトの影響はたいしたもので、
掲載された夕方からアクセス数が跳ね上がり、
翌日、翌々日と大きく数字が伸びた。


あちこちのニュース記事を転載して
ひとまとめに閲覧できるようサービスがあるが、
今回の記事もSmartNewsで紹介されたようで、
GamerとSmartNewsの双方から莫大な流入があった。
1日に1000人以上が訪れ、総プレイ人数は2万人を突破した。




また、話題作ばかりが紹介される中で
真っ黒な画面の無名なゲームは異色だったのか、
Gamer内のアクセスランキングで
テイルズやアイドルマスターに混ざる形で1位に踊り出た。
ほとんどの人にとって謎の謎解きゲームだったと思う。


ランキングを算出する期間によって結果が変わるらしく、
翌週に発表された週間ランキングでは総合3位と報道された

プレスリリースにチャレンジしてみる価値はある

altema.jp


3日ほど経ってまた別のゲーム紹介サイトにも掲載された。
大半のメディアには無視されるだけだが、
それでもこうやって少しでも取り上げられるのは嬉しいし、
運がよければバズってくれるかもしれない。


文章がそれなりに書けるなら
プレスリリースは半日で作れるので、
試しにチャレンジしてみる価値はあると思う。



mclover.hateblo.jp

エヴァンゲリオンに出会ったおかげで作品を公開する気持ちよさを知った

新世紀エヴァンゲリオン


話題になっているテレビアニメの噂を耳にする

新世紀エヴァンゲリオン」といえば
今でも話題に挙がる「エヴァンゲリオン」シリーズの
初代テレビアニメ版として1995年に放送されていた作品だ。


当時、高校3年生だった私にもその評判は聞こえてきたが、
致命的なことに実家ではテレビ大阪が映らず、
テレビ東京系列の話題作は軒並み見ることができなかった。


まだインターネットも普及しておらず、DVDもない時代なので
どれだけ観たくてもどうしようもなく、諦めるしかなかった。

エヴァンゲリオンとの出会い

ゲームプログラミングを勉強するために専門学校に進学した私は
同じような趣味を持つ友人たちと出会ったが、
「エヴァンゲリオン」を観ていない私の不幸を知った1人が
なんとテレビ放送を全話録画したビデオテープを
貸してくれることになった。


私は歓喜し、ぶっ通しで観た。衝撃だった。


後ろ向きな主人公、無口で無愛想なヒロイン、
有線で電源が供給されるロボット、
魅力的なアクションシーン、斬新な演出、
重要な登場人物の死、謎に包まれた世界観。


何度も見返し、各場面を目に焼き付けていった。
大量に販売されていた考察本も読み漁った。


テレビ放送終了後も劇場版が公開されるなど
その人気はまだまだ衰えそうにない雰囲気だった。

WindowsAPIの学習から着想を得る

すっかりエヴァにハマった私だったが、
同時にプログラミングの勉強にものめり込み、
その中で「WindowsAPI」というものを学んだ。


WindowsAPIとはパソコンの情報を取得・設定できる命令のことで、
たとえばマウスカーソルの座標を調べたり
ウィンドウの位置の変更したりできる。


とある友人からWindowsAPIの一覧資料を共有してもらったので
自分の知らない命令の多彩さに驚きながら眺めていたのだが、
その中に「GetSystemPowerStatus」という命令を見つけた。


GetSystemPowerStatus:
 システムの電源状態を取得します。
 システムがAC電源とDC電源のどちらで動作しているか、
 バッテリーが現在充電されているかどうか、
 バッテリーの寿命がどれくらい残っているか、
 バッテリー 節約機能がオンかオフかを示します。


私の通っていた専門学校では
学生それぞれが自分のノートパソコンを使うスタイルだったため、
特にバッテリーの残量や充電には日常的に関わる。
そういったハードウェア的な情報も
命令を使って取得できることに刺激を受けた。


そのときに思い出したのが
「エヴァンゲリオン」の中の一場面だ。


それまでのロボットものと異なり、
エヴァンゲリオンは電源コードをぶら下げながら戦い、
それが切断されると内部バッテリーに切り替わる。




エネルギー切れまでの残り時間を表すメーターは印象的で、
オープニング映像の中にも登場する。


ノートパソコンも同様にバッテリーを内蔵しており、
しかも先ほどのWindowsAPIによって
充電中かどうかとバッテリー残量が調べられる。


それならこのエヴァンゲリオンのメーターを
そのまま再現したソフトが作れるんじゃないだろうか。
それが「エヴァメーター」をひらめいた瞬間だった。

メーターの見た目を再現する

まずは見た目を真似るため、
「エヴァンゲリオン」を全話見返しながら
メーター登場シーンをひとつひとつチェックし、
それをもとにデジタル数字や点灯部分の画像を描き、
大きさやレイアウトを似せながら作った。




当時の私が学習していた中で
Windows上で動作するソフトが作れるプログラミング言語は
Visual Basicだけだったので、色や仕様に制限があったが
可能な範囲でなるべく再現していった。


ノートパソコンが充電中かどうかに合わせて
右端の「内部」「外部」という表示が切り替わる様子は
まさにエヴァンゲリオンそのままで嬉しかった。

残り駆動時間の計算方法に悩む

もうひとつ考えないといけないのは
バッテリーの残り時間の計算だ。


WindowsAPIを使って取得できるバッテリー残量は
0~100%の単純な数値であり、
パソコンが駆動できる時間を表しているわけではない。
しかしここはぜひエヴァンゲリオンらしく再現したい。


そこで一定時間おきにバッテリー残量を調べて
減少したバッテリー量と経過時間から
残量がゼロになるまでの予測時間を計算することにした。


しかしパソコンは処理負荷によって
急激にバッテリーが減ることがあるため、
直近の変化だけを調べると誤差が大きくなる。


そのあたりの調整がなかなかに難しく、
授業中に何度も電源コードを抜き差ししながら
納得のいく結果が出るまで計算方法を見直した。


また、エヴァンゲリオンは5分間しか動けないが
パソコンは数時間は動作するので
作中の「分・秒・ミリ秒」というケタを1つずつ上げて
「時・分・秒」で表記することにした。

アニメの再現だけでなく実用性も重視

毎日テストプレイを繰り返している中で
バッテリーの残り予測時間だけだと割と不便で、
単純な残量も確認したいことがわかった。




そこでメーターの下部を拡張して
バッテリー残量が一目でわかるようにした。
アニメ上の表現とは食い違ってしまうが、
バッテリーメーターとしてはこちらの方が便利だ。


この段階でやれることはすべてやり尽くしたので
「エヴァメーター」と名付けて完成とした。
私が20歳だったWindows95の時代である。


それまでも授業で習った内容を使って
こまごまとした実験プログラムを大量に作っていたが、
Windows上で動作するソフトを
きちんと完成させたのはこれが初めてだった。
(ちなみに「実用マウスカーソル」も当時描いたものだ)

担任の先生が広めてくれる

エヴァメーターは自分でも割と気に入っていたが、
使っている様子を見かけた当時の担任の先生が
同様にエヴァンゲリオン好きで非常に評価してくれた。


単に社交辞令で褒めてくれたわけではなく、
学習成果の一例として別のクラスでも紹介してくれたようで、
専門学校では交友範囲が狭かったにもかかわらず、
全然知らない学生が私の作ったソフトを
使ってくれているという不思議な快感を味わった。

人生初のインターネット公開

さらに数日後、その先生から
「インターネットで公開してみないか」と持ちかけられた。


1997年当時はネット環境がある家庭もまだまだ少なく、
放課後に学校の実習室でちょっとWebサイトを見るぐらいだったので、
「インターネットで公開」というものがどんな感じで
どうやったらそれができるのかまったくわからなかった。


でも「誰かに使ってもらえるのは嬉しい」という感覚だけはあったため、
先生にデータを渡して公開をお願いした。
(今思い返すと完全に丸投げしたのは申し訳ない限りだ)


それが具体的にどこにどんな風に公開されたのかはわからないのだが、
先生から「誰でもダウンロードできる状態になったよ」
「使っている人から感想が届いたよ」という報告を聞くたびに
自分の作った作品が少しずつ有名になっていく気持ちよさを感じた。


また、他の人に使ってもらう以上、
説明書やアップデート情報なども
きちんと整備する必要があることを学んだ。

コンテンツを発信していく制作者になる

専門学校卒業から1年ほど経ち、
それまで眺めるだけだったWebサイトを
自分でも作ってみることにした


さらに2年後にはタイピングゲーム「喰人王」を作り、
初めて自力でインターネットに公開。
そこから「フロントライン」、「バーガーメーカー」、
ウゴツール」、「ネイビーミッション」、「まるっとおみ透視」と
立て続けに作品を作って公開していった。


それなりに人気を呼んでも無料での公開を続けたのは
専門学校時代に感じた
「たくさんの人が使ってくれるのは嬉しい」という想いを
なるべく叶えたかったからだ。

セルフリメイクを機に見た目を改善する

規模の大きなゲーム開発を続けたこともあり、
息抜き代わりに小規模なソフトが作れないか考えたときに
ふと専門学校時代に作ったエヴァメーターを思い出した。


初めて人に使ってもらった作品ということで思い入れがあったのと
「29歳になった今の知識と技術なら
もう少しうまく作れるかも」と気持ちが湧き、
企画だけを引き継いで完全にゼロから開発してみることにした。




初代エヴァメーターでもっとも悔やまれたのが
メーターの向きが再現できなかったことである。
アニメで映るこのナナメ向きの見た目は非常に印象的で
カッコよさに一役買っているのは間違いない。




今回はなんとかこれを実現してみようと
アニメの画面に重ね合わせながら画像を描いてみた。
いざ作ってみるとわかったが、
遠近法の関係で奥の方の数字は微妙に小さく、
ケタごとに画像を全部用意するしかなくて大変だった。




色の制約もなくなったため、アニメ同様に
オレンジをベースにした色調に変更した。


ナナメ向きを再現するにはまだ不十分で、
通常、Windows上で動作するソフトは
長方形のウィンドウが基本だが、
このエヴァメーターは独特な形状をしている。


普通の長方形ウィンドウとは異なる複雑な形を再現するためには
透明部分と不透明部分をピクセル単位で定義する必要があり、
これが割と利用機会の少ない特殊な処理なので
その方法がなかなかわからず苦労した。

実用性を高める時計モードを新規追加


エヴァメーターはバッテリーの残り駆動時間を表示するものだが、
電源アダプターをつなぎっぱなしのパソコンだと
アニメ同様に「8:88:88」になってしまい、
得られる情報がなくて役に立たない。


そこで新たに「時計モード」を用意することにした。




残り駆動時間の部分に時刻を表示し、
「内部」「外部」で午前か午後かを判別、
同時にバッテリー残量も確認できる仕様を考えた。
12時間制で時刻が表現できるよう、
アニメでは存在しない10の位も表示されるようにした。




さらに、エヴァメーターの向こう側に
ウィンドウが隠れて不便なことがあるので
マウスカーソルが近づくと透明になる機能も追加した。

自分自身でよく使っているソフト


mclover.hateblo.jp


リメイク版のエヴァメーターは2006年7月に公開したが、
Windows標準の時計よりも遥かに見やすく、
私自身が普段パソコンを使うときに重宝している。


「今さらエヴァは古いかな」とも思っていたのだが、
リメイク版を作った1年後に「新劇場版:序」が公開されたりして
エヴァンゲリオン人気の息の長さに驚いている。


単なる時計ソフトと言われればそれまでだが、
いざ使ってみると意外と便利なので、ぜひ試してみて欲しい。

物体が壁に跳ね返る動きの作り方


ボールや車両、魔法や敵キャラなど
ゲームの中で何かを壁面に反射させたいことがある。


水平と垂直の壁しかないような2Dゲームなら
進行方向を表す角度をうまく計算するだけでも大丈夫だが、
いろいろな向きの壁が存在したり
3D空間内を移動動するような場合ではもう少し別の方法を使う。

法線

正しい反射処理を実現するためには
法線(ほうせん)」を理解しておく必要がある。




法線とは壁面に対して垂直に伸びるベクトルのことで、
3Dプログラミングの場合は
ポリゴン面の表側に立っているイメージだ。


簡単に言えば「面の向き」を表しているのだが、
ゲームプログラミングでは
法線をうまく利用した処理がたくさんある。

物体は移動ベクトルに従って進むようにする


キャラクターが移動する場合は
「そのキャラが向いている方向に前進する」という処理を作るが、
「壁に跳ね返る」というのは外的要因なので
その物体がどっちに向いているかは関係がないため、
単純に絶対方向を表す移動ベクトルに従って動かす方がよい。


つまり、(3,0,0)というベクトルなら3D空間の右方向に、
(-2,2,0)なら3D空間の左上方向に移動するわけだ。

入射角と反射角を等しくする必要がある




中学や高校で習う光の反射の法則と同様、
自然な跳ね返りに見せるには
壁面にぶつかった角度と同じ角度で出ていく必要がある。


移動ベクトルによって進んでいる物体の場合は
入射ベクトルが壁と衝突する前の移動ベクトルで、
反射ベクトルが新たな移動ベクトルということだ。

ベクトルの内積を使って長さを求める


正しい反射ベクトルを求めるには
まず物体が衝突した壁面の法線が必要になる。




ベクトル同士は足し算することができるので、
たとえば入射ベクトルと法線(ベクトル)を足すと
片方の末端からもう片方の先端を結んだベクトルが求まる。




もし法線が長ければ
2本のベクトルを足した結果は
かなり上を向いたベクトルになるし、



法線が短ければ下を向いたベクトルになる。


そこで都合のいい長さに法線を調整することを考える。
これにはベクトルの内積を利用する。




入射ベクトルの逆ベクトル\displaystyle\vec{A} 、法線を \displaystyle\vec{N} とした場合、
内積は\displaystyle\ |\vec{A}||\vec{N}|cos\theta となるが、
法線の長さは1なので \displaystyle\ |\vec{N}| を省いて \displaystyle\ |\vec{A}|\cos\theta となる。


つまり、単純な三角関数を使った計算として長さLが求まる。
このLはベクトルN方向に対するベクトルAの長さ、
いわば真横から光を当てたときの影の長さになるところがポイントだ。

適切な長さに調整した法線を利用する

法線は長さ1なので、好きな値をかけることで
希望の長さに延長・短縮することができる。



たとえば法線に先ほどのLをかけると
入射ベクトルの影と同じ長さのベクトルNLが作れる。




しかしこれを入射ベクトルに足しても
あまり意味のないベクトルになるだけだ。




理想的な結果を導くには、入射ベクトルに
ベクトルNLを2本分足すようにする。




全体をひし形として考えるとわかりやすいが、
「入射ベクトル+ベクトルNL × 2」は
反射ベクトルとそっくり同じ角度・長さなのだ。


つまりこれが衝突面に反射したあとの
新たな移動ベクトルになる。

まとめ

全体の処理をまとめると、


 \displaystyle\ \vec{V} 衝突前の移動ベクトル
 \displaystyle\ \vec{N} 衝突面の法線(正規化済み)
 \displaystyle\ \vec{nV} 衝突後の移動ベクトル


 \displaystyle\ L= \ -\vec{V} \displaystyle\vec{N}の内積
 \displaystyle\ \vec{nV}=\vec{V}+\vec{N}\times\ L\times\ 2


という感じになる。


理屈はややこしく見えるが、
実際の処理は驚くほどシンプルで、
きっちり面の向きに応じた反射が実現できる。



mclover.hateblo.jp

mclover.hateblo.jp

mclover.hateblo.jp

綺麗なロゴを簡単に作れるWebサイトが便利


ゲーム開発ではタイトル画面を作るときはもちろん、
「TIME」とか「13Hit!」のように表示されるUIなど
いろいろなロゴが必要になる。




だからといってWindows付属のペイントあたりで作ると
この程度の仕上がりになってしまう。
学生はこのへんのクオリティを軽視しがちだが、
妥協して作られたロゴは画面の雰囲気を著しく下げる。


かといってきちんとしたものを自作しようとすると
それなりのソフトとそれを使いこなす技術、
ある程度のセンスが必要になってくる。


そこでオススメしたいのが「ロゴ作成ジェネレーター」だ。




ja.cooltext.com


このサービスを使うと非常に手軽に
しっかりしたロゴを作ることができる。




まずは自分の作りたいイメージに近いロゴを選択。




表示したい内容を入力すると
そのままロゴ画像に反映される。




タブを切り替えると色味を変更したり、



影の濃さや位置の調整もできる。




完成したロゴは背景が透明になった
PNG形式の画像としてダウンロードできる。






ロゴだけでも作品の世界観をかなり左右するし、
しっかり作られたロゴは雰囲気を引き締めてくれるので
こういうサービスをうまく利用していきたい。

総アクセス数