Farm_1) 기본 프레임, 이미지 회전, 앵커포인트, 사이즈 조절

phaser.js

index.html

기본 구조

// 새로운 game object를 만든다

// 640 x 360 dimention 부여

// 게임이 브라우저에서 어떻게 render 될지 설정

// Phaser.AUTO 설정시 1순위 WEB G.L / 2순위 CanvasRenderer

var game = new Phaser.Game(640, 360, Phaser.AUTO)

// 게임의 로직을 담당하는 GameState를 만든다

// 각각의 keyword는 불변이다

var GameState = {

// 이미지, 오디오와 같은 필요한 파일을 로드

preload: function(){

},

// preload가 완전히 종료된 후 call 되는 create

create: function(){

},

// 초당 수 회 실행될 함수(충돌이나 사용자로부터의 입력등을 처리)

update: function(){

}

};

// gamestate 설정하고 실행시킨다

game.state.add('GameState',GameState);

game.state.start('GameState');

이미지 회전, 앵커 포인트, 사이즈 조절

// 새로운 game object를 만든다

// 640 x 360 dimention 부여

// 게임이 브라우저에서 어떻게 render 될지 설정

// Phaser.AUTO 설정시 1순위 WEB G.L / 2순위 CanvasRenderer

var game = new Phaser.Game(640, 360, )

// 게임의 로직을 담당하는 GameState를 만든다

// 각각의 keyword는 불변이다

var GameState = {

// 이미지, 오디오와 같은 필요한 파일을 로드

preload: function(){

// this : current object we are in

// load : load object that phaser has

// image : allows us to grab a new image

// image의 key 값 설정해야 하며 파일명과는 무관하다

this.load.image('background', 'assets/images/background.png');

this.load.image('chicken', 'assets/images/chicken.png');

this.load.image('horse', 'assets/images/horse.png');

this.load.image('pig', 'assets/images/pig.png');

this.load.image('sheep', 'assets/images/sheep3.png');

},

// preload가 완전히 종료된 후 call 되는 create

create: function(){

// this. 을 붙임으로써 다른 코드에서 참조가 가능

// this.game 은 우리가 main game object로 접근하게 해준다

// sprite()는 화면에 뿌리게 하는데 0, 0 은 앵커포인트로 기본은 top-left다

// sprite()의 세번째 파라미터에는 sprite()를 원하는 이미지의 key를 입력

// (단, 반드시 여기서 쓰이는 assets은 preload에서 준비가 된 것이어야 함)

this.background = this.game.add.sprite(0, 0, 'background');

// chicken을 이미 preload했기에 this.chicken으로 바로 참조 가능

this.chicken

= this.game.add.sprite(this.game.world.centerX, this.game.world.centerY, 'chicken');

// anchor 포인트를 변경하며 0 ~ 1 로 나타낸다

this.chicken.anchor.setTo(0.5, 0.5);

// asset의 사이즈를 변경

// 1은 100% 2는 200%와 동일하며 .setTo(2)만 해도 x, y 모두 2로 처리

this.chicken.scale.setTo(2, 2);

this.horse = this.game.add.sprite(120, 10, 'horse');

this.pig = this.game.add.sprite(500, 300, 'pig');

this.pig.anchor.setTo(0.5);

// scale의 값을 negative로 하면 filp 발생

this.pig.scale.setTo(-1, 1);

this.sheep = this.game.add.sprite(100, 250, 'sheep');

this.sheep.scale.setTo(0.5);

// 이미지를 rotate(+ : 시계방향 / - : 반시계방향)

// 앵커포인트를 기준으로 rotate

this.sheep.angle = 90;

this.sheep.anchor.setTo(0.5);

},

// 초당 수 회 실행될 함수(충돌이나 사용자로부터의 입력등을 처리)

update: function(){

this.sheep.angle += 0.5;

}

};

// gamestate 설정하고 실행시킨다

game.state.add('GameState',GameState);

game.state.start('GameState');