비밀일기

유니티강좌-5

맵 제작 분할 스프라이트를 하나씩 드래그해 맵을 만들 수도 있다. 근데 이건 너무 비효율적이다..   그래서 이제 어떻게 맵을 만드냐? 1. 스크립트로 맵을 만든다.일정한 규칙이 있다면 !! 맵을 만들 수 있다. 2. 외부 소프트웨어를 이용한다.tiled 프로그램을 이용한다.  tiled 가 이미 설치되어 있으므로 이를 이용한다.  새 맵을 48 *48 픽셀 사이즈로 생성한다.   맵에 타일 셋까지 불러왔다.    이미 찍힌 지형 위에 또 스탬프를 찍을 경우 이미지가 대체되는 문제 발생 가능 그럴 땐 레이어를 추가해주면 된다. 레이어 위에 계속 오브젝트를 쌓을 수 있다 ^^~   이러고 이 이미지를 출력한다.   타일드 2 유니티랑 유니티를 연동한다.연동 완료 .   tiled 2 쓰려고 보니까 오류가 ..

유니티강좌-4

카메라 이동 캐릭터의 움직임에 따라 카메라가 캐릭터와 비슷하게 움직이게 해주겠다.  카메라에 붙일 스크립트를 생성한다.  대상 target 을 설정하고 카메라가 이동할 속도, 대상의 현재 위치를 받아온다.  타켓이 존재할 경우 타겟의 움직임에 따라 카메라가 움직인다. 매 프레임 이동할거니까 update에 작성한다.  카메라가 캐릭터랑 동일 z 값에 있으면 둘이 겹치게 되는 문제가 발생하므로 -10 포지션을 유지할 수 있게 해준다.  그리고 카메라랑 캐릭터 위치 사이에서 LERP를 이용해 자연스럽게 카메라가 캐릭터를 따라갈 수 있게 한다. using UnityEngine;public class CamareManeger : MonoBehaviour{ public GameObject target; ..

유니티강좌-3

이동불가 설정 캐릭터에 박스콜라이더를 추가한다.   레이어 마스크 설정됨. 레이어를 추가해주고해당 레이어를 인스펙터에서 레이어 마스크 값으로 사용한다 .   박스에 박스콜라이더 설정을 추가하고 여기 레이어를 nopassing으로 주면 더이상 통과할 수 없다using System.Collections;using UnityEngine;public class MovingBehavi : MonoBehaviour{ private BoxCollider2D boxCollider; public LayerMask layerMask;//어떤 레이어랑 부딪힌건지 public float speed; public Vector3 vector; public float runSpeed; private..

유니티강좌-2

캐릭터 애니메이선 움직일 때 실제로 걷는 것 처럼 제작  samples는 1초에 몇 프레임을 보여줄 것인가를 의미한다. 기본 세팅은 60 프레임   걷는 이미지를 순서대로 10 씩 간격을 두고 넣어주면 걷는 모션이 완성된다. (만약 너무 부자연스럽다면 첫프레임과 마지막 프레임 사이 간격이 너무 짧아서 일 수 있으니 마지막에 같은 프레임 두 개를 넣어 여유를 좀 주면 자연스러워진다.) 상하좌우 4 모션을 동일하게 만들어준다.    움직이면 모션이 있으면 멈춘 모션도 있어야 한다..  이때는 한 이미지만 넣어주면 되니 동일한 과정으로 stading도 추가해준다.   window에서 매니메이터를 열면 내가 만든 동작들이 보인다. 너무 많으니까 이를 집합시킨다. 블랜드 트리를 이용해 비슷한 것 끼리 묶는다. (..

유니티강좌-1

먼저 2d 환경의 새 프로젝트를 생성해준다.  다운받은 리소스를 asset 폴더에 풀어준다.  먼저 캐릭터 이동에 대해 배워본다.   캐릭터 이동 다운받은 이미지가 하나의 덩어리로 뭉쳐있다. 이를 쪼개기 위해 유니티의 기능을 사용한다. 스프라이트 모드를 싱글 -> 멀티플로 변경한다.  다운받은 캐릭터 이미지가 가로 3 * 세로 4 이므로 이를 기준으로 4행 3열로 잘라주면 된다.  자른 후 apply로 적용한다.  이후 분할 된 이미지를 사용하면 된다 . 기본 48 픽셀 기준으로 바꿔준다.  픽셀 위주 게임의 경우 포인터를 사용한다.  --> 현재 유니티에서 스프라이트를 자동으로 분할해주는 듯?  이미지를 화면에 끌어오고 에셋 폴더에 캐릭터 이동을 담당할 스크립트를 하나 작성한다. ( assets 안에 ..

실습   이미지를 가져와준다.상단 버튼을 클릭하고 file > palce image... 를 클릭한다.   이미지를 가져와줬다. tip) 대각선 방향 크기를 조절할 때 shift키를 누르면서 하면 일정 비율을 유지하며 크기를 줄일 수 있다.  이미지와 동일하게 디자인을 해보겠다.  상단바 & 하단바 먼저 상단바와 하단바는 프레임을 이용하여 생성해준다.  constraint 속성으로 상단바는 상단에 하단바는 하단에 고정시킨다.   하단바 위에 얕은 실선이 존재한다. 이를 구현하기 위해 stroke속성에서 굵기를 설정하고 스포이드로 색상을 가져온다.  글자는 텍스트박스를 이용해 입력한다.아래 화살표나 옆 요소들은 피그마에서 제공하는 플러그인을 이용하면 된다.    플러그인 >  사용할 아이콘이 들어있는 ma..

반응형 웹 디자인프레임으로 말풍선을 먼저 생성해준다. 프레임 stroke 속성에서 상하좌우의 굵기를 각 각 다르게 커스텀 할 수 있다. 아래와 오른쪽에 굵기를 주고 곡률을 설정하였다.텍스트도 삽입해주고,, 이 말풍선을 컴포넌트화 해주려한다. 레이어에서 해당 프레임을 우클릭하고 create component를 눌러준다.아니면 컨트롤+ 알트+ k 생성한 컴포넌트는 왼쪽 assets 탭에서 확인 할 수 있다. 컴포넌트를 만들고 나면 재사용이 용이해진다.  레이어에서 확인할 때 컴포넌트 요소의 문양이 다른것을 확인할 수 있는데,원본 컴포넌트는 채워진 문양이고 복제 컴포넌트는 비워진 문양으로 나온다.    이제 바깥쪽 제일 큰 프레임을 반응형으로 만들어보겠다.  레이어에서 우클릭 후 add auto layout ..

오른쪽 사이드바에 대해서 알아보겠다.  사이드바에는 요소의 속성이 표시된다.  요소의 좌표 값, 회전 값을 설정할 수 있다.  모서리 둥글게도 설정 가능하다.  요소 더블 클릭으로 요소 안 이미지도 조정 가능하다. 이미지 아래 배너를 넣겠다. 이때 도형 대신 프레임을 사용하는데, 도형보다 프레임의 사용을 권장한다. 비교를 위해 프레임도 만들고 도형도 만들어보자. 왼쪽 사이드바에는 추가된 요소들의 리스트가 표시된다.  프레임의 경우 텍스트박스가 프레임 하위에 담겨있지만 도형의 경우 같은 계층의 요소로 판단된다. 따라서 요소가 많아질 경우 도형의 사용보다는 프레임을 사용하는 것이 편리하다.  이미 도형으로 생성한 경우, 묶을 요소들을 드레그하고 그룹핑하는 방법도 있다.  프레임의 constraints 속성으..

편집창의 화면                                                도구창에는 선택, 프레임, 도형, 펜, 텍스트, 엑션 메뉴가 있다.                 선택 도구로 요소의 위치, 크기 조절 가능  프레임 도구로 프레임 생성                         도형 도구에서는 여러가지 도형을 그릴 수 있다.                      생성한 도형을 더블클릭하면 도형을 편집할 수 있다. 변의 중점도 편집 가능하기 때문에 다른 도형으로 변형도 가능하다.  도형에 이미지 삽입도 가능하다.  오 펜을 이용해 직선, 곡선을 그릴 수 있다. ㅋㅋㅋㅋ 마지막 엑션 메뉴를 선택하면컴포넌트, 플러그인 등 요소를 검색할 수 있다.

피그마 로그인 후 teams 에서 create new로 팀을 생성한다. 팀 이름 입력  다음 화면에서 이메일을 입력해 팀원을 초대할 수 있다. 일단 없으니까 스킵한다.  팀 플랜을 고르는데 스타터만 무료기 때문에 스타터로 해준다.. 팀 생성 완료 후 프로젝트에서 디자인 파일을 만들면 된다. 디자인 공간이 나온다