본 포스트는 JS(TS)로 캐릭터 모션 구현에 대한 게시글입니다. 😮 구현 방법 1. 캐릭터 이미지 스프라이트 제작 블럭 이미지 스프라이트에서 처럼 슈퍼 마리오 메이커 2에서 이미지를 얻어서 제작했습니다. 블럭 이미지 스프라이트 ( 가로 46px, 세로 64px ( 움크린 이미지: 46px, 46px ) ) 2. 각 상황별 모션 ...

본 포스트는 JS(TS)로 블록과 맵 구현에 대한 게시글입니다. 😮 구현 방법 1. 블록 이미지 스프라이트 제작 슈퍼 마리오 메이커 2라는 닌텐도 게임을 이용해서 필요한 블록의 형태를 하나하나 캡쳐하고 포토샵으로 편집해서 블록 이미지 스프라이트를 제작했습니다. ( 하나하나 자르고 배경 지우고 하다 보니 굳이 필요하지 않은 형태의 블록도 많이...

본 포스트는 JS(TS)로 캐릭터 충돌 처리에 대한 게시글입니다. 🤔 구상 기존에는 특정 y 좌표를 캐릭터의 위치로 고정하고 그 위치에서만 캐릭터가 움직이도록 구현했습니다. 물론 점프에서도 상승했다가 다시 원래 위치까지 하강하도록 구현했습니다. 하지만 원래 생각했던 게임은 캐릭터가 블록 위를 오르락내리락 할 수 있는 기능을 원했기에 기존 방...

본 포스트는 JS(TS)로 캐릭터 이동 및 점프를 구현하는 방법을 기록하는 포스트입니다. 🧐 점프에 중력 적용 캐릭터가 점프 할 때는 등속도 운동보다는 포물선 운동처럼 중력의 영향을 받아서 상승 중에는 점점 느려지고, 하강 중에는 점점 빨라지는 것이 더 자연스럽습니다. 구현 방법은 현재 위치 = (현재 위치 - 목적지 높이) / n1 + n...

캐릭터의 이동을 구현하고 나서 캐릭터에 관한 변수를 어디에 선언하고 어떻게 관리하고 화면에 렌더링할지에 대한 고민을 시작했습니다. 초기 개발 과정 일단 캐릭터를 구현하는데 필요한 변수들을 전역적으로 선언해서 사용했습니다. 왜냐하면 캐릭터에 필요한 변수들을 여러 함수들 즉 이동, 화면 렌더링 등의 많은 함수에서 사용하기 때문입니다. 함수의 매개변수를 ...

🙂 계기 최근에 목적의식과 방향을 잃은 채로 계속 있다 보니 무엇을 어떻게 해야 할지를 몰라서 많이 해이해졌었습니다. 그러다가 흥미를 갖고 다시 시작하려면 재미있는 것을 하려고 생각하다가 예전부터 한 번쯤은 만들어보고 싶었던 웹 게임을 한번 만들어보면 좋겠다고 생각해서 시작했습니다. 🤔 구상 실제 게임을 출시할 것도 아니고 캐릭터를 직접 만들 정도의...

🙂 블로그 작성 및 커스터마이징 방법 1. 게시글 작성 방법 여기 참고 2. 페비콘 커스터마이징 방법 여기 참고 3. markdown 작성 방법 여기 참고 😯 Front Matter 작성 방법 --- # "layout: post"는 생략 가능 title: 게시글 제목 author: 1-blue date: 2022-11-07 ...