【ゲーム開発革新】Unityを使って真似度の高いクウゴウ音楽プレイヤー、浜崎あゆみ、メロディー、イェ・チンホイ（サウンドビジュアライゼーション | スペクトラム

記事ディレクトリ

I.はじめに

こんにちは、私は新しいです。
事はこんな感じで、浜崎あゆみの歌を聴いていたらMY ALL、涙が溢れ、メロディーが始まり、Ye Qinghui、

【4Kコレクション並みの画質】浜崎あゆみの神曲「マイオール」を歌って観客を泣かせた！! !

UnityKugou をクリックして詳しく調べたところ、浜崎あゆみのこの曲だけを再生して、高品質の模造 Kugou 音楽プレーヤーとして使用できないかというアイデアが浮かびました。というわけで
作ってみたのですが、最終的な効果は以下の
写真の説明を追加してください
通り

です。exe

2.UI素材を入手する

以下は本当にクールな犬のインターフェースです.インターフェースに従って, アリのアイコンライブラリにアクセスしてhttps://www.iconfont.cn/アドレスアリのアイコンライブラリのを
ここに画像の説明を挿入
必要な素材アイコンを検索して見つけてください.アイコンをクリックすると、最初にアイコンの色を白に設定してからダウンロードすることができます、など、私が探している資料は次のとおりです。そうしないと、この楕円形のボタンのように変形する可能性があります。

ここに画像の説明を挿入
我的电台

电台

UISprite (2D and UI)

UI

3. UGUIを使ってインターフェースを作る

最終的なインターフェース効果は次のとおりです。
ここに画像の説明を挿入
以下のキーポイントを取り上げます。

1.インターフェースのレイアウト

インターフェースの作成を始める前にUI、まずインターフェースのレイアウトを分析する必要があります.まず、大きなレイアウトの観点から、上部、中間、および下部です.
ここに画像の説明を挿入
インターフェースを作成するときは、上部に従って行います. , 中央部と下部,次のように

.このように、次のように、中央を、、の 3 つの部分に分けることができます。など、大きなレイアウトに小さなレイアウトを埋め込み、小さなレイアウトに小さなレイアウトを埋め込み続け、インターフェースに応じて合理的に設計します。
写真の説明を追加してください
我的音乐
ここに画像の説明を挿入
tabsleftright

2.アカウント円形アバター

アバター画像は次のように正方形です:
写真の説明を追加してください
丸いアバターを表示する必要があり、コンポーネントを使用できますMask. 次のhead_frameノードは画像を
ここに画像の説明を挿入
使用して圆形表示し、コンポーネントを吊るしますMask.

子ノードはhead_imgアバター画像です.コンポーネントを

使用して表示しますRawImageアバターの

効果は次のとおりです。

3. 検索ボックス

検索ボックスは、次のようにInputField、コンポーネントを使用して
ここに画像の説明を挿入
ボックスの画像を置き換え、色を設定します。

検索ボックスに別のコンポーネントを配置してButton、虫眼鏡の画像を表示します。

効果は次のとおりです。
写真の説明を追加してください

4.UIレイヤーを調整する

我的音乐このボタンは
ここに画像の説明を挿入
手前に表示するのが正解です

が、ブロックされているのは、UGUIデフォルトではノードの順番で描画するようになっていて、後ろのボタンは下に配置されているので、後ろのボタンで隠れてしまうからです
ここに画像の説明を挿入
。ノードの順序を調整したくないが、我的音乐ボタンを前面に表示したい. コンポーネントを個別に吊るして、前のレベルよりも大きな値にCanvas設定することSort OrderがCanvasできます.普通に前面に表示されます。Sort Order
ここに画像の説明を挿入

5. 黒ボタンフローティングハイライト効果

ボタンの上にマウスを置くと、次のようにボタンが強調表示されます。ボタンイメージを黒に設定すると、そのような強調表示効果はあり
写真の説明を追加してください
ません。状態の色、コンポーネントの色は、最終的なボタンの状態の色の色で乗算されます。色を黒に設定すると、乗算の結果は黒になり、ハイライト効果は表示されません。正しい方法は次のとおりです。、白、および黒であり、その他の状態の色は特定のニーズに依存します。たとえば、ハイライトは灰色で、最終的な色は次のように設定されます:ImageImageButtonButtonButtonImageImage
ここに画像の説明を挿入
ImageButtonNormal ColorHightlighted Color

6. 平文ボタン

