Graphics and Animation Mobile Application Development in iOS School - - PowerPoint PPT Presentation

▶
graphics and animation
SMART_READER_LITE
LIVE PREVIEW

Graphics and Animation Mobile Application Development in iOS School - - PowerPoint PPT Presentation

Mar 29, 2024 36 likes •491 views

Graphics and Animation Mobile Application Development in iOS School of EECS Washington State University Instructor: Larry Holder Mobile Application Development in iOS 1 Outline iOS frameworks for graphics and animation Core Graphics

slide-1
SLIDE 1

Graphics and Animation

Mobile Application Development in iOS School of EECS Washington State University Instructor: Larry Holder

Mobile Application Development in iOS 1

slide-2
SLIDE 2

Outline

  • iOS frameworks for graphics and animation
  • Core Graphics and Core Animation
  • SpriteKit
  • [SceneKit]
  • ARKit

Mobile Application Development in iOS 2

slide-3
SLIDE 3

iOS Frameworks (old)

  • UIKit graphics

– Animate elements of view

  • Core Graphics and Core Animation

– 2D graphics and animation engine – Part of UIView

  • OpenGL ES and GLKit

– 2D and 3D rendering for GPUs on Embedded Systems (ES)

Mobile Application Development in iOS 3

slide-4
SLIDE 4

iOS Frameworks (new)

  • SpriteKit: 2D game engine
  • SceneKit: 3D game engine
  • ARKit and RealityKit: Augmented reality
  • MetalKit

– More direct access to GPU for graphics and computation

  • GameKit

– Leaderboards, achievements, challenges, matchmaking – Access to Game Center

  • GameplayKit

– State machines, agents, goals, behaviors, rules

Mobile Application Development in iOS 4

slide-5
SLIDE 5

Cross Platform (Games)

  • Unity (unity3d.com) – C#, JavaScript
  • Unreal (unrealengine.com) – C++, scripting

Mobile Application Development in iOS 5

slide-6
SLIDE 6

Core Graphics

Mobile Application Development in iOS 6

slide-7
SLIDE 7

Core Graphics Approach

Mobile Application Development in iOS 7

  • Coordinate system (upper-left origin)
  • Points vs. pixels

– Code uses points – Framework maps points to pixels

  • Frames vs. bounds

– CGRect = {origin.x, origin.y, size.width, size.height} – UIView.frame {40, 60, 120, 80} – UIView.bounds {0, 0, 120, 80} – UIView.center: CGPoint {100, 100}

center

slide-8
SLIDE 8

Core Graphics Approach

  • Add a UIView as a subView of the main view
  • Implement gameUpdate() method

– Modify subView’s position

  • Use Timer to call gameUpdate() method

repeatedly

Mobile Application Development in iOS 8

slide-9
SLIDE 9

Core Graphics Approach

Mobile Application Development in iOS 9

