Phaser CE를 2.8.2로 업데이트하면서 3 년 된 프로토 타입 인 Spellfall을 최신 Phaser 버전으로 업데이트하면서 소스 코드에 더 많은 의견을 추가하고 트위터를 재사용하는 트위터를 실제로 사용하여 트윈을 재사용하여 메모리를 절약했습니다. , CPU 성능을 향상시킵니다.
모든 플레이어 이동시 새 트윈을 만드는 대신 하나의 트윈을 만들고 이동할 타일에 따라 대상 속성을 업데이트합니다.
또한 new to 메서드는 트위닝 대상을 업데이트 할 때마다 호출됩니다. 마지막으로, 다중 호출이 최종 트윈 대상 앞에 "중간 지점"을 만들지 않도록하려면 타임 라인 속성을 빈 배열로 다시 설정해야합니다.
다양한 스레드와 포럼에서 트위터 대상을 "재설정"하는 방법을 묻는 사람들을 만나는 것처럼 이것은 매우 중요합니다.
음, 그냥 타임 라인 속성을 빈 배열로 설정하십시오.
소스를 살펴 보겠습니다.
// 게임 자체
var game;
// 모든 게임 옵션을 포함하는 전역 변수
var gameOptions = {
// 게임의 폭 (픽셀 단위)
gameWidth: 300,
// 게임의 높이 (픽셀 단위)
gameHeight: 300,
// 각 게임 타일의 크기 (픽셀 단위)
tileSize: 50,
// 행 / 열당 타일 수
fieldSize: 6,
// 게임에서 다른 종류의 타일
tileTypes: 6,
// 플레이어가 픽업 할 때 타일에 적용될 확대 / 축소 비율
pickedZoom: 1.1
}
window.onload = function() {
game = new Phaser.Game(gameOptions.gameWidth,
gameOptions.gameHeight);
game.state.add("PreloadGame", preloadGame);
game.state.add("PlayGame", playGame);
game.state.start("PreloadGame");
}
var preloadGame = function(game){}
preloadGame.prototype = {
preload: function(){
//이 네 줄은 브라우저 창 중앙에 게임을 유지하면서
//게임을 최대 허용 크기로 실행합니다.
game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
game.scale.pageAlignHorizontally = true;
game.scale.pageAlignVertically = true;
game.stage.disableVisibilityChange = true;
// 모든 타일을 포함하는 스프라이트 시트를 로드합니다.
game.load.spritesheet("tiles", "tiles.png",
gameOptions.tileSize,
gameOptions.tileSize);
},
create: function(){
game.state.start("PlayGame");
}
}
var playGame = function(game){}
playGame.prototype = {
create: function(){
// 우리가 사용하고 전체 프로토 타입을 통해 재활용하는 트윈 this.tileTween = game.add.tween();
// 트윈이 완료되면 tileArray 배열을 업데이트하고 입력을
// 다시 기다립니다.
this.tileTween.onComplete.add(function(){
this.tileGroup.add(this.tileArray[this.landingRow]
[this.landingCol]);
game.input.onDown.add(this.pickTile, this);
var temp = this.tileArray[this.landingRow]
[this.landingCol];
this.tileArray[this.landingRow][this.landingCol] =
this.tileArray[this.movingRow][this.movingCol];
this.tileArray[this.movingRow][this.movingCol] = temp;
}, this);
// 현재 타일을 드래그 할 수 없습니다.
this.dragging = false;
// tileArray는 모든 타일을 포함 할 2 차원 배열입니다.
this.tileArray = [];
// 그룹을 추가합니다. movingTileGroup은 tileGroup 위에 있어야
// 하므로 이동하는 타일은 항상 더 높은 z 인덱스를 가지며 항상
// 게임의 상단에 위치합니다.
this.tileGroup = game.add.group();
this.movingTileGroup = game.add.group();
// 스테이지에 모든 타일 배치
for(var i = 0; i < gameOptions.fieldSize; i++){
this.tileArray[i] = [];
for(var j = 0; j < gameOptions.fieldSize; j++){
// 0과 tileTypes - 1 사이의 난수를 버림 var randomTile = game.rnd.integerInRange(0,
gameOptions.tileTypes - 1);
// 타일 자체의 생성
var theTile = game.add.sprite(j *
gameOptions.tileSize + gameOptions.tileSize / 2, i* gameOptions.tileSize + gameOptions.tileSize / 2,
"tiles", randomTile);
// 타일 등록 포인트를 중앙에 설정합니다.
theTile.anchor.setTo(0.5);
// tileArray에 타일 추가
this.tileArray[i][j] = theTile;
// 전화 통신 전화
this.tileGroup.add(theTile);
}
}
// 플레이어 입력 대기 중
game.input.onDown.add(this.pickTile, this);
},
pickTile: function(e){
// 입력 좌표 저장
this.startX = e.position.x;
this.startY = e.position.y;
// 고른 행 및 열 검색
this.movingRow = Math.floor(this.startY /
gameOptions.tileSize);
this.movingCol = Math.floor(this.startX /
gameOptions.tileSize);
// 타일을 상위 그룹으로 이동하므로 반드시 스테이지 상단에
// 위치해야합니다. this.movingTileGroup.add(this.tileArray[this.movingRow]
[this.movingCol]);
// 타일 확대 / 축소
this.tileArray[this.movingRow][this.movingCol].width =
gameOptions.tileSize * gameOptions.pickedZoom;
this.tileArray[this.movingRow][this.movingCol].height =
gameOptions.tileSize * gameOptions.pickedZoom;
// 이제 끌기가 허용됩니다.
this.dragging = true;
// 리스너 업데이트하기
game.input.onDown.remove(this.pickTile, this);
game.input.onUp.add(this.releaseTile, this);
},
releaseTile: function(){
// 리스너를 제거합니다.
game.input.onUp.remove(this.releaseTile, this);
// 원래 그룹에 타일을 반환합니다.
this.tileGroup.add(this.tileArray[this.movingRow]
[this.movingCol]);
// 방문 행 및 열 결정
this.landingRow = Math.floor(this.tileArray[this.movingRow]
[this.movingCol].y / gameOptions.tileSize);
this.landingCol = Math.floor(this.tileArray[this.movingRow]
[this.movingCol].x / gameOptions.tileSize);
// 움직이는 타일을 원래 크기로 재설정
this.tileArray[this.movingRow][this.movingCol].width =
gameOptions.tileSize;
this.tileArray[this.movingRow][this.movingCol].height =
gameOptions.tileSize;
// 시각적으로도 tileArray 배열에서도 타일을 서로 바꿉니다.
this.tileArray[this.movingRow][this.movingCol].x =
this.landingCol * gameOptions.tileSize +
gameOptions.tileSize / 2;
this.tileArray[this.movingRow][this.movingCol].y =
this.landingRow * gameOptions.tileSize +
gameOptions.tileSize / 2;
// ... 그러나 이동하고 착륙 타일이 다른 경우에만!
if(this.movingRow != this.landingRow || this.movingCol !=
this.landingCol){
// 위쪽 그룹으로 이동하기 위해 타일 배치
this.movingTileGroup.add(this.tileArray[this.landingRow]
[this.landingCol]);
// 대상 타일이 트윈으로 시작 타일로 이동합니다.
this.tileTween.target = this.tileArray[this.landingRow]
[this.landingCol];
// 중요 !! 점점 더 많은 웨이 포인트를 만들지 못하도록
// 타임 라인을 재설정해야합니다.
this.tileTween.timeline = [];
// 트윈 목적지 설정
this.tileTween.to({
x: this.movingCol * gameOptions.tileSize +
gameOptions.tileSize / 2,
y: this.movingRow * gameOptions.tileSize +
gameOptions.tileSize / 2
}, 800, Phaser.Easing.Cubic.Out);
this.tileTween.start();
}
// else 플레이어가 다른 타일을 바꿀 수있게합니다.
else {
game.input.onDown.add(this.pickTile, this);
}
// 더 이상 끌지 않습니다.
this.dragging = false;
},
update: function(){
if(this.dragging){
// 시작 위치에서 현재 입력 위치까지의 x 및 y 거리 확인
var distX = game.input.worldX - this.startX;
var distY = game.input.worldY - this.startY;
// 타일 위치 업데이트하기
this.tileArray[this.movingRow][this.movingCol].x =
this.movingCol * gameOptions.tileSize +
gameOptions.tileSize / 2 + distX;
this.tileArray[this.movingRow][this.movingCol].y =
this.movingRow * gameOptions.tileSize +
gameOptions.tileSize / 2 + distY;
}
}
}
전체 프로토 타입에 대해 하나의 트윈 만 사용하면 Phaser가 가비지 수집을 관리하지 않아 전반적인 성능이 향상되고 좋은 방법이되기 때문에 큰 발전입니다.
다음 번엔 더 많은 애니메이션을 추가하는 한편 소스 코드를 다운로드 할 수 있습니다.
"SPELLFALL"게임에 관한 모든 글보기
댓글 없음:
댓글 쓰기