This will store the original transform for when the player stops dragging the tile. Private var tempTransform: CGAffineTransform = CGAffineTransformIdentity First add the following property to the TileView class: Now to handle resizing the tile so that it looks like it’s being lifted off the board. It’s a nice subtle touch that the user will appreciate – even if subconsciously. The effect will look even better when you change the tile size, but build and run the app now and drag some tiles around to see it working:
Setting the opacity to 0.8 gives it a bit of transparency, which looks nice.Īdd the following code at the end of touchesEnded(_:withEvent:): This turns on the shadow when the player starts dragging. So you create the shadow when the tile is initialized, but you’ll later show and hide it when the player drags the tile.Īdd the following code at the end of touchesBegan(_:withEvent:): Note that you’re setting the shadowOpacity to 0, which makes the shadow invisible.In the code above, you use a rectangle path (same as the tile’s bounds), but you also apply rounding to the rectangle’s corners via shadowRadius, and you effectively have a shadow with the form of the tile itself. Use this whenever possible to speed up the shadow rendering. shadowPath is a UIBezierPath that describes the shadow shape.Because a drop shadow is rendered outside of the view’s bounds, you have to set this property to false to see the shadow. masksToBounds is set to true by default, which means the layer will never render anything outside its bounds.The property names mostly speak for themselves, but a few probably need some extra explanation. Luckily CALayer has a set of properties that you can use to create a drop shadow. Let path = UIBezierPath(rect: self.bounds)Įvery UIView has a property called layer – this is the CALayer instance for the lower-level drawing layer used to draw the view. Open TileView.swift and add the following code at the end of init(letter:sideLength:), just after the line where you enabled user interactions: To accomplish this effect, you’ll be using some features of the 2D graphics Quartz framework. These effects will make it look like the player is actually lifting the tile from the board while moving it. When the player begins dragging a tile, it would be nice if the tile got a little bigger and showed a drop shadow below itself. In this section you’ll see how some simple visual effects can make the dragging experience much more satisfying. Your players can drag tiles around on the screen just fine, but the effect is very two-dimensional. When you run the completed project from Part 2 of this tutorial, you have this: That’s quite a lot, so let’s once again get cracking! A game menu for choosing the difficulty level.Visual effects to make tile dragging more satisfying.
This third and final part of the series will be the most fun of them all! In this part, you’re going to be adding a lot of cool and fun features: But it still lacks some key game elements and could use a bit more eye candy. If you successfully followed through the first and second parts of this tutorial, your game should be pretty functional. Welcome to the our tutorial series about creating a letter / word game with UIKit for the iPad. Update 04/12/15: Updated for Xcode 6.3 and Swift 1.2 Original series by Tutorial Team member Marin Todorov. Update note: This tutorial was updated for Swift and iOS 8 by Caroline Begbie.