분류 전체보기 (8) 썸네일형 리스트형 언리얼엔진 5 | 뷰포트 2개로 나누기, 4단 분할 설정 방법 시츄에이션언리얼엔진에서 작업하다가, 한쪽에 특정 뷰에서의 모습을 보도록 고정시켜놓고, 다른 뷰포트에서 레벨 작업을 계속 하고 싶었다. 포트폴리오에는 이미지 한 장만 담기는 거니까. 또한 게임을 플레이 화면을 보면서 엑터 배치 작업을 계속 하고 싶은 경우도 있다고 들었다 (본인은 아직 게임 플레이를 돌리며 작업할 단계까지 못간 초초보...). 아무튼 이렇게 언리얼엔진에서 작업 효율을 위해 뷰포트 창을 두 개 이상 띄우는 방법을 기록하고 공유하고자 한다. CONTENTS언리얼엔진 5 뷰포트 2개로 나누는 방법언리얼엔진 5 뷰포트 4단 분할 설정 방법 (☞ 뷰포트 4개 아님) 언리얼엔진 5 뷰포트 2개로 나누는 방법 1 뷰포트 탭 숨김 해제- 뷰포트 좌상단 파란 삼각형 마크를 누른다- 그러면 숨겨져 있던.. 언리얼엔진 5 | 카메라 프리뷰 창 끄는 방법 (간단 설정 가이드) 시츄에이션 언리얼 엔진에 카메라 엑터를 하나 배치했더니, 클릭할 때마다 커다란 카메라 프리뷰 창이 떠서 작업하기 매우 곤란했다. 이 창을 없애버리거나 크기를 작게 변경하는 설정 방법을 찾아 기록하고 공유한다. 카메라 프리뷰 창이 뜨는 이유 언리얼 엔진에서는 카메라 엑터를 선택하면 기본적으로 해당 카메라의 프리뷰 창이 활성화되도록 되어 있다고 한다. 이는 카메라의 구도를 실시간으로 확인할 수 있도록 돕기 위한 기능이라 시네마틱 영상을 제작하는 분들께는 필수인 기능이지만, 오브젝트 배치나 씬을 구성하는 레벨 디자이너들에게는 방해가 될 수 있다. 언리얼 엔진 카메라 프리뷰 창 설정 방법 열심히 찾아봐도 툴바에 껐다 켜는 옵션이 있는 것 같진 않고(메뉴 폰트 크기가 너무 작아 놓쳤을 수도!), 에디터의 개인설.. 언리얼 엔진 5 | 마켓플레이스 외 2D에셋 구하는 곳 Unity 용으로 나온 2D 게임 에셋은 많으나, Unreal Engine 용 2D 에셋은 마켓플레이스에는 그리 많지 않다. 그리고 Unity 용 에셋을 언리얼 용으로 전환하는 과정도 쉽지 않다고 한다. 하지만 itch.io와 opengameart.org에 좋은 콘텐츠가 꽤 있으며, 무료로 제공하는 것도 많아 저작권을 확인후 가져다 사용할 수 있다. 언리얼엔진 마켓플레이스=> 2D용 에셋은 많지 않음=> 메인화면에서 Browse > 2D Assets itch.io=> 상단 메뉴 중 Browse Games > Assets opengameart.org=> 상단메뉴 Browse > 2D Art 저작권 참고사항에셋 다운로드시 저작권을 잘 확인해두어야 함* CC0 혹은 Public Domain : 마음대.. 언리얼엔진 5 | 화면(뷰포트) 이동을 위한 마우스 사용법 + 필수 기본 단축키 뷰포트 카메라 이동을 위한 마우스 사용법원근(Perspective) 화면일 때 1. 마우스 좌클릭 + 드래그=> 맵 안 이동하면서 보기. 맵 내부 아이템 배치 같은 작업시 유용=> 마우스 왼쪽 버튼 누른채로 마우스를 끌면서 맵을 돌아다니면 됨좌측 우측: 마우스 왼쪽 클릭 + 마우스 좌우 드래그전진 후진: 마우스 왼쪽 클릭 + 마우스 앞뒤 드래그 2. 마우스 우클릭 + 드래그=> 한자리에 서서 둘러보기. 카메라 위치는 고정. 시야 각만 회전만 함. => 마우스 오른쪽 버튼 누른 상태에서 마우스를 끌면서 돌아보면 됨좌우 보기: 마우스 우클릭 + 마우스 좌우로 드래그상하 보기: 마우스 우클릭 + 마우스 앞뒤로 드래그 3. 마우스 아무 버튼 하나만 클릭 + 방향키=> 화면 프레임 통째로 이동시키기. 뷰포트 .. Three.js 객체의 이동, 리사이즈, 회전 | position, scale, rotation 선행학습 이번 글에서는 객체의 변형을 구현하기 위한 핵심 코드 라인만 기재되어 있다. 객체 자체를 만들고 화면에 띄우는 과정은 아래 글을 통해 확인 가능하다. Three.js 반응형 canvas + 전체화면 만들기 Three.js 한 눈에 보는 Geometry 종류 CONTENTS 이번 글에서 다룰 내용은 다음과 같다. AxesHelper 켜기 Three.js 객체의 이동 position Three.js 객체의 크기 변형 scale Three.js 객체 회전 rotation AxesHelper 켜기 객체의 이동과 변형을 시작하기 전, 변화를 좀더 뚜렷하게 확인할 수 있도록 '축'선을 켜준다. // 축선 켜기 const axesHelper = new THREE.AxesHelper(3) // 괄호 안 숫자 .. Three.js 한 눈에 보는 Geometry 종류 선행학습 본 Three.js 시리즈는 Node.js에 기반한 코드를 다룹니다. mesh 객체를 화면에 나오게 하는 것 까지는 다음 글에서 참고해주세요. Three.js 반응형 canvas + 전체화면 만들기 Node.js로 Three.js 시작하기 CONTENTS 이번 글에서 다룰 내용은 Three.js 개발시에 활용 가능한 Geometry(도형)의 모양에 관한 것으로, 공식 문서에서 제시된 코드를 요약된 라이브러리 설명문서 형식으로 기술할 예정입니다. BoxGeometry 박스 PlaneGeometry 평면 CircleGeometry 원 ConeGeometry 원뿔 CylinderGeometry 실린더 RingGeometry 평면 링 TorusGeometry 도넛 - 토러스 TorusKnotGeomet.. Three.js 반응형 canvas + 전체화면 만들기 사전 학습 Node.js로 Three.js 시작하기 Node.js로 Three.js 시작하기 Three.js 학습을 시작하며, 처음에는 js 파일을 다운로드해서 쓰거나 cdn을 이용하여 간단한 기능을 구현해보았다. 하지만 node 모듈을 깔지 않고는 사용할 수 없는 기능들이 있었다. 그래서 결국 Node facet.tistory.com 지난 시간에 Node.js 기반 Three.js의 설치에 대해 알아보았다. 이번 글에서는 사전 작업을 바탕으로 three.js 코드가 올라갈 canvas를 html에 추가하고, 이 위에 three.js로 기본 도형인 박스 하나를 구현하며, 구현된 화면 비율이 인터넷 브라우저의 크기 변경과 상관 없이 유지될 수 있도록 canvas와 three.js코드에 반응형 설정을 위한 .. Node.js로 Three.js 시작하기 Three.js 학습을 시작하며, 처음에는 js 파일을 다운로드해서 쓰거나 cdn을 이용하여 간단한 기능을 구현해보았다. 하지만 node 모듈을 깔지 않고는 사용할 수 없는 기능들이 있었다. 그래서 결국 Node.js에 three dependancy를 추가해서 쓰는 방법으로 기본 세팅 방법이 귀결되었다. 개발용 서버로는 Vite 를 사용하고 있다. Node.js로 Three.js를 시작하는 방법을 두 가지로 나누어 설명하고자 한다. 첫 번째는 nodejs가 이미 깔려 있는 경우로, 첨부해둔 Starter 파일을 다운받아서 npm install로 한방에 세팅하는 방법, 두 번째는 학습을 위해 처음부터 한땀한땀 직접 설치해 나가는 방법이다. 코드 에디터는 Visual Studio Code(VSCode)를 사.. 이전 1 다음
