phaser-framework 튜토리얼
phaser-framework 시작하기

Android Cordova CSS HTML html5-canvas ionic-framework JavaScript jQuery Node.js TypeScript

비고

페이저 는 주로 오픈 소스 데스크톱 및 모바일 HTML5 게임 프레임 워크입니다.

여기에는 강력한 문서, 기능 및 예제 세트가 포함되어있어 신속하게 업무용 게임으로 이동할 수 있습니다. Pixi.js 렌더링 엔진을 통해 WebGL을 지원하고 이전 장치를 지원할 수있는 Canvas 폴백을 포함합니다.

엔진이 JavaScript로 작성되었지만 TypeScript 정의도 포함됩니다.

Lazer 라 불리는 ES6 호환 프로젝트의 새로운 구상이 있습니다.

버전

페이저 2

번역	출시일
2.6.2 코레 봄	2016-08-25
2.6.1 Caemlyn	2016-07-11
2.6.0 팔 모란	2016-07-08
2.5.0 다섯 왕	2016-06-17
2.4.9 4 명의 왕	2016-06-16
2.4.8 시계 언덕	2016-05-19

시작하기 페이저

폴더 만들기
새 디렉토리 안에 index.html을 만듭니다. 브래킷 편집기에서 엽니 다.
github 에서 Phaser 저장소를 다운로드 한 다음 phaser.js 파일을 빌드 폴더에서 가져옵니다. 프로젝트 디렉토리 안에 파일을 놓습니다.
index.html을 열고 헤더 태그 안에 phaser.js를 연결하십시오.

<!doctype html> 
<html lang="en"> 
<head> 
    <meta charset="UTF-8" />
    <title>My Gamer</title>    
    
     <script type="text/javascript" src="lib/phaser.js"></script>

    <style type="text/css">
        body {
            margin: 0;
        }
    </style>
    
</head>
<body>    
        <div id="gameContainer"></div>
</body>
</html>

game.js 디렉토리에 다른 js 파일을 만듭니다.
편집기에서 game.js 파일을 열고 다음 코드를 작성하십시오.

// Phaser instance, width 800px, height 600px render as CANVAS. 
// Method signature - preload, create and update

var game = new Phaser.Game(800, 600, Phaser.CANVAS,'gameContainer', { preload: preload, create: create, update: update });

function preload() {
// this method used to load your game assets
}

function create() {
// this method run only once used to create to game world
}

function update() {
// this method loop 60 times in a seconds, used to handle gameplay.
}

모든 파일을 저장하고 Bracket liveserver (오른쪽 상단 아이콘)를 사용하여 index.html 을 엽니 다.
Phaser 개발 환경이 생성되었습니다. 오류 확인을 위해 브라우저 화면에 콘솔 화면이 나타납니다.

Node.js를 사용하여 Phaser 시작하기

게임을 라이브로 만들고자하는 폴더를 만들고 그 폴더로 이동하십시오.

mkdir my-new-game
cd my-new-game

npm을 사용하여 디렉토리를 초기화하십시오.

npm init -y

phaser를 노드 패키지로 설치하십시오.

npm install phaser

http-server를 명령 줄에서 사용할 글로벌 모듈로 설치하십시오.

npm install -g http-server

index.html 파일을 만들고 Phaser 실행 파일을 참조하고 다음 코드를 붙여 넣습니다.

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>My Gamer</title>
    <script type="text/javascript" src="node_modules/phaser/build/phaser.js"></script>
    <style type="text/css">
    body {
        margin: 0;
    }
    </style>
</head>

<body>
    <div id="helloWorld"></div>
</body>
<script>
var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'helloWorld', {
    create: create
});

function create() {

    var text = "Hello World!";
    var style = {
        font: "65px Arial",
        fill: "#ff0044",
        align: "center"
    };

    var t = game.add.text(game.world.centerX, 300, text, style);
    t.anchor.set(0.5);

}
</script>

</html>

서버를 시작하고 브라우저에 http : // localhost : 8080 을로드 하십시오 !

hs

Modified text is an extract of the original Stack Overflow Documentation

아래 라이선스 CC BY-SA 3.0

와 제휴하지 않음 Stack Overflow