반응형

전체 글 1504

Part 7-2-5. Unity 2D : MapTool

🎞 Unity 2D  지난 시간에는 새로운 레이어인 Tilemap_Collision을 새롭게 만들어주고, 갈 수 없는 영역인 'X'를 나타내는 의미로 바위를 사용하여 건물과 같은 장소에 이를 배치하였다. 이 후, 테스트 스크립트를 만들어주어 GetTile을 통해 타일 값을 가져오고 좌표(X/Y)에 타일이 배치되어있는지를 확인하는 스크립트까지 작성해보았다. 이번 시간에는 더 나아가 유니티 내 확장을 통해 MapTool을 만들고 이를 실행할 경우 자동으로 맵을 순차적으로 돌면서 타일을 검사 후, 이를 파일로 저장하는 로직을 작성해보도록 하자.  💥 MapTool  유니티에서 툴을 확장하기 위해 기본적으로 해주어야 하는 작업이 있다. 바로 'Project' 폴더 내 Editor라는 폴더를 명시해주고 해당 ..

Part 7-2-4. Unity 2D : TileMap Collision

🎞 Unity 2D  지난 시간에는 타일 맵 에디터를 이용하면서 레이어를 통해 base 영역과 Env 영역을 나누어 주는 작업을 진행하였다. 이렇게 레이어를 나누어주면 반투명한 물체를 그려주어도 base 영역의 레이어가 존재하기 때문에 자연스럽게 객체가 보여진다. 또한 이렇게 레이어를 나누게 될 경우 이번에 학습할 Collision과도 계산이 편리해지기 때문에 이를 나누어 사용한다. 따라서 이번 시간에는 Collision를 통해 갈 수 있는 영역과 갈 수 없는 영역을 구분하여 처리하는 로직에 대해서 알아보도록 하자.  💥 TileMap Collision  먼저 지난 시간에 Tilemap_base를 그대로 복사-붙여넣기 하여 사용했더니 base의 잔디들을 그대로 가져와 사용해서 base 객체를 꺼도 잔..

Part 7-2-3. Unity 2D : TileMap Layer

🎞 Unity 2D  지난 시간에는 타일 맵 에디터와 미리 다운로드 받은 에셋을 통해 각자의 맵을 자유롭게 꾸미고 만들 수 있었다. 이번 시간에는 이러한 타일 맵의 레이어의 개념을 도입해 맵끼리 서로 다른 레이어를 이용하도록 하는 방법에 대해 알아본다. 또한 이로 인한 이점이 무엇이 있고, 왜 이렇게 처리하는지 또한 알아보도록 하자. 💥 TileMap Layer  맵을 만들다보면 경우에 따라 다양한 레이어가 필요하고 이것이 유용해지는 상황이 생긴다. 타일 맵 뿐만 아니라 일반 게임에서도 UI를 Layer로 구분해서 만들면 좋은 이점이, 생각해보면 타일맵에도 그대로 적용되는 것을 알 수 있다. 예를 들어 팝업 형태로 일반 UI 위에 뜨는 항목들이 그러하다. 이는 즉, 결국 무엇을 먼저 그려줘야 하는가?..

Part 7-2-2. Unity 2D : TileMap 기초

🎞 Unity 2D  지난 시간에는 2D 환경 준비를 통해 타일 맵 에디터를 설치하고, 무료 에셋을 다운로드 받았다. 이번 시간에는 일전에 패키지 매니저에서 다운로드 받은 타일 맵 + 무료 에셋을 바탕으로 본격적으로 맵을 만들어 줄 것이다. 맵을 만드는 것이 하나하나 배치해야 하는 것이 아닌, 에디터를 이용하므로 반복적인 노가다를 하지 않아도 된다. 굿! 👍  💥 TileMap 기초  먼저 맵을 만들기 전에 2D에 대해서 간단한 이론을 살펴보도록 하자. 다운로드 받은 TinyRPGTown의 Sprites 폴더를 가보면 'rock', 즉 바위 이미지 파일이 있다. 해당 파일을 클릭해보면 'Sprite Mode'가 있다. 해당 모드는 Single, Multiple, Polygon으로 나뉘어져 있는데 각..

Part 7-2-1. Unity 2D : 2D 환경 준비

🎞 Unity 2D   지난 시간까지 Unity 2D를 시작하기에 앞서 간단한 OT와 환경 설정을 진행하였다. 이번 시간에는 새로운 씬을 만들고, Package Manager에서 Tilemap도 받아준 뒤, 무료 에셋을 받아주도록 한다.  💥 2D 환경 준비  먼저 앞으로 2D 프로젝트를 진행할 것이기에 Edit - Project Setting을 선택한다. 이 후 Editor 탭으로 들어가, Default Behaviour Mode를 3D에서 2D로 변경하여 준다. 이 후, 새로운 씬을 만들어 이를 'Game' 씬이라 명하고, 기존에 있던 씬에 덮어씌워 기존 씬은 삭제처리한다.   또한 TileMap을 사용하기 위해 Winodw - Package Manager에 들어가 All packages를 선택하..

