はじまり

どうもこんにちは。
dots girls Advent Calendar 201522日目の記事です( ´ー｀)
ちなみに今日は28日です。

UnityでスターウォーズのOPっぽいものをつくってみたよ。
ではさっそくはじめましょう。

Unityちゃんをインストール

http://unity3d.com/
ここから無料版を入手します
インストーラーをDLして、とりあえず全部デフォルトのままインストール。
終わった。
ここまでで7分。

とりあえずUnityちゃんを開いてみる

起動してみた。
今回はスターウォーズのOPつくるだけだし、2Dで。
適当なディレクトリきってcreateっと・・
ふむ。
projectできたらしい。

今回は

PCのアプリとして書き出す
背景
ロゴ流す
文章流す
それっぽい音楽流す

くらいまでやってみようと思う。
~~ゲームエンジンとはなんだったのか・・・~~

ちなみに、操作のことはほぼ書かない方向でいきますので、これどうやってやんの？っていうのは自分で調べるか聞いて下さい。
基本的な操作しかしないのでたぶん大丈夫。

さっそくとりかかろう

うん、えっとで、なにからやればいいんでしたっけ？

という人のためにUnityにはちゃんとチュートリアルがあるよ。
http://unity3d.com/jp/learn/tutorials
ここからそれっぽいものをつまんでいこうと思う。
しかし英語ばかりである。
ので、
今回は加えて↓こちらのサイトさんを参考につくってみました
http://libro.tuyano.com/index2?id=3036003
jsでつくります。

まず環境を整えます

layoutは2by3が使いやすい気がする。
はじめに2Dを指定してprojectを作ったので今回は必要ないけど、EditorModeを2Dにすると書いたコードはの命令は2Dの操作になるらしい。
そしてSceneViewのデフォルトが2Dになると。ふむ。

じゃあ作ってゆきます

※すごい自己流な作り方です

↓今回やりたいこと↓

PCのアプリとして書き出す
背景
ロゴ流す
文章流す
それっぽい音楽流す

背景

まず背景をつくってみます。
背景は真っ黒にすればいいので新しく2D Object(name:background)を作成。
2D Object->Sprite
Sprite適当に選んで、Scaleをいい感じに大きくして色を黒くしておしまい。

ロゴ流す

ロゴは
http://logo54.com/movie/starwars/
ここで任意のものを作成
dots.ってやつとgirlsってロゴをそれぞれ作成。
で、空のGameObject(name:dotsgirls)を作成して、その中に２つを放り込む。
dotsgirlsに下のScriptを付加します。

dotsgirls.js

#pragma strict

var stop:boolean = true;
var text:GameObject;

function Start () {
    // Textって名前のObjectを取得
    text = GameObject.Find("Text");
    // はじめはなくていいのでサイズを0にする
    transform.localScale = new Vector3(0,0,0);
}

function Update () {
// textがなくなったら実行する処理(あらすじが流れ終わった後にロゴを表示する)
if (text == null) {
    // このdotsgirlsの横幅がが1.5になったらdotsgirlsを抹消
    if(transform.localScale.x >= 1.5) {
        Destroy(gameObject);
    }   

    // Spaceキーを押した時に実行する処理
    if (Input.GetKeyDown(KeyCode.Space)) {
        if (stop == true) {
            // 時を止める
            Time.timeScale = 0;
            stop = false;
        } else {
            // 時の流れを戻す
            Time.timeScale = 1;
            stop = true;
        }

    }
        if (stop == true) {
            // 0.003ずつdotsgirlsをxy軸方向に大きくする
            transform.localScale += new Vector3(0.003,0.003,0);
        }
    }
}

文章流す

まずは『あらすじ』な

文章はUI>Textでテキストエリアを挿入できるのでそれでObject(Canvasっていうのかな？)(name:TextCanvas)を追加。
この時点で

TextCanvas
└ text

という構成のObjectができる。
ここでSWのあらすじの文章って遠くから流れてくるからどうしようと頭を抱えました。
ですが、そう、 2Dも一応z軸を操れるらしい。

最高か。

ということで、2Dってボタンを押すと3Dに変更できるので変更して、PosXYZとRotationとかいい感じにいじって妥協できる角度で、前の方に流れてくるようにGUIで調整しました。
上から下に流れてくるように以下のScriptをtextの方に付加。