このボタンの行は純粋なテキストボタンです.
ここに画像の説明を挿入
UGUI作成されるデフォルトのボタンは画像付きです. 少し変更するだけです. メニューからボタンを作成しButton、コンポーネントを

削除してから、子ノードをコンポーネントに割り当てます.色を設定します.ボタンの各状態について、ノードの幅と高さを直接調整することで応答領域を調整できます〜マウスがテキストに近づくと、次のようにボタンを検出できます。Image
ここに画像の説明を挿入
TextButtonTarget Graphic

Button

注: 画像付きのボタンの場合、ボタンの応答領域も拡張したいが、画像自体は拡張したくない場合は、これを使用してボタンの背景画像をコンポーネントの子ノードとして表示することも技巧できButtonます

写真の説明を追加してください

7.適応スクロールリスト

スクロールリストが使用されますScrollView.
写真の説明を追加してください
対処する必要があるのはContent自己適応です. まず, リストは垂直方向にスライドします.ContentノードにVerticalLayoutGroupコンポーネントを掛けます.リストの数に応じ
ここに画像の説明を挿入
て高さが増加します.コンポーネントを使用して設定できます.の場合、次に高さを設定し、数が増えるとノードが自動的に高さを拡張するようにします。ContentitemContentSizeFitterVertical FitPreferred Size

item
ここに画像の説明を挿入
itemContent
写真の説明を追加してください

8.曲名と動画アイコンの混在配置

単一のリストでは、曲のタイトルとビデオアイコンが混在し、次のように、ビデオアイコンが曲のタイトルに追従する必要があり、曲のタイトルのテキストが増加し、ビデオアイコンが自動的に後方に移動する必要があります。動画アイコンを
写真の説明を追加してください
曲名テキストの子ノードとして使用し、動画アイコンのアンカーポイントを次のように設定するとmiddle-right、動画アイコンはテキストボックスの右側を子ノードとして使用します。相対位置を計算するための基準線、
ここに画像の説明を挿入

9. ボタンをクリックして写真を切り替えます

ボタンをクリックして、次のようにボタンの画像を切り替えます。ここでは、コードを記述し、
写真の説明を追加してください
コード内のButtonコンポーネントImageのオブジェクトを置き換える必要がありますSprite。たとえば、次のようになります。

playBtn.onClick.AddListener(() =>
{
    
    
    if (!audioSource.isPlaying)
    {
    
    
        audioSource.Play();
        playBtn.image.sprite = pauseSprite;
    }
    else
    {
    
    
        audioSource.Pause();
        playBtn.image.sprite = playSprite;
    }
});

10.プログレスバー

プログレスバーはSliderコンポーネントを使用し、
写真の説明を追加してください

解決する必要があるのは、プログレスバーが非常に細い場合、プログレスバーの操作領域を拡大することです. 解決策は、コンポーネントを追加し、透明度をに設定しSlider、Image高0さを少し大きめに
ここに画像の説明を挿入
調整することです.Slider値を

調整し、Background合計を調整して薄くします。同様に、とを調整して薄くすることで、プログレスバーを非常に薄くすることができますが、動作領域は保証されます。TopBottom
ここに画像の説明を挿入
Fill AreaTopBottom

4.コードを書く

1.曲の再生と一時停止

Unity音を鳴らして聞くには、デフォルトでカメラにぶら下がっているAudioSource（スピーカーに相当する）コンポーネントとAudioListener（耳に相当する）
コンポーネントの 2 つが必要です。複数のカメラがある場合は、AudioListenerそのシーンにはアクティブな状態が 1 つしかありませんAudioListener。それ以外の場合は、エラーが報告されます。
AudioSource特定のサウンドファイルを設定するには、メンバーを割り当てる必要があります.次のように、メンバーAudioClipにサウンドファイルを直接ドラッグアンドドロップできます:コードで動的に設定することもできます:AudioSourceAudioClip
ここに画像の説明を挿入

// AudioClip audioClip = TODO 动态加载AudioClip文件;
audioSource.clip = audioClip;

リソースファイルの動的読み込み前回の記事で3 つの主要なメソッドについて説明しました. 興味のある方は読んでみてください
ここに画像の説明を挿入
. 再生を一時停止するには, AudioSourcesumPlayメソッドを呼び出すだけですPause.

// （继续）播放
audioSource.Play();

// 暂停
audioSource.Pause();

2. 音のスペクトル効果

