諸君！！A-Frameで簡易ホラーVRを作ろうではないか！！（その２～前編～）

10409 ワード
A-Frame HTML5 VR Web HTML5 テキストリンク

こんにちは、パンダだよ！！
ここからさきはほらーこんてんつのさくせーほーほーのせつめーだから、こわいのがにがてなひとはぼくをみてほっこりしてからもどるボタンをおしてください。

前回の記事だ、ゴルァ！！

諸君！！A-Frameで簡易ホラーVRを作ろうではないか！！（多分その１）
http://qiita.com/bcosizm/items/53d828de9d6fbaa400a8

今回はわりとガチでやんぞ、ゴルァ！！

『球形のオブジェクトに閉じ込められて、のぞき穴から大きな顔たちに見つめられる』というコンセプトでいきます。

上を向いたら、

下をみたら、

カードボード対応で、

外から見たらこうなっています。（このオブジェクトのなかにカメラをおきます）

まずは材料だ、ゴルァ！！

画像は前回同様、暗黒工房さんを使わせていただきました。

それと、のぞき穴付き球形（"のぞき穴"ってなんかえっちぃ感じがしますな！）の3Dオブジェクトは、3DCを使って作りました。

3DCは3Dオブジェクトを作成するブラウザアプリです。
出来合いの立体を足したり、サイズや比率を変えたり、立体を重ねたところを削り取ったり、かなりシンプルな方法でオブジェクトを作ることが可能です。（積み木や粘土細工をイメージしていただけるといいかも？）
おそらく教育用に作られたものですが、僕がつくりたいもの程度であればこれで上等です。
スマートフォンアプリもあって、僕は通勤中にAndroid版で作成しました。
ちなみにOBJ＆STL形式で出力可能で、今回はOBJ形式を使います。

HTMLソースだ、ゴルァ！！

A-FRAMEを用いて、VR空間を記述していきます。

index_sub.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>In the dark.</title>
<meta name="description" content="In the dark.">
<meta name="apple-mobile-web-app-capable" content="yes">
<script src="https://rawgit.com/aframevr/aframe/149586a/dist/aframe-master.min.js"></script><!-- 今回は提供元から引用させていただきました -->
</head>
<body>
<a-scene>
    <a-assets>
        <!-- imgは前もって読み込む際は100%指定にしておかないと3Dオブジェクトに貼りつけた場合、欠ける可能性あり -->
        <img id="bigface" src="img/bigface06.jpg" width="100%" height="100%"><!-- モンスター画像 -->
        <img id="bonehead" src="img/braineat02.jpg" width="100%" height="100%"><!-- モンスター画像 -->
        <a-asset-item id="creature-obj" src="obj/Creature01.obj"></a-asset-item><!-- OBJファイル(※1) -->
        <audio id="nosound" src="sound/nosound01.mp3"></audio><!-- 無音サウンド -->
    </a-assets>

    <!-- OBJファイルを配置(※2) -->
    <a-entity obj-model="obj: #creature-obj;" scale="0.006 0.006 0.006" color="#00F" position="0 1 -0.5"></a-entity>

    <!-- モンスターを貼りつけた画像を配置 -->
    <!-- 真上だ！！ -->
    <a-image id="anything01" rotation="90 90 0" width="2" height="2" src="#bigface" position="0 3 0"></a-image>
    <!-- 真下だ！！ -->
    <a-image id="anything02" rotation="90 0 0" width="2" height="2" src="#bonehead" position="0 -1 0"></a-image>
    <!-- 手前だ！！ -->
    <a-image id="anything03" rotation="0 0 0" width="2" height="2" src="#bigface" position="0 1.5 1.5"></a-image>
    <!-- 画面奧だ！！ -->
    <a-image id="anything04" rotation="0 0 0" width="2" height="2" src="#bonehead" position="0 1.2 -1.5"></a-image>

    <!-- カメラ -->
    <a-sky color="#040404" segments-width="16" segments-height="4"></a-sky>
    <a-camera wasd-controls-enabled="false" position="0 0 0"
        sound="src:#nosound; loop:true; autoplay:true; volume:0.1">
        <a-cursor color="#fff" fuse="true"></a-cursor>
    </a-camera>

</a-scene>
</body>
</html>

今回はOBJファイルの配置以外は特に語ることがないですね。
※1で事前に"a-asset-item"タグでOBJファイルを読み込んでおいて、※2の"a-entity"タグの "obj-model"属性で読み込んだオブジェクトを配置します。
注意する点として、OBJファイルを初めて配置してみるときは"scale"属性をかなり小さくしてください。
こちらがVR環境を10～20mくらいの範囲で想定していたとしても、A-FRAMEで配置したOBJファイルが1kmくらいの大きさだったりすることがあるためです。（宇宙に行かないと、丸い地球を見られないようなものです）

それとちょっと失敗したこととして、"mtl"属性でマテリアルを指定できるのですがマテリアルファイルが3DCのアプリからOBJで出力したときに出てこなかったんですね。（のぞき穴球体、実は赤黒い色だったのです）
よって、残念ながら白いまんまです。
もっとA-FRAMEのドキュメントを追えば、色くらいは指定する箇所は見つかりそうなのでそれはまた後日。

あとは蛇足かもしれませんが、「無音サウンド」を入れてみました。
「何の音もしない」というよりかは「音が何もたたない空間で録音した」だけの音声です。
空気の音、といってもいいかもしれません。
そんな音声ファイルをかすかな音量でループで流しています。
ちょっとは臨場感が出るんじゃないかなーと思っています。
ヒントは某傑作ホラーアドベンチャーゲームで「実は人間に聞こえない音を常に再生し続けていた」というギミックがあったことでした。
その聞こえない音を無意識にプレイヤーに感知させて、不安にさせるとかそういう話だったと思います。
他の傑作ホラーアドベンチャーゲームでもプロデューサーの方が、「ホラーコンテンツは自分の見えないところでも常に何かが動き続けていることをプレイヤーに認識させることが大事」とおっしゃっていましたが、そこに通じるものがあるかもしれませんね。

できあがったぞ、是非とも見てくだゴルァ！！

リンク
http://bcscontents.appspot.com/horror-vr02/index_sub.html

QRコード

できれば感想をお願いします！

でもまだまだ続くんじゃよ、ゴルァ！！

実は後編に続きます。
さすがにこれで終わったら面白くないじゃないですか。
（おもいつきでやってることなので、面白くする自信もありませんがｗ）

後編は、

  • ローディングがすべて終わってからコンテンツを表示したい。（今はローディングが完了したものから表示・再生されている。カッコ悪い）
  • 時間経過でモンスターを移動させたい。
  • ランダムでモンスターを鳴かせたい。
  • オブジェクトに色をつけたい。テクスチャもつけてみたい。
  • ライティングにこだわりたい。

以上について実装、説明できたらと思います。