まさのをブログ ~アプリ制作やボードゲームや映画など、好きなことなんでもブログ~

自分で作ったアプリのお話、ボードゲーム、映画のレビュー、についての情報を発信します

カテゴリ: プログラミング

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

今日も最近作ったアプリの紹介をします!



今回作ったのはこちら「おしだしにゃんこ」です。

おしだしにゃんこ ~ねこの2人対戦ボードゲームアプリ~

おしだしにゃんこ ~ねこの2人対戦ボードゲームアプリ~
無料



ボードゲームのOstle(オストル)のルールを基に作った、ねこのボードゲームアプリです。


ねこのボードゲームアプリ、
過去に「にゃんスター」と「ねこに壁ドン」2つを作っているので今回で3つ目!

そんなつもりではなかったんですけど、
気づいたらねこアプリシリーズ化してきましたw




では早速、このアプリの遊び方を簡単に説明していきます!


このゲームは2人対戦専用のゲームです。

スマホ1台を机の上などに置いて、
向かい合って盤面を見ながら、交互に操作していく感じで遊びます。



プレイ画面はこんな感じ↓
Screenshot_20201224-145610
そして自分の番にできるのは
自分のねこか、共通の穴 どれかを縦横1マスどこかに動かすだけ。

これを交互に行っていき、
相手のねこを2匹 先にゲットした方が勝者となります!


相手のねこは、
盤面の外に押し出す か 穴に落とす ことでゲットすることができます。


…押し出す!? 落とす!?


こういう盤面のボードゲームでは、

相手のコマがいるマスに移動したら取れる。
とか、
はさむと取れる。
とか…

よくあるパターンをイメージしてしまうんですが…。

このゲームでは、ここがちょっと違います。




動いたねこに連動して、
押し出されるような形で他のねこも勝手に動く んです。



たとえばこの場合、
キャプチャ3
黒猫は上下左右どこかに1マス動けるのですが、
上(白猫がいるマス)に1マス動くとします。


そうすると、この白猫は押されるように動き…
さらに上のマスに自動的に移動させられます。
cap4

この仕組みを利用して、
盤面の外 か 穴のあるマス に押し出すことができれば、
相手のねこをゲットすることができるんです!





勝つためには色々なパターンがあり、結構あたまを使うんですが、
ルールと操作はシンプルなので初めての人ともすぐに遊べます!



家族や友達やカップルで、
手軽にちょっと頭使うボードゲームでもしてみたいな!って時にオススメです!

よかったら遊んでみてください。

おしだしにゃんこ ~ねこの2人対戦ボードゲームアプリ~

おしだしにゃんこ ~ねこの2人対戦ボードゲームアプリ~
無料


まだオンライン対戦の実装はできてないので、

1台のスマホで対面で遊ぶ遊び方しかできないのですが、

今後アップデートで対応していこうかなぁとは思っています…!



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

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


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

その名も「pictmade」です!

pictmade 「ピクトメイド」-これって何の絵?? ピクトグラムメーカー

pictmade 「ピクトメイド」-これって何の絵?? ピクトグラムメーカー
無料



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

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




ーーーーーーーー





ーーーー







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


…って、なんやそれ…。




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

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

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



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

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


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

↓こんな感じ
Screenshot_20201124-151546
他にもカップルや友達同士でいるときの

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

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


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

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



ーーーーーー


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


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


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

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



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

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

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





この時に僕のなかで

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

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





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

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

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

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




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

Instagramのストーリー作成画面


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


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

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


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

pictmade 「ピクトメイド」-これって何の絵?? ピクトグラムメーカー

pictmade 「ピクトメイド」-これって何の絵?? ピクトグラムメーカー
無料



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

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


①スポーツ
Screenshot_20201121-101614
②映画
Screenshot_20201121-104546
③アニメ
Screenshot_20201121-103601
④ゲーム
Screenshot_20201119-182301
⑤ゲーム、アニメ
(これは知らない人多いかもですが、知ってる人はわかるはず!)
Screenshot_20201121-110628



答えはスクロール↓





ーーーーーーーー














ーーーー







ーー



【答え】

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

でした!

banner

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

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


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

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

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

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

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




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


主にガチャの課金で…w






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

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

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





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



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



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

意外にも需要があるのか!?


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


あつめてや SP ~無限ガチャゲーム~

あつめてや SP ~無限ガチャゲーム~
無料



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

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



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

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



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







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

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

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



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

ガチャ回す画面のスクショ比較を。
キャプチャ
「あつめてや」
いらすとやがふんだんに使われてますねーw