サウンドの再生中にスペクトル効果をリアルタイムで表示することができます.ここで使用されるインターフェイスは、サウンドスペクトルデータブロックをサンプリングできます
写真の説明を追加してください
。AudioSourceGetSpectrumData

public static void GetSpectrumData(float[] samples, 
									int channel, 
									FFTWindow window);

パラメータの説明:
samples: 関数の戻り値。オーディオサンプルデータをsamples配列に転送します。配列のサイズは2的n次方min 64、 maxでなければなりません8192。
channel: チャネル、通常はに設定します0。
window: 信号の変換に使用されるウィンドウ関数. アルゴリズムが複雑になるほど、音は柔らかくなりますが、速度は遅くなります.
使用法:
最初に浮動小数点配列を宣言します。

public float[] samples = new float[512];

次に、Updateメソッド内でメソッドを使用します。

audiosource.GetSpectrumData(samples, 0, FFTWindow.BlackmanHarris);

次のように、ここにスクリプトをカプセル化しました。

using UnityEngine;

/// <summary>
/// 声音特效
/// </summary>
public class AudioEffect : MonoBehaviour
{
    
    
    // 用于显示的方块
    public GameObject cubeObj;
    // 方块的其实点
    public Transform startPoint;

    // 采样数据长度
    private const int SPECTRUM_CNT = 512;
    // 采样数据
    private float[] spectrumData = new float[SPECTRUM_CNT];
    // 方块Transform数组
    private Transform[] cubeTransforms = new Transform[SPECTRUM_CNT];

    void Start()
    {
    
    
        //cube生成与排列
        Vector3 p = startPoint.position;

        for (int i = 0; i < SPECTRUM_CNT; i++)
        {
    
    
            p = new Vector3(p.x + 0.11f, p.y, p.z);
            GameObject cube = Instantiate(cubeObj, p, cubeObj.transform.rotation);
            cube.transform.parent = startPoint;
            cubeTransforms[i] = cube.transform;
        }
    }

    /// <summary>
    /// 当前帧频率波功率，传到对应cube的localScale
    /// </summary>
    public void UpdateEffect(AudioSource audioSource)
    {
    
    
        audioSource.GetSpectrumData(spectrumData, 0, FFTWindow.BlackmanHarris);
        float scaleY;
        for (int i = 0; i < SPECTRUM_CNT; i++)
        {
    
    
            scaleY = Mathf.Lerp(cubeTransforms[i].localScale.y, spectrumData[i] * 10000f, 0.5f);
            // 限制一下功率
            if (scaleY > 400)
            {
    
    
                scaleY -= 400;
            }
            else if (scaleY > 300)
            {
    
    
                scaleY -= 300;
            }
            else if (scaleY > 200)
            {
    
    
                scaleY -= 200;
            }
            else if (scaleY > 100)
            {
    
    
                scaleY -= 100;
            }

            cubeTransforms[i].localScale = new Vector3(0.15f, scaleY, 0.15f);
        }
    }
}

その中にcubeObj表示用の小さなボックスがあるので、以下のようにプリセットボックスを作りましょう:
ここに画像の説明を挿入
シェーダーを使用しshader、Unlit/Textureマップは上が白で下が黒のグラデーションカラーです

。UIインターフェースであり、UIレイヤーに散在しています。ここでRenderTexture解決に使用します。
最初にを作成しRenderTexture、
ここに画像の説明を挿入
次に独立したカメラを作成しEffectCamera(AudioListenerコンポーネントを削除することを忘れないでください)、レイヤーCulling Maskのみを確認し、メインカメラを削除することを忘れないで、特殊効果をに設定します。このようにして、特殊効果はカメラ、次のようにJust dragged to camera を配置し、次にスクリプトをノードにハングさせ、次のようにメンバーオブジェクトを割り当てて、次のように特殊効果がレンダリングされるようにします。それを表示して、調整する色を調整できます特殊効果の色は次のとおりです。Water
ここに画像の説明を挿入
Water

LayerWater

EffectCamera
RenderTextureEffectCameraTarget Texture

audioEffectAudioEffect

RenderTexture
写真の説明を追加してください
RawImage

RawImage

4. サウンドの合計継続時間を取得する

var len = audioSource.clip.length;

5.現在のタイムスタンプを設定する

プログレスバーの進行状況に応じて現在のタイムスタンプを設定します

slider.onValueChanged.AddListener((v) =>
    {
    
    
        if (v < 1)
            audioSource.time = v * audioSource.clip.length;
    });

6.exeを放してタイトルバーを非表示にします

