유니티 랜덤 이미지 출력하기, 다수의 버튼 일정하게 배치하기, 버튼에 이미지 넣기 등을 하는 방법에 대해서!

안녕하세요. 오늘 작성할 내용은 유니티에 관련된 내용입니다.

코드, 혹은 방법을 알려드릴테니 필요하시면 읽고 알아가시길 바랍니다.

(유니티 버전은 최신 버전이며, 버전이 달라도 크게 차이 없다고 합니다. 다른 방법도 있으니 검색하시어 정답에 도달하시길 바랍니다.)

 

1. 다수의 버튼을 일정하게 배치하는 방법.

먼저 Hierarchy창에서 우클릭 create empty를 선택해 빈 게임오브젝트를 생성합니다.

게임오브젝트의 이름을 편의에 맞게 rename 해주신 후에 오브젝트를 클릭하고 inspector 창에서 add component를 클릭해서 grid layout group을 선택해줍니다. 이후 바로 x,y 값을 조정해 크기와 간격을 조정해도 되지만 보이는게 없으니 먼저 오브젝트를 우클릭해 ui > button을 선택합니다. 그냥 버튼의 경우 최신버전에서는 legacy 다음에 있습니다. 그걸 n회 반복합니다. n회 반복하는게 귀찮다면 버튼을 복사 붙여넣기를 해줍니다. ctrl + c, ctrl + v를 하면 버튼이 복사가 됩니다. 하지만 같은 오브젝트에 넣지 않으면 grid layout group 기능의 효과를 보지 못하기 때문에 해당 오브젝트로 드래그 앤 드랍을 해주시면 됩니다.

원하는 만큼의 버튼을 추가했다면 grid layout group에서 크기, 간격을 조정해주시면 됩니다.

 

반응형

 

2. 버튼에 이미지를 넣는 방법.

 

오브젝트에 들어가 있는 버튼 중 이미지를 넣고 싶은 버튼을 클릭합니다. inspector 창에서 image component를 보면, source image 란이 있습니다. assets 폴더에 넣어둔 이미지를 드래그 앤 드랍 해주시면 됩니다.

 

3. 여러개의 버튼을 묶는 방법.

1번의 과정을 하셨다면 버튼은 해당 오브젝트에 묶여있습니다.

스크립트에 해당 오브젝트를 불러온다면 포함되어있는 버튼들을 전부 불러와 한번에 편집할 수 있습니다.

 

4. 랜덤 이미지를 출력하는 방법.

 

스크립트를 작성하셔야합니다. 다른 방법이 있을 수 있으나 제가 아는 방법으로 설명하겠습니다.

전체 스크립트는 아래 부분에 적어두겠습니다.

다음은 스크립트를 나눠 설명한 부분입니다.

 

public GameObject animal; 버튼이 들어있는 오브젝트를 불러옵니다.

싱글톤을 사용해서 씬이 다른 씬이여서 불러올 수가 없다면

animal = GameObject.Find("animal");

파인드를 사용해서 불러와줍니다.

(animal 부분은 오브젝트의 이름입니다.)

 

List<Image> buttonImages = new List<Image>();

이미지들을 담아둘 리스트를 만듭니다.

 

Image buttonImage = animal.transform.GetChild(i).GetComponent<Image>();

각 버튼의 이미지를 불러옵니다.

buttonImages.Add(buttonImage);

해당 이미지를 리스트에 추가합니다.

(buttonImages는 해당 리스트의 이름입니다. buttonImage는 이미지의 이름입니다.)

 

List<Image> selectedImages = new List<Image>();

새로운 리스트를 만듭니다. 이전에 buttonImages 리스트를 만든 방법을 사용합니다.

이름을 바꾸고 선언하면 됩니다.

 

Image selectedImage = buttonImages[randomIndex];

랜덤으로 buttonImages 리스트의 이미지를 가져옵니다.

 

selectedImages.Add(selectedImage);

해당 이미지를 selectedImages 리스트에 추가합니다.

 

for (int i = 0; i < selectedImages.Count; i++)

랜덤으로 뽑힌 이미지 만큼 출력할 수 있게 해줍니다.

 

displayImages.transform.GetChild(i).GetComponent<Image>().sprite = selectedImages[i].sprite;

랜덤으로 나온 이미지를 displayImages 오브젝트의 image의 sprite에 넣어 출력합니다.

 

추가로 [i] 부분은 모든 이미지를 가져올 수 있게 정의해야합니다.

int buttonCount = animal.transform.childCount;

오브젝트에 속해있기 때문에 child라고 표현합니다. child의 수를 가져옵니다.

 

for (int i = 0; i < buttonCount; i++)

이런 식으로 하면 해당 오브젝트에 있는 버튼의 이미지를 전부 가져올 수 있습니다.

 

int actualImageCount = Mathf.Min(imageCount, buttonImages.Count);

몇 개의 이미지를 랜덤으로 뽑을지도 정할 수 있습니다. 최대치를 제한하는 기능도 있습니다.

 

for (int i = 0; i < actualImageCount; i++)

몇 개의 이미지를 뽑을지 정의 했다면 해당하는 개수의 이미지를 뽑을 수 있게 합니다.

 

int randomIndex = Random.Range(0, buttonImages.Count);

랜덤 인덱스의 범위도 정해줍니다.

 

풀어서 적었기에 어려울 수 있어 보입니다. 그래서 따로 전체 스크립트를 바로 아래 적겠습니다.

{의 다음은 엔터를 쳐야 합니다. 직접 적느라 적용이 안된 점 양해부탁드립니다.

-----------

public GameObject animal;

public GameObject displayImages;

 

private void ShowRandomImages()

{

List<Image> buttonImages = new List<Image>();

int buttonCount = animal.transform.childCount;

 

for (int i = 0; i < buttonCount; i++)

{

Image buttonImage = animal.transform.GetChild(i).GetComponent<Image>();

if (buttonImage != null)

{buttonImages.Add(buttonImage);}

}

 

int actualImageCount = Mathf.Min(imageCount, buttonImages.Count);

List<Image> selectedImages = new List<Image>();

 

for (int i = 0; i < actualImageCount; i++)

{

int randomIndex = Random.Range(0, buttonImages.Count);

Image selectedImage = buttonImages[randomIndex];

selectedImages.Add(selectedImage);

}

 

for (int i = 0; i < selectedImages.Count; i++)

{

displayImages.transform.GetChild(i).GetComponent<Image>().sprite = selectedImages[i].sprite;

}

}

------------

 

.Add(selectedImage);를 사용해서 랜덤으로 나온 이미지를 다른 리스트에도 추가할 수 있습니다.

추가로 .RemoveAt(randomIndex);를 사용하면 이전에 랜덤으로 나온 이미지는 더 이상 나오지 않습니다. 중복을 방지합니다.

.의 앞에 해당 리스트의 이름을 적어야 합니다.

 

displayImages.transform.GetChild(i).gameObject.SetActive(true);

를 사용한다면 오브젝트의 활성화, 비활성화를 컨트롤 할 수 있습니다.

(true 부분을 false 처리하면 비활성화입니다.)

 

5. Assets 폴더에 이미지 등 따로 구해온 이미지를 넣는 방법

 

드래그앤 드랍 하시면 됩니다.

 

이상으로 오늘 내용을 끝마치겠습니다.

 

틀린 부분, 실수한 부분 등 정답이 아닐 수 있으니 더 검색하시어 정답에 도달하시길 바랍니다.