stackblitz

개요 Stackblitz는 웹 애플리케이션 개발을 위한 클라우드 통합 개발 환경입니다. 저는 주로 Angular의 학습을 위해 사용하고 있습니다. 별도의 개발 환경 구축을 위한 노력 없이 무료로 학습한 내용을 즉시 코딩해 볼 수 있다는 점이 매력적입니다. 다만, 아쉬운 것은 현재 정적 파일 호스팅을 지원하지 않아, 이를 활용하기 위해서 외부 호스팅 서비스를 사용해야 합니다. 이번 포스트에서는 무료 정적파일 호스팅 서비스인 GitHub Pages 의 사용법을 알아보고, 호스팅 된 파일을 stackblitz에서 사용해보도록 하겠습니다. GitHub Pages 생성 GitHub Pages 는 GitHub에서 제공하는 정적 사이트 호스팅 서비스입니다. 일반적으로는 여기에 정적 사이트 생성기인 [Jekyll]과(..

본 포스트에서는 간단히 Phaser 3 의 기초를 학습하기 위하여 벽돌깨기 게임을 만들어 보도록 하겠습니다. 기본이 되는 내용은 2D breakout game using Phaser 을 바탕으로 진행하였으며, 원본의 코드는 Phaser 2 (CE) 버전을 기반으로 하고 있어, 여기서는 Phaser 3 에서 동작할 수 있도록 소스코드를 수정하였습니다. 사전작업 Phaser 를 사용할 수 있도록 환경을 구성합니다. 혹은 다음의 Stackblitz 링크에서 시작 합니다. 초기환경 링크 프레임 워크 초기화 게임의 기능을 삽입하기 전에 우선 전체적인 구조를 잡아주어야 합니다. Phaser 는 장면(scene) 단위로 게임을 관리합니다. 때문에 우선 장면(scene) 클래스를 생성한 후 이를 Angular 에 추가..

개요 Phaser는 HTML5 Game Framework로 이를 사용하면 우리는 JavaScript를 사용하여 Game을 쉽게 개발할 수 있습니다. 하지만 하나의 Game이 APP으로써 공통적인 요소로 사용자 관리(로그인), 게임자료 관리, (필요에 따라) 실시간 통신 등이 추가로 필요합니다. Angular와 같은 Web Framework를 사용하면 이러한 공통 요소를 좀 더 손쉽게 Game에 추가할 수 있습니다. 이번 포스트에서는 우선 Angular 프로젝트에서 Phaser를 사용할 수 있도록 설정해보도록 하겠습니다. 환경설정 Angular 우선 다음 링크를 참고하여 Angular를 사용할 수 있도록 프로젝트를 생성합니다. Angular 개발환경 설정하기 Angular 시작하기 Phaser 3 설정 P..