いらすとやガチャアプリを作成（swift）

#概要
今や日常まで浸食しているシュールな絵で人気のいらすとや。
これらを集めてガチャアプリにしました。

![DAEF0BD6-ACC6-4741-9A7C-EA1F7E8927D1_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/575e5df2-95e6-1dfe-73bc-1298e1c51fa8.jpeg)

#構成
①ガチャ景品素材を作成
②Array[UIImage]を作成
③ガチャ演出アニメーションを作成
④SwiftGifを使用してgifの表示を可能にする
⑤アニメーションメソッドを作成
⑥ガチャ景品排出メソッドを作成
⑦メソッドを組み合わせて「ガチャを引く」ボタンを作成
⑧collectionViewで図鑑表示

#①ガチャ景品素材を作成
いらすとやから独断と偏見で面白いと思った画像を７０個選定しました。
これらをkeynoteでいい感じにソシャゲっぽっくします。
SSR・SR・R・Nを用意しました。
![ガチャフレーム.001.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/d1c20157-6ae2-73a3-3fc2-9b195136da04.jpeg)

②Arrayを作成
ガチャ景品素材を格納する配列を作成します。


```swift:ViewController.swift
var gachaImageArray: [UIImage] = [
        UIImage(named: "chunigirl")!,
        //70個分記入
        ]
```

#③ガチャ演出アニメーションを作成
keynoteでgifを作成しました。
・カプセルがドロップするアニメーション
![capcelgif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/3ee7aaea-bdf0-af15-c3f0-9561b7963eac.gif)


・カプセルが開くアニメーション
![capcelgif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/7ddbea7e-dce9-8a45-cbb6-40aa35b97f07.gif)



#④SwiftGifを使用してgifの表示を可能にする
swiftではそのままではgif画像を扱うことができません。
SwiftGifというライブラリをcocoapodsでインストールして使用させていただきました。

>[https://github.com/swiftgif/SwiftGif](https://github.com/swiftgif/SwiftGif)

```swift:ViewController.swift
import SwiftGifOrigin
```
#⑥アニメーションメソッドを作成

```swift:ViewController.swift
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を使用して一つ目のアニメーションが終わったら２つ目を表示させる様に遅延処理をさせています。正直今回のこのコードの書き方はあまりスマートでない気がします。

#⑤ガチャ景品排出メソッドを作成

```swift:ViewController.swift
//ガチャの結果を表示する機能
    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の確率で何かが出ます。

#⑦メソッドを組み合わせて「ガチャを引く」ボタンを作成

```swift:ViewController.swift
//ガチャを引くボタン
    @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
        
    }
```

###ボタンを押すと、アニメーション後に下記の様に表示
![28C1CB15-A3CA-4E88-91A3-698A73BE3DDD_4_5005_c.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/c943b87d-3d96-d140-c500-825389bb0848.jpeg)

#⑧collectionViewで図鑑表示

```swift:collectionViewController.swift

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に表示したかったのですが、力及ばずでした。

![スクリーンショット 2021-10-01 12.33.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1261100/2a45f002-0864-ccea-a2a9-f71eb7cf524a.png)



#今後の課題
・確率操作（SSRの景品の排出確率を0.1%にするなど）ができない。
・引けるのは１日１０回まで、それ以降は課金などの機能

#全ソースコード(github)
[https://github.com/PearlEarringMinion/gacha](https://github.com/PearlEarringMinion/gacha)