Part 7-1-1. 개론 : OT & 환경설정

🎞 개론  지난 시간까지 웹 서버의 모든 강의를 다 듣고 학습하며 이를 정리해보았다. 이번 시간부터는 앞으로 Part 7을 학습해보는 시간을 가질 것이다.   💥 OT & 환경설정  Part 7에서는 우리가 Part 1부터 6까지 열심히 배웠던 조각들을 조립해보며 더 큰 온라인 게임을 만드는 시간을 가져볼 것이다. Part 7부터는 2D 형태의 로그라이크 장르 게임을 무료 에셋을 가지고 만들 것이며, 이를 기존의 만든 C# 게임 서버를 통해 온라인 게임으로 만들어 볼 것이다.   환경 설정은 별 다른 내용 없이, 루키스님이 미리 준비해서 업로드 해 주신 압축 파일을 바탕으로 진행 할 것이다. 따라서 이를 다운로드 받아서, 원하는 유니티 버전을 설치하여 열어주면 된다. 해당 압축 파일은, 강의 구매자에..

Part 6-8-2. 부록 : EF Core 데이터 관계 모델링

🎞 부록  지난 시간에는 엔티티 프레임워크 코어의 데이터 모델링에 대해서 학습하였다. 데이터 모델링은 크게 관례형, 데이터 주석형, 플루언트 API 형이 있다. 어떤 걸 사용해야 하는지는 필요로 하는 기능에 따라 각각의 종류를 알맞게 사용하면 되는 것 까지 알아보았다. 이번 시간에는 일전에 학습하였던 엔티티 프레임 코어의 데이터 관계 모델링에 대해서 알아보는 시간을 가져보도록 한다.  💥 EF Core 데이터 관계 모델링  일전에 배운 것은 '엔티티 프레임워크 데이터 모델링'이였다면, 오늘 배울 것은 엔티티 프레임워크 데이터 관계 모델링'이다. 용어가 비슷하니 헷갈리지 말자. 이번 주제는 데이터 관계를 어떤식으로 모델링을 해서 엔티티 프레임워크에게 넘겨줄까? 이다.   먼저 관계라는 것이 무엇인지 알..

Part 6-8-1. 부록 : EF Core 데이터 모델링

🎞 부록  지난 시간에는 Unity와 WebApi를 연동시켜주었다. Unity와 WebApi를 연동시켜주는 것은 이전 시간에 학습했었던 Blazor와 WebApi를 연동시켜주는 것과 크게 다를 것이 없었다. Blazor를 통해 이용했을 때에는 HttpClient를 사용했지만, 유니티에서는 HttpClient가 아닌 WebRequest를 사용해야 했다. 이 후 REST를 구현하기 위해 CRUD를 함수를 모두 만들어 구현했다. 구현하는 과정에서는 크게 다를 것이 없어서 어려움은 딱히 없었다. 이번 시간에는 일전에 학습하였던 Entity Framework에 대해서 조금 더 심화과정으로 알아보는 시간을 가져보도록 한다.  💥 EF Core 데이터 모델링  엔티티 프레임워크는 일전에 아무런 개념도 모른체 그냥..

Part 6-7-5. WebAPI와 REST 서비스 : Unity와 WebApi 연동

🌀 WebAPI와 REST 서비스  지난 시간에는 Blazor와 WebApi를 연동시켜주었다. 이를 통해 ApplicationDbContext를 사용하지 않고 HttpClient를 사용하여 Blazor와 WebApi와 서로 통신할 수 있도록 처리해주었다. 이 후 각각의 CRUD를 Json을 통해 전달하면서 SerializeObject, DeserializeObject를 통해 JSON 형태 ↔ Objectc 형태로 변환하는 과정을 통해 통신하였다. 이번 시간에는 Unity와 WebApi 프로젝트를 연동시켜 보는 시간을 가져보도록 한다.  🐊 Unity와 WebApi 연동  기본적으로 Unity와 WebApi를 연동하는 것은 크게 Blazor와 다르지 않다. 유니티 허브에서 WebTest 프로젝트를 새롭..

Part 6-7-4. WebAPI와 REST 서비스 : Blazor와 WebApi 연동

