こんにちは、まさのをです。

今回はちょっと趣向を変えて、ゲームアプリというよりはエンタメ系アプリ？を作ってみました！


ピクトグラムを組み合わせてオリジナルのイラストを作れるアプリ

その名も「pictmade」です！



ちなみにこの記事のトップにあった画像。

これは何を表しているでしょう？？




ーーーーーーーー





ーーーー







答えは「りんご争奪戦」です！


…って、なんやそれ…。




まぁこのイラストはさておき…

「pictmade」では約40種類のピクトグラムや図形、小物アイコンなどが用意されていて、

それらを自由に使ってオリジナルのイラストを簡単に作ることができます！



作ったイラストは、そのまま友達に見せて何を作ったのか当ててもらったり、

SNSに投稿して大喜利大会みたいな感じで遊んでもらうのも楽しいと思います！


ちなみにアプリから直接SNSに投稿できる機能も付いているので、
誰でも簡単にシェアできるようになっています！

↓こんな感じ

他にもカップルや友達同士でいるときの

新幹線の移動時間やテーマパークのアトラクションの待ち時間など、

ちょっと時間がある。でもガッツリとした遊びがしにくい…って時にもありです！


それぞれ自分のスマホで作りあって、できたら相手に見せて、当ててもらって…

ってやってると、気づいたら時間が過ぎちゃってるはず！(^^)



ーーーーーー


今回のアプリ、
発想のキッカケは「リアル脱出ゲーム」でした。


僕はリアル脱出ゲームが好きで結構行くんですが（わりとガチ勢）


とある公演で、
このピクトグラムを組み合わせてお題を相手に伝えるっていうギミックがありまして、

そのゲーム内でつくったのがすごく楽しかったんです！



なんか、ぱっと素材を見ると作れなさそうでも、
雰囲気を伝えるのには十分なくらいには作れてしまう感じとか、

この素材をこう組み合わせると、これに見えるな！とか発見があって

あとで全然関係ないオリジナルのものを何パターンも作って遊んだりしてしまいましたｗ





この時に僕のなかで

「おもしろい」＆「アプリでも実現できそう」

が組み合わさってしまったので、すぐ作っちゃいましたｗ





こういうアナログで楽しかったことをデジタルにすると、

「物が散らからない」とか「いつでもできる」などの利点が増える一方、

操作性が悪いと一気に楽しさが損なわれてしまうので、

アプリの使いやすさには特に気を使いました！




実際にアプリを触ってもらったらわかると思いますが、

Instagramのストーリー作成画面

と同じような感覚で操作できることを目指して開発しています。


多くの人が直観的に使える操作性を重視しているであろう超大手アプリに近づけることで、

「pictmade」も非常に扱いやすいアプリになってると思います！


よかったらインストールして遊んでみてください！！



最後にクイズをいくつか。

これらは実際に「pictmade」で作ってみたものです！
なにを表しているでしょーか！？


①スポーツ

②映画

③アニメ

④ゲーム

⑤ゲーム、アニメ
（これは知らない人多いかもですが、知ってる人はわかるはず！）




答えはスクロール↓





ーーーーーーーー














ーーーー







ーー



【答え】

①バレーボール
②スパイダーマン
③クレヨンしんちゃん
④マリオ（ゴールのところ）
⑤STEINS;GATE

でした！

こんにちは、まさのをです。

今回も最近リリースしたアプリの話を書いていきます！！


皆さんはソシャゲとかって結構やりますか？

最近はクオリティの高いものもかなり増えてきてますよね。

僕が最近ハマってるのは「原神」です！

オープンワールドRPG、いうことなしの良ゲームです。

クオリティ＆自由度高すぎで、もうソシャゲって呼んでいいのかわからないレベル…ｗ




まぁどんなソシャゲでも、一度ハマりだすと大変ですよね。。。


主にガチャの課金で…ｗ






実は僕、そんな方にオススメの

無料で無制限にガチャが回しまくれる

非常にお得なアプリ、2年前に作ってたんです！ｗ





無限ガチャアプリ「あつめてや」



これがありがたいことに、2年経った今でもポツポツとダウンロードされてるみたいで…ｗ



完全に一発ネタ的に勢いで作ったアプリだったんですが、

意外にも需要があるのか！？


…ということで調子に乗って、第2弾作っちゃいました！＼(^o^)／笑



その名も「あつめてや　SP」

もちろん第2弾というからには、かなり進化させてますよー！ｗ



はい、もうアイコンから進化してますね。

中央のガチャマシンが、それっぽいかっこいい感じのクリスタルになって！
さらに「Special」の文字！



これはかなり進化してそうですねーｗ





…

って、アイコンがちょっと変わっただけで

実は全く進化してないんじゃないかっていう嘘っぽい書き方してますけど、

アプリの中身も、本当に超進化してますよ！



ガチャで出てくるキャラを見せるのはネタバレになってしまうので…

ガチャ回す画面のスクショ比較を。

「あつめてや」
いらすとやがふんだんに使われてますねーｗ



これが、Specialではこんな風に！

「あつめてや　SP」
背景やボタン類、光り輝くクリスタル。
全体的な重厚感がかなり違いますね！！


Specialになったことで、
見た目のクオリティがめちゃくちゃ上がってるのがわかっていただけると思います！
（個人的には元のいらすとや満載の感じも好きですがｗ）




そしてさらに、旧あつめてやでの不満点でいただいていた

「音が欲しい」「演出がダサい」

…などなどもガッツリ改善してます！


もちろん出てくるキャラもすべてクオリティアップ！

美少女、イケメン、いっぱい出ます！


この辺は実際のアプリでご覧ください(^^)



夢のような無限ガチャ。


気になってくれた方はぜひ！




新旧比較で、むしろ旧あつめてやが気になった、

まぁ暇やしどっちもやったるわ！って方、

旧あつめてやのリンクはこちらですｗ




「Unity　ガチャ」　とかでこの記事にたどり着いてくれた制作側の方向けにも、

別記事でこのアプリの作り方を簡単にまとめておきました。

ぜひこちらの記事もご覧ください！

こんにちは、まさのをです。

今回は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



あとは、この抽選で選ばれた数字に該当するアイテムを取得するだけです。




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という、
めちゃくちゃ太っ腹な素材なのでこれからも使っていこうと思いますｗ