2. 웹페이지 디자인/기획
- 목표
1. 웹페이지를 디자인 합시다.
구성
홈페이지
ㄴ게임소개
ㄴ개발자소개
ㄴ게임즐기기 (게임을 실제로 실행)
ㄴQnA 보내기
구성은 4개지만 모든 화면은 1개의 화면에서 이루어 질 수 있도록 합니다.
왼편의 흰색 동그라미를 누르면 해당 구성으로 화면이 수직으로 슬라이드 됩니다.
2. 기능 라이브러리 정의
<화면 슬라이드>
Jquery 라이브러리를 이용한 royal slider를 이용합니다.
<이메일 보내기>
https://brunch.co.kr/@andrewyhc/43 이 분의 HTML 코드를 가져와 사용해 봅니다.
<게임 실행부>
언리얼4 HTML5 빌드를 이용하여 해당 화면을 구성합니다.
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
| [개요] Web에서 작동하는 게임을 만들어보자! (0) | 2018.12.31 |
1.웹 게임 개발 환경을 만드는 법
- 장비
PC : GTX 1080 , RAM 16gb , i7 8000번대
OS : 윈도우 10
- 도구
이클립스 : 웹 개발을 위해
아파치/톰켓 : 웹 서버를 퍼블리싱 하기 위해. 아무튼 테스트는 해봐야 하지 않겠습니까.
언리얼4 : 게임을 빌드하기 위해
============================================================
<이클립스 환경 구성>
1. eclipse를 설치합시다.
https://zetawiki.com/wiki/%EC%9C%88%EB%8F%84%EC%9A%B0_%EC%9E%90%EB%B0%94%EA%B0%9C%EB%B0%9C%ED%99%98%EA%B2%BD_eclipse_%EC%84%A4%EC%B9%98
위 제타위키에서 설치 방법이 잘 나와 있습니다.
2. EE로 설치합시다. EE버전에 Dynamic Web 프로젝트 만드는 기능이 있어요
<아파치 톰캣 환경 구성>
1. 아파치 톰캣 다운로드를 합시다.
http://withcoding.com/25
이님이 잘 설명 해놨더군요 설치합시다.
2. 이클립스에서 Server로 잡아줍니다.
<Dynamic 프로젝트 생성>
1. 프로젝트 생성에서 Dynamic Web 프로젝트 생성을 해보고 방금 잡은 아파치 톰캣으로 실행을 해봅니다.
잘 되면 끄읏
<언리얼4 빌드 구성>
1. 언리얼4를 설치합니다.
https://www.unrealengine.com/ko/what-is-unreal-engine-4
다운로드는 언제나 쉽습니다.
2. 프로젝트를 만듭니다.
막 어마어마한거 만들거 아니니 스타트팩 없애주시고, Android를 기반으로 만듭시다.
3. HTML5 빌드를 해봅시다.
한 30분 기다리면 완성됩니다.
예쁘게 빌드가 됩니다.
이 파일들을 이제 이클립스로 만든 Dynamic Web프로젝트에 넣고 실행을 해보면 되는겁니다!!!
여기서 js만을 가져가서 사용 하고 싶다면 js파일을 떼가시면 되고
바로 실행해보는 웹 페이지를 보고 싶다면 저기 html파일을 가지고 이용하시면 됩니다.
'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| [개요] Web에서 작동하는 게임을 만들어보자! (0) | 2018.12.31 |
[개요] Web에서 작동하는 게임을 만들어보자!
- 매우 높은 접근성
- 크로스 플랫폼 (인터넷 브라우저만 돌아가면 실행 가능하다! 버전에 따라 차이점은 있을 지라도....)
- 손 쉬운 게임 환경 구성 (인터넷과 Chrome, Firefox 등만 있다면 실행 가능)
- (학습용)javascript/ 웹 기술을 다양하게 적용 해볼 수 있는 소재이기 때문에
- webgl 등의 기술을 적용해 볼 예정이다
- Javascript를 이용하여 화면을 구성해 볼 예정이다.
- 아파치/톰캣 , Node.js등을 이용하여 웹 어플리케이션 서버를 구성해 볼 예정이다.
- DB 적용을 위하여 Node부류 DB를 이용 해볼 계획이다.
- (학습용)기존의 엔진의 HTML5 적용 가능성을 확인 하기 위해
- 언리얼 4 또는 유니티 5를 이용하여 HTML5의 게임을 만들 수 있는지 확인 할 예정이다.
- 어디까지 표현이 가능한지 확인해 볼 예정이다. (WebGL1, WebGL2의 경우를 놓고 확인 해볼 예정)
- (학습용)웹 서버를 이용하여 대량의 접속을 어떻게 처리 할 것인지 알아보기 위해
- 다른 목표로는 다중 인원 접속 처리를 행하기 비교적 어렵다
(사진) 완성 예시 모습
웹 사이트에서 구동되는 게임이 전면에 나오고 상호 작용을 할 수 있는 버튼 들이 있는 모습과 마우스와 키보드를 이용하여 게임을 진행 할 수 있는 결과가 주 목표이다.
(사진) 게임 소개용 화면 - 엘x드 게임
자바스크립트를 이용하여 동적인 화면을 구성하고 사용자 반응적인 웹 사이트를 만드는 것이 주요한 목적 사용자 반응적인 웹 사이트란, 사용자가 스마트폰에서 볼 경우 그 화면에 맞추어 웹이 출력되는 것이고 pc에서 볼 경우 그 화면에 맞추어 보여지는 사이트, 말하자면 하나의 코드로 2개 이상의 화면에 적용이 가능한 범용적인 웹 페이지를 만드는 것
- 게임
- 이동 기능
- 오브젝트 상호작용 기능
- 멀티플레이 기능
- 채팅 기능
- 웹 사이트
- 메인 게임 출력용 화면
- 버튼을 이용한 상호작용
- 회원가입 처리
- 게임 소개용 화면
- 버튼을 이용한 화면 전환
- 백그라운드 동영상 출력
- 웹 어플리케이션 서버 환경 구성
- 웹 페이지
- 메인 웹 게임 페이지
- 게임 소개 페이지
- 게임
- 이동기능
- 오브젝트 상호작용 기능
- 멀티플레이 기능
- 채팅 기능
웹서버란 무엇인가.docx'중단한 프로젝트 > WebGameProject(중단)' 카테고리의 다른 글
| 5. HTML로 이메일 보내는 기능 추가하기 (2) | 2019.01.02 |
|---|---|
| 4. royalslider 슬라이드에 이미지 집어넣기 (0) | 2019.01.02 |
| 3. RoyalSlider plugin을 이용한 세로로 슬라이드 되는 사이트 만들기 (0) | 2019.01.02 |
| 2. 웹페이지 디자인/기획 (0) | 2019.01.01 |
| 1.웹 게임 개발 환경을 만드는 법 (0) | 2019.01.01 |
