【Swift/SpriteKit】SKSceneでタッチイベント
タッチイベント時にしょっちゅう使いそうなことをメモ。
タッチ感知の種類
// 画面に指が触れた瞬間の処理 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { // code } // 指が触れたまま動かした時の処理 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { // code } // 画面から指が離れた時の処理 override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { // code }
タッチ情報を取得
取得した情報（オプショナル）をアンラップする
override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { // nilチェックとアンラップ guard let touch = touches.first else { return } }
タッチされた位置
画面上の座標を取得
let touchedPos = touch.location(in: self)
タッチされた位置のノードを取得
let node = self.atPoint(touchedPos)
特定のノードをタッチした時の処理
「このオブジェクトをタッチしたらこうしたい」という時の処理。
// タッチ位置を取得 let touchedPos = touch.location(in: self) // タッチした位置にあるノードを取得 let node = self.atPoint(touchedPos) // タッチされたノードが任意のオブジェクトだった時 if node == self.sampleSprite { // code }
【Swift/SpriteKit】SKActionを制御する【繰り返しなど】
SKActionを扱う際の基本的なことだけの簡単なメモを。
アクションを順番に実行する（シーケンス）
// 右へ50移動 let move = SKAction.moveBy(x: +50, y: 0, duration: 0.2) // 左へ50移動 let moveRev = move.reversed() // アクション配列をシーケンスにする let sequence = SKAction.sequence([move,moveRev,moveRev,move]) // 実行 sprite.run(sequence)
アクションを繰り返す
繰り返す回数を指定
// 繰り返すアクション（シーケンス含む）と回数を指定 let repeatAction = SKAction.repeat(move, count: 5) // 実行 sprite.run(repeatAction)
永遠に繰り返す
// 繰り返すアクション（シーケンス含む）を指定 let repeatForever = SKAction.repeatForever(action) // 実行 sprite.run(repeatForever)
同時に実行
// 同時に起こすアクション let move = SKAction.moveBy(x: +50, y: 0, duration: 0.2) let rotate = SKAction.rotate(byAngle: CGFloat(M_PI * 2), duration: 0.2) // グループにまとめる let group = SKAction.group([move,rotate]) // 実行 sprite.run(group)
ウェイト（間を空ける）
秒数固定
// 1秒ウェイト let wait = SKAction.wait(forDuration: 1.0)
秒数をランダムにする
//2秒を中心として4秒の開きの中でランダムする let wait = SKAction.wait(forDuration: 2, withRange: 4)
アクション実行中に変数や関数を処理する
シーケンスに組み込んだり
let numPlus1 = SKAction.run({ num += 1 })
【Swift/SpriteKit】SKActionでオブジェクトを動かす
オブジェクトを動かす際の基本的なことだけの簡単なメモを。
移動
移動量を指定して移動
// アクションのインスタンスを生成 // 移動距離と速度を指定 let move = SKAction.moveBy(x: +10, y: -50, duration: 0.2) // 実行 sprite.run(move)
到着点を指定して移動
// アクションのインスタンスを生成 // 到着点と速度を指定 let move = SKAction.move(to: CGPoint(x: 100, y: 500), duration: 0.2) // 実行 sprite.run(move)
回転
回転量を指定した回転
// アクションのインスタンスを生成 // 回転量と速度を指定 let rotate = SKAction.rotate(byAngle: CGFloat(M_PI * 2), duration: 0.5) // 実行 sprite.run(rotate)
角度を指定した回転
// アクションのインスタンスを生成 // 最終的な角度と速度を指定 let rotate = SKAction.rotate(toAngle: CGFloat(-M_PI / 2), duration: 0.2) // 実行 sprite.run(rotate)
拡大縮小
現在のサイズからの変化量を指定した伸縮
// アクションのインスタンスを生成 // 何倍の大きさにするかと速度を指定 let scale = SKAction.scale(by: 1.5, duration: 0.2) // 実行 sprite.run(scale)
元のサイズからの変化量を指定した伸縮
// アクションのインスタンスを生成 // 何倍の大きさにするかと速度を指定 let scale = SKAction.scale(to: 1.5, duration: 0.2) // 実行 sprite.run(scale)
サイズを指定した伸縮
// アクションのインスタンスを生成 // サイズと速度を指定 let scale = SKAction.scale(to: CGSize(width: 300, height: 300), duration: 0.2) // 実行 self.sprite.run(scale)
フェードイン・フェードアウト
フェードイン
// アクションのインスタンスを生成 let fade = SKAction.fadeIn(withDuration: 0.5) // 実行 sprite.run(fade)
フェードアウト
// アクションのインスタンスを生成 let fade = SKAction.fadeOut(withDuration: 0.5) // 実行 sprite.run(fade)
不透明度
変化量を指定した変更
// アクションのインスタンスを生成 // 変化量と速度を指定 let fadeAlpha = SKAction.fadeAlpha(by: -0.5, duration: 0.2) // 実行 sprite.run(fadeAlpha)
不透明度を指定した変更
// アクションのインスタンスを生成 // 不透明度と速度を指定 let fadeAlpha = SKAction.fadeAlpha(to: 0.5, duration: 0.2) // 実行 sprite.run(fadeAlpha)
動作を反転させる
// 右に50移動 let move = SKAction.moveBy(x: +50, y: 0, duration: 0.2) // 左に50移動 let moveRev = move.reversed()
【Swift/SpriteKit】SKShapeNodeで図形オブジェクトを置く
図形オブジェクトを置く際の基本的なことだけの簡単なメモを。四角以外の多角形は省略。
四角
// 図形ノードのインスタンス生成・サイズ指定 let rectShape = SKShapeNode(rectOf: CGSize(width: 30, height: 30)) // 塗りの色 rectShape.fillColor = .black // 枠線の色 rectShape.strokeColor = .white // 任意のビューやノードに追加 view.addChild(rectShape)
正円
// 図形ノードのインスタンス生成・半径の大きさ let circleShape = SKShapeNode(circleOfRadius: (50)) // 塗りの色 circleShape.fillColor = .black // 枠線の色 circleShape.strokeColor = .white // 任意のビューやノードに追加 view.addChild(circleShape)
楕円（原点左下）
// 図形ノードのインスタンス生成・位置とサイズを指定 let ellipseShape = SKShapeNode(ellipseIn: CGRect(x: -50, y: -100, width: 100, height: 200)) // 塗りの色 ellipseShape.fillColor = .black // 枠線の色 ellipseShape.strokeColor = .white // 任意のビューやノードに追加 view.addChild(ellipseShape)
楕円（原点中央）
// 図形ノードのインスタンス生成・サイズを指定 let ellipseShape = SKShapeNode(ellipseOf: CGSize(width: 50, height: 100)) // 塗りの色 ellipseShape.fillColor = .black // 枠線の色 ellipseShape.strokeColor = .white // 任意のビューやノードに追加 view.addChild(ellipseShape)
【Swift/SpriteKit】SKLabelNodeで文字オブジェクトを置く
文字オブジェクトを置く際の基本的なことだけの簡単なメモを。
// ラベルノードのインスタンスを生成 let sampleText = SKLabelNode() // 表示する文字列を指定 sampleText.text = "Hello!" // 文字の大きさを指定 sampleText.fontSize = 60 // 文字色を指定 sampleText.fontColor = .white // ラベルノードを置く位置を指定 sampleText.position = CGPoint(x: 0, y: 0) // 任意のビューやノードに追加 view.addChild(sampleText)
【Swift/SpriteKit】SKSpriteNodeで画像のオブジェクトを置く
画像オブジェクトを置く際の基本的なことだけの簡単なメモを。
// スプライトのインスタンスを生成 let sampleSprite = SKSpriteNode() // スプライトの画像をセット sampleSprite.texture = SKTexture(imageNamed: "sampleImage") // スプライトのサイズを指定 sampleSprite.size = CGSize(width: 30,height: 30) // スプライトを置く位置を設定 sampleSprite.position = CGPoint(x: 0, y: 0) // スプライトのどの箇所を指定の位置に置くかを設定 // 0,0で左上端、1,1で右下端、初期値は中央の0.5,0.5 self.dynamite.anchorPoint = CGPoint(x: 0, y: 0) // 任意のビューやノードに追加 view.addChild(sampleSprite)
【デザイン】デザインの4原則を学ぶ
デザインの4原則とは
情報をわかりやすく伝えるためには欠かせない、デザインレイアウトの基本中の基本。
- 近接
- 整列
- 反復
- 対比
4つの原則それぞれが相互に関係しあって成り立つため、基本的には、どれかひとつの原則を独立させることはない。
1. 近接
同じ括りの情報同士を近くに寄せて配置し、関連性があることを強調する表現方法。
2. 整列
図版や文字などの各要素の並びを揃えて整え、整然とした美しさと秩序的な一体感を持たせる表現方法。
3. 反復
視覚的な特徴を繰り返して、全体に一貫性を持たせる表現方法。
4. 対比
重要度の異なる要素同士に、ハッキリと視覚的な強弱をつけて、単調さを解消し、視線の引きを作る表現方法。
