キューバに行ってみたい

ゲーム開発とかWeb開発とか

[Unity] script を使って n秒後にオブジェクトを削除する

球が壁に衝突して n秒後にその球を消したかったので、実装例について書きます。

実装方法

球の準備として Sprite Renderer で Circle を描画した GameObject を用意し、Rigidbody 2D, Circle Collider 2D の component を attach します。

次に衝突させる壁を用意します。
Sprite Renderer で Square を描画し、Box Collider 2D をアタッチして当たり判定できるようにします。

そして、以下の script を準備して Circle オブジェクトにアタッチします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Collision : MonoBehaviour
{
    public void OnCollisionEnter2D(Collision2D collision)
    {
        Destroy(gameObject, 3.0f);
    }
}

ポイントとなるのが、Destroy() メソッドの第二引数です。
第二引数は対象のオブジェクトが削除されるまでの遅延時間を指定できます。 今回は 3.0f なので、衝突から3秒後にオブジェクトが削除されることになります。

docs.unity3d.com

以上になります。

[Unity] Panel を使って fadein を実装する

前回 OnCollisionEnter2D を使って物体の衝突を検知する実装 を行いました。

blog.bestinarix.studio

今回はその続きとして、物体が衝突時に Panel を使って fadein の実装を行います。

実装方法

最終イメージは上手くキャプチャできませんでしたが、実装方法こんな感じです。

まず Panel Object の Image Component はこのように設定します。

ポイントは、A (アルファ) を 0 に設定し透明度を0にしておく。
Image Component を disable にしておく。

そして script を以下のように書き換えます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TriggerController : MonoBehaviour
{
    public GameObject Panel;

    private bool isPanel = false;
    private float red, green, blue;
    private float alpha;
    private float speed = 0.001f;

    public void Awake()
    {
        red = Panel.GetComponent<Image>().color.r;
        green = Panel.GetComponent<Image>().color.g;
        blue = Panel.GetComponent<Image>().color.b;
    }

    public void Update()
    {
        if (isPanel)
        {
            Panel.GetComponent<Image>().color = new Color(red, green, blue, alpha);
            if (alpha < 150)
            {
                alpha += speed;
            }
        }
    }

    public void OnCollisionEnter2D(Collision2D collision)
    {
        if (collision.gameObject.tag == "block")
        {
            gameObject.GetComponent<Renderer>().material.color = Color.red;
            Panel.GetComponent<Image>().enabled = true;
            isPanel = true;
        }
    }
}

Awake メソッドで初期値を r, g, b の取得しておきます。

OnCollisionEnter2D で物体が衝突したときに Panel を enabled に isPanel フラグを true にします。
こうすることで Update メソッドのでアルファ値を増加させることで fadein を実現しています。

[Unity] OnCollisionEnter2D を使って物体の衝突を検知させる

かなり基本的な内容ですが、タイトル通り今回は OnCollisionEnter2D を使って物体の衝突を検知してみたいと思います。

docs.unity3d.com

最終的に目指すのはこんな感じです。

球が下のブロックに衝突すると、色が白から赤に変化します。

実装方法

球に Rigidbody 2D と Circle Collider 2D のコンポーネントを追加して重力と当たり判定がされるようにします。

次にブロックに Box Collider 2D のコンポーネントを追加して当たり判定がされるようにし、"block" の Tag を追加します。

あとは以下のような script を準備して、球の GameObject にアタッチします。
これで実装自体は完了です。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class TriggerController : MonoBehaviour
{
    public void OnCollisionEnter2D(Collision2D collision)
    {
        if (collision.gameObject.tag == "block")
        {
            gameObject.GetComponent<Renderer>().material.color = Color.red;
        }
    }
}

軽く説明すると、OnCollisionEnter2D メソッドは物体が衝突したのを検知して発火するイベントトリガーです。
引数に渡される collision は衝突した object が渡ってきます。
そして、その object の tag を取得して "block" だった場合に球の色を変化させています。

簡単な内容ですが以上です。

[Unity] Unity Recorder を使ってプレイ画面を録画する

Unity で開発中のゲームを録画したいことがあるかと思います。

今回は Unity Recorder を使ってサクッと行う方法を紹介します。

docs.unity3d.com

インストール

Window > Package Manager で Package Manager を開きます。

Package Manager から Unity Recorder を選択してインストールする

使い方

Window > General > Recorder > Recorder Window を選択する。

今回は GIF 画像を録画してみます。

Recorder Window で Add Recorder > GIF Animation を選択する。
この他にも mp4 や Animation Clip 作成することができます。

あとは再生ボタンを押すことで録画することができます。
こんな感じです。

Twitter やブログ用に簡単に作成することができるので、とても便利です。

[Unity] LineRenderer で描画した線を動かす

前回 script で LineRenderer を使って線を描画しました。

今回はその描画した線を動かしてみます。

実装方法

