2022. 2. 12. 23:08ㆍTechnology[Front]
Phaser 라이브러리는 Javascript 기반 라이브러리로 웹환경에서 2D 게임을 실행시킬 수 있도록 물리환경 / 충돌 / 중력 등을 구현하고 있는 라이브러리입니다.
Javascript이지만 라이브러리 메소드가 정해져있다보니 사용법을 배우고 사용하셔야 편리한 측면이 있습니다. 그러므로 여러 게시글에 걸쳐 Phaser 사용법을 설명드리고자 합니다.
Phaser 에서의 index.html은 html 요소를 모두 모아놓은 파일로서 반드시 있어야 되는 파일입니다.
Phaser 에서의 config.js는 전반적인 설정을 관리하는 파일로서 반드시 있어야 되는 파일입니다.
(1) index.html
<html>
<head>
<title></title>
<!-- Phaser 라이브러리를 저장하고 있는 파일입니다. -->
<script type= "text/javascript" src = "phaser.min.js"></script>
<!-- Phaser 설정을 관리하는 파일입니다. -->
<script type= "text/javascript" src = "Config.js"></script>
<!-- 다양한 css, js파일 적용이 가능합니다. -->
</head>
<body>
<!-- Phaser 전체에 걸쳐 필요한 html요소를 작성합니다. -->
</body>
</html>Phaser 전반에 걸쳐 필요한 모든 html요소를 정의하고 있는 index.html입니다. head 부분에 보시면 반드시 있어야 하는 js파일을 보실 수 있습니다. Phaser 라이브러리를 저장하고 있는 js파일의 경우 구글링을 통해 해당 파일을 구하셔서 script 태그의 src로 지정하시거나 온라인에 올려져 있는 Phaser 라이브러리를 src로 지정하셔서 사용하시면 됩니다. 다음으로 config.js 파일의 경우 Phaser 전반적인 설정을 담당하는 파일로 반드시 필요한 파일입니다. 나머지 css, js, html은 자유롭게 추가작성이 가능합니다.
(2) config.js
var config = {
type: Phaser.AUTO,
//화면크기 설정
scale: {
width: 1200,
height: 800,
},
//물리엔진 설정
physics: {
default: "arcade",
arcade: {
gravity: { y: 300 },
debug: false,
},
},
//사용하는 js파일
scene: [Scene1, Scene2],
};
//phaser3 프레임워크 생성
var game = new Phaser.Game(config);위의 코드는 실제 프로젝트에서 일부 발췌한 것으로 실제 사용시 수정하셔서 사용하시면 됩니다. config라는 객체에 Phaser 환경설정을 한 다음 new Phaser.Game(config)로 Phaser 프레임워크 객체를 생성하고 추후 각 js파일에서 game의 메소드 및 멤버변수를 사용하셔서 구현하시면 됩니다. config 객체 내에는 scale에 화면크기 설정을 하고 physics에 물리엔진 설정을 하시고 scene에서 Phaser를 사용하는 js파일을 모두 포함시키시면 됩니다. 물리엔진의 경우 arcade를 사용하고 있는데 matter 물리엔진도 존재하니 구글링하셔서 비교 후 각 프로젝트의 성격에 맞는 엔진을 선택하시면 됩니다. gravity로 중력도 설정할 수 있습니다.
이상으로 이번 게시글에서는 Phaser 사용법의 첫 번째로서 반드시 들어가는 index.html과 config.js파일에 대해 알아보았습니다.
'Technology[Front]' 카테고리의 다른 글
| 정적 이미지파일 React - Spring 업데이트 데이터 전송 (1) | 2022.02.14 |
|---|---|
| Phaser 사용법 2 - Scene1.js (1) | 2022.02.13 |
| HTML코드를 Javascript(JQuery)로 Paging 처리하기 <검색기능 추가> (1) | 2022.02.10 |
| React 파일업로드 및 미리보기 && React - Spring ajax로 file 전송 (1) | 2022.02.08 |
| React 강제 Rerendering 하기 (1) | 2022.02.07 |