【Swift】SpriteKitの使い方。シェイプノードを使って多角形や円を描画する。【Swift】SpriteKitの使い方。シェイプノードを使って多角形や円を描画する。Sceneファイルの編集画面(シーンエディタ)で設定できるSKShapeNode(以下、シェイプノード)について説明する。シェイプノードとは、多角形や円などの図形をシーンに描画するノードである。ベタ塗りの図形を描画することが多いので、主に画像を表示するSKSpriteNodeより高速かと思いきや、パフォーマンスはSKSpriteNodeのほうが高いようなことが公式リファレンスに記載されている。sparingly.シェイプノードを使ってみる実際にシーンに図形を描画してみよう。以降の手順を行う前のXcodeプロジェクトをGitHubに置いたので、試してみる方はご利用下さい。Sceneファイル(以下、SKSファイル)に配置しておいた。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/08/spritekit_shape_before_test_movie.mp4下図赤枠のSKSファイルを選択してシーンエディタを開く。Node(Square)」をシーンに配置する(紫矢印)。Colorに青色を設定する。以下は実際のプレイ動画https://hajihaji-lemon.com/apli/wp-content/uploads/2016/08/spritekit_shape_rect_movie.mp4設定項目を説明するアトリビュートインスペクタの設定項目を1つずつ説明する。Nameノードの名前を設定する。ソースコードからこのノードにアクセスするときの識別子になる。他ノードでParentを指定するときに使われる。Parent親ノードを設定する。デフォルトではシーン名が設定されている。子ノードは親ノードと同じ動きをする。親ノードが回転すると子ノードも一緒に回転する。Positionノードの座標を設定する。シーンに配置されているノードをドラッグ&ドロップで運ぶと、この設定値も自動で更新される。PositionノードのZ軸の位置を指定する。SKSpriteNodeと意味は同じ。Positionとは」Rotationノードの回転角度を設定する。アンカーポイントを中心に、指定した角度で回転したノードが表示される。Scale配置したときの四角形のX方向とY方向大きさをそれぞれ1として、表示する図形の大きさをの倍率で設定する。マイナスは設定できない。Color線の色を設定する。Color図形を塗りつぶす色を設定する。Width線の太さを設定する。Widthアンチエイリアスで描かれている半透明の線の太さを設定する。アンチエイリアスがOFFになっている場合は描画されない。Alpha図形の透過度を設定する。0は完全に見えなくなり、0.5は半透明、1.0以上は透過されずに見える。Antialiasedチェックを入れると線にアンチエイリアスが適用される。アンチエイリアスとは、境界線のギザギザ感を目立たなくするために境界線に沿って描く中間色のことをいう。これによって、曲線が滑らかに見える。Texture線を画像にする場合に設定する。下図は鳥の画像を設定した場合。Texture図形の塗りつぶしを画像にする場合に設定する。下図は背景画像を設定した場合。円を描画するSKSファイルで配置するシェイプノードは長方形しか描画することができない。長方形以外の多角形や円形を描画したい場合はソースコードで実装する。タップした位置に半径60ポイントの円を描画するにはTestScene.swiftのtouchesBeganメソッドを以下のように変更する。//タッチした座標のノードを取得する。//鳥ノードの場合、物理ボディを設定する。//円形のシェイプノードを作成する。//シーンに追加する。{//タッチした座標のノードを取得する。SKSpriteNode//鳥ノードの場合、物理ボディを設定する。{//円形のシェイプノードを作成する。SKColor.grayColor()//シーンに追加する。self.addChild(circle)}}以下は実際のプレイ動画。鳥以外の場所をタップすると円が描画される。https://hajihaji-lemon.com/apli/wp-content/uploads/2016/08/spritekit_shape_circle_movie.mp4物理ボディを設定するシェイプノードもSKSpriteNodeと同様に物理ボディを設定して衝突させたり、重力の影響を受けさせたりできる。SKSファイルでは設定できない。TestScene.swiftのtouchesBeganメソッドに物理ボディの設定を追加した。//タッチした座標のノードを取得する。//鳥ノードの場合、物理ボディを設定する。//円形のシェイプノードを作成する。//物理ボディを設定する。//シーンに追加する。{//タッチした座標のノードを取得する。SKSpriteNode//鳥ノードの場合、物理ボディを設定する。{//円形のシェイプノードを作成する。SKColor.grayColor()//物理ボディを設定する。false//シーンに追加する。self.addChild(circle)}}以下は実際のプレイ動画https://hajihaji-lemon.com/apli/wp-content/uploads/2016/08/spritekit_shape_circle_physics_body_movie.mp4多角形を描画するタップ位置を頂点とした多角形を描画するにはTestScene.swiftを以下のコードに変更する。鳥ノードをタップした段階で、物理ボディが設定された多角形を描画している。//SKSファイルに配置した鳥ノードを取得する。//タッチした座標のノードを取得する。//鳥ノードの場合、物理ボディを設定する。//鳥ノードに物理ボディを設定する。//多角形のシェイプノードを作成する。//シェイプノードに物理ボディを設定する。//シェイプノードをシーンに追加する。//パスが空の場合、タップ位置を始点にする。//パスが空ではない場合、タップ位置をパスに追加する。{//SKSファイルに配置した鳥ノードを取得する。{//タッチした座標のノードを取得する。SKSpriteNode//鳥ノードの場合、物理ボディを設定する。birdBrown){//鳥ノードに物理ボディを設定する。true//パスを閉じる。CGPathCloseSubpath(path)//多角形のシェイプノードを作成する。SKColor.grayColor()//シェイプノードに物理ボディを設定する。false//シェイプノードをシーンに追加する。true){//パスが空の場合、タップ位置を始点にする。{//パスが空ではない場合、タップ位置をパスに追加する。【Swift】SpriteKitの使い方。シーンエディタで非表示アクションを設定する。...【Swift】SpriteKitの使い方。シーンエディタのエミッターで画像を噴水のように放出する。...【Swift】SpriteKitの使い方。シーンを重ねて表示する。...【Swift】SpriteKitの使い方。物理運動の抵抗力を発生させて動きをスローにする。Sceneファイルの設定。カメラノードを使って画面をスクロールする。コメントをキャンセルメールアドレスが公開されることはありません。