일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- object
- 출처 : https://webdir.tistory.com/506
- 게시판
- toString
- https://velog.io/@velopert/create-typescript-react-component
- http://jeonghwan-kim.github.io/dev/2019/06/25/react-ts.html
- 출처 : https://joshua1988.github.io/web-development/javascript/promise-for-beginners/
- Today
- Total
목록글 전체 보기 (234)
Back Ground
Filter Mode point 필터가 없음 Bilinear 이중선형 보간 필터링 Trilinear 삼중선형 보간 필터링 linear를 선택하면 안티 엘리어싱처리가 되어 들어가게 된다. Bilinear / Trilinear 차이
Pixels Per Unit (PPU) 설명하기전 픽셀과 유닛에 대해 간략하게 설명하자면 픽셀(Pixel)은 컴퓨터 그래픽의 점 하나로 표현되는 단위. 유닛(Unit)은 유니티에서 사용하는 단위. (화면에 격자(Grid)문양의 가로 세로 하나의 사각형이 1 유닛) Pixels Per Unit(PPU)은 1유닛에 대응하는 Pixel의 수를 뜻한다. PPU의 값이 100이면, 1유닛( 1 x 1 )에 100픽셀(100 x 100)으로 표현된다. 100 x 100의 Sprite가 있다면, 1유닛과 일치하는것을 확인 할 수 있다.
SpriteMode 스프라이트 모드는 Multiple로 지정해준다. [Tip] Single 이미지 자체를 하나의 Sprite를 지정한다. Multiple 이미지를 여러 Sprite로 나눌 수 있다. Polygon 이미지와 같은 사각형, 원, 삼각형 등의 모양을 Sprite으로 만들어 사용할 수있다. Sprite Editor버튼으로 스프라이트 에디터창을 열면 Sprite Mode를 Mutiple로 지정했기 때문에 Slice로 Sprite를 나눌 수있다. 이때 나누는 방식의 Type을 지정할 수 있는데 Automatic 자동으로 이미지 빈 영역 기준으로 나눠줌. Grid By Cell Size Pixel X,Y 값을 지정한 기준으로 나눈다. Grid By Cell Count C(column) , R(Row)..
어릴적 최애 게임 포켓몬스터를 만들어 보았다. 첫 게임(클론)이다 보니 엉성한 점이 많을 수 있으니 이건 강좌가 아니라 개인공부용으로 보시길 바랍니다. 어느정도 게임을 만든 뒤 지인들에게 보여줬는데.. 뜻밖에 포켓몬스터를 안해본 사람들이 은근 있다는 사실을 알게되어 이 글을 보는 사람중 무슨 게임인지 모를 수 있기에 실제 게임 플레이 Youtube동영상도 올림. (녹두로라는 슈퍼마리오 장인 유튜버의 영상) 포켓몬 골드버전은 2D 게임이다보니 2D템플릿으로 프로젝트를 만든 뒤 유니티 엔진 버전은 2020.1.3f1 로 만들었다. Player(골드)를 만들기 위해 Sprite 이미지가 필요하여 외국 사이트 이곳저곳을 뒤져보다 찾아서 사용하였다. 이제 Assets에 Image폴더 만들고 적당하게 이미지를 넣고..
유니티 "유니티 애니메이션과 건축 시각화, 가상현실 등 인터랙티브 콘텐츠 제작을 위한 통합 저작 도구"라 소개 되어있는데 2D와 3D 비디오 게임, 건축 시각화, 애니메이션과 같은 인터랙티브한 콘텐츠를 만드는데에 사용되는 툴 (도구, 게임엔진)이다. 멀티플랫폼, 통합 애셋 시스템을 지원하고 유니티를 이용해 스크립트를 구성하는데 사용하는 프로그래밍 언어로는 C#, 자바스크립트, Boo를 사용 한다. [ 장점 ] - 다영한 멀티 플랫폼 지원 (Window, Linux, Mac, Android, IOS) - 가볍고 빠른 개발 - 게임 이외의 분야에도 다양한 활용 - 에셋 스토어 설치 유니티 사이트에 들어가서 다운로드를 하면 설치가 가능한데 개발연습을 할 것이기에 라이센스는 Personal로 선택을 해준다. 다..
이미 만들어진 프로젝트에 StoryBook을 추가할때 - 먼저, React cli를 통해서 프로젝트를 생성해준다. [ 생성방법 ] https://backback.tistory.com/291?category=801894 React - 프로젝트 생성 및 babel & webpack 설명 React 프로젝트를 만드는 방법은 여러가지 있지만 Node.js 기반으로 개발할때 유용하게 프로젝트를 생성 할때 [create-react-app] 이 있다. webpack과 babel 등을 사용하여 개발하는 경우가 많은데 해당 도구를 설.. backback.tistory.com - 종속적으로 storybook을 추가한다. 1. npm npm i @storybook/react --save-dev 더보기 React cli가 아..
스토리북(Storybook) StoryBook JS 이란? 스토리북(Storybook)은 한 문장으로 정의가 어려울 정도로 다양한 방식으로 사용되고 있는 UI 컴포넌트 개발 도구입니다. 단순히 회사의 UI 라이브러리를 내부 개발자들을 위해 문서화(documentation)하기 위해서 사용할 수 있고, 외부 공개용 디자인 시스템(Design System)을 개발하기 위한 기본 플랫폼으로도 사용할 수 있다. 스토리북(Storybook)을 기본 구성 단위는 스토리(Story)이며 하나의 UI 컴포넌트는 보통 하나 이상의 Story를 가지게 된다. 각 Story는 해당 UI 컴포넌트가 어떻게 사용될 수 있는지를 보여주는 하나의 예시라고 생각하시면 이해가 편하실 것 같다. StoryBook JS의 큰 장점인 UI..
NestJS로 Starter프로젝트 생성하여 로컬에서 동작시켜보겠다. nestJS문서 : https://docs.nestjs.com/ Documentation | NestJS - A progressive Node.js framework Nest is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with TypeScript and combines elements of OOP (Object Oriented Progamming), FP (Functional Programming), and FRP (Functional Reac docs.nest..