Sticker packs are code-free applications that provide stickers to iMessage users. These packs can be sold in the iMessage store. See how to create sticker packs in this video.
- [Instructor] Sticker Pack Applications refer to iMessage extensions that only contain stickers. These are art only applications that don't contain any code files whatsoever. Let's look at how to create a Sticker Pack in Xcode 8. I'm going to click to create a New Xcode project from the Welcome screen, of course you can do that from the File menu as well. And under iOS I'm going to choose Sticker Pack Application and hit Next. I'll call this product Winner Stickers, this is the name of your application that you'll see inside of the App Store for iMessage.
So I'll hit Next, go into Exercise Files, Chapter 03, sticker.app and I'm saving this in Final, if you're following along with the Exercise Files, save it in the Start folder instead. So, that's really it for creating a Sticker Application. Now all we need to do is apply the stickers. So I'm going to head over to Stickers.xcstickers in the Navigator, and then select my Sticker Pack. Also note that for your icon you set that by selecting your icon and for the most part you're looking at four by three aspect ratio, just like for other iMessage extensions.
But you'll also see that there are iPhone settings and iPad settings that are 29 point by 29 point. So some square icons, mostly four by three icons. Let's go back to Sticker Pack and all it says here is to drag and drop images to add new stickers. So I'm going to tab over to Finder and create a new window with cmd n. On my Desktop, in the Exercise Files folder I'll go into assets and then stickers and then I'm going to select sticker 1 through 9 and bring them in the application.
Now if you're wondering about the size specifications, it's actually pretty straightforward. Basically you want square images that are between 300 pixels wide and high and 618 pixels wide and high. So my stickers here are the max size of 618 by 618. These are PNG images, but you can also use JPEGs or GIFs if you want. However, Apple recommends PNG images because the image edges are going to be cleaner and they support transparency.
You can also use APNG images, which are animated PNG files. Finally, you need to make sure that each sticker is 500 kilobytes or less, in file size. So I have sticker 1 selected, I'll shift click sticker 9 and then just drag and drop these in. And that's it, that creates our Sticker Pack and we can test it on an iPhone 7 by changing that and then running the application and we've successfully created a Sticker Pack.
No code required, you just drag and drop some images into Xcode and boom, you've created an application. So here are my stickers and you can put one on the screen by just simply clicking on it and then you can send it as a message. So if I head over to the other contact I can receive that message. You could also tap and hold to place a sticker on another message bubble or another sticker, just like that.
If you're not happy with the size of the stickers, you can stop the app, and with your Sticker Pack selected you can change the size in the Attributes Inspector. So make sure you have the Utility Area showing, change the sticker size to whatever size you want, I'll change mine to small right now. And now the stickers are smaller. So you can click on it, you can send it, and then you can add on a smaller sticker onto an existing sticker.
I'll stop the app and return to Xcode. Finally what I want to show you is how you can add an image sequence. So, maybe you have an animated PNG and you could just drag and drop it in here and it'll run just fine. But you could also create an animation from a sequence of images. So I'm going to right click my Sticker Pack here and choose New Sticker Sequence. And you can change the name in the Attributes Inspector if you want. I can change this to Flag Animation, press Return on the keyboard.
And I'll tab back over to Finder and then I'm going to highlight all of these animation frames. So I'll select the top one, shift click the bottom one, and just click and drag them into the Flag Animation. And I'm going to select the Flag Animation and scroll down a little bit and you should be able to hit the Play button to preview the animation. Now if that's moving too fast for you, you can change the frame rate right over here.
So maybe you want it to run at five frames per second, instead of 15. Change it, press Return, then you can test it. And the animation is running. You can also reorder your frames, by dragging them here. So I can click and drag them down and change the order of my frames if I want to. So I'm going to put frame 3 back where it was originally and then let's test the app and see the animated flag in our app.
So browse the stickers and there's the animated flag and we could put it inside of a message just like that. And just like any other sticker, we can apply stickers to it and the animation remains. We'll stop the app and return to Xcode. So let's say that we don't want to have this sticker, because it's not animated. So we can select that, press the Delete key on the keyboard and it's gone. And if we want to reorder this animated flag to be the first sticker, we can just click and drag that as well. And now when we test the application, we'll see the animated flag right at the top left corner.
And there it is. So, if you want to create a Sticker Pack you just need the appropriate artwork in the appropriate sizes, you go to File, New, Project, you create a sticker app and just drag your stickers into your Sticker Pack in the Stickers.xcstickersobject in the Navigator.
- Setting up Messages extensions
- Showing multiple view controllers
- Creating delegate methods
- Preparing a message URL
- Opening an extension from a message
- Combining messages into one bubble
- Identifying the user in a conversation
- Opening a host app from an extension
- Creating a sticker pack
- Adding stickers in a Messages extension