#概要
今や日常まで浸食しているシュールな絵で人気のいらすとや。
これらを集めてガチャアプリにしました。
#構成
①ガチャ景品素材を作成
②Array[UIImage]を作成
③ガチャ演出アニメーションを作成
④SwiftGifを使用してgifの表示を可能にする
⑤アニメーションメソッドを作成
⑥ガチャ景品排出メソッドを作成
⑦メソッドを組み合わせて「ガチャを引く」ボタンを作成
⑧collectionViewで図鑑表示
#①ガチャ景品素材を作成
いらすとやから独断と偏見で面白いと思った画像を７０個選定しました。
これらをkeynoteでいい感じにソシャゲっぽっくします。
SSR・SR・R・Nを用意しました。
②Arrayを作成
ガチャ景品素材を格納する配列を作成します。
var gachaImageArray: [UIImage] = [
UIImage(named: "chunigirl")!,
//70個分記入
]
#③ガチャ演出アニメーションを作成
keynoteでgifを作成しました。
・カプセルがドロップするアニメーション
・カプセルが開くアニメーション
#④SwiftGifを使用してgifの表示を可能にする
swiftではそのままではgif画像を扱うことができません。
SwiftGifというライブラリをcocoapodsでインストールして使用させていただきました。
import SwiftGifOrigin
#⑥アニメーションメソッドを作成
func gachaAnimation (){
//隠しておいたカプセルのUIImageViewを表示する
self.capcelImageView.isHidden = false
//swiftGifライブラリをインポートすることにより、.loadGif(name:引数)が使用可能に
//1つ目のアニメーションを表示
capcelImageView.loadGif(name: "capcelgif")
//２つ目のアニメーションを表示
//一つ目が終わった後に表示させるために遅延処理する
DispatchQueue.main.asyncAfter(deadline: .now() + 3.75) {
self.capcelImageView.loadGif(name: "capcelgif2")
}
}
DispatchQueueを使用して一つ目のアニメーションが終わったら２つ目を表示させる様に遅延処理をさせています。正直今回のこのコードの書き方はあまりスマートでない気がします。
#⑤ガチャ景品排出メソッドを作成
//ガチャの結果を表示する機能
func gachaResult(){
//結果の表示 アニメーションの後に表示するため遅延処理
DispatchQueue.main.asyncAfter(deadline: .now() + 5.25) {
//配列からランダムに画像を取り出し、取り出した画像をUIImageViewにセット
self.gachaImageView.image = self.gachaImageArray.randomElement()
//結果を表示 カプセルのアニメーションを非表示
self.gachaImageView.isHidden = false
self.capcelImageView.isHidden = true
//ボタンを再度表示させる。
self.lottery1Button.isHidden = false
//2回目以降はボタンの文字を変える
self.lottery1Button.setTitle("もう一度引く", for: .normal)
}
排出確率は一定です。1/70の確率で何かが出ます。
#⑦メソッドを組み合わせて「ガチャを引く」ボタンを作成
//ガチャを引くボタン
@IBAction func lottery1Button(_ sender: Any) {
//初期化（タイトル以外のbuttonとimageを一旦消す）
lottery1Button.isHidden = true
gachaImageView.isHidden = true
capcelImageView.isHidden = true
gachaStartImageView.isHidden = true
//ガチャ機能
gachaAnimation()
gachaResult()
//Timeline(dispatch que)
//after 0 second : gacha drop(capcelgif animation) animationtime is 3.75
//after 3.75 seconds :gacha open(capcelgif2 animarion) animationtime is 2.0
//after 5.25 seconds : gacha open animation is hidden
//after 5.25 seconds : result display
//引いた回数をプラス１する
counter += counter
}
###ボタンを押すと、アニメーション後に下記の様に表示
#⑧collectionViewで図鑑表示
class CollectionViewController: UIViewController,UICollectionViewDataSource,UICollectionViewDelegate,UICollectionViewDelegateFlowLayout {
//画像格納用の配列 64個
let gachaImageArray: [UIImage] = [
UIImage(named: "chunigirl")!,
//70個分記入
]
//collectionViewの作成
func collectionView(_ collectionView: UICollectionView, numberOfItemsInSection section: Int) -> Int {
// 配列の要素数を入れる
return gachaImageArray.count
}
func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
let testCell:UICollectionViewCell =
collectionView.dequeueReusableCell(withReuseIdentifier: "imageCell",
for: indexPath)
//Tag番号を使ってImageViewのインスタンス生成
let imageView = testCell.contentView.viewWithTag(1) as! UIImageView
// 画像配列の番号で指定された要素の名前の画像をUIImageとする
let cellImage = gachaImageArray [indexPath.row]
// UIImageをUIImageViewのimageとして設定
imageView.image = cellImage
return testCell
}
// セルサイズ調整
func collectionView(_ collectionView: UICollectionView,
layout collectionViewLayout: UICollectionViewLayout,
sizeForItemAt indexPath: IndexPath) -> CGSize {
// スペース調整
let horizontalSpace:CGFloat = 0.05
let cellSize:CGFloat = self.view.bounds.width/2 - horizontalSpace
// 正方形で返す
return CGSize(width: cellSize, height: cellSize)
}
}
collectionViewControllerにもviewControllerと全く同じ配列を定義しましたが、配列を値渡ししてもよかったかもしれません。
また、ガチャで引いた物だけをcollectionviewに表示したかったのですが、力及ばずでした。
#今後の課題
・確率操作（SSRの景品の排出確率を0.1%にするなど）ができない。
・引けるのは１日１０回まで、それ以降は課金などの機能
#全ソースコード(github)
https://github.com/PearlEarringMinion/gacha