質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.42%
C

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity3D

Unity3Dは、ゲームや対話式の3Dアプリケーション、トレーニングシュミレーション、そして医学的・建築学的な技術を可視化する、商業用の開発プラットフォームです。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

Q&A

解決済

1回答

4831閲覧

Unityで音ゲーの開発、選曲画面でのジャケット変更

salisyade

総合スコア2

C

C言語は、1972年にAT&Tベル研究所の、デニス・リッチーが主体となって作成したプログラミング言語です。 B言語の後継言語として開発されたことからC言語と命名。そのため、表記法などはB言語やALGOLに近いとされています。 Cの拡張版であるC++言語とともに、現在世界中でもっとも普及されているプログラミング言語です。

C#

C#はマルチパラダイムプログラミング言語の1つで、命令形・宣言型・関数型・ジェネリック型・コンポーネント指向・オブジェクティブ指向のプログラミング開発すべてに対応しています。

Unity3D

Unity3Dは、ゲームや対話式の3Dアプリケーション、トレーニングシュミレーション、そして医学的・建築学的な技術を可視化する、商業用の開発プラットフォームです。

Unity

Unityは、Unity Technologiesが開発・販売している、IDEを内蔵するゲームエンジンです。主にC#を用いたプログラミングでコンテンツの開発が可能です。

0グッド

2クリップ

投稿2022/05/08 06:51

編集2022/05/08 12:54

初めまして、趣味で音ゲー開発を行なっている高校生です。
現在、選曲画面での曲に合わせたジャケットの変更を行うようにする実装ができなくて困っています。

こちらが現在の選曲画面の実装です。
https://gyazo.com/5b89e3b8295b0f0d070efb33938d8214

このGifの用に、ドラッグすることにより曲名の書かれたボタンがくるくると回転して摩擦によりある程度回転したら「かくっ」と回転が止まります。
これは以下の「SimpleCircleLayoutGroup」「SimpleCircleInterface」の二つのコードと追記したコードで実装しています。

C#

