CAShapeLayerの前にSKSpriteNodeを配置する方法は？

Question

私はCAShapeLayerの前でSKSpriteNodeを表示すると、これは私が使用していたコードです：

import SpriteKit 
import GameplayKit 
import UIKit 

class GameScene: SKScene { 

    let progressLayer = CAShapeLayer() 

    override func didMove(to view: SKView) { 

     let circle = UIView(frame: CGRect(x: 0, y: 0, width: self.size.width, height: self.size.height)) 
     view.addSubview(circle) 
     view.sendSubview(toBack: circle) 

     progressLayer.frame = view.bounds 
     progressLayer.path = progressPath.cgPath 

     progressLayer.fillColor = UIColor.clear.cgColor 
     progressLayer.strokeColor = UIColor.green.cgColor 
     progressLayer.lineWidth = 20.0 

     let animation2 = CABasicAnimation(keyPath: "strokeEnd") 
     animation2.fromValue = 0.0 
     animation2.toValue = 1.0 
     animation2.duration = 1 
     animation2.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) 

     progressLayer.add(animation2, forKey: "drawLineAnimation") 

     circle.layer.addSublayer(progressLayer) 

     var popup = SKSpriteNode(imageNamed: "popupWorking.png") 
     popup.anchorPoint = CGPoint(x: 0.5, y: 0.5) 
     popup.position = CGPoint(x: self.size.width/2, y: self.size.height/2) 
     popup.size = CGSize(width: 400, height: 200) 
     popup.zPosition = 10 
     self.addChild(popup) 
    } 
} 

しかし、私は、コードを実行すると、CAShapeLayerはSKSpriteNodeの前に表示され、どのように私は作るのですかSKSpriteNodeはCAShapeLayerの前に表示されますか？

Answer 1

ビュー・コントローラー・レベルでビュー階層を変更する必要があります。デフォルトでは、ビューコントローラのビューはSKViewです。別のUIViewをSKViewの後ろに配置する場合は、表示階層を調整する必要があります。

SKViewではなく、ビューコントローラのビューをUIViewに変更します。次に、このメインビューにサブビューとしてシェイプレイヤのビューを追加します。その後、SKViewをメインビューのサブビューとして追加します。

新しいビュー階層は次のようになります。

View Controller 
    – view (UIView) 
     - circle view (UIView with your CAShapeLayer as a sublayer) 
     - spritekit view (SKView) 

---

それは、このようにUIKitとSpriteKitを組み合わせることが可能ですが、SpriteKit世界内に収まるように容易になり、円を作成し直すことアニメーションはCAShapeLayerの代わりにSKSpriteNodeを使用します。

Answer 2

ここには、その1つの方法を示す遊び場があります。私は@nathanの提案に従った。

黄色の線は、SKShapeNodeを使用して描画されます。赤い影はその背後にアニメーション表示する必要があり、したがってCAShapeLayerを使用します。 （注：アニメーションシャドウパスは純粋なスプライトではるかに複雑なので、2つを混在させる必要がありました）

import SpriteKit 
import PlaygroundSupport 

private func invert(_ path: CGMutablePath) -> CGPath { 
    var rotation = CGAffineTransform(scaleX: 1.0, y: -1.0); 
    return path.copy(using: &rotation)!; 
} 

let bounds = CGRect(x: 0, y: 0, width: 400, height: 200) 
let uiview = UIView(frame: bounds) 
let pathview = UIView(frame: bounds) 
let skview = SKView(frame: bounds) 

PlaygroundPage.current.liveView = uiview 


// Define the path 
let path: CGMutablePath = CGMutablePath(); 
path.move(to: CGPoint(x:0, y:0)) 
path.addLine(to: CGPoint(x:200, y:100)) 


// Use CAShapeLayer to draw the red line 
var pathLayer: CAShapeLayer = CAShapeLayer() 
pathLayer.position = CGPoint(x: uiview.bounds.minX, y: uiview.bounds.minY + 200) 
pathLayer.path = invert(path) 
pathLayer.strokeColor = UIColor.red.cgColor 
pathLayer.fillColor = nil 
pathLayer.lineWidth = 10.0 
pathLayer.lineJoin = kCALineJoinBevel 
pathLayer.lineCap = kCALineCapRound 
pathLayer.zPosition = 3; 
let strokeAnimation = CABasicAnimation(keyPath: "strokeAnimation") 
strokeAnimation.duration = 2; 
strokeAnimation.fromValue = 0; 
pathview.layer.addSublayer(pathLayer); 
pathLayer.add(strokeAnimation, forKey: "strokePath"); 

uiview.addSubview(pathview) 

//Use SKShapeNode to draw the yellow line 
let pathShape: SKShapeNode = SKShapeNode(path: path); 
pathShape.strokeColor = .white; 
pathShape.lineWidth = 2.0; 
pathShape.zPosition = 20; 

// Create SK Scene 
let scene = SKScene(size: CGSize(width: 400, height: 200)) 
scene.scaleMode = SKSceneScaleMode.aspectFill 
scene.size = skview.bounds.size 
scene.addChild(pathShape); 
scene.backgroundColor = UIColor.clear; 
skview.backgroundColor = UIColor.clear 


skview.presentScene(scene); 
uiview.insertSubview(skview, aboveSubview: pathview)