🌀 WebAPI와 REST 서비스  지난 시간에는 CRUD 중 R을 제외한 Create, Update, Delete에 대해서 구현하고 학습해보았다.이 후 마찬가지로 Postman 툴을 사용하여 구현한 스크립트가 정상적으로 작동하는지 확인하였다. 이번 시간에는 일전에 사용하였던 RankingApp Blazor 프로젝트와 WebApi 프로젝트를 연동시켜 보는 시간을 가져보도록 한다.  🐊 Blazor와 WebApi 연동  이번 시간에는 Blazor 프로젝트와 WebApi를 연동할 것이다. 먼저 RankingApp에 산하에 있는 Models 폴더와 gameResult를 삭제해주도록 한다. 왜냐하면 일전의 WebApi 프로젝트를 진행할 때 GameResult를 공용 데이터인 SharedData 프로젝트에서 ..

Part 6-7-3. WebAPI와 REST 서비스 : WebApi #3

🌀 WebAPI와 REST 서비스  지난 시간에는 REST의 개념과 활용을 통해 CRUD 중 R을 맡고 있는 Read에 대해서 구현하고 학습해보았다. 또한 수동으로 데이터를 DB에 넣어주고 Postman 툴을 사용하여 수동으로 넣어준 데이터를 직접 작성한 Read 코드로 데이터를 조회하였다. 이번 시간에는 CRUD의 나머지 부분을 마저 구현하는 시간을 가져보도록 한다.  🐊 WebApi #3  오늘은 이전 시간에 이어서 REST의 나머지 부분인 C/U/D 부분을 만들어주도록 하자. Create부터 만들어주도록 하자. Create의 경우 POST 메서드와 Body에 데이터를 넣어준다고 하였으므로 아래와 같이 코드를 작성해준다. using Microsoft.AspNetCore.Http;using Micr..

Part 6-7-2. WebAPI와 REST 서비스 : WebApi #2

🌀 WebAPI와 REST 서비스  지난 시간에는 Blazor가 아닌 WebApi와 REST 서비스를 통해 Blazor와 WebApi 연동, 더 나아가 Unity와 WebApi를 연동하는 첫 번째 시간을 가져보았다. 새로운 프로젝트를 .Net Core Web App로 만들어주고, 마찬가지로 공용 데이터를 저장할 프로젝트도 하나 더 만들어 주었다. 이 후 ApplicationDbContext 스크립트를 만들어 DB 연동을 위해 PM을 통해 마이그레이션을 진행을 했다. 이번 시간에서는 본격적으로 웹 API를 만들어 보는 시간을 가져보도록 한다.   🐊 WebApi #2  웹 API를 사용하기 위해 프로젝트에 Controllers 폴더를 만들어주고, 해당 폴더 산하에 API 컨트롤러 - 비어있음 형태의 R..

Part 6-7-1. WebAPI와 REST 서비스 : WebApi #1

🌀 WebAPI와 REST 서비스  지난 시간까지 Blazor를 통해 미니 프로젝트인 RankingApp를 만들어보며 Entity Framework와 DB 그리고 CRUD를 통해서 실습을 진행해보았다. 이번 시간에서는 Blazor가 아닌 WebApi와 REST 서비스를 통해 Blazor와 WebApi 연동, 더 나아가 Unity와 WebApi를 연동하는 시간을 가져보도록 한다.  🐊 WebApi #1  Blazor는 C#을 통해 클라이언트 단도 만들 수 있기 때문에 굉장히 유용하다. 그렇지만 블레이저는 HTML 형식을 보낸 다음에 이를 SPA 방식을 통해 필요한 부분만 받아 갱신하는 것이 핵심이었다.  하지만 우리는 Unity를 통해 웹 서버와 연동을 필요로 한다. 따라서 지금까지 해왔던 블레이저와 ..

Part 6-6-4. Blazor 미니 프로젝트 : Blazor RankingApp #4

🥪 Blazor 미니 프로젝트  지난 시간에는 이전에 만들었던 RankingApp 프로젝트에 CRUD 기능 중 하나인 Create를 구현해보았다. 이번 시간에는 CRUD 중 남은 U/D인 Update, Delete를 직접 구현하는 시간을 가져보도록 하자.  🌅 RankingApp #4 Update/Delete  Entity와 Blazor를 통한 DB 연결이 무척 쉽기 때문에 이럴꺼면 SQL을 왜 배웠나 싶다. 하지만 그렇게 생각하면 오산이다. 왜냐하면 항상 ORM을 사용하는 것이 아니기 때문이다. C# 같은 경우 엔티티 프레임워크가 존재하기 때문에 사용할 수 있지만, C++의 경우 ORM을 딱히 사용하지 않아 이전과 같이 한땀한땀 처리해야 한다.  물론 C++에서도 일일히 다 노가다로 만들어 전송하는..

Part 6-6-3. Blazor 미니 프로젝트 : Blazor RankingApp #3