class ViewController: UIViewController { let frameRate = 30.0 // updates per second let ballSpeed = 200.0 // points per second var ballDirection = CGPoint(x: 1.0, y: -1.0) var ballImageView: UIImageView! var gameTimer: Timer! var gameRunning = false func initGame() { let ballImage = UIImage(named: "redball.png")! ballImageView = UIImageView() ballImageView.image = ballImage ballImageView.frame = CGRect(x: 0, y: 0, width: ballImage.size.width, height: ballImage.size.height) self.view.addSubview(ballImageView) }

slide-10
SLIDE 10

Core Graphics Approach

Mobile Application Development in iOS 10

func startGame () { gameTimer = Timer.scheduledTimer(withTimeInterval: (1.0 / frameRate), repeats: true, block: updateGame) gameRunning = true } func pauseGame () { gameTimer.invalidate() gameRunning = false }

slide-11
SLIDE 11

Core Graphics Approach

Mobile Application Development in iOS 11

func updateGame (timer: Timer) { let x = ballImageView.frame.origin.x let y = ballImageView.frame.origin.y let width = ballImageView.frame.width let height = ballImageView.frame.height // If ball hits wall, then change direction if (x < 0) { // Hit left wall ballDirection.x = 1.0 } if ((x + width) > self.view.frame.width) { // Hit right wall ballDirection.x = -1.0 } // Handle top and bottom walls... // Update ball location let xOffset = CGFloat(ballSpeed / frameRate) * ballDirection.x let yOffset = CGFloat(ballSpeed / frameRate) * ballDirection.y ballImageView.frame.origin.x = x + xOffset ballImageView.frame.origin.y = y + yOffset }

Watch for

  • rientation

change.

slide-12
SLIDE 12

Core Animation

Mobile Application Development in iOS 12

slide-13
SLIDE 13

UIView.animate

  • UIView.animate (withDuration duration: TimeInterval,

delay: TimeInterval,

  • ptions: UIView.AnimationOptions = [],

animations: @escaping () -> Void, completion: ((Bool) -> Void)?)

Mobile Application Development in iOS 13

slide-14
SLIDE 14

Core Animation

  • Move ball to center at start of game

Mobile Application Development in iOS 14

UIView.animate(withDuration: 1, delay: 0, animations: { self.ballImageView.center = CGPoint( x: self.view.frame.width / 2, y: self.view.frame.height / 2) }, completion: nil)

slide-15
SLIDE 15

SpriteKit

Mobile Application Development in iOS 15

slide-16
SLIDE 16

SpriteKit Approach

  • Update/render loop

Mobile Application Development in iOS 16

slide-17
SLIDE 17

SpriteKit Approach

  • Create new Game project

– Game Technology: SpriteKit

Mobile Application Development in iOS 17

slide-18
SLIDE 18

SpriteKit Organization

  • Scene(s) of type SKScene

– GameScene.sks – Edit in Sprite Editor

  • Scene controlled by SKScene class

Mobile Application Development in iOS 18

GameScene.swift

slide-19
SLIDE 19

SpriteKit Organization

  • Main view of type SKView
  • Present SKScene in SKView

Mobile Application Development in iOS 19

GameViewController.swift

slide-20
SLIDE 20

Sprites

  • Sprite is a rectangle with a texture (image)
  • SKSpriteNode is a sprite with many properties

– SKAction for actions to execute (e.g., fade in/out) – SKPhysicsBody for physical effects (e.g., gravity)

  • Other types of SKNode’s (e.g., SKLabelNode)
  • SKScene is a collection of SKNode’s

Mobile Application Development in iOS 20

redball.png

slide-21
SLIDE 21

SpriteKit Scene Editor

Mobile Application Development in iOS 21

Origin at center of view

slide-22
SLIDE 22

SpriteKit Physics

  • Body Type
  • Dynamic
  • Pinned (fixed to parent)
  • Allows Rotation, Ang. Damping
  • Affected By Gravity, Linear Damping, Mass
  • Friction, Restitution (energy retained on bounce)

Mobile Application Development in iOS 22

slide-23
SLIDE 23

SpriteKit Physics

  • Bounce off edge of screen (in SKScene class)
  • Get nodes by name (in SKScene class)

Mobile Application Development in iOS 23

var redBallNode: SKSpriteNode! redBallNode = self.childNode(withName: "RedBall") as? SKSpriteNode

  • verride func didMove(to view: SKView) {

// Set screen edge to bounce with no friction let screenPhysicsBody = SKPhysicsBody(edgeLoopFrom: self.frame) screenPhysicsBody.friction = 0.0 self.physicsBody = screenPhysicsBody // ... }

slide-24
SLIDE 24

SpriteKit Physics

  • Get objects moving

– Set physics – Set velocity – Or, apply impulse

Mobile Application Development in iOS 24

// Set velocity (ignores mass and current velocity) redBallNode.physicsBody?.velocity = CGVector(dx: 200.0, dy: 200.0) // Push (considers mass and current velocity) redBallNode.physicsBody?.applyImpulse(CGVector(dx: 200.0, dy: 200.0))

slide-25
SLIDE 25

SpriteKit: Adding Nodes Programmatically

Mobile Application Development in iOS 25

// Add green ball programmatically var greenBallNode: SKSpriteNode? greenBallNode = SKSpriteNode(imageNamed: "greenball.png") greenBallNode.name = "GreenBall" greenBallNode.physicsBody = SKPhysicsBody(circleOfRadius: greenBallNode.frame.size.width / 2.0) greenBallNode.physicsBody?.affectedByGravity = false greenBallNode.physicsBody?.friction = 0.0 greenBallNode.physicsBody?.restitution = 1.0 greenBallNode.physicsBody?.linearDamping = 0.0 self.addChild(greenBallNode)

slide-26
SLIDE 26

SpriteKit Physics: Collisions

  • Mask is a bit string (4294967295 = 32 bits, all 1s)
  • Category

– Mask that is a unique power of 2 for each object type – E.g., ball: 0001, brick: 0010, wall: 0100

  • Category Mask (SKPhysicsBody.categoryBitMask)

– Categories this body belongs to

  • Collision Mask (SKPhysicsBody.collisionBitMask)

– Categories this body collides with

  • Contact Mask (SKPhysicsBody.contactTestBitMask)

– Categories generating Contact delegate call, if contacts this body

Mobile Application Development in iOS 26

Body 1 Category Mask: 0010 Body 2 Collision Mask: 0011 Bitwise And: 0010 > 0 Collision!

slide-27
SLIDE 27

SpiteKit Physics: Collisions

  • Example

– Balls shouldn't collide with each other

  • Ball category: 0b0001

– But should collide with Wall and Brick

  • Wall category: 0b0100
  • Brick category: 0b0010

Mobile Application Development in iOS 27

greenBallNode.physicsBody?.categoryBitMask = 0b0001 // Ball greenBallNode.physicsBody?.collisionBitMask = 0b0110 // Wall & Brick

slide-28
SLIDE 28

SpriteKit Physics: Contacts

  • Delegate (in SKScene class)

– SKPhysicsContactDelegate – self.physicsWorld.contactDelegate = self

  • Delegate methods (in SKScene class)

– didBegin(_ contact: SKPhysicsContact) – didEnd(_ contact: SKPhysicsContact)

  • contact.bodyA.node
  • contact.bodyB.node

Mobile Application Development in iOS 28

slide-29
SLIDE 29

SpriteKit Physics: Contacts

Mobile Application Development in iOS 29

func didBegin(_ contact: SKPhysicsContact) { guard let nodeA = contact.bodyA.node else {return} guard let nodeB = contact.bodyB.node else {return} print("Contact: \(nodeA.name ?? "?") with \(nodeB.name ?? "?")") }

In SKScene class:

slide-30
SLIDE 30

SpriteKit Interaction

  • Touches

– func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) – func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) – func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?)

