Unity3D/TowerDefence 2014.07.03 00:08


첫시간으로, 타워를 배치할수 있는 cell을 표시하는 grid를 만들고, 적 유닛들이 지나갈수 있는 길인지 

아닌지를 판단하는 wallMap 데이터를 만들겠습니다.


bgUI.zip




1.유니티 화면 셋팅

먼저 유니티 화면을 셋팅하도록 합니다.

저는 NGUI,와 TK2d를 사용할예정으로 두가지 플러그인은 설치합니다.(NGUI는 없어도 됩니다.)



하이라키에서 기본 camera를 지우고,  create -> tk2d -> camera 로 새로운 tk2d카메라를 올려놓습니다.'



카메라 인스팩터에서 pexel per meter값은 1로 변경하겠습니다.



Game 화면의 해상도도 IPhone5 해상도인 1136 * 640 으로 셋팅해주세요.




2. 리소스 준비

배경이미지는 아직 없어서, 빈공간에 체크무늬의 그리드를 만들고 배경을대신하겠습니다.

체크무늬에 사용할 스프라이트를 준비하겠습니다.

프로젝트 텝에, resource 폴더를 만들고 리소스들을 임포트 합니다.

SpriteCollections라는 폴더도 만들고, Create메뉴 -> tk2d -> spriteCollection을 선택해서

 새로운 스프라이트 컬랙션을 만듭니다.

만들어진 프리팹을 선택하면 인스팩터 창에 Open Editor버튼이 보이는데, 눌러줍니다.

새로 뜬 에디터 창에 resource폴더의 whiteDot을 드래그해서 올려놓으면 추가 됩니다.

setting 에서 pixels per meter값도 1로 변경해줍니다.



설정이 끝났으면 commit버튼을 꼭 눌러주세요.


처음에 만들었던 tk2d카메라의 밑에 새로운 GameObject를 만들고, 이름을 stage로 변경합니다.

stage의 위치를 0,0,100 정도로 마추세요.

(2D게임을 주로 만들때 카메라의 기준되는 위치를 맞춰주기 위해서 주로 빈 게임오브젝트를 하나 만들어서 기준을 잡습니다.)


이제 stage아래에 create -> tk2d -> Sliced Sprite를 선택해서 새 sprite를 생성하면 화면 중앙에 하얀색 네모가 보입니다.

저는 셀하나의 크기를 40*40 으로 하겠습니다.

( 세로로 최대 15개정도 타일을 배치할수 있게 하면 40 픽셀정도가 적당하겠네요.)


새로 생성된 sprite의 디멘션값을 40,40 으로 변경해주고 아래 anchor 도 좌측상단으로 정하겠습니다.

이름도 "BgCell"로변경합니다.

stage의 좌표도, 지금 생성한 sprite가 게임 화면의 좌측상단에 표시될수 있도록 

x:-578, y: 320, z: 100 으로 설정합니다. 아래와 같은 화면처럼 보이면 됩니다.




프로젝트 텝에서 BgCell.cs 이란 C#스크립트를 하나생성하고 위에서 만든 BgCell 게임오브젝트에 드래그 해둡니다.


하이라키에 있는 BgCell을 선택해서 프로젝트쪽으로 드래그 해놓으면 자동으로 prefab이 만들어지면서 하이라키의 BgCell도 파란색 글씨로 변경됩니다.



하이라키의 BgCell은 지우고, BG라는 이름의 새 게임오브젝트를 만듭니다.(좌표는 0,0,0)

이번엔 BgCell 들을 화면에 뿌려줄 BgCellDisplayer,cs라는 스크립트를 만들고,

방금 만든 BG 게임오브젝트에 드래그해 놓습니다.


3. 스크립트

이번엔 스크립트를 한번 보도록 하겠습니다.

BgCell.cs

using UnityEngine;
using System.Collections;

public class BgCell : MonoBehaviour {

	public Color white = Color.white;
	public Color black = Color.black;
	
	public Color startCol = Color.green;
	public Color goalCol = Color.blue;

	private tk2dSlicedSprite _spr;
	private tk2dSlicedSprite spr
	{
		get
		{
			if(_spr == null)_spr = this.GetComponentInChildren<tk2dSlicedSprite>();
			return _spr;
		}
	}
	public bool isVisible
	{
		get
		{
			return this.gameObject.activeSelf;
		}
		set
		{
			this.gameObject.SetActive(value);
		}
	}
	public void setBlack(bool isBlack)
	{
		if(isBlack)spr.color = black;
		else spr.color = white;
	}
	public void setStart()
	{
		spr.color = startCol;
	}
	public void setGoal()
	{
		spr.color = goalCol;
	}
}

