Phaser로 HTML5를 사용하여 비슷한 것을 만들려고합니다. 우리는 gane을 2 차원 게임으로 축소하여 시각적 인 매력을 잃지 만 세로 모드로 재생할 수 있도록해야합니다. 이는 흥미로운 기능입니다.
모든 무한 주자들에게는 "무한한"것이 없으며 플레이어는 움직이지 않을 것입니다. 그러나 무한한 세계를 뛰어 다니는 플레이어의 아이디어를주는 것은 플레이어를 향해 움직이는 전체 게임입니다.
또한 경로의 반대쪽에 나타나는 경로의 한 쪽에서 플레이어가 사라질 수 있으므로 두 개의 플레이어 스프라이트가 필요합니다.이 경우 "나는 밖으로 나가고 있습니다"와 "나는 움직이고 있습니다"라는 효과가 각각 발생합니다 하나는 자체 스프라이트 및 트윈이 있습니다.
마지막으로 트윈과 타일이 재사용되고 게임이 시작되면 새로운 자산을 만들 필요가 없습니다.
게임을 살펴 보겠습니다.
캔버스의 왼쪽 / 오른쪽 반을 클릭하거나 탭하면 그에 따라 영웅이 이동합니다. 모바일 장치가있는 경우이 링크에서 직접 재생하십시오.
그리고 이것은 완전히 주석이 달린 소스 코드입니다. 영웅이 경로를 감쌀 때 두 개의 스프라이트를 사용하는 방식과 여러 해상도를 관리하는 방식에주의를 기울이십시오.
// 게임 자체
var game;
// 게임 옵션이있는 전역 개체
var gameOptions = {
// 게임의 폭 (픽셀 단위)
gameWidth: 640,
// 타일에 적용 할 색조
tileColors: [0x00ff00, 0x00aa00],
// 보이는 첫 번째 프로토 타입에서는 표시되는 타일의 수가 더 많으면
// 더 잘 작동합니다.
verticalTiles: 9
}
window.onload = function() {
// 창 너비와 높이 결정
var windowWidth = window.innerWidth;
var windowHeight = window.innerHeight;
// 가로 모드 인 경우 가로 세로 모드를 위장하도록 창 높이를 설정합니다.
if(windowWidth > windowHeight){
windowHeight = windowWidth * 1.8;
}
// 게임 높이 정의하기
var gameHeight = windowHeight * gameOptions.gameWidth / windowWidth;
// 게임 자체의 생성
game = new Phaser.Game(gameOptions.gameWidth, 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.image("tile", 'tile.png');
game.load.image("hero", 'hero.png');
},
create: function(){
game.state.start("PlayGame");
}
}
var playGame = function(game){}
playGame.prototype = {
create: function(){
// 이동 거리 계산에 유용합니다.
this.moves = 0;
// 게임 높이와 원하는 수직 타일의 양에 따라 타일 크기를 결정합니다.
this.tileSize = game.height / gameOptions.verticalTiles;
// 배치 된 타일의 양, 다른 색상으로 짝수 / 홀수 타일을 색칠하는 데 유용합니다.
var placedTiles = 0;
// 타일을 게임의 중앙에두기위한 수평 오프셋
var offsetX = (game.width - this.tileSize * 3) / 2;
// 모든 타일을 포함 할 배열
this.tileArray = [];
// 모든 타일을 포함 할 그룹
this.tileGroup = game.add.group();
// 게임 중앙에 타일이 배치되도록 그룹 배치
this.tileGroup.x = offsetX;
// 하나의 타일로 지형을 스크롤하는 트윈을 만듭니다.
this.tileTween = game.add.tween(this.tileGroup).to({
y: this.tileSize
}, 100, Phaser.Easing.Linear.None);
// 끝없는 주자는 가짜이기 때문에 지형을 타일로 이동 한 다음 위치를 재설정
// 한 다음 가장 낮은 타일을 맨 위로 이동하여 무한한 지형의 아이디어를
// 제공합니다.
this.tileTween.onComplete.add(function(){
this.tileGroup.y = 0;
this.tileGroup.forEach(function(child){
child.y += this.tileSize;
}, this);
for(var i = 0; i < 3; i++){
this.tileArray[this.moves % this.tileArray.length][i].y -=
(gameOptions.verticalTiles + 1) * this.tileSize
}
this.moves ++;
}, this);
// 지형 타일 배치 및 색조 지정
for(var i = 0; i < gameOptions.verticalTiles + 1; i ++){
this.tileArray[i] = [];
for(var j = 0; j < 3; j ++){
var tile = game.add.sprite(j * this.tileSize, game.height - i *
this.tileSize, "tile");
tile.anchor.set(0, 1);
tile.width = this.tileSize;
tile.height = this.tileSize;
tile.tint = gameOptions.tileColors[placedTiles % 2];
this.tileGroup.add(tile);
this.tileArray[i][j] = tile;
placedTiles ++;
}
}
// 열 번호의 범위는 0에서 2 사이입니다. 영웅은 중간에있는 열 1에서 시작됩니다. this.heroColumn = 1;
// 영웅이 움직일 수있는 순간.
this.heroCanMove = true;
// 영웅 스프라이트 추가 및 크기 조정
this.hero = game.add.sprite(this.tileGroup.x + this.tileSize,
game.height - 2 * this.tileSize, "hero");
this.hero.width = this.tileSize;
this.hero.height = this.tileSize;
this.hero.anchor.set(0, 1);
// 스프라이트를 이동하는 트윈
this.heroTween = game.add.tween(this.hero);
// 트윈이 완료되면 호출 할 콜백 함수
this.heroTween.onComplete.add(function(){
this.heroCanMove = true;
this.hero.x = this.tileGroup.x + this.tileSize * this.heroColumn;
this.heroWrap.visible = false;
}, this);
// 이것은 두 번째 영웅 스프라이트이며, 랩 효과를 생성하는 데 사용됩니다.
this.heroWrap = game.add.sprite(this.tileGroup.x + this.tileSize,
game.height - 2 * this.tileSize, "hero");
this.heroWrap.width = this.tileSize;
this.heroWrap.height = this.tileSize;
this.heroWrap.anchor.set(0, 1);
this.heroWrap.visible = false;
this.heroWrapTween = game.add.tween(this.heroWrap);
// 히어로와 wrap 히어로를 모두 숨기려면 마스크를 타일 바깥쪽에 배치합니다.
var mask = game.add.graphics(this.tileGroup.x, this.tileGroup.y);
mask.beginFill(0xffffff);
mask.drawRect(0, 0, this.tileSize * 3, game.height);
this.hero.mask = mask;
this.heroWrap.mask = mask;
// 플레이어 입력 대기 중
game.input.onDown.add(this.moveHero, this);
},
moveHero: function(e){
// 영웅이 움직일 수 있습니까?
if(this.heroCanMove){
// 지형을 움직이는 트윈을 시작합니다.
this.tileTween.start();
// 영웅은 순간에 움직일 수 없다.
this.heroCanMove = false;
// 플레이어가 캔버스의 왼쪽 절반을 클릭 / 터치하면 영웅의 방향을 왼쪽으로
// 설정하거나 그렇지 않으면 왼쪽으로 설정합니다.
var direction = e.position.x < game.width / 2 ? -1 : 1;
// 영웅 다음 열 계산하기
var nextColumn = Phaser.Math.wrap(this.heroColumn + direction, 0, 3);
// "to"메서드로 웨이 포인트를 추가하지 못하도록 hero tween 타임 라인을
// 빈 배열로 설정합니다.
this.heroTween.timeline = [];
// 새로운 영웅의 목적지
this.heroTween.to({
x: this.hero.x + this.tileSize * direction
}, 100, Phaser.Easing.Cubic.InOut, true);
// 랩핑 영웅이 게임에 들어간 경우입니다.
if(Math.abs(nextColumn - this.heroColumn) != 1){
// 보이게 만든다.
this.heroWrap.visible = true;
// 마지막 열 밖으로 배치
this.heroWrap.x = nextColumn == 0 ? this.tileGroup.x -
this.tileSize: this.tileGroup.x + 3 * this.tileSize;
// 트윈 타임 라인 재설정
this.heroWrapTween.timeline = [];
// 마지막으로 랩 영웅 이동하기
this.heroWrapTween.to({
x: this.heroWrap.x + this.tileSize * direction
}, 100, Phaser.Easing.Cubic.InOut, true);
}
this.heroColumn = nextColumn;
}
}
}
다음 번엔 GUI를 배치하기 위해 검은 색 막대를 사용하면서 소스 코드를 다운로드 할 것입니다.
"FLIPPING LEGEND" 에 관한 모든 게시물보기 게임.
댓글 없음:
댓글 쓰기