記錄

1) 각 State 별로 파일을 만들고 코딩 var BootState = { //initiate some game-level settings init: function() { //scaling options this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; }, preload: function() { this.load.image('preloadBar', 'assets/images/bar.png'); this.load.image('logo', 'assets/images/logo.png'); }, create: functi..

timer 설정(일정 시간마다 특정 event 실행) // decrease the health every 5 seconds// Phaser.Timer.SECOND * 5 : 5초마다 설정한 함수가 실행// this.reduceProperties : 이 함수가 설정된 타임마다 실행된다// this : 작동 contextthis.statsDecreaser = this.game.time.events.loop(Phaser.Timer.SECOND * 5, this.reduceProperties, this); GameOver & restart(계속해서 종료 조건 조회) // executed multiple times per second // update 영역은 1초당 수 회 가동되므로 여기서 게임 종료를 위한 //..

sprite frame 설정 // 최초 sprite를 add 할 때에 네번째 파라미터로 frame의 번호를 설정해주면 // 디폴트 frame이 설정된 파라미터로 넣은 frame으로 설정된다 // ex) this.pet = this.game.add.sprite(100, 400, 'pet', 3); this.pet = this.game.add.sprite(100, 400, 'pet'); this.pet.anchor.setTo(0.5); // spritesheet animation // animations를 키 값을 설정하여 저장처리 // 7 : how many frames per second (speed) // boolean : looping 여부 설정. true면 무한 반복 this.pet.animatio..

rotate() rotatePet: function(sprite, event) { if(!this.uiBlocked) { this.uiBlocked = true; this.clearSelection(); //alpha to indicate selection sprite.alpha = 0.4; // tween animation 객체를 선언 후 할당 // tween 함수의 파라미터는 tween animation이 작동할 대상 var petRotation = this.game.add.tween(this.pet); // make the pet do two loops // petRotation의 작동 모습과 작동 시간 설정 petRotation.to({angle: '+720'}, 1000); // petRotat..

inputEnabled, enableDrag() this.pet = this.game.add.sprite(100, 400, 'pet');this.pet.anchor.setTo(0.5); //custom propertiesthis.pet.customParams = {health: 100, fun: 100}; // The InputEnabled component allows a Game Object// to have its own InputHandler and process input related events.this.pet.inputEnabled = true; // 이 메소드를 통해 pet이 drag가 가능하게 된다this.pet.input.enableDrag(); this.apple = this.gam..

//this game will have only 1 statevar GameState = { // initiate some game-level settings // 게임이 시작하면서 init을 통해 일반적인 세팅을 해준다 init: function() { // scaling options // 화면 크기 설정한 픽셀만큼 꽉 채워서 보여주도록 설정 this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // 수직, 수평 정렬 활성화 this.scale.pageAlignHorizontally = true; this.scale.pageAlignVertically = true; }, //load the game assets before the game starts prel..

animationvar self = this; var animal; animalData.forEach(function(element){ // create each animal and save it's properties // 위에서 프레임으로 잡아줬기 때문에 맽 끝에 프레임 번호를 넣어줘야 한다 animal = self.animals.create(-1000, self.game.world.centerY, element.key, 0); //I'm saving everything that's not Phaser-related in an object animal.customParams = {text: element.key}; //anchor point set to the center of the sprite a..

반복문과 .next()// 반복문을 돌리면서 그룹 내 모든 element에 원하는 attribute를 설정한다animalData.forEach(function(element){ //create each animal and put it in the group animal = self.animals.create(-1000, self.game.world.centerY, element.key); //I'm saving everything that's not Phaser-related in a custom property animal.customParams = {text: element.text}; //anchor point set to the center of the sprite animal.anchor.set..

반응형 화면 조절 create: function(){ // 반응형으로 화면을 꽉 채워서 보여준다 this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL; // 반응형으로 수직, 수평 정렬이 되도록 한다 this.scale.pageAlignHrizontally = true; this.scale.pageAlignVertically = true; } 클릭 이벤트 설정, pixel 단위 인식 설정 //left arrow allow user input //leftarrow 가 input이 가능하도록 한다 this.leftArrow.inputEnabled = true; // inputEnabled가 true 가 되었으므로 설정할 수 있는 attribute // pixelPerf..

기본 구조// 새로운 game object를 만든다// 640 x 360 dimention 부여// 게임이 브라우저에서 어떻게 render 될지 설정// Phaser.AUTO 설정시 1순위 WEB G.L / 2순위 CanvasRenderervar game = new Phaser.Game(640, 360, Phaser.AUTO) // 게임의 로직을 담당하는 GameState를 만든다// 각각의 keyword는 불변이다var GameState = { // 이미지, 오디오와 같은 필요한 파일을 로드 preload: function(){ }, // preload가 완전히 종료된 후 call 되는 create create: function(){ }, // 초당 수 회 실행될 함수(충돌이나 사용자로부터의 입력등을 ..