Behaviour Tree, 줄여서 BT라고 불리는 이 용어는 예전부터 들어왔었습니다. 하지만 BT의 실용성에 대해 그닥 느끼지 못했기에 지금까지 사용하지 않았지만 FSM Pattern을 직접 제작해보고 난 이후 BT의 실용성을 알게 되었습니다. FSM - HFSM - BT 구조 오늘 친구들과 이야기를 하면서 FSM과 BT(Behavior Tree)에 대해 이야기를 나누었습니다. 생각난 김에 해당 구조들에 대해 글을 작성해 보려고 합니다. 각 구조들은 AI 행동 패턴을 설계하는등 다양한 neulsang-day.tistory.com 위 사이트에 들어가시면 FSM, HFSM, BT에 대한 설명과 차이를 굉장히 잘해놓으셔서 쉽게 이해할 수 있습니다. Behaviour Designer란? Behaviour De..
이번 포스팅에서는 Text Mesh Pro 사용방법에 대해 알아보고자 합니다. TextMesh Pro 임포트 프로젝트 세팅에 들어가셔서 TextMesh Pro를 임포트해줍니다. 그 다음, TextMeshPro - Text를 하나 생성해준 다음 영어와 한글을 적어줍니다. 캔버스를 보시면 한글이 깨져있는 것을 볼 수 있습니다. 그 이유는 폰트가 영어 및 기호들만 Bake 되어 있는 동시에 Static Mode이기 때문입니다. 따라서 TextMeshPro에서 기본적으로 제공하는 폰트는 한글을 지원하지 않는다는 소리입니다. Static TextMeshPro Static Mode는 표시할 텍스트에 대해 미리 메모리를 할당합니다. 메모리가 미리 할당되기 때문에, Static TextMeshPro는 텍스트가 자주 변..
이번 포스팅에서는 Flat한 Canvas와 인터렉션 할 수 있는 방법에 대해 알아보겠습니다. UI와 인터렉션 하기 위해 Ray 기능을 사용할 것입니다. UI 세팅 먼저, 빈 게임 오브젝트를 하나 생성해준 후 이름을 Flat Canvas로 바꿔준 다음 Ray Interactable 컴포넌트와 Pointable Canvas 컴포넌트를 부착해줍니다. 그 다음 Flat Canvas의 자식으로 빈 오브젝트를 하나 더 생성해준 다음 이름을 Mesh로 바꿔주고, Box Collider와 Collider Surface컴포넌트를 붙여줍니다. Collider Surface의 Collider 부분에 방금 만든 Box Collider를 할당해줍니다. Flat Canvas의 자식으로 UI Canvas를 하나 만들어줍니다. 그 ..
OVR SDK 프로젝트를 스터디 하다보면 MaterialPropertyBlockEditor 스크립트를 종종 발견하곤 했습니다. MaterialPropertyBlockEditor 스크립트가 무엇인지 이번 포스팅에서 살펴보고자 합니다😁. MaterialPropertyBlockEditor이란? 여러 객체의 Mateiral 속성을 효율적으로 관리하고 업데이트하는 데 사용되는 유틸리티 스크립트입니다. 예를 들어, 위 움짤에서 보이는 거와 같이 텔레포트를 할 때 특정 핫스팟에 타겟팅이 되는 순간 핫스팟의 Ring의 밝기가 밝아지는 상황 등에 사용할 수 있습니다. 위 코드와 같이 빠르게 MaterialPropertyBlock에 접근하고 업데이트할 수 있습니다.
메티리얼을 직접 수정하면 각 객체에 대해 메모리에 해당 머티리얼의 새로운 인스턴스를 생성하게 됩니다. MaterialPropertyBlock를 사용하여 복사본이 생성되는 문제를 해결할 수 있습니다. MaterialPropertyBlock 아래 코드는 MaterialPropertyBlock를 사용한 간단한 예시 입니다. void ChangeColorWithMaterialPropertyBlock() { Renderer renderer = GetComponent(); MaterialPropertyBlock propBlock = new MaterialPropertyBlock(); renderer.GetPropertyBlock(propBlock); propBlock.SetColor("_Color", Color.r..
이번 포스팅에서는 OVR SDK를 이용해서 텔레포트 로코모션하는 방법에 대해 알아보겠습니다. 저의 경우 버전은 위 사진에 나와 있는 버전을 사용중에 있습니다. 저의 경우 더 이상 예전 버전을 사용하지 않습니다. 플레이어 세팅 저는 언제나 세팅되어 있는 플레이어 프리팹을 사용합니다. 프로젝트 검색란에 InteractionRig까지 검색하신후 Basic을 하이러키창에 끌어다 놓아줍니다. 다음으로, LocomotionControllerInteractorGroup을 찾아줍니다. LocomotionControllerInteractorGroup을 각 Controller의 자식으로 집어넣어줍니다. 그 다음, 3개의 빈 오브젝트를 만들어준 다음 우측 사진처럼 각 컨트롤러에 하나씩 넣어주고 OVRControllers 자..
이번 포스팅에서는 오브젝트를 들고 두 손으로 해당 오브젝트의 사이즈를 컨트롤 하는 방법에 대해 알아보고자 합니다. 플레이어 세팅하기 프로젝트 돋보기에 full이라고 검색하시면 맨 아래 InteractionRigOVR-FullSynthetic 프리팹이 보입니다. 해당 프리팹을 하이러키창에 끌어다가 놓으신 다음, OVRControllerHands아래에 ControllerHandInteractores를 찾아줍니다. 이때 [Right/Left] 둘 모두에게 HandGrabInteractor을 끌어다가 놓아줍니다. 위와 같이 하셨다면 플레이어 세팅은 모두 끝났습니다. 오브젝트 세팅하기 큐브를 하나 생성해준 다음 Rigidbody, Grabbable, One Grab Free Transformer, Two Grab..
유니티 개발을 하면서 가장 애용하고 유용하게 사용중인 에셋을 소개드리고자 합니다. 지극히 주관적인 생각이며 저의 개발 스타일에 맞춰 추천하는 것임을 강조합니다! 이번 포스팅에서는 저번에 소개드리지 않았던 에셋들을 위주로 추천드리고자 합니다. 진우가 추천하는 유니티 인생 에셋들 유니티 3D 개발을 하면서 가장 애용하고 유용하게 사용중인 에셋을 소개드리고자 합니다. 지극히 주관적인 생각이며 저의 개발 스타일에 맞춰 추천하는 것임을 강조합니다. Odin Inspector 유니티 Od wlsdn629.tistory.com Hot Reload 유니티 게임 실행(런타임) 중 코드를 수정하자 with Hot Reload! 유니티를 이용한 게임 개발자들의 고충은 무엇인가요? 저는 디버깅할 때가 가장 고통스럽니다... ..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Monolithic Architecture란? 모놀리틱 구조는 사용자 인터페이스, 데이터 베이스, 애플리케이션 로직과 같은 모든 요소를 단일 서버 내에 결합하는 것이 특징인 웹 애플리케이션의 일반적인 디자인 형태입니다. 모놀리틱 구조를 사용할 때의 장점은 간단한 구조덕에 개발이 쉬워지며, 확장성이 용이하다는 점입니다. 단점으로는 사소한 변경이 생길 때마다 시스템을 재구축하고 재배포해야하는 번거로움과, 애플리케이션이 너무 복잡해지는 등 문제가 발생할 수 있습니다. 이러한 문제점을 해결하기 위해 로직, 데이터 엑세스 레이어를 포함하여 별개의 레이어로 분류합니다. ..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. ref React의 ref는 실제로 변경 시 추가 렌더링을 발생시키지 않고 구성 요소를 다시 렌더링하는 사이에 지속되는 값을 저장할 수 있습니다. DOM 요소에 직접 액세스하거나 업데이트 시 다시 렌더링을 트리거할 필요가 없는 값을 추적하는 데 자주 사용됩니다. import React, { useRef } from 'react'; export default function Counter() { const ref = useRef(0); const handleClick = () => { ref.current = ref.current + 1; alert('You c..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. React의 Context API는 React 애플리케이션 전체에서 전역적으로 상태를 관리하는 방법입니다. 이를 통해 구성 요소 계층의 각 수준을 통해 수동으로 props을 전달할 필요 없이 React 구성 요소의 전체 트리에서 값(데이터 또는 함수)을 공유할 수 있습니다. 즉, 깊게 중첩된 구성 요소를 처리하거나 여러 구성 요소가 동일한 데이터에 액세스해야 할 때 Context를 사용할 수 있습니다. Prop Drilling의 문제점 각 Heading 구성 요소에는 렌더링할 HTML 제목 태그(, 등)를 결정하기 위해 level prop이 필요합니다. 구성 ..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 렌더링과 커밋 복습 트리거: 초기 렌더링(앱 시작)과 컴포넌트 상태 업데이트. 렌더링: 트리거 후, React는 화면에 무엇을 표시할지 결정하기 위해 컴포넌트를 호출합니다. "렌더링"은 React가 컴포넌트를 호출하는 과정입니다. 초기 렌더링 시, React는 root 컴포넌트를 호출합니다. 상태 업데이트가 발생한 후의 재렌더링에서는 해당 상태 업데이트를 트리거한 함수 컴포넌트를 호출합니다. 업데이트된 컴포넌트가 다른 컴포넌트를 반환하면, React는 그 다음 컴포넌트를 렌더링합니다. 이 과정은 더 이상 중첩된 컴포넌트가 없을 때까지 계속됩니다. 커밋: Rea..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Event Handling 이벤트 핸들러는 JavaScript의 이벤트 처리와 유사하지만 구문과 동작에 몇 가지 주요 차이점이 있습니다. React에서는 camelCase 명명 규칙(예: onClick, onSubmit)을 사용하여 요소에 이벤트 핸들러를 연결하며, 컴포넌트에 props로 전달됩니다. function Button() { const handleClick = () =>{ alert('안녕'); } return 이벤트 } function App() { return ( ); } form의 예시 form 및 해당 요소에 이벤트 핸들러를 추가하는 작업도 ..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JSX 또는 JavaScript XML은 UI가 어떻게 보여야 하는지 설명하기 위해 React에서 사용되는 JavaScript의 구문 확장입니다. JSX를 사용하면 JavaScript 코드와 동일한 파일에 HTML 구조를 작성할 수 있는 방법을 제공합니다. JSX 소개 JSX를 사용하면 JavaScript 코드에 HTML과 유사한 태그를 작성할 수 있습니다. 이러한 태그는 뒤에서 React.createElement 호출로 변환됩니다. JavaScript로 컴파일되는 구문으로, 중괄호 {}로 묶어서 사용할 수 있습니다. JSX는 선택사항이며 React를 사용하기..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. JavaScript 프런트엔드 개발의 짧은 역사 시장에 최초로 등장한 다양한 기술을 기반으로 정렬된 JavaScript 프런트엔드 개발의 짧은 역사는 다음과 같이 요약할 수 있습니다. jQuery: 프런트엔드 개발 세계에서 가장 초기이자 가장 인기 있는 도구 중 하나였습니다. jQuery는 DOM, 이벤트 처리 및 Ajax 호출과의 상호 작용을 단순화하여 개발자가 순수 JavaScript의 복잡성을 몰라도 대화형 웹 애플리케이션을 더 쉽게 구축할 수 있게 해주었습니다. Backbone.js: Backbone.js는 웹 애플리케이션 구축에 대한 보다 구조화된 접..
올해의 마지막 유니티 세일을 만나 볼 준비가 되셨나요? 유니티 New Year 세일은 2023년 12월 18일 오전 8시(태평양 시간)에 시작해 2024년 1월 10일 오전 7시 59분 59초(태평양 시간)에 종료됩니다. 에셋 스토어에서 2,000종 이상의 에셋이 최대 50% 할인된 가격에 판매될 예정이라고 합니다! 에셋스토어 여러분의 작업에 필요한 베스트 에셋을 찾아보세요. 유니티 에셋스토어가 2D, 3D 모델, SDK, 템플릿, 툴 등 여러분의 콘텐츠 제작에 날개를 달아줄 다양한 에셋을 제공합니다. assetstore.unity.com New Year 쿠폰 이 쿠폰을 사용하면 미화 100달러 이상 주문 시 세일 에셋의 판매가에서 10% 추가 할인을 받을 수 있습니다. 다른 쿠폰과 중복 사용할 수 없으..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Mongoose란? Mongoose는 Node.js의 MongoDB용으로 널리 사용되는 ODM(Object Document Mapper) 라이브러리입니다. Mongoose 는 애플리케이션 데이터를 모델링하기 위한 간단한 스키마 기반 솔루션을 제공하며MongoDB 데이터베이스의 문서를 Node.js 프로그램의 개체로 변환하여 데이터 작업을 더 쉽게 만듭니다. 몽구스의 주요 기능 문서 매핑 Mongoose는 MongoDB의 문서를 프로그램의 JavaScript 개체에 매핑합니다. 이를 통해 일반 JavaScript 개체로 작업하는 것처럼 데이터와 상호 작용할 수 ..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Scaling Vertical Scaling 정의: 시스템의 성능을 향상시키기 위해 메모리, CPU, 디스크와 같은 하드웨어 자원을 증가시키는 방법입니다. Horizontal Scaling 정의: 시스템을 여러 부분으로 나누고, 각 부분을 서로 다른 서버나 시스템에서 처리하는 방법입니다. 이 방법은 시스템의 확장성을 높이고 부하를 분산시키는데 효과적입니다. NoSQL vs RDBMS 데이터 저장소를 선택할 때, 주로 고려되는 두 가지 옵션은 NoSQL과 관계형 데이터베이스 관리 시스템(RDBMS)입니다. 전통의 RDBMS 데이터 무결성 지원 : RDBMS는 A..
학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. 이전 포스팅을 보지 않으셨다면 보고 오시는 것을 추천드립니다. 웹 시스템 개발 #NodeJS 학교 공부를 복습할 겸 적는 것이기에 내용이 부족할 수 있습니다. 부족한 것은 상관 없으나, 잘못된 부분이 발견된다면 지적해주시면 감사하겠습니다. Node.js 생성 및 목적 Node.js는 Ryan Dahl이 Joye wlsdn629.tistory.com npm (Node Package Manager) npm은 JavaScript 패키지 및 모듈을 설치, 관리, 공유 및 실행하는 것을 담당하는 패키지 관리자입니다. 패키지는 JavaScript 코드의 모음으로, 모듈,..