1using UnityEngine; 2using UnityEngine.UI; 3using UnityEngine.EventSystems; 4 5public class SimpleCircleLayoutGroup : UIBehaviour, ILayoutGroup 6{ 7 // 意味: 円の半径 8 // 単にこの値に数字を代入するだけでは半径が変わらないので、SetRadius()を使うこと 9 [SerializeField] private float radius = 100; 10 11 // 意味: 円をどれだけ回転させた状態であるか 12 // 単にこの値に数字を代入するだけでは変わらないので、SetOffsetAngle()を使うこと 13 [SerializeField] private float offsetAngle; 14 15#if UNITY_EDITOR 16 protected override void OnValidate() 17 { 18 base.OnValidate(); 19 Arrange(); 20 } 21#endif 22 23 // 要素数が変わると自動的に呼ばれるコールバック 24 #region ILayoutController implementation 25 public void SetLayoutHorizontal() { } 26 public void SetLayoutVertical() 27 { 28 Arrange(); 29 } 30 #endregion 31 32 void Arrange() 33 { 34 if (transform.childCount > 0) 35 { 36 // 円形に並べるとき、それぞれのGameObjectの間は何度空けるか 37 float splitAngle = 360 / transform.childCount; 38 39 // for: 円形に整理したい、各GameObjectごとに処理 40 for (int elementId = 0; elementId < transform.childCount; elementId++) 41 { 42 // 整理したいGameObjectを取得 43 var child = transform.GetChild(elementId) as RectTransform; 44 45 float currentAngle = splitAngle * elementId + offsetAngle; // どの角度に位置するか 46 child.anchoredPosition = new Vector2( 47 Mathf.Cos(currentAngle * Mathf.Deg2Rad), 48 Mathf.Sin(currentAngle * Mathf.Deg2Rad)) * radius; // 配置する. 49 } 50 } 51 } 52 53 public void SetRadius(float a) 54 { 55 radius = a; 56 Arrange(); 57 } 58 59 public float GetRadius() 60 { 61 return radius; 62 } 63 64 public void SetOffsetAngle(float a) 65 { 66 offsetAngle = a; 67 Arrange(); 68 } 69 70 public float GetOffsetAngle() 71 { 72 return offsetAngle; 73 } 74}

C#

1using System.Collections; 2using System.Collections.Generic; 3using UnityEngine; 4using UnityEngine.EventSystems; 5 6[RequireComponent(typeof(SimpleCircleLayoutGroup))] 7public class SimpleCircleInterface : MonoBehaviour, IBeginDragHandler, IDragHandler, IEndDragHandler 8{ 9 private SimpleCircleLayoutGroup layout; 10 private RectTransform layoutRect; 11 /// <summary> 12 /// 前フレームのマウスの位置 13 /// </summary> 14 private Vector2 previousPosition; 15 private float acceleration; 16 private bool isDragged = false; 17 18 /// <summary> 19 /// 摩擦力 20 /// </summary> 21 [SerializeField] 22 private float drag = 0.33f; 23 /// <summary> 24 /// 最大の回転スピード(度/フレーム) 25 /// </summary> 26 [SerializeField] 27 private float limit = 10f; 28 29 void Awake() 30 { 31 layout = GetComponent<SimpleCircleLayoutGroup>(); 32 layoutRect = layout.GetComponent<RectTransform>(); 33 } 34 35 void Update() 36 { 37 if (!isDragged) 38 { 39 var splitAngle = 360f / layoutRect.childCount; 40 var targetAngle = Mathf.Round(layout.GetOffsetAngle() / splitAngle) * splitAngle; 41 acceleration += Mathf.Clamp((targetAngle - layout.GetOffsetAngle()) * Time.deltaTime * 6f, -0.3f, 0.3f); 42 } 43 44 // accelerationは、*Time.deltaTimeでの調節を必要としない. すでに、OnDrag()でフレーム当たりの量になっているから. 45 layout.SetOffsetAngle(layout.GetOffsetAngle() + acceleration); 46 var delta = -(drag * Mathf.Sign(acceleration)) * Time.deltaTime * 40f; // *Time.deltaTimeすると滅茶小さくなるので、40fで大きくする. 47 if (Mathf.Abs(acceleration + delta) > Mathf.Abs(acceleration)) // 最後の力を摩擦で止められたなら 48 acceleration = 0f; 49 else 50 acceleration += delta; 51 } 52 53 void IBeginDragHandler.OnBeginDrag(PointerEventData eventData) 54 { 55 previousPosition = eventData.position; 56 acceleration = 0f; 57 isDragged = true; 58 } 59 60 public void OnDrag(PointerEventData eventData) 61 { 62 var currentPosition = eventData.position; 63 64 float degree = Vector2.SignedAngle(previousPosition - (Vector2)layoutRect.position, currentPosition - (Vector2)layoutRect.position); 65 degree = Mathf.Clamp(degree, -limit, limit); 66 acceleration = degree; 67 68 previousPosition = currentPosition; 69 } 70 71 /// <summary> 72 /// いまは、まだ何もしない. 73 /// </summary> 74 /// <param name="eventData"></param> 75 public void OnEndDrag(PointerEventData eventData) 76 { 77 isDragged = false; 78 } 79} 80

下の画像のように、回転した後にこの中央に位置しているボタンによってジャケット画像用のimageのテクスチャを切り替えたいです。
これを実装しようと思い、
https://uni.gas.mixh.jp/unity/canvas-text-image.html
この記事を参考に、配列(?)index(?)でジャケット画像をリストにして、サークルの真ん中にどのボタンあるのかを取得してテクスチャを張り替えるのが一番実装しやすいのかな...とも思いましたが、どのようにサークルの真ん中に来ているボタンを取得するのか分かりません...
どのような方針で実装すれば良いのかアドバイスがいただきたいです...!

理想の実装

追記です。

円形の選択の実装は
https://tsubakit1.hateblo.jp/entry/2016/04/11/070637
こちらの記事を参考に↓こういった実装がしてあります。

C#

1using UnityEngine; 2using UnityEngine.UI; 3 4public class RadialLayout : LayoutGroup 5{ 6 public float fDistance; 7 [Range(0f, 360f)] 8 public float MinAngle, MaxAngle, StartAngle; 9 protected override void OnEnable() { base.OnEnable(); CalculateRadial(); } 10 public override void SetLayoutHorizontal() 11 { 12 } 13 public override void SetLayoutVertical() 14 { 15 } 16 public override void CalculateLayoutInputVertical() 17 { 18 CalculateRadial(); 19 } 20 public override void CalculateLayoutInputHorizontal() 21 { 22 CalculateRadial(); 23 } 24#if UNITY_EDITOR 25 protected override void OnValidate() 26 { 27 base.OnValidate(); 28 CalculateRadial(); 29 } 30#endif 31 void CalculateRadial() 32 { 33 m_Tracker.Clear(); 34 if (transform.childCount == 0) 35 return; 36 float fOffsetAngle = ((MaxAngle - MinAngle)) / (transform.childCount - 1); 37 38 float fAngle = StartAngle; 39 for (int i = 0; i < transform.childCount; i++) 40 { 41 RectTransform child = (RectTransform)transform.GetChild(i); 42 if (child != null) 43 { 44 //Adding the elements to the tracker stops the user from modifiying their positions via the editor. 45 m_Tracker.Add(this, child, 46 DrivenTransformProperties.Anchors | 47 DrivenTransformProperties.AnchoredPosition | 48 DrivenTransformProperties.Pivot); 49 Vector3 vPos = new Vector3(Mathf.Cos(fAngle * Mathf.Deg2Rad), Mathf.Sin(fAngle * Mathf.Deg2Rad), 0); 50 child.localPosition = vPos * fDistance; 51 //Force objects to be center aligned, this can be changed however I'd suggest you keep all of the objects with the same anchor points. 52 child.anchorMin = child.anchorMax = child.pivot = new Vector2(0.5f, 0.5f); 53 fAngle += fOffsetAngle; 54 } 55 } 56 57 } 58}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

イメージ説明

パッケージ: SwitchUIImage.unitypackage

コードはこれだけです。

c#

1using System.Linq; 2using UnityEngine; 3using UnityEngine.UI; 4 5public class ScrollController : MonoBehaviour 6{ 7 [SerializeField] RectTransform _contentContainer = default; 8 [SerializeField] Image _targetImage = default; 9 10 void Update() 11 { 12 var currentImage = _contentContainer.GetComponentsInChildren<Image>() 13 .OrderBy(x => Vector2.Distance(this.transform.position, x.transform.position)).FirstOrDefault(); 14 15 if (!_targetImage.sprite.Equals(currentImage.sprite)) 16 { 17 _targetImage.sprite = currentImage.sprite; 18 } 19 } 20}

投稿2022/05/08 07:59

bboydaisuke

総合スコア5277

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

salisyade

2022/05/08 09:28

例えばこの貼り付け先のImageをアニメーションで多少左右に揺らしたりしてもいいかもしれませんね... 参考のシーンまだわざわざありがとうございます!! 頑張ります!
salisyade

2022/05/08 11:47

Scrollbar HorizontalやScrollbar Verticalは必要ないのでViewportの中に円形に配置しているボタンたちを入れてあげると配置がバグって機能しませんでした....
bboydaisuke

2022/05/08 13:10

上に貼ってあるコードの意味が分かってないからそうなるんでしょう。短いのでちゃんと理解して使ってください。
salisyade

2023/03/15 14:05

だいぶ期間空いてしまって申し訳ないです。コード参考にして実装うまくいきました。ゲームも完成しました。ありがとうございます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.42%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問