【unity1week】Judge or Cardの作成経緯

2020年12月24日 09:52

『祝』note初投稿！！

以前からnoteを書いてみたいとは思っていたのですが、重すぎる腰のせいで手を出さずにいました

そんな思い腰を上げるきっかけになったのがnaichiさんの以下のツイートです

Unityさんより #unity1week に連動したプレゼントキャンペーンを開催していただけることになりました。
条件を満たせば「全員」もらえるのでお見逃しなく〜！
「Unity 1週間ゲームジャム」に投稿したあなたの作品をnoteに埋め込んで広めよう！プレゼントキャンペーン実施中 https://t.co/QMA697u4y7
— naichi@びはんとマルの森 (@naichilab) December 23, 2020

ということで、プレゼント目当てにnoteで初投稿することを決意しました〜

早速ですが私が今回作成したゲーム『Judge or Card』についてつらつらと書いていきます！（以下が、私の作品です）

プレイ動画

とりあえずどんなゲームか気になる方のために動画おいときます。

ヌメロンルール

はじめに、みなさんヌメロンはご存知でしょうか？

ヌメロンは2人でやるゲームで、紙とペンさえあれば誰でもできます！

簡単にどんなゲームか説明すると、お互いに最初に0~9までの数字を3つ(重複不可)決めて相手に見えないように紙に横並びで書きます（「053」のように）

お互いに紙に書いたら先攻後攻を決めて、交互に相手の決めた数字を当てにいき、相手の「数字と位置」を当てることができたら勝利となります！

ちなみに野球のように、先攻が当てた後はもう一度後攻の番が来てそれで当てることができたら引き分けとなります

ここからが重要で、相手の宣言した数字と位置があっていた場合EAT（イート）と、数字はあっているが位置が違う場合はBITE（バイト）と言います

先ほどの例から、例えば相手が「032」と言ってきた場合、こちらは「053」なので「1EAT,1BITE」と返します

（位置と数字が合っている(今は0)のが1つと数字のみ合っている(今は3)のが1つなので）

と言った感じでお互いに繰り返していくゲームです！

Judge or Cardルール

今回私が作成した『Judge or Card』はこのヌメロンからヒントを得ています〜

私のは「数字と位置」を当てるのではなくアイテムの「形と色と位置」を当てるゲームに変更しました！

数字のままだと、数学に苦手意識がある方はやらないだろうなと思ったので！

少しでも興味（特に小さい子に）を持ってもらうために以下（下画像の緑枠内）のようなカラフルな20種類のアイテムにすることにしました〜

このゲームきっかけに「考える力」を付けてもらえると私は大大大満足です！

ヌメロンの場合、ヒントはEATとBITEだけだったのですが今回は「形と色と位置」を当てる必要があるので次の5つのヒントが与えられます「Hit」「ShapePosition」「ColorPosition」「Shape」「Color」

それぞれ以下のような特徴があります

Hit（H）は、「形と色と位置」が合っている場合

ShapePosition（SP）は、「形と位置」が合っている場合

ColorPosition（CP）は、「色と位置」が合っている場合

Shape（S）は、「形のみ」が合っている場合

Color（C）は、「色のみ」が合っている場合

これらのヒントから相手のアイテムを推理しましょう！

今回は説明を割愛しますが『Card』機能もあります

ルール説明はこの辺にして、ここからは『Judge or Card』の作成経緯や苦労した点について記載していきます

Judge or Card作成のきっかけ

作成のきっかけは、ズバリ！「アセット」です！

（まぁ元々、ヌメロンを作りたいなとは思っていたのですが実はすでに友人がヌメロンのアプリを作成しており同じ物を作成するのは気が引けたので着手していませんでした）

アセット？どゆこと？と思った方も少なからずいることでしょう(_ _)ｳﾝｳﾝ

私がゲームのアイディアを探すときにはよく2つの行動をします

一つは「散歩」です。

開発者は基本的に屋内にこもりがちだと思うのですが、外を歩いていろいろな景色を見ることで突然アイディアが降ってくることは少なくありません。是非、屋内にこもりがちな方は散歩することをおすすめします！頭もスッキリしますし！

そしてもう一つは「アセット」を眺めることです！

散歩して何も思いつかなかった時は、よくasset storeや積みセット（積んでるasset）を眺めています！このアセットを使って何かできないかなと！

はいそうです、なのできっかけは「アセット」なのです！

以前アセットバンドルセールで購入して積んでいたアセットとヌメロンを合わせたら何かできるんじゃないかぁと考えました

が、すぐに今の形が思い浮かんだわけではありません、ここからゲームバランスなどを考え少しづつ修正し、ようやく今の形になりました（1,2日くらいルールについて考えるのに使いましたね...）

と、まぁこんな感じで作成を始めたわけですが、実装上苦労した部分が多々合ったのですが、今回は最も頭を抱えた部分について記載してnote初投稿を締めたいと思います！

実装する上で苦労したこと

最も苦労したのは、パーティクル周りです笑

ゲームクリア時にテキスト表示だけだと味気がないので、パーティクルで雪を降らせようと安易に思ったのです....

パーティクルを作成して、スクリプトでオンオフ切り替えればいいだけじゃんと思っていたのですが、いざやってみるとパーティクルが画面に表示されませんでした...Sceneビューでは確かに配置されているのに...

まぁここはすぐに原因を見つけました。

それはCanvasのRender Modeが「Screen Space - Overlay」になっていた殻でした。そりゃそうですよね〜

この設定だとUIが最前面に表示されてしまうのでパーティクルが背景画像の後ろに行ってしまい、Gameビューでは見えないというだけのことでした

はいはい、じゃあここを変更して「Screen Space - Camera」にしますよっと....おけおけ表示された！

と思っていたのですがそこを変えたことによって他の場所で不具合が発生しました。

アイテムを選択する際、ドラッグ＆ドロップで移動させるのですが、ドラッグ中（白い粉じゃないですよ？）のアイテムの位置がとんでもないところまで移動してしまったのです（x:11000 y:20000みたいな？）

これだとUXが下がってしまうと思いなんとか解決策を求めてgoogleの奥地へと向かったのですが、迷子になってしまい、結局解決策を見つけることができませんでした...

どちらかを諦めるしかない...と絶望し、どちらを排除するか散歩しながら決めようと思い気分転換もかねて散歩することに

しかし、ここで散歩効果発動！！

ゲーム終了時にCameraのRender Modeをスクリプトで変更すればいいだけじゃん！！！

と思いつきました。結構単純なことなのですが、おんじ姿勢で同じことばっかりやっているとこんな簡単なことさへもわかんなくなってしまうんだなぁと痛感...

ってことで、ゲーム終了時に

canvas.renderMode = RenderMode.ScreenSpaceCamera;
canvas.worldCamera = Camera.main;

上記コードを実行し、無事期待通りの動作をしていただくことに成功！（canvasは適宜取得してね！）

めでたし、でめたし！

最後に

最後にもう一度ゲームのリンク貼っておきます！遊んでみてね！

相手がいればオンライン対戦もできるので是非やってみてください！

（※WEBはWEB同士のみ）

【WEB】

https://unityroom.com/games/judge-or-card

【Android】

https://t.co/tmrvg9h2jO?amp=1

【iOS】

https://apps.apple.com/jp/app/judge-or-card/id1545312166

とまぁこんな感じでnote童貞卒業します！

ここまで見ていただきありがとうございました〜〜！

この記事が気に入ったらサポートをしてみませんか？