これが、Specialではこんな風に!
Screenshot_20201112-160718
「あつめてや SP」
背景やボタン類、光り輝くクリスタル。
全体的な重厚感がかなり違いますね!!


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




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

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

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


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

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


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



夢のような無限ガチャ。


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

あつめてや SP ~無限ガチャゲーム~

あつめてや SP ~無限ガチャゲーム~
無料





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

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

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

あつめてや 〜無限ガチャゲーム〜

あつめてや 〜無限ガチャゲーム〜
無料




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

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

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


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

今回はUnityでのガチャの作り方を簡単にまとめておこうと思います。


まず僕が作ったガチャアプリはこちらです。

あつめてや SP ~無限ガチャゲーム~

あつめてや SP ~無限ガチャゲーム~
無料



「あつめてや SP」

リリース記事はこちら


無料で無限にガチャが回せるという夢のようなアプリです!w





あまり技術的に深い話は書きませんが、

このアプリ実装に使った方法を基に、
個人開発アプリでガチャ実装する、ってくらいなら使えそうな(?)話を、
大きなポイントで分けて書いていきます。


・画面の構成と役割
・ガチャ演出について
・ガチャ確率の実装方法



くらいですかね。



実際のアプリの動きも見てもらいながら読んだ方がわかりやすいと思うので、

まずはアプリをインストールしてみてください!!!\(^o^)/
(少しでもインストール数増やしたい…w)







【画面の構成と役割】

機能的に分けると大きく4つですが、

シーンは1つでつくっていて、表示非表示を切り替える感じにしています。

シーン分けてもよかったんですが、面倒だったのでw


①ガチャ引く画面(こんな感じ↓)
Screenshot_20201112-160718
②演出&結果画面

③アルバム画面

④情報画面



まず、①のガチャを引く画面

このアプリはガチャを引くのが主な目的のゲーム(というかそれのみw) 

なので、
アプリ起動時にはもうこの画面が表示されます。


ここでできるのは3つ。
Playを押すとガチャ実行、
Infoを押すと情報を表示、
Albumを押すとアルバムを表示。

って感じで、そのままですね。

さっきも書いたようにシーンは分けてないので、
InfoやAlbumは、そのまま画面上にポップアップで出るような感じです。

③Album
Screenshot_20201112-160734
ガチャのキャラを見せないためにスクショは全部「?」ですが、

未取得は「?」で、

取得済みは、

キャラ画像・名前・設定・出た回数 

などを縦スクロールリストで表示しています。

取得したキャラや回数は、
取得したタイミングで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 は3Dオブジェクトだけでなく
2Dの移動にも使えるので、
最後のカードの回転、名前のスライドインもすべて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> への変換を行っています。



ざっくりとですが、
ガチャの実装はこんな感じで実現できます!
少なくとも僕の「あつめてや」はこの方法で作られています(^^)

ガチャ実装のヒントになれば幸いです。



「あつめてや」もよかったら遊んでみてください!!

あつめてや SP ~無限ガチャゲーム~

あつめてや SP ~無限ガチャゲーム~
無料






最後に、このガチャで出てくるキャラにも使っている、
ハイクオリティなイラスト素材「ジュエルセイバーフリー」も紹介しておきます。



このクオリティ&点数なのに、ほぼ何に使ってもOKという、
めちゃくちゃ太っ腹な素材なのでこれからも使っていこうと思いますw

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

また新しいアプリをリリースしました!

今回作ったのは「エアーホッケー」です。


ふたりでエアーホッケー Air Hockey

ふたりでエアーホッケー
無料




ゲーセンなどにあるお馴染みのエアーホッケーをアプリ化してみました。


以前作ったボードゲームアプリ「にゃんスター」「ねこかべ」のように、

1台の端末を使ってふたりで遊ぶアプリになっています。





スマホを机などに置き向かい合って座り、それぞれが画面の半分を使います。

自分側半分の画面上で指を動かすと、マレット(エアーホッケーの持つやつ)が連動して動くので、

プレートをはじき返して相手のゴールにいれます。


大量のプレートが出てきたりとか、ボーナス点とか、そういうのは特に設定してない
とてもシンプルなエアーホッケーです。

動きはゲーセンにある実際のエアーホッケーに近い感じで作れたかなぁーと。



何度でも無料で遊べるので、

友達同士、カップル、夫婦などで遊んでみてください!

軽く遊べるので、お店で料理が出てくるのを待ってる間とか、

ちょっと空いた暇な時間などにもおススメです!!\(^o^)/

ふたりでエアーホッケー Air Hockey

ふたりでエアーホッケー
無料

↑このページのトップヘ