이것은 자바 스크립트와 페이저로 Slither.io를 만드는 튜토리얼 시리즈의 여섯 번째 부분입니다! Part 1을 처음 보시거나 Part 5로 돌아 가시면됩니다.
예제를 살펴보고 이 부분의 소스 코드를 살펴보십시오.
그림자 개념 및 목표
시리즈의 이 부분에서는 뱀 아래에 회색 그림자를 추가 할 것입니다. 우리는 이 그림자가 색을 바꿀 수 있다는 점에서 유연 할 것이므로 플레이어가 스페이스 바를 눌러 속도를 높이면 그림자가 켜질 수 있습니다. 그것 이외에, 우리는 단순히 뱀 아래에 머물러있는 그림자가 필요합니다.이미지
Assets 폴더를 보고 white-shadow.png를 보십시오. 왜 흰색입니까? 우리는 이제 스프라이트에 어떤 색조도 줄 수 있으므로 곧 살펴 보겠습니다. 뱀의 섹션 아래에 이러한 이미지 스프라이트 그룹을 추가 한 다음 뱀과 함께 이동합니다.그림자
이제 shadow.js를보세요. 먼저 Shadow 함수를 만듭니다.Shadow = function(game, sections, scale) {
this.game = game;
this.sections = sections;
this.scale = scale;
this.shadowGroup = this.game.add.group();
this.shadows = [];
this.isLightingUp = false;
this.lightStep = 0;
this.maxLightStep = 3;
this.lightUpdateCount = 0;
this.updateLights = 3;
this.darkTint = 0xaaaaaa;
this.lightTintBright = 0xaa3333;
this.lightTintDim = 0xdd3333;
}
여기서 그림자 배열을 만들고, 색상 변경 시퀀스를 처리하기 위해 일부 변수를 초기화하고, 실제로 다른 그림자 색조에 대한 일부 속성을 설정합니다.
그림자 추가
다음으로 쉐도우 스프라이트를 추가하는 메소드가 필요합니다. 그림자 프로토 타입의 add 메서드는 다음과 같습니다.add: function(x, y) {
var shadow = this.game.add.sprite(x, y, "shadow");
shadow.scale.setTo(this.scale);
shadow.anchor.set(0.5);
this.shadowGroup.add(shadow);
this.shadows.push(shadow);
}
지정된 위치에 그림자 스프라이트를 추가 한 다음 그룹에 추가합니다. Snake 클래스를 돌아 보면 각 뱀 섹션마다 하나의 그림자가 추가 된 것을 볼 수 있습니다.
업데이트
이제 뱀 섹션 아래로 그림자를 이동하기 위해 업데이트 메소드가 필요합니다.update: function() {
var lastPos = null;
for (var i = 0 ; i < this.sections.length ; i++) {
var shadow = this.shadows[i];
var pos = {
x: this.sections[i].body.x,
y: this.sections[i].body.y
};
// 이전 그림자가 같은 위치에 있으면 그림자를 숨 깁니다.
if (lastPos && pos.x == lastPos.x && pos.y == lastPos.y) {
shadow.alpha = 0;
shadow.naturalAlpha = 0;
}
else {
shadow.alpha = 1;
shadow.naturalAlpha = 1;
}
// 각 그림자를 뱀 섹션 아래에 배치합니다.
shadow.position.x = pos.x;
shadow.position.y = pos.y;
lastPos = pos;
}
// 밝은 색조로 그림자를 연다.
if (this.isLightingUp) {
this.lightUpdateCount++;
if (this.lightUpdateCount >= this.updateLights) {
this.lightUp();
}
}
// 그림자를 어둡게 만든다.
else {
for (var i = 0 ; i < this.shadows.length ; i++) {
var shadow = this.shadows[i];
shadow.tint = this.darkTint;
}
}
}
코드의 첫 번째 부분은 각 그림자를 뱀 섹션과 같은 위치로 이동시킵니다. 두 개의 그림자가 같은 위치에 있으면 알파를 0으로 설정하여 그림자 중 하나를 숨 깁니다. 이렇게 하면 섹션이 추가 될 때 뱀의 뒤쪽에 그림자 스프라이트가 스태킹 되지 않습니다. 그런 다음 isLightingUp 속성을 기반으로 그림자 스프라이트 색조를 변경합니다.
Lighting Up
업데이트에서 호출하는 lightUp 메서드를 살펴 보겠습니다.lightUp: function() {
this.lightUpdateCount = 0;
for (var i = 0 ; i < this.shadows.length ; i++) {
var shadow = this.shadows[i];
if (shadow.naturalAlpha > 0) {
// 그림자가 일정하지 않게 교번 효과를 만듭니다.
if ((i - this.lightStep) % this.maxLightStep === 0 ) {
shadow.tint = this.lightTintBright;
}
else {
shadow.tint = this.lightTintDim;
}
}
}
// 그림자 색조를 대체하는 방법을 결정하기 위해 카운터를 사용합니다.
this.lightStep++;
if (this.lightStep == this.maxLightStep) {
this.lightStep = 0;
}
}
이 방법은 밝은 색조로 그림자를 밝게 합니다. 더 어두운 색과 밝은 색으로 번갈아 가며 실제 게임과 같이 그림자가 돋보입니다.
스케일과 파괴
뱀의 다른 부분과 마찬가지로 그림자도 크기를 조정하고 파괴해야 합니다. 다음은 스케일 방법입니다.setScale: function(scale) {
this.scale = scale;
for (var i = 0 ; i < this.shadows.length ; i++) {
this.shadows[i].scale.setTo(scale);
}
}
그리고 여기 파괴 방법이 있습니다 :
destroy: function() {
for (var i = this.shadows.length - 1 ; i >= 0 ; i--) {
this.shadows[i].destroy();
}
}
뱀
Snake 클래스에 그림자를 구현해 보겠습니다.this.shadow = new Shadow(this.game, this.sections, this.scale);
Snake의 addSectionAtPosition 메소드에서 각 섹션에 하나씩 그림자 스프라이트를 추가해야합니다.
this.shadow.add(x,y);
그런 다음 뱀 업데이트 메서드에서 그림자 업데이트 메서드가 필요합니다.
this.shadow.update();
그리고 그림자는 뱀 파괴 방법에 있는 방법을 파괴한다 :
this.shadow.destroy();
그리고 그것으로 그림자가 구현되었습니다. 마지막 부분에서 우리는 뱀을 위한 음식을 구현하고 시리즈를 마무리 할 것입니다.
댓글 없음:
댓글 쓰기