前回追加した空の GameObject に RigidBody 2D Component を追加して、script を以下のように書き換えます。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class LineController : MonoBehaviour
{
    private GameObject obj;
    private Vector3 moveSpeed = new Vector3(0.001f, 0.001f, 0);

    void Start()
    {
        obj = gameObject;
        LineRenderer line = obj.AddComponent<LineRenderer>();
        line.startWidth = 0.1f;
        line.endWidth = 0.1f;
        line.material = new Material(Shader.Find("Sprites/Default"));
        line.startColor = Color.red;
        line.endColor = Color.blue;

        line.SetPositions(
            new Vector3[]
            {
                new Vector3(-1, 0),
                new Vector3(1, 0),
            }
        );
    }

    void FixedUpdate()
    {
        obj.transform.position += moveSpeed;
    }
}

このように前回描画した線を移動させることができます。

FixedUpdate メソッド内で対象のオブジェクトの座標を変更することで描画した線を移動させています。

[Unity] script で LineRenderer を使って線を描画する

script から LineRenderer を使って線を描画する方法を紹介します。

実装方法

空の GameObject を用意して以下の script をアタッチします。

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class LineController : MonoBehaviour
{
    void Start()
    {
        LineRenderer line = gameObject.AddComponent<LineRenderer>();
  
        line.SetPositions(
            new Vector3[]
            {
                new Vector3(0, 0), // 開始座標を指定
                new Vector3(1, 0), // 終了座標を指定
            }
        );
    }
}

このように線を描画することができます。

プロパティについて

Unity の公式ドキュメントを見ると様々なプロパティが用意されています。

例えば線を太くしたり、色を変えてみます。

線を太さを変える

line.startWidth = 0.1f; // 開始点の太さ
line.endtWidth = 0.5f; // 終了点の太さ
line.material = new Material(Shader.Find("Sprites/Default")); // デフォルトのマテリアルを設定
line.startColor = Color.red; // 開始点の色
line.endColor = Color.blue; // 終了点の色

こんな感じの線が描画されます。

それでは、次回は線を動かしてみたいと思います。

Hugo を Firebase Hosting で公開した

Hugo で静的サイトを作成し、Firebase Hosting で公開してみましたので手順を書いておきます。

ホスティング方法を Firebase Hosting にしたのは、なるべく簡単にページ公開ができて適当に運用できるようにしたかったからで、GitHub Actions を用いたデプロイパイプラインを初期設定ですることができると聞いていたので、それを使えば楽に運用できるのでは?と思ったから選択してみました。

では、早速公開までの手順を書いてみます。
console に残ってたやつを貼り付けてるので間違ってたらすみません。

Firebase Hosting の設定

ちなみに、Firebase へのログイン・プロジェクト作成は事前に済ませています。

プロジェクトの初期化

firebase init hosting

すると、インタラクティブに初期設定を進めることができます。

? Please select an option:
? Select a default Firebase project for this directory:

Firebase のプロジェクトはどれにするか?と聞かれるので、自分は事前に作成しておいたプロジェクトを選択しました。

Your public directory is the folder (relative to your project directory) that
will contain Hosting assets to be uploaded with firebase deploy. If you
have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? public

公開する directory が聞かれたので public にしました。

? Configure as a single-page app (rewrite all urls to /index.html)? No

SPA かどうか聞かれたので No と答えました。

? Set up automatic builds and deploys with GitHub? Yes

GitHub で自動デプロイするかと聞かれたので、もちろん Yes としました。

? File public/404.html already exists. Overwrite? Yes

public/404.html 上書いていいかと聞かれたのでうっかり Yes としてしまいました (後で戻した) 。

i  Authorizing with GitHub to upload your service account to a GitHub repository's secrets store.

Visit this URL on this device to log in:
https://github.com/login/oauth/authorize?xxx

Waiting for authentication...

✔  Success! Logged into GitHub as bestinarix

secret に保存しないといけないので GitHub 認証しろと言われたので認証した。

? For which GitHub repository would you like to set up a GitHub workflow? (format: user/repository) bestinarix/xxx

workflow を設定するリポジトリを決めました。

i  You can manage your secrets at https://github.com/bestinarix/xxx/settings/secrets.

すると secrets に service account が保存されました。

? Set up the workflow to run a build script before every deploy? No

毎回 build script 走らせる?と聞かれたが間違って No にしてしまった。
Hugo の場合 build が必要なのでそれを設定しておくべきだった (後でやる) 。

? Set up automatic deployment to your site's live channel when a PR is merged? Yes
? What is the name of the GitHub branch associated with your site's live channel? master

merge されたら自動デプロイする?するとしたら、どの branch ?と聞かれたので、master に merge したら deploy してと答えました。

✔  Firebase initialization complete!

終わり。めっちゃ簡単 (ちょいちょい間違ったけど) 。

あとは適当に build して master に push すれば CI が良しなにデプロイしてくれるのでとても快適です。
build も CI に任せておきたいところです。

ちなみに branch を切って PR を出すとプレビューのページを適当な URL で表示できるようにしてくれるのでめちゃくちゃいいです。
ただ Hugo に設定している bassURL とは別の URL なので CSS とかが軒並み読み込めなくなって死んでしまっている、、、
この辺り改善策があるはずなので、追々対応していこうと思います。

Firebase Hosting は最高だ。