BgCell.cs는 특별한 내용없이, 화면에 오브젝트를 보여줄지말지, 색상을 black으로 할지 white로 할지 정도만 정해주는 역할입니다.

추가로 유닛의 시작 블럭과, 도착지 블럭도 표시하겠습니다.

시작위치는 10~110 사이의 값으로 하고, 110이상의 값은 도착지로 정하겠습니다.

BgCellDisplayer.cs

using UnityEngine;
using System.Collections;

public class BgCellDisplayer : MonoBehaviour {
	public BgCell bgcell;
	private int[,] wallMap = 
		{{1, 1, 1, 1, 1, 11, 11, 11, 1, 1, 1, 1, 1},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0},
		{1, 1, 1, 1, 1, 111, 111, 111, 1, 1, 1, 1, 1}};

	// Use this for initialization
	void Start () {
		showBgCells();
	}
	public void showBgCells()
	{
		int _w = wallMap.GetLength(0);
		int _h = wallMap.GetLength(1);
		int x,y;
		for (x = 0; x < _w; x++)
		{
			for(y = 0; y < _h; y++)
			{
				BgCell bc = Instantiate (bgcell) as BgCell;
				bc.transform.parent = this.transform;
				bc.transform.localPosition = new Vector3( 40 * x, -40 * y, 0);
				if(wallMap[x,y] == 1)
				{
					bc.isVisible = false;
				}
				else if(wallMap[x,y] >= 10 && wallMap[x,y] <= 100)
				{
					bc.isVisible = true;
					bc.setStart();
				}
				else if(wallMap[x,y] >= 110)
				{
					bc.isVisible = true;
					bc.setGoal();
				}
				else
				{
					bc.isVisible = true;
					bool isBlack = ((x + (y%2))%2 == 1);
					bc.setBlack(isBlack);
				}
			}
		}
	}

}


BgCellDisplayer.cs 의 역할은 화면에 BgCell 오브젝트를 복제해서 적절한 위치에 배치시키고, wallMap데이터와 비교해서, 화면에 보여줄지 말지, 색상은 white,black중 뭘로할지 정해주고 시작점은 녹색, 도착점은 파란색으로 칠해주는게 끝입니다.

한줄씩 살펴보면,

public BgCell bgcell;

화면에 표시할 체크무늬 cell의 원본프리팹을 정해줍니다. public 으로 되어있으니 인스팩터에 표시되어 바로 연결해줄수 있습니다.

private int[,] wallMap

맵의 초기 지형을 2차 배열로 만들어놨습니다. 지형지물에 따라 터렛을 설치할수 없거나 벽으로 셋팅되게 됩니다.

이번맵에선 양쪽 중간부분의 3칸만 시작점, 목적지로 지정하기때문에 양쪽의 나머지를 벽으로 지정해놨습니다.

BgCell bc = Instantiate (bgcell) as BgCell; bc.transform.parent = this.transform; bc.transform.localPosition = new Vector3( 40 * x, -40 * y, 0);

bgcell의 원본 프리팹을 화면에 추가하고, 위치를 맞춰줍니다.

BgCellDisplayer.cs는 위에서 만든 BG 오브젝트에 넣기때문에 새로 생성된 BgCell오브젝트는 BG 밑의 자식 오브젝트로 옮겨집니다.




4. 컴포넌트 연결하기 및 세부조정.

이제 만든 컴포넌트(스크립트)를 연결하고, 조정을 하겠습니다.


하이라키의 BG오브젝트를 클릭하고, 인스펙터 창에서 Bgcell에 프로젝트 텝의 BgCell 프리팹을 드래그해서 연결합니다.



UnityEditor의 Play버튼을 누르면 화면상에 아래와 같이 표시됩니다.

BG오브젝트의 trasform좌표를 정당히 조정하여 화면 가운데에 오도록 배치하세요.

Play버튼을 끄게 되면 셋팅값이 다시 돌아오기 때문에, 좌표를 적어두었다가 stop상태에서 다시한번 셋팅하세요.


체크무늬의 색상이나 투명도를 변경하고 싶다면 프로젝트의 BgCell 프리팹을 선택하여 인스팩터에서 생상값을 조정하고 Play하면 바로 적용됩니다.




최종적으로 아래와 같은 화면이 나오면 오늘 챕터는 완성입니다.







ps. 설명을 하면서 개발하려니까 상당히 오래걸리고 힘드네요..

잘이해 안되거나 오류나는부분있으면 바로바로 알려주세요.






신고
posted by andwhy