text.js

#pragma strict

var speed:int = 1;
var canvas:GameObject;

function Start () {
    // TextCanvasを呼び出す
    canvas = GameObject.Find("TextCanvas");
}

function Update () {
    // 上矢印キーをおした時の処理
    if (Input.GetKeyDown(KeyCode.UpArrow)) {
        speed++;
    }
    // 下矢印キーをおした時の処理
    else if (Input.GetKeyDown(KeyCode.DownArrow) && speed > 1)  {
        speed--;
    }

    // 0.05ずつy軸マイナス方向にtextを動かしていく
    transform.Translate(0,-0.05*speed,0);
    // textのy座標が-55以下になったらcanvasを削除
    if (transform.localPosition.y <= -55) {
        Destroy(canvas);
    }
}

次は青い文字の『導入』のとこな

UI>Textを追加文字色とか適当につけます。
追加したObjectの構成は↓。

TwitterCanvas
└ twitter

(名前は気にしないで！笑)
で、これはあらすじとロゴが流れ終わったら出したいの。
それを制御するために下のScriptを付加

twitter.js

#pragma strict

var text:GameObject;

function Start () {
    // dotagirlsを取得
    logo = GameObject.Find("dotsgirls");
    // はじめいらんからサイズを0に
    transform.localScale = new Vector3(0,0,0);
}

function Update () {
    // logoの幅が1.5以上になったら行う処理(1.5以上になったらlogoは消えるよう別scriptで制御済み)
    if(logo.transform.localScale.x >= 1.5) {
        // twitterを初期設定の大きさで表示
        transform.localScale = new Vector3(1,1,1);
    }
}

音楽を流す

今回は断念

その他追加事項

せっかくゲームエンジンを使ってるのでなんか操作したいよねってことで以下を追加しました。
大体の方はScript読みながらお気づきだったかと思いますが。

あらすじが流れている時に上下矢印キーを押すと流れる速度が変わります
ロゴが近づいてきている時にスペースキーを押すと止まりますもう一度押すと再開します

よろしくお願い致します

Input.GetKey()

Unityではキーの入力を検知するのにInputクラスを使用します。
dotsgirls.jsやtext.jsでInput.GetKeyDownとなっているところをずっとInput.GetKeyとしていて

『1回しか押してないのになんか知らんが4回位一度に入力される／(^o^)＼』

みたいな事案が。。
先輩に相談したらKeyのdownとupの操作両方見てるんじゃんみたいな、そんな話をされてまじかよと思ってUnityのドキュメントを見てみました。

http://docs.unity3d.com/ScriptReference/Input.GetKey.html
Returns true while the user holds down the key

ほう・・
Input.GetKeyは押している間trueを返すんですね。
そりゃ、ぼちぼち押してたら変な動作するわけだわね。
で、おしっぱじゃなくて押す毎にしたいので結局Input.GetKeyDownを採用しました。

PCのアプリとして書き出す

File->Build SettingsでPlatformをWebPlayerにしてBuildします。
そうしたら、書きだした先のフォルダにhtmlファイルとunity3dファイルができました。
それをサーバーに上げて、

∠( ﾟдﾟ)／エンドだ！
∠( ﾟдﾟ)／！
( ﾟдﾟ)・・・

サーバーどうしようかな。

っと思って調べていたら
googleドライブにあげて公開できるという超カンタンなお話を見つけ出したので今回はそちらを採用。
詳しくは下記を御覧ください。
http://toktakaomi.hatenablog.com/entry/2014/12/30/034914

おわり

たぶんこんな感じで、つくりました。
端折り過ぎですが。
すごい文章としては適当ですが、僕の出来る限りの力を(飽きない程度に)費やしたよ！

↓Safari/firefox/IEあたりで見れると思うから見てみてね！
https://googledrive.com/host/0BxQPZd1NguvUc0NKZWRoWGZka3c/Dotsgirls.html

今回はunityもjsも良くわからないままつくったのでわりと時間かかりましたが、なれたらこれくらいなら1時間以内につくれそう

まあ、また機会があったらUnityさんお会いしましょう

Unityでスターウォーズしてみた