こんにちは、まさのをです。
今回はUnityでのガチャの作り方を簡単にまとめておこうと思います。
まず僕が作ったガチャアプリはこちらです。
「あつめてや SP」
リリース記事はこちら
無料で無限にガチャが回せるという夢のようなアプリです！ｗ
あまり技術的に深い話は書きませんが、
このアプリ実装に使った方法を基に、
個人開発アプリでガチャ実装する、ってくらいなら使えそうな(？)話を、
大きなポイントで分けて書いていきます。
・画面の構成と役割
・ガチャ演出について
・ガチャ確率の実装方法
くらいですかね。
実際のアプリの動きも見てもらいながら読んだ方がわかりやすいと思うので、
まずはアプリをインストールしてみてください！！！＼(^o^)／
（少しでもインストール数増やしたい…ｗ）
【画面の構成と役割】
機能的に分けると大きく４つですが、
シーンは１つでつくっていて、表示非表示を切り替える感じにしています。
シーン分けてもよかったんですが、面倒だったのでｗ
①ガチャ引く画面（こんな感じ↓）
②演出＆結果画面
③アルバム画面
④情報画面
まず、①のガチャを引く画面
このアプリはガチャを引くのが主な目的のゲーム（というかそれのみｗ）
なので、
アプリ起動時にはもうこの画面が表示されます。
ここでできるのは3つ。
Playを押すとガチャ実行、
Infoを押すと情報を表示、
Albumを押すとアルバムを表示。
って感じで、そのままですね。
さっきも書いたようにシーンは分けてないので、
InfoやAlbumは、そのまま画面上にポップアップで出るような感じです。
③Album
ガチャのキャラを見せないためにスクショは全部「？」ですが、
未取得は「？」で、
取得済みは、
キャラ画像・名前・設定・出た回数
などを縦スクロールリストで表示しています。
取得したキャラや回数は、
取得したタイミングでPlayerPrefsにキャラのIDと回数を保存していて、
それを基に判断しています。
④Infoには、
ガチャ回した回数・課金してたらいくら使ってるか・最高レア度の実際のゲット確率
など、ちょっと知りたい情報的なのを表示しています。
これもガチャプレイ回数をPlayerPrefsで記録しておいて、
Info開いたときに計算して表示しています。
【ガチャ演出について】
Playを押すと、ボタン類は消えてガチャ演出が始まります！
演出は、
真ん中のクリスタルが光り始める
↓
画面右上の外から流れ星をクリスタルに向けゆっくり落とす
↓
クリスタルに衝突してエフェクトがでる
↓
エフェクトが終わるタイミングで、
ゲットしたキャラカードを回転させながら表示＆名前をスライドインする
を一連の流れとして作っています。
エフェクトも、イラスト素材も
すべてフリー素材を使わせてもらって作ってます！
エフェクト素材はAssetStoreのこちら。
52個ものエフェクトが用意されているすごいやつです。
この中から合ったのを選び、大きさとか光の強さとか少し調整しました。
一連の演出の中で、
アニメーションやエフェクトの発動タイミングは結構肝心なところなんですが、
iTween を使って実装すれば、割と簡単に実現が可能です。
iTween は手軽にアニメーションが実装できる優れもので、
いつもめちゃくちゃ使ってます。
iTween の扱い方は参考になる記事がとてもたくさん出てるので、使いやすいのも魅力です。
こんな風に、oncompleteに
次のエフェクトアニメーションを始めるメソッドを指定しておくと、
最初のエフェクトアニメーション（上の場合 Effect1() ）を呼ぶとだけで
アニメーションが終わったら次、終わったら次、
という風に自動的に一連の流れをつくることができます。
ちょっと待たせたかったら、iTween.Hashでdelayも指定して遅らせたりできますし、
逆にアニメーションが終わりきるより前に次のアニメーションを始めたければ、
（アニメーション①に 2.0f かかる。1.0f のタイミングで次のアニメーション②を始めたい、など）
アニメーション①にoncompleteの指定はせずに、
アニメーション①の開始時に1.0f待たせるコルーチンを呼び出し、
そちらで、アニメーション②を開始するiTweenを呼ぶ、とするとうまくいきます。
iTween は３Dオブジェクトだけでなく
２Dの移動にも使えるので、
最後のカードの回転、名前のスライドインもすべてiTweenで実装しています。
【ガチャ確率の実装方法】
ガチャ実装で意外と悩むのが、
どうやってアイテムごとに設定された排出率どおりに出させるのか。
僕はUnityの乱数に任せて、結構簡単に実装しました。
（もっとちゃんとしたゲームでは、さらに厳密な方法とってるんだと思いますが…）
抽選処理はこれだけですw
これで、1～100の中からランダムに選ばれた数字が num に入ってきます。
※Unityの乱数についてはこちらの記事が参考になります。
https://xr-hub.com/archives/10747
あとは、この抽選で選ばれた数字に該当するアイテムを取得するだけです。
// こんな感じのアイテム管理クラスを作っておく
public class Data {
public int id;
public string name;
public int min;
public int max;
public Data() { }
public Data(int id, string name, int min, int max)
{
this.id = id;
this.name = name;
this.min = min;
this.max = max;
}
}
// 全部のアイテムデータをリスト化してここに入れておく
List<Data> datas
// 抽選処理
void SelectData(int num){
Data getData = new Data();
foreach(Data data in datas)
{
if(data.min <= num && num <= data.max){
getData = data;
break;
}
}
// getData に選ばれたアイテムデータが入っているので使う
}
Dataのような、アイテム1つ1つごとの設定値を管理できるクラスを用意しておいて、
全アイテムデータをあらかじめ決めておきます。
大事なのは、minとmaxの値です。
たとえば、
確率10％で出したいアイテムが2つあったら、
1つ目に、min →1、max →10
2つ目に、min →11、max →20
さらに確率5％で出したいアイテムが2つあったら、
1つ目に、min →21、max →25
2つ目に、min →26、max →30
という風に1から順番に、かぶらないようにmin と max を設定していきます。
つまり、
1～100の乱数で選ばれた数字が、
1～10だったら1つ目のアイテム、
11～20だったら2つ目のアイテム。
という仕組みです。
上の
SelectData(int num) では、この該当アイテムのピックアップを行っています。
maxが100のアイテムになるまで作ることで、
（全てのアイテムの排出率の合計が100ちょうど）
確率1％～100％までに対応した、ハズレなしの抽選アイテムリストができますし、
もし、1％より低い確率のアイテムを作りたかったら、
はじめの乱数を1～1000にして、
maxも1000までにしてあげると0.1％までの実装が可能です。
全アイテムはDBに保存しておいて、アプリ起動時にListに展開。
とかがいいと思いますが、
僕のアプリでは、DB作るのもめんどいので、
アプリ内にjsonの形で保持していて、
起動時に、jsonからList<Data> への変換を行っています。
ざっくりとですが、
ガチャの実装はこんな感じで実現できます！
少なくとも僕の「あつめてや」はこの方法で作られています(^^)
ガチャ実装のヒントになれば幸いです。
「あつめてや」もよかったら遊んでみてください！！
最後に、このガチャで出てくるキャラにも使っている、
ハイクオリティなイラスト素材「ジュエルセイバーフリー」も紹介しておきます。
このクオリティ＆点数なのに、ほぼ何に使ってもOKという、
めちゃくちゃ太っ腹な素材なのでこれからも使っていこうと思いますｗ
今回はUnityでのガチャの作り方を簡単にまとめておこうと思います。
まず僕が作ったガチャアプリはこちらです。
「あつめてや SP」
リリース記事はこちら
無料で無限にガチャが回せるという夢のようなアプリです！ｗ
あまり技術的に深い話は書きませんが、
このアプリ実装に使った方法を基に、
個人開発アプリでガチャ実装する、ってくらいなら使えそうな(？)話を、
大きなポイントで分けて書いていきます。
・画面の構成と役割
・ガチャ演出について
・ガチャ確率の実装方法
くらいですかね。
実際のアプリの動きも見てもらいながら読んだ方がわかりやすいと思うので、
まずはアプリをインストールしてみてください！！！＼(^o^)／
（少しでもインストール数増やしたい…ｗ）
【画面の構成と役割】
機能的に分けると大きく４つですが、
シーンは１つでつくっていて、表示非表示を切り替える感じにしています。
シーン分けてもよかったんですが、面倒だったのでｗ
①ガチャ引く画面（こんな感じ↓）
②演出＆結果画面
③アルバム画面
④情報画面
まず、①のガチャを引く画面
このアプリはガチャを引くのが主な目的のゲーム（というかそれのみｗ）
なので、
アプリ起動時にはもうこの画面が表示されます。
ここでできるのは3つ。
Playを押すとガチャ実行、
Infoを押すと情報を表示、
Albumを押すとアルバムを表示。
って感じで、そのままですね。
さっきも書いたようにシーンは分けてないので、
InfoやAlbumは、そのまま画面上にポップアップで出るような感じです。
③Album
ガチャのキャラを見せないためにスクショは全部「？」ですが、
未取得は「？」で、
取得済みは、
キャラ画像・名前・設定・出た回数
などを縦スクロールリストで表示しています。
取得したキャラや回数は、
取得したタイミングでPlayerPrefsにキャラのIDと回数を保存していて、
それを基に判断しています。
④Infoには、
ガチャ回した回数・課金してたらいくら使ってるか・最高レア度の実際のゲット確率
など、ちょっと知りたい情報的なのを表示しています。
これもガチャプレイ回数をPlayerPrefsで記録しておいて、
Info開いたときに計算して表示しています。
【ガチャ演出について】
Playを押すと、ボタン類は消えてガチャ演出が始まります！
演出は、
真ん中のクリスタルが光り始める
↓
画面右上の外から流れ星をクリスタルに向けゆっくり落とす
↓
クリスタルに衝突してエフェクトがでる
↓
エフェクトが終わるタイミングで、
ゲットしたキャラカードを回転させながら表示＆名前をスライドインする
を一連の流れとして作っています。
エフェクトも、イラスト素材も
すべてフリー素材を使わせてもらって作ってます！
エフェクト素材はAssetStoreのこちら。
52個ものエフェクトが用意されているすごいやつです。
この中から合ったのを選び、大きさとか光の強さとか少し調整しました。
一連の演出の中で、
アニメーションやエフェクトの発動タイミングは結構肝心なところなんですが、
iTween を使って実装すれば、割と簡単に実現が可能です。
iTween は手軽にアニメーションが実装できる優れもので、
いつもめちゃくちゃ使ってます。
iTween の扱い方は参考になる記事がとてもたくさん出てるので、使いやすいのも魅力です。
こんな風に、oncompleteに
次のエフェクトアニメーションを始めるメソッドを指定しておくと、
void Effect1()
{
iTween.MoveTo(starObj, iTween.Hash(
"x", 0f,
"y", 6f,
"z", 100f,
"time", 2.5f,
"oncomplete", "Effect2",
"oncompletetarget", gameObject));
}
void Effect2()
{
starObj.SetActive(false);
lightObj.SetActive(true);
iTween.MoveTo(lightObj, iTween.Hash(
"x", 0f,
"y", 0f,
"z", -60f,
"time", 1.5f,
"oncomplete", "VisibleCard",
"oncompletetarget", gameObject
));
}
void VisibleCard()
{
// カードを表示
itemImage.gameObject.SetActive(true);
iTween.RotateTo(itemImage.gameObject, iTween.Hash(
"y", 0f,
"time", 2.0f,
"oncomplete", "FinishEffect",
"oncompletetarget", gameObject
));
}
最初のエフェクトアニメーション（上の場合 Effect1() ）を呼ぶとだけで
アニメーションが終わったら次、終わったら次、
という風に自動的に一連の流れをつくることができます。
ちょっと待たせたかったら、iTween.Hashでdelayも指定して遅らせたりできますし、
逆にアニメーションが終わりきるより前に次のアニメーションを始めたければ、
（アニメーション①に 2.0f かかる。1.0f のタイミングで次のアニメーション②を始めたい、など）
アニメーション①にoncompleteの指定はせずに、
アニメーション①の開始時に1.0f待たせるコルーチンを呼び出し、
そちらで、アニメーション②を開始するiTweenを呼ぶ、とするとうまくいきます。
iTween は３Dオブジェクトだけでなく
２Dの移動にも使えるので、
最後のカードの回転、名前のスライドインもすべてiTweenで実装しています。
【ガチャ確率の実装方法】
ガチャ実装で意外と悩むのが、
どうやってアイテムごとに設定された排出率どおりに出させるのか。
僕はUnityの乱数に任せて、結構簡単に実装しました。
（もっとちゃんとしたゲームでは、さらに厳密な方法とってるんだと思いますが…）
int num = Random.Range(1, 101);
抽選処理はこれだけですw
これで、1～100の中からランダムに選ばれた数字が num に入ってきます。
※Unityの乱数についてはこちらの記事が参考になります。
https://xr-hub.com/archives/10747
あとは、この抽選で選ばれた数字に該当するアイテムを取得するだけです。
// こんな感じのアイテム管理クラスを作っておく
public class Data {
public int id;
public string name;
public int min;
public int max;
public Data() { }
public Data(int id, string name, int min, int max)
{
this.id = id;
this.name = name;
this.min = min;
this.max = max;
}
}
// 全部のアイテムデータをリスト化してここに入れておく
List<Data> datas
// 抽選処理
void SelectData(int num){
Data getData = new Data();
foreach(Data data in datas)
{
if(data.min <= num && num <= data.max){
getData = data;
break;
}
}
// getData に選ばれたアイテムデータが入っているので使う
}
Dataのような、アイテム1つ1つごとの設定値を管理できるクラスを用意しておいて、
全アイテムデータをあらかじめ決めておきます。
大事なのは、minとmaxの値です。
たとえば、
確率10％で出したいアイテムが2つあったら、
1つ目に、min →1、max →10
2つ目に、min →11、max →20
さらに確率5％で出したいアイテムが2つあったら、
1つ目に、min →21、max →25
2つ目に、min →26、max →30
という風に1から順番に、かぶらないようにmin と max を設定していきます。
つまり、
1～100の乱数で選ばれた数字が、
1～10だったら1つ目のアイテム、
11～20だったら2つ目のアイテム。
という仕組みです。
上の
SelectData(int num) では、この該当アイテムのピックアップを行っています。
maxが100のアイテムになるまで作ることで、
（全てのアイテムの排出率の合計が100ちょうど）
確率1％～100％までに対応した、ハズレなしの抽選アイテムリストができますし、
もし、1％より低い確率のアイテムを作りたかったら、
はじめの乱数を1～1000にして、
maxも1000までにしてあげると0.1％までの実装が可能です。
全アイテムはDBに保存しておいて、アプリ起動時にListに展開。
とかがいいと思いますが、
僕のアプリでは、DB作るのもめんどいので、
アプリ内にjsonの形で保持していて、
起動時に、jsonからList<Data> への変換を行っています。
ざっくりとですが、
ガチャの実装はこんな感じで実現できます！
少なくとも僕の「あつめてや」はこの方法で作られています(^^)
ガチャ実装のヒントになれば幸いです。
「あつめてや」もよかったら遊んでみてください！！
最後に、このガチャで出てくるキャラにも使っている、
ハイクオリティなイラスト素材「ジュエルセイバーフリー」も紹介しておきます。
このクオリティ＆点数なのに、ほぼ何に使ってもOKという、
めちゃくちゃ太っ腹な素材なのでこれからも使っていこうと思いますｗ
