[0] Orientation

#오리엔테이션

이 카테고리 작성자는 phaser 라이브러리를 이 글을 시작으로 처음 접해보는 중입니다. 즉 이 카테고리는 '다른 사람을 가르친다'라는 것보단 '내가 공부한다'라는 점에 취지가 맞춰져 있습니다. 글은 일상적인 부분보단 사전의 느낌으로 진행되며 계속해서 수정될 것입니다. 다소 딱딱한 분위기일 수 있습니다.

#셋팅

Phaser의 경우 3.15.1 버전을 다운로드하여 사용했습니다. (2022.03.02)

index.html

<!DOCTYPE html>
<html>
<head>
  <style>
    canvas { position: fixed; top: 50%; left: 50%; height: 100%; transform: translate(-50%, -50%); }
  </style>
  <script src="phaser.min.js"></script>
  <script src='main.js'></script>
</head>
<body>
</body>
</html>

main.js

좀 더 편하게 만들고 싶어서 https://phaser.io/tutorials/getting-started-phaser3/part5의 내용을 참조하여 js 문서를 짰습니다.

var config = {
  type: Phaser.AUTO,
  width: 800,
  height: 600,
  physics: {
    default: 'arcade',
    arcade: {
      gravity: { y: 200 }
    }
  },
  scene: {
    preload: preload,
    create: create
  }
};

var game = new Phaser.Game(config);

function preload ()
{
  this.load.setBaseURL('http://labs.phaser.io');

  this.load.image('sky', 'assets/skies/space3.png');
  this.load.image('logo', 'assets/sprites/phaser3-logo.png');
  this.load.image('red', 'assets/particles/red.png');
}

function create ()
{
  this.add.image(400, 300, 'sky');

  var particles = this.add.particles('red');

  var emitter = particles.createEmitter({
    speed: 50,
    scale: { start: 1, end: 0 },
    blendMode: 'ADD'
  });

  var logo = this.physics.add.image(400, 100, 'logo');

  logo.setVelocity(10, 20);
  logo.setBounce(1, 1);
  logo.setCollideWorldBounds(true);

  emitter.startFollow(logo);
}

RunHttpServer.bat

python -m http.server 8080

python을 사용하여 서버를 열었으나, 다른 언어를 사용하셔도 무관합니다.

'olds > Phaser.js' 카테고리의 다른 글

[2] preload (0)	2022.03.03
[1] config (0)	2022.03.03

#오리엔테이션

#셋팅

'olds > Phaser.js' 카테고리의 다른 글

티스토리툴바