코코스 크리에이터 웹으로 내보내고 자동 반응형 설정하기

안녕하세요~ 코드그림입니다!

 

최근에 코코스 크리에이터로 게임을 개발했어요.

 

처음부터 웹/앱 동시 제작 계획이었던 프로젝트라서 디자인부터 모바일 사이즈로 제작했습니다.

나머지 여백은 자동 검은색 배경이 들어가더라구요.

모든 설정은 웹으로 내보낸 후에 다시 css로 변경할 수 있습니다.

 

그럼 우선 만들어둔 게임을 웹으로 내보내는 것 부터 해볼게요.

 

 

 

1. 빌드한 게임 코코스 크리에이터 에디터에서 웹으로 내보내기

코코스 크리에이터 웹 빌드 ⓒ코드그림

상단 프로젝트 버튼 > 빌드 버튼을 눌러줍니다.

 

 

 

 

코코스 크리에이터 웹 빌드 ⓒ코드그림

 

에디터 창 제목 설정해 주시고 플랫폼은 web desktop으로 설정해 줍니다.

빌드버튼을 클릭하면 저렇게 주황색 창이 로딩되면서 completed되는 화면을 보실 수 있습니다.

 

 

 

 

2. 빌드 후 html 파일 커스텀하기

 

빌드된 파일 경로로 들어가서 vs코드를 켜고 html파일을 live server로 구동시켜 봅니다.

코코스 크리에이터 웹 빌드 ⓒ코드그림

 

 

 

첫 빌드 후에 html 파일을 실행시켜 보면 아래와 같이 상단에는 프로젝트명이 써져 있고 하단에는 코코스로 만들어졌다는 텍스트가 들어가 있는 것을 확인하실 수 있습니다.

그럼 이제 고쳐볼게요.

 

 

 

코코스 크리에이터 웹 빌드 ⓒ코드그림

코코스 크리에이터 웹 빌드 ⓒ코드그림

코코스 크리에이터 웹 빌드 ⓒ코드그림

html 파일 body 안에 있는 header를 고쳐주거나 삭제해 주세요.

 

 

코코스 크리에이터 웹 빌드 ⓒ코드그림

 

footer역시 고치거나 삭제해 주시면 됩니다.

링크를 유지고 싶으시다면 본인 사이트 링크 넣어주시고 내용을 바꿔주셔도 됩니다.

 

 

 

 

 

 

3. 가운데 모바일 사이즈로 고정시키고 반응형 만들기

코코스 크리에이터 웹 빌드 ⓒ코드그림

#GameDiv 부분의 코드를 첨부된 이미지처럼 바꿔줍니다.

position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%,-50%);

이 부분이 핵심입니다.

 

 

 

 

 

이렇게 바꾸고 나면 웹 화면을 줄이거나 늘려도 가운데 고정된채로 창이 변하는 것을 확인하실 수 있습니다.

 

끝~~~

 

그럼 오늘도 행복하고 즐거운 코딩되시길 바래요😊

 

이상 코드그림이었습니다~!