동고 팔자 상팔자

지난 포스트에 이어 이번 포스트에서는 게임 준비, 게임 오버 및 시간 텍스트를 출력을 다룹니다. 전체 목차 Phaser 및 플레이어 설정 시작, 종료 및 텍스트 설정 (현재 페이지) 적(총알) 설정 및 충돌 설정 1. 텍스트 출력 간단한 텍스트 출력 예제입니다. (10, 10) 위치에 "TEXT"를 출력합니다. 글꼴과 색상은 font, fill로 설정합니다. this.textTime = this.add.text(10, 10, "TEXT", { font: "25px Arial", fill: "#FFFFFF" }); 더 자세한 설정 방법은 아래를 참고하세요. https://photonstorm.github.io/phaser3-docs/Phaser.GameObjects.Text.html Phaser 3 API..

Phaser를 이용하여 HTML5 게임을 개발해보자 Phaser를 이용한 HTML5 게임 개발하기입니다. 자세한 원리는 글에 포함하지 않았으며 코딩을 처음 접하는 분들을 위해 나름(?) 친절하게 작성하였습니다. 또한 외부 이미지 리소스를 사용하지 않고 오로지 코드로만 구현합니다. 코드를 단순히 복사하기보다는 단계별로 코드를 따라 하면서 사용 방법을 익히고 응용하면 좋을 것 같습니다. 전체 목차 Phaser 및 플레이어 설정 (현재 페이지) 시작, 종료 및 텍스트 설정 적(총알) 설정 및 충돌 설정 1. 준비 개발을 위해 IDE를 설치합니다. 여러 IDE가 있지만 VSCODE를 추천합니다. 2. Phaser 세팅 & 게임 영역 그리기 아래와 같이 html 파일을 생성 후 아래와 같이 작성합니다. 총알 피하..

Phaser : HTML5 게임을 쉽게 만들도록 도와주는 게임 프레임워크 직접 캔버스를 이용해서 만들수도 있지만 자동차 만드는데 굳이 바퀴까지 직접 만들필요가 있나? 원리만 알고 잘 만들어진 도구를 사용하는게 좋다고 생각한다. 수 많은 게임 프레임워크(혹은 엔진, 툴)들이 많은데 이를 활용하면 훨씬 효율적으로 게임을 개발할 수 있다. 위키에서 게임 엔진 목록 검색했더니 엄청 나온다. https://en.wikipedia.org/wiki/List_of_game_engines List of game engines - Wikipedia From Wikipedia, the free encyclopedia Jump to navigation Jump to search Wikipedia list article Gam..

HTML5 게임 만들기 : 동고는 똥을 싫어해 #5 아래 페이지에 Phaser3 버전으로 리뉴얼 하였습니다. https://donggov.tistory.com/138 HTML5 게임 개발 따라하기 - 총알 피하기 (Phaser 및 Player 설정) Phaser를 이용하여 HTML5 게임을 개발해보자 Phaser를 이용한 HTML5 게임 개발하기입니다. 자세한 원리는 글에 포함하지 않았으며 코딩을 처음 접하는 분들을 위해 나름(?) 친절하게 작성하였습니다. donggov.tistory.com '동고는 똥을 싫어해 만들기' 마지막 편입니다. 이번에는 게임 점수 처리와 'GAME OVER' 출력 처리를 하도록 하겠습니다. 우선 플레이어가 똥에 충돌했을때 'GAME OVER' 텍스트가 출력되도록 해보겠습니다...

HTML5 게임 만들기 : 동고는 똥을 싫어해 #4 '동고는 똥을 싫어해 만들기' 네번째 시간입니다. 이번 편에서는 똥 발사와 충돌을 해보겠습니다. Go Go. 똥을 추가하겠습니다.아래 이미지를 다운받아주세요. (우클릭 후 다른이름으로 저장) ddong, ddongAlive, ddongArray 변수 추가 및 preload 함수에서 이미지를 로딩해줍니다. ddong 변수에는 똥의 속성을 부여하고,ddongAlive 변수에 ddong의 존재여부 값을 저장할 예정입니다.그리고 ddongArray에는 발사할 똥의 정보를 담을 예정입니다.(지금와서 이런말하면 뭐하지만 자꾸 똥, 똥해서 민망하네요.....ㅋㅋㅋㅋ) 1 2 3 4 5 6 7 8 var ddong; var ddongAlive; var ddongArr..

HTML5 게임 만들기 : 동고는 똥을 싫어해 #3 '동고는 똥을 싫어해 만들기' 세번째 시간입니다. 이번 편에서는 플레이어 추가, 애니메이션 추가, 이동 액션까지 해보겠습니다. 4편에서 똥 충돌 이벤트, 5편에서 텍스트 처리등으로 마무리될것 같네요. 플레이어를 추가하겠습니다.우선 아래 이미지를 다운받아주세요. 당연히 저작권은 저에게 있습니다.ㅋㅋㅋ 위 그림을 보면 총 7개 프레임으로 이루어져있습니다.멈춰있을때에는 가운데 4번 프레임을 사용하고, 왼쪽으로 이동할때는 1,2,3 프레임을 차례로 반복, 오른쪽으로 이동할때는 5,6,7 프레임을 차례로 반복시키며 애니메이션을 만들겠습니다. 이전편에서 상자를 그리는 방법과 유사합니다.player 변수 선언 -> preload 함수에 플레이어 이미지 로드 -> c..

HTML5 게임 만들기 : 동고는 똥을 싫어해 #2 '동고는 똥을 싫어해 만들기' 두번째 시간입니다. Sublime Text 설치가 완료 되었다면 본격적으로 게임을 만들어 봅시다. (당연히 다른 에디터 툴이나 이클립스도 상관없음) Phaser라는 게임 프레임워크를 사용하겠습니다. (MIT 라이센스) 먼저 아래 공식 사이트에 접속하여 다운로드를 받습니다.주소 : http://phaser.io/download/stable 이제 기본적인 기본 html 파일을 생성하여 아래와 같이 해당 파일을 import 해줍니다.편의를 위해 다운받은 phaser.min.js 파일과 생성한 html 파일을 같은 폴더에 위치시켜주세요. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 Donggo hate a Poop ..

HTML5 게임 만들기 : 동고는 똥을 싫어해 #1 아래 페이지에 Phaser3 버전으로 리뉴얼 하였습니다. https://donggov.tistory.com/138 HTML5 게임 개발 따라하기 - 총알 피하기 (Phaser 및 Player 설정) Phaser를 이용하여 HTML5 게임을 개발해보자 Phaser를 이용한 HTML5 게임 개발하기입니다. 자세한 원리는 글에 포함하지 않았으며 코딩을 처음 접하는 분들을 위해 나름(?) 친절하게 작성하였습니다. donggov.tistory.com 첫번째 강좌입니다. 그럼 왜 하필 HTML5 게임 만들기 강좌냐? 그 이유는 쉬우니까!! (진짜임. 약간의 스크립트 지식만 있어도 됩니다.) 그리고 누구나 만들수 있고 즐길수 있기 때문입니다. 그럼 시작합니다. 첫번..