🥪 Blazor 미니 프로젝트  지난 시간에는 이전에 만들었던 RankingApp 프로젝트에 게임 결과 및 데이터 저장, 조회 등 다양한 기능을 추가 개발하였다. 이를 통해 CRUD 중 Read를 처리하였다. 이번 시간에는 CRUD중 Create를 직접 구현하는 시간을 가져보도록 하자.  🌅 RankingApp #3 Create  이전에 만들어준 Ranking 레이저 컴포넌트에서 gameResult 데이터 결과를 보여주는 부분을 로그인한 사용자에게만 보여줄 수 있도록 인증 처리를 진행한다. 로그인한 유저에게만 데이터를 보여주고, 그렇지 않은 유저에게는 데이터를 보여주지 않도록 하는 것이다. 해당 부분은 Shared 폴더 내 LoginDisplay 레이저 컴포넌트를 참조하도록 하자. @page "/ra..

Part 6-6-2. Blazor 미니 프로젝트 : Blazor RankingApp #2

🥪 Blazor 미니 프로젝트  지난 시간에는 Blazor에서 미니 프로젝트인 RankingApp을 만들기 위해 새로운 프로젝트와 데이터베이스를 생성하고 이를 연결해주었다. 이번 시간은 이전에 만들었던 RankingApp 프로젝트에 게임 결과 및 데이터 저장, 조회 등 보다 다양한 기능을 추가 개발하는 시간을 가져보도록 한다.   🌅 RankingApp #2 모델링  랭킹 시스템을 만들기 위해 어떤 게임의 결과물을 저장하고, 이를 읽어오는 예제를 만들도록 하자. 이를 직접 모델링하는 실습을 한다고 생각하면 된다. 먼저 Data 폴더 밑으로 Models와 Services 폴더를 만들어주도록 하자. Models 폴더 밑으로는 GameResult C# 스크립트 파일을 만들어준다.  해당 스크립트는 게임 결..

Part 6-6-1. Blazor 미니 프로젝트 : Blazor RankingApp #1

🥪 Blazor 미니 프로젝트  지난 시간에는 Blazor에서 Javascript 연동하는 이유와, 그 방법에 대해서 알아보았다. 왜 자바 스크립트를 써야하는지, 또 어떻게 사용하는지 알아보았다. 이 후 자바스크립트로 생성한 값을 C#으로 받거나 C#으로 생성한 값도 자바스크립트로 받는 처리를 진행하였다. 이번 시간부터는 Blazor에서 RaningApp 프로젝트를 통해 직접적으로 실습 해 보며 학습하는 시간을 가져보도록 한다.   🌅 RankingApp #1 프로젝트 생성  먼저 기존의 사용하던 프로젝트는 '인증'에 대한 설정 값을 변경하지 않았기 때문에 프로젝트를 다시 새롭게 만들어주도록 하자. 랭킹을 보여주기 위한 작업을 진행할 것이며, DB에서는 CRUD 연산을 통해 이를 실습할 것이다. 먼저..

Part 6-5-11. Blazor 입문 : Javascript 연동

🦮 Blazor 입문  지난 시간에는 State 관리에 대해서 학습하는 시간을 가져보았다. Counter Nav 메뉴에서 클릭하여 숫자를 올려도, 다른 탭을 왔다갔다 할 경우 클릭하여 숫자를 올린 값이 다 사라져서 문제가 되었지만, 이를 Scoped를 통해 처리하였고 이 후, UI가 갱신되지 않는 현상도 마찬가지로 이벤트와 StateHasChanged를 통해 처리하여 실시간으로 갱신이 되게끔 처리하였다. 이번 시간에는 Blazor에서의 Javascript 연동에 대해서 학습하는 시간을 가져보며, 마찬가지로 직접 실습하며 페이지를 제작해보도록 한다.  🏄‍♀️ Javascript 연동  먼저 왜 자바 스트립트를 써야 할까?, 이는 이전에 배운 State 관리와 이어진다. 이전 시간에 우리는 Counte..

Part 6-5-10. Blazor 입문 : State 관리

🦮 Blazor 입문  지난 시간에는 Form의 대해서 학습하는 시간을 가져보았다. Blazor에서 Form은 Modal을 통해서 header와 content를 나눠서 처리하였고, 값을 입력하는 부분에서 아무 내용을 넣지 않을 경우 그냥 저장되는 문제가 있어 Validation을 통해 이를 검증하고 확인하는 것까지 알아보았다. 이번 시간에는 State 관리 개념에 대해서 학습하는 시간을 가져보며, 마찬가지로 직접 실습하며 페이지를 제작해보도록 한다.  🏄‍♀️ State 관리  먼저 기존의 사용하던 BlazorApp, BlazorStudy 프로젝트를 삭제하고, 새롭게 BlazorApp 프로젝트를 하나 만들어 주도록하자. 이 후 프로그램을 실행하면, Counter 메뉴에서 Click Me를 클릭할 때마..

반응형