"Before/after slider" effect in UIKit

Question

I'm working on a game in which damage to the player's spaceship is shown by progressively replacing an image of a healthy spaceship with one of a damaged one, the in the manner of a "before/after" slider. I'm trying to figure out how to implement this.

The approach I'm trying is to use the damaged spaceship as the background, and then put another UIView (or UIImageView) on top of it, and, as damage is done, progressively restrict the frame of the top view.

Here's the code I'm using to display progressively less of the top image:

    let oldFrame = playerLayer1.frame
    let oldOrigin = oldFrame.origin
    let newSize = CGSize(width: oldFrame.width - amountToReduceFrameBy, height: oldFrame.height)
    let newFrame = CGRect(origin: oldOrigin, size: newSize)

    playerLayer1.frame = newFrame

Two questions:

1) This merely marches my image left, rather than progressively obscuring it. I'm trying instead to reduce the size of the view such that it only part of it is visible, without moving or rescaling the image itself. How do I do this

2) Is this even the correct approach to take to this problem? Is there a more elegant way to do this?

If you are making a game then you probably should be using SpriteKit. However, if you want to use UIKit, why don't you just replace the image of the ship with another image of a more damaged ship. Another thing to coincided if checking your anchorpoint. If you have one object set to a given position and them try to set another object with a different anchorpoint to the same position, then it will not be in the same position. — mhillsman, Nov 18 '15 at 03:29
playerLayer1 is a CALayer, but I'm realizing that may be more complicated when it needs to be--is it possible to display a restricted portion of the image using a simple UIImageView? — Marc Auger, Nov 18 '15 at 17:00
And re SpriteKit, this is mostly a text based game, so UIKit really makes more sense. This is one of a very small number of graphical elements. Replacing one image with another of a more damaged ship is what I'm trying to do, but I'm trying to do it progressively, so the red portion gets bigger as the ship gets more damaged. — Marc Auger, Nov 18 '15 at 17:03

score 0 · Answer 1 · edited May 23 '17 at 11:44

Solved:

func cropToWidth(image: UIImage, width: Double) -> UIImage {

    let contextImage: UIImage = UIImage(CGImage: image.CGImage!)

    let contextSize: CGSize = contextImage.size

    var posX: CGFloat = 0.0
    var posY: CGFloat = 0.0
    // these vars represent original sizes, not specified ones
    var cgwidth: CGFloat = contextSize.width
    var cgheight: CGFloat = contextSize.height

    // See what size is longer and create the center off of that
    if contextSize.width > contextSize.height {
        posX = ((contextSize.width - contextSize.height) / 2)
        posY = 0
        cgwidth = contextSize.height
        cgheight = contextSize.height
    } else {
        posX = 0
        posY = ((contextSize.height - contextSize.width) / 2)
        cgwidth = contextSize.width
        cgheight = contextSize.width
    }

    //let rect: CGRect = CGRectMake(posX, posY, cgwidth, cgheight)
    let rect: CGRect = CGRectMake(posX, posY, CGFloat(width), cgheight)
    print("rect dimensions: \(rect.width), \(rect.height)")

    // Create bitmap image from context using the rect
    let imageRef: CGImageRef = CGImageCreateWithImageInRect(contextImage.CGImage, rect)!

    // Create a new image based on the imageRef and rotate back to the original orientation
    let image: UIImage = UIImage(CGImage: imageRef, scale: image.scale, orientation: image.imageOrientation)

    return image

}

Cropping image with Swift and put it on center position

"Before/after slider" effect in UIKit

1 Answers1