스프라이트킷 모험 pt2

SKCropNode 및 크기 조정, SpriteKit Adventures pt2

첫 번째 게시물에서 화면의 왼쪽 상단 섹션에 내 fuelGauge를 추가하는 좋은 방법을 찾았습니다. 이제 해당 연료에 애니메이션을 적용하여 소비량을 반영해 보겠습니다.

역사

우리가 여기까지 온 방법에 관심이 있다면 여기로 이동하여 . 그러나 당신이 속도를 낼 수 있다면, 그것을 시작합시다!

우리의 여정이 시작됩니다!

설명에서 언급했듯이 내 아이디어는 SKCropNode를 추가하여 위아래로 움직여 연료 소비를 "애니메이션"할 수 있도록 하는 것입니다. 나는 그것을 정말 잘 설명하는 Paul Hudson에 의해 이 게시물을 찾았습니다.

따라서 기본 게이지를 먼저 배치한 다음 그 위에 연료량을 자르는 SKCropNode를 배치합니다.

// MARK: Fuel Gauge Base (this is basically the gauge without the bright green fuel texture)-------------------------------
let fuelGaugeBase = SKSpriteNode()
fuelGaugeBase.size = CGSize(width: fuelGaugeHeight/23, height: fuelGaugeHeight)
fuelGaugeBase.position = CGPoint(x: 16, y: playableArea.maxY - fuelGaugeHeight/1.5)
fuelGaugeBase.texture = SKTexture(imageNamed: "fuelGaugeBase")
addChild(fuelGaugeBase)
// ------------------------------------------------------------------------------------

// MARK: Fuel Gauge -------------------------------
fuelGauge = SKSpriteNode()
// We are using 0's here since its positioned in regards to the parent, or SKCropNode
fuelGauge.position = CGPoint(x: 0, y: 0)
fuelGauge.texture = SKTexture(imageNamed: "fuelGauge")
fuelGauge.size = CGSize(width: 5, height: fuelGaugeHeight * 0.97)
// ------------------------------------------------------------------------------------

// MARK: Crop Node -------------------------------
let cropNode = SKCropNode()
cropNode.position = CGPoint(x: 16, y: playableArea.maxY - fuelGaugeHeight/1.5)
cropNode.maskNode = SKSpriteNode(imageNamed: "fuelGaugeMask")
cropNode.addChild(fuelGauge)
cropNode.zPosition = 1
addChild(cropNode)
// ------------------------------------------------------------------------------------

지금까지는 위치가 괜찮은 것 같고 크기도 훌륭합니다.

다음으로 FuelGauge를 위아래로 이동하여 연료량을 마스킹합니다. SKCropNode의 하위인 기본 SKSpriteNode를 이동하면 그렇게 할 수 있을 것 같습니다.

노드의 Y 위치를 변경하기만 하면 됩니다. -100이면 괜찮은 결과를 얻을 수 있습니다.

//...
fuelGauge.position = CGPoint(x: 0, y: -100)
//...

F * k me ... 전혀 좋아 보이지 않습니다. 게이지를 마스킹하지만 마스크의 크기는 우리가 추가한 *fuelGauge 노드의 크기와 전혀 비슷하지 않습니다. 여기서 정의한 스프라이트의 크기를 선택합니다.

cropNode.maskNode = SKSpriteNode(imageNamed: "fuelGauge")

주위를 둘러보고 SKCropNode 크기를 FuelGauge와 동일하게 만들 수 있는지 확인할 시간입니다. 여기에서 사용할 수 있는 다른 옵션이 있지만 정말 잘라내고 싶습니다. 이유 때문에.

솔루션 🏆

비슷한 문제를 가진 사람을 찾지 못했기 때문에 내가 문제라는 것뿐입니다 😁 주말에 잠시 휴식을 취하고 (🍻🍻🍻) 믿거 나 말거나 앉아서 5 분 후에 다시 코드를 보았습니다. , 그리고 그것은 나를 때렸다!

그것은 실제로 매우 명백했습니다. 마스크에 스프라이트를 전혀 사용하지 않으려고 시도한 적이 없었습니다.

우리의 .maskNode는 스프라이트 크기를 선택하고 재생 가능한 영역에 따라 모든 크기를 변경해도 상관하지 않습니다. 우리가 지금 사용하고 있는 SIZE만 알면 됩니다!

이건 한번 해보자 ⬇️

//...
cropNode.maskNode = SKSpriteNode(color: .green, size: CGSize(width: fuelGauge.size.width, height: fuelGauge.size.height * 0.97))
//...

이제 그게 내가 말하는 '한판 승부입니다! 🤜💥🤛

이것을 연마합시다 🇵🇱

이제 크기가 작동하므로 마스크 내부의 스프라이트를 위쪽으로 이동하여 연료 사용량을 애니메이션해 보겠습니다. 여분의 "물건"으로 두 추진기가 작동하는 동안 Lander가 더 많은 연료를 소비하도록 만들 것입니다.

먼저 스프라이트의 Y 위치를 유지하기 위해 globalVariable을 선언합니다.

var fuelConsumption : CGFloat = 0
.
.
.
fuelGauge.position = CGPoint(x: 0, y: fuelConsumption)

그리고 새로 생성된 updateFuel() 메서드 내부에 소비 로직을 배치합니다.

func updateFuel() {

    // Determine consumption
    switch touchCount {
    case 1:
        fuelConsumption += 0.3
    case 2:
        fuelConsumption += 0.45
    default:
        fuelConsumption -= (isTouching && fuelConsumption > 0) ? 0.8 : 0.0
    }

    // Update sprite position
    fuelGauge.position.y = fuelConsumption
}

물론 우리는 기본 update() 메서드의 맨 처음에 추가할 것입니다.

override func update(_ currentTime: TimeInterval) {

    updateFuel()
    .
    .
    .

도네조 워싱턴!

그리고 여기에 최종 제품이 있습니다(현재로서는) 우리 Lander는 이제 연료를 재충전할 뿐만 아니라 소비할 수 있습니다.
이것이 IRL 비용이 얼마인지 확실하지 않지만 헤이, 그게 드라이버 문제입니다. 이제 내 😉.
또한 일종의 멍청한 농담으로 연료 소비량을 증가시켰습니다. 왜냐하면 우리는 우주에 있기 때문입니다 🛰.

이것은 실험적인 게시물이었고, 당신이 그것을 좋아하는지...아니면 정말 관심이 있습니다!

에서 알려주시면 정말 감사하겠습니다.
나에게 "짜증난다 친구"라는 메시지를 보내도 나에게는 세상을 의미할 것입니다 🌎.

어려운 감정은 없습니다. 상상할 수 있는 것보다 정직함에 감사드립니다.