Mobile Application Development in iOS 30

slide-31
SLIDE 31

SpriteKit Interaction

Mobile Application Development in iOS 31

  • verride func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

for touch in touches { let point = touch.location(in: self) let nodeArray = nodes(at: point) for node in nodeArray { print("tapped \(node.name!)") } } }

slide-32
SLIDE 32

SpriteKit Labels and Buttons

  • SKLabelNode

Mobile Application Development in iOS 32

slide-33
SLIDE 33

SpriteKit Labels and Buttons

  • SKLabelNode (as button)

Mobile Application Development in iOS 33

slide-34
SLIDE 34

SpriteKit Label as Button

Mobile Application Development in iOS 34

var startStopNode: SKLabelNode! startStopNode = self.childNode(withName: "StartStop") as? SKLabelNode

  • verride func touchesEnded(_ touches: Set<UITouch>,with event: UIEvent?) {

for touch in touches { let point = touch.location(in: self) let nodeArray = nodes(at: point) for node in nodeArray { if node.name == "StartStop" { // StartStop button tapped if gameRunning { startStopNode.text = "Start" gameRunning = false pauseGame() } else { startStopNode.text = "Stop" gameRunning = true startGame() } } } } }

slide-35
SLIDE 35

SpriteKit Label as Button

Mobile Application Development in iOS 35

var gameRunning = false

  • verride func didMove(to view: SKView) {

// ... self.pauseGame() redBallNode.physicsBody?.applyImpulse(CGVector(dx: 200.0, dy: 200.0)) } func startGame() { self.isPaused = false } func pauseGame() { self.isPaused = true }

slide-36
SLIDE 36

SpriteKit Actions: Option 1

  • Create SKAction in SpriteKit Action Editor

– Execute SKNode.run(SKAction.init(named: "Blink"))

Mobile Application Development in iOS 36

slide-37
SLIDE 37

SpriteKit Actions: Option 1

Mobile Application Development in iOS 37

func didBegin(_ contact: SKPhysicsContact) { let nodeA = contact.bodyA.node! let nodeB = contact.bodyB.node! print("Contact: \(nodeA.name ?? "?") with \(nodeB.name ?? "?")") let blinkAction = SKAction.init(named: "Blink")! nodeA.run(blinkAction) nodeB.run(blinkAction) }

slide-38
SLIDE 38

SpriteKit Actions: Option 2

  • Create SKAction programmatically
  • Execute SKNode.run(SKAction)

Mobile Application Development in iOS 38

  • verride func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

for touch in touches { let point = touch.location(in: self) let nodeArray = nodes(at: point) for node in nodeArray { print("tapped \(node.name!)") let action1 = SKAction.fadeOut(withDuration: 0.25) let action2 = SKAction.fadeIn(withDuration: 0.25) let blinkAction = SKAction.sequence([action1,action2]) node.run(blinkAction) } } }

slide-39
SLIDE 39

SpriteKit Actions: Option 2

  • Create SKAction programmatically
  • Execute SKNode.run(SKAction)

Mobile Application Development in iOS 39

func didBegin(_ contact: SKPhysicsContact) { let nodeA = contact.bodyA.node! let nodeB = contact.bodyB.node! print("Contact: \(nodeA.name ?? "?") with \(nodeB.name ?? "?")") let action1 = SKAction.fadeOut(withDuration: 0.25) let action2 = SKAction.fadeIn(withDuration: 0.25) let blinkAction = SKAction.sequence([action1,action2]) nodeA.run(blinkAction) nodeB.run(blinkAction) }

slide-40
SLIDE 40

SpriteKit Audio

  • Sound effects

– SKAction.playSoundFileNamed

  • Background music

– AVAudioPlayer

  • SKAudioNode

– Positional – Effects, e.g., reverb

Mobile Application Development in iOS 40

slide-41
SLIDE 41

SpriteKit Audio: Sound Effects

  • Create SKAction.playSoundFileNamed
  • Execute SKScene.run(SKAction)

Mobile Application Development in iOS 41

var bounceSoundAction: SKAction! bounceSoundAction = SKAction.playSoundFileNamed("bounce.mp3", waitForCompletion: false) func didBegin(_ contact: SKPhysicsContact) { let nodeA = contact.bodyA.node! let nodeB = contact.bodyB.node! // ... self.run(bounceSoundAction) }

slide-42
SLIDE 42

Background Music

  • Import AVFoundation
  • Create AVAudioPlayer from URL to music file

– AVAudioPlayer(contentsOf: URL)

  • Set volume, numberOfLoops (-1 = loop continuously), …
  • Methods: play, pause, stop, …

Mobile Application Development in iOS 42

slide-43
SLIDE 43

Background Music

Mobile Application Development in iOS 43

import AVFoundation var audioPlayer: AVAudioPlayer? let musicURL = Bundle.main.url(forResource: "WSU-Fight-Song.mp3", withExtension: nil) do { audioPlayer = try AVAudioPlayer(contentsOf: musicURL!) } catch { print("error accessing music") } audioPlayer?.volume = 0.25 audioPlayer?.numberOfLoops = -1 // loop forever audioPlayer?.play() // In startGame() audioPlayer?.pause() // In pauseGame()

slide-44
SLIDE 44

Resources

  • Core Graphics: developer.apple.com/documentation/coregraphics
  • Core Animation:

developer.apple.com/documentation/uikit/uiview/1622418-animate

  • Sprite Kit: developer.apple.com/documentation/spritekit
  • Scene Kit: developer.apple.com/documentation/scenekit
  • GameplayKit: developer.apple.com/documentation/gameplaykit
  • ARKit: developer.apple.com/documentation/arkit
  • AVFoundation: developer.apple.com/documentation/avfoundation

Mobile Application Development in iOS 44

slide-45
SLIDE 45

Assets

Mobile Application Development in iOS 45

redball.png greenball.png blueball.png brick.png