公開後exe、デフォルトのタイトルバーは実行時に自動的に非表示になる
写真の説明を追加してください
関連記事を以前書いたことがあります「UnityがPCプラットフォームexe用のウィンドウパターンをリリース (Windows API、閉じるイベントをキャプチャ、ウィンドウのタイトルバーを非表示、最小化を非表示、閉じるボタンを最大化、など)」 .)" は
、次のようにいくつか使用されますWindows API。

[DllImport("user32.dll")]
public static extern IntPtr GetForegroundWindow();

[DllImport("user32.dll")]
public static extern long GetWindowLong(IntPtr hwd, int nIndex);

[DllImport("user32.dll")]
public static extern void SetWindowLong(IntPtr hwd, int nIndex, long dwNewLong);

[DllImport("user32.dll")]
public static extern bool ShowWindow(IntPtr hwd, int cmdShow);

タイトルバーを非表示:

#if UNITY_STANDALONE && !UNITY_EDITOR
/// <summary>
/// 窗口风格
/// </summary>
const int GWL_STYLE = -16;
/// <summary>
/// 标题栏
/// </summary>
const int WS_CAPTION = 0x00c00000;


// 隐藏标题栏
var hwd = GetForegroundWindow();
var wl = GetWindowLong(hwd, GWL_STYLE);
wl &= ~WS_CAPTION;
SetWindowLong(hwd, GWL_STYLE, wl);
#endif

さらに、
ここに画像の説明を挿入
ウィンドウを最小化するには、これら 3 つのボタンのロジックを実装する必要があります。

#if UNITY_STANDALONE && !UNITY_EDITOR
/// <summary>
/// 最小化
/// </summary>
const int SW_SHOWMINIMIZED = 2;

// 获得窗口句柄
var hwd = GetForegroundWindow();
// 设置窗口最小化
ShowWindow(hwd, SW_SHOWMINIMIZED);
#endif

ウィンドウを最大化します。

#if UNITY_STANDALONE && !UNITY_EDITOR
/// <summary>
/// 最大化
/// </summary>
const int SW_SHOWMAXIMIZED = 3;

// 获得窗口句柄
var hwd = GetForegroundWindow();
// 设置窗口最小化
ShowWindow(hwd, SW_SHOWMAXIMIZED);
#endif

アプリをオフにする:

Application.Quit();

5. プロジェクトのソースコード

この記事のプロジェクトソースコードをアップロードしましたCODE CHINA. 興味のある学生はダウンロードして自分で学ぶことができます.
アドレス: https://codechina.csdn.net/linxinfa/UnityMusicPlayer
注: 私が使用しているバージョンはUnityですUnity 2020.1.14f1c1 (64-bit),
暖かいリマインダー: このプロジェクトは学習目的での使用のみ、商業目的での使用は禁止されています。
ここに画像の説明を挿入

六、完成

最後に浜崎あゆみの歌詞をつけますMY ALL初めて知った時は歌詞の意味が分からなかったのですが、聴いたらもう歌の中に入っています！

何回
一緒に旅をしてきたか
どれだけ旅
をしてきたか
これまでに残した
もの完璧じゃないけれど輝かしいものもあった
今ここにあるクリスタルは
誇りを持って輝いている
私はいつもとても幸せで幸せだった
率直に言えば、そうじゃない
だけど私達は決して
一人にはならない
あなたの夢がどこにあるのか見てほしい
終わりも死もない
本当はその夢を見たい
それが私が望むこと
ずっとあなたのそばにいたい
No何があっても
全力で
君を守ってき
た悔いはなかった
今なら言える僕ら
はいつも
最後まで戦ってきた忘れ
られない夜に
君のことを思うことが多いだけど二
人
きりじゃない
君の笑顔を見ていると
恋に落ちて眩しいよ
あの笑顔がまた見たい
から今日も生きてる
君の愛を感じる
力強くて温かい
そんなfree love
全力で感じる
夢の在り処を見てほしい
終わりも死もない
本当はその夢を見てほしい
それが僕の願いだよ
君のそばにいたい
どんなことがあっても
僕の全てで
君を守るよ

写真の説明を追加してください
よし、ここでやめよう。もう一度イビアンシリーズを聞くよ〜
私はリンシンファです: https://blog.csdn.net/linxinfa
オリジナルであることは簡単ではありません。、皆さんありがとうございます〜
私が好きです技術的な質問がある場合は、メッセージまたはプライベートメッセージを残してください。また次回お会いしましょう〜