プログラミング初心者がunityでカードゲームを作ってみたい！【その4】〜カードチェンジスクリプト

前回(プログラミング初心者がunityでカードゲームを作ってみたい！【その3】〜カードを配置する - 社畜主婦の挑戦)の続きです。

カードの作成・配置ができたので、いよいよゲームを動かすための中身を作っていこうと思います。

【スポンサーリンク】

配置はこんな形でできています。グー・チョキ・パーのいずれかのカードをタップすると、上の恐竜カードがグー・チョキ・パーいずれかのカードにランダムに変化することにしたいです。

つまり、下の3枚のカードはボタンのような役割を担ってほしいのですが、そんなことができるのでしょうか。

どうやら画像をボタン代わりにする方法は2通りあるようです。

1.スプライトにコライダー(当たり判定)をつけて、イベントトリガーでクリック時にイベントを発生させる方法(下記参照)

【Unity】2DObjectのSpriteにクリック判定をつける方法 - はなちるのマイノート

2.GUIのボタンを作成し、ボタンの見た目に画像を設定する方法(下記参照)

Unity Buttonを好きな画像にする方法 Unity学習13 - Unityでゲーム、アプリ開発

今回は既にスプライトを配置しているので、1の方法を採用したいと思います。次の機会では2の方法も試してみます。

【スポンサーリンク】

グーのカードをボタンにする準備

まずはヒエラルキービューで右クリックしてUI→Event Systemを作成します。イベントトリガーを使用する場合は、シーン自体にこれを追加する必要があるみたいですね。

次にヒエラルキービューのMain Cameraをクリックし、インスペクタビューのAdd ComponentからPhysics 2DRayCasterをアタッチします。rayは光線という意味で、レイキャスターはカメラから見えない光線を出して、コライダーが設定してあるオブジェクトに衝突した場合にその情報を返してくれる便利な機能です。

次にレイキャスターに反応してもらうために、グーのカードにコライダー(当たりの判定)を付けます。ヒエラルキービューからグーのオブジェクトをクリックし、インスペクタビューのAdd Componentから2dのBox Colliderをアタッチして、Edit Colliderでコライダーの大きさを調整します。これでタップ時に反応する下準備ができました。

さらにAdd Componentをクリックし、今度はEventからEvent Triggerをアタッチします。Add New Event TypeからPointer Downを選択すると、オブジェクトや関数を指定するボックスが出てきます。ここにスクリプトの関数を指定すれば、タップ時にイベントを発生させることができるようです。

【スポンサーリンク】

カードチェンジスクリプト

下準備は完了したので、スクリプトでカードを変化させる関数を作りたいと思います。

プロジェクトビューで右クリックし、C#スクリプトを作成します(GuScriptと名付けました)。ダブルクリックするとエディターが起動するので、早速書いていきます！

ここからは以下の動画を参考にしつつ作っていきます。

書いたコードはこんな感じです。部分ごとに解説していきたいとおもいます。

1. using System.Collections;
2. using System.Collections.Generic;
3. using UnityEngine;
4.  
5. public class GuScript : MonoBehaviour
6. {
7.     public Sprite cardBack;
8.     // アウトレット接続（インスペクタ上で設定）するcardBackという名前のスプライトの宣言
9.     public Sprite[] faces;
10.     // アウトレット接続するfacesという名前のスプライトの配列の宣言
11.     public GameObject Card;
12.     // アウトレット接続するCardという名前のゲームオブジェクトの宣言
13.     public bool show;
14.     // アウトレット設定するshowという名前のブール値の宣言（初期値はfalse）
15.  
16.     SpriteRenderer spriteRenderer;
17.     // spriteRendererという名前のスプライトの宣言
18.  
19.    
20.     void Awake()
21.     {
22.         spriteRenderer = Card.GetComponent<SpriteRenderer>();
23.         // spriteRendererにCardのスプライトを代入
24.     }
25.  
26.     // イベントトリガーに設定するために、publicの関数を作成
27.     public void ToggleFace()
28.     {
29.         // もしカードが裏面（初期値）だったら
30.         if (show == false)
31.         {
32.             spriteRenderer.sprite = faces[Random.Range(0, faces.Length)];
33.             // cardのスプライトにfacesのカードにランダムに代入する
34.             show = true;
35.             // 再度グーをタップした時にcardが変化しないように、showをtrueにしておく
36.         }
37.     }
38.  
39. }

上3行の定型文はデフォルトで記述されており、Unityの機能を使うのに必要です。GuScriptクラスの中身を見ていきます。

1.     public Sprite cardBack;
2.     // アウトレット接続（インスペクタ上で設定）するcardBackという名前のスプライトの宣言
3.     public Sprite[] faces;
4.     // アウトレット接続するfacesという名前のスプライトの配列の宣言
5.     public GameObject Card;
6.     // アウトレット接続するCardという名前のゲームオブジェクトの宣言
7.     public bool show;
8.     // アウトレット設定するshowという名前のブール値の宣言（初期値はfalse）
9.  
10.     SpriteRenderer spriteRenderer;
11.     // spriteRendererという名前のスプライトの宣言

ここでは関数に使うオブジェクトなどを宣言しています。publicが付いているものはGuのオブジェクト外から持ってくる(アウトレット接続)ので、この後インスペクタビューで指定します。

publicが付いていないspriteRendererはこの後このスクリプト内で代入します。

ではまずアウトレット接続をしていきます。一旦スクリプトをセーブしてunityに戻ります。今作っているプロジェクトビューのGuScriptをヒエラルキービューのGuへドラッグ&ドロップするとスクリプトがアタッチされます。

Guをクリックしインスペクタビューを見るとGuScriptの欄に先程publicで宣言した4つのものが指定できる部分があるので、ここに画像やオブジェクトを指定していきます。

まずcardBackは右側の丸から恐竜のカード(カード裏面)を指定します。

次にCardはヒエラルキービューのCardオブジェクトをドラッグ&ドロップします。

showについてはブール値で、デフォルトをFalseにしたいのでチェックが外れたままでOKです。

問題はfacesです。グー・チョキ・パーの3枚のカードを指定したいのですが、プロジェクトビューのカードをクリックするとインスペクタビューがカードのものに切り替わってしまいます。そこで、グーのインスペクタビュー右上の南京錠マークをクリックして鍵が閉まった状態にするとインスペクタビューを固定することができます。この状態でプロジェクトビューのカードの三角からグーをクリックし、shiftを押したままパーをクリックして3つのカードを選択できたらインスペクタビューのfacesにドラッグ&ドロップします。これでアウトレット接続が完了しました！！

またスクリプトに戻ります。

1.     void Awake()
2.     {
3.         spriteRenderer = Card.GetComponent<SpriteRenderer>();
4.         // spriteRendererにCardのスプライトを代入
5.     }

ここではAwake (ゲーム起動時)に、先程宣言したspriteRendererにCardオブジェクトのスプライトを代入しています。CardオブジェクトはこのスクリプトをアタッチしているGuとは別のオブジェクトですが、きちんと宣言してアウトレット接続を行っているので呼び出すことができました。

【スポンサーリンク】

1.     // イベントトリガーに設定するために、publicの関数を作成
2.     public void ToggleFace()
3.     {
4.         // もしカードが裏面（初期値）だったら
5.         if (show == false)
6.         {
7.             spriteRenderer.sprite = faces[Random.Range(0, faces.Length)];
8.             // cardのスプライトにfacesのカードにランダムに代入する
9.             show = true;
10.             // 再度グーをタップした時にcardが変化しないように、showをtrueにしておく
11.         }
12.     }

ここからが本題の、イベントトリガーに設定するToggleFaceという関数です。

showの値 (true、false )でカードが裏面であるかを判断し、裏面だったらCardオブジェクトのスプライトをグー・チョキ・パーのいずれかの画像に差し替える処理を書いています。

Random.Rangeは指定した数字の中からランダムなものを返してくれる便利な関数です。整数の場合引数1以上、引数2未満の中から返してくれます。facesの配列は0 (グー)、1 (チョキ)、2(パー)の3つなので、引数1を0、引数2をfaces.Length (配列の大きさ＝3)として、0・1・2のいずれかを返してくれるようにしています。

これでスクリプトが完成しました！！

早速イベントトリガーに関数を指定してみます！スクリプトを保存してunityに戻ります。Guのインスペクタに追加してあるEvent TriggerのPointer Downにある +をクリックします。左下の四角にヒエラルキービューのGuをドラッグ&ドロップし、右のリストボックスからGuScript→ToggleFaceを選択します。

これでOK！

ゲームを再生してみます。

グーのカードをクリックすると・・・

上のカードがランダムに変化しました！！上手くいきました〜。

次は、カードが変化する際のアニメーションを付けていきたいと思います！

じゃんけんゲーム作成の流れ→初心者がiPhoneアプリを作ってみる〜じゃんけんゲーム〜 - 社畜主婦の挑戦

【スポンサーリンク】

プログラミング初心者がunityでカードゲームを作ってみたい！【その3】〜カードを配置する

前回(プログラミング初心者がunityでカードゲームを作ってみたい！【その2】〜カード作成・広告決め - 社畜主婦の挑戦)の続きです。今回は実際にunityを使って前回作成したカードを画面に配置したいと思います。

【スポンサーリンク】

プロジェクトの下準備

unityを開き、2dを選択して新しいプロジェクトを作成します。

iPoneアプリを作る予定のため、File→BuildSettingを開き、iOSを選択してSwitchPlatformを押下します。

設定が終わったら、File→save as でシーン名を入力して保存します。これで下準備は完了！

画像のスライス

ここからは下記の動画を参考にして進めていきます。

Googleドライブに入れておいたカードの画像をダウンロードし、プロジェクトウインドウにドラッグ&ドロップします。ドロップしたカードをクリックすると、画面右側にインスペクタウインドウが表示されます。

ここで、

・Sprite ModeをSingle→Multipleに変更

・Pixels Per Unitを100から72(カード1枚当たりの横幅)に変更

・Generate Physics のチェックをはずす

と設定を変更し、Sprite Editerを押下します。

スプライトエディターが開くので、Sliceをクリックします。(画面が小さいと見えないことがありますが、広げると出てきます。)ここで、

・TypeをGrid by Cell Sizeに変更

・Pixel Sizeをx→72(カード1枚当たりの横幅)、y→100(カード1枚当たりの縦幅)に変更

・PivotをTop Leftに変更

としてスライスし、スプライトエディター右側のApplyを押下して閉じます。

ここでプロジェクトウインドウのカードにある三角ボタンをクリックすると、カードがそれぞれにスライスされていることがわかります。

【スポンサーリンク】

カードをビューに表示

これだけではビューにカードを表示することはできません。カードを表示させるために、ヒエラルキービューで右クリックして2d→spriteを作成し、cardと名付けます。

Sprite Rendererのspriteの右側丸をクリックして、カード裏面を選択します。Position欄でカードの位置も調整することができます。

次にプロジェクトビューで右クリックし、マテリアルを作成します。ヒエラルキービューのcardをクリックし、インスペクタビューのMaterialに作成したマテリアルをドラッグ&ドロップします。するとインスペクタにMaterialが作成されるので、ShaderをSprites/Defaultにします。Pixel Snapにチェックを入れればOK！！

このPixel Snapというのが重要で、カードを画面表示する際に画像が乱れてしまうのを防いでくれるらしいです。

他の画像も配置

先の「カードビューに表示」の要領で、グー、チョキ、パーの画像も表示します。

それぞれにスプライトとマテリアルを作成したので、ヒエラルキービューとマテリアルビューは以下のようになります。

本来はシーン・スプライト・マテリアルなどでフォルダ分けして作った方が後々見やすくなると思います。

ゲームビューで見ると背景が真っ青なので、ヒエラルキービューのMain Cameraをクリックし、インスペクタビューのBackgroundを好きな色に変更します。カードの位置を調整すると・・・

おお！なんだかいい感じの画面になりました！

次はグー、チョキ、パーのカードをタップすると上の恐竜カードが別の画像に変化するようなスクリプトを考えていきたいと思います。

じゃんけんゲーム作成の流れ→初心者がiPhoneアプリを作ってみる〜じゃんけんゲーム〜 - 社畜主婦の挑戦

【スポンサーリンク】

プログラミング初心者がunityでカードゲームを作ってみたい！【その2】〜カード作成・広告決め

前回(https://hot-houjitea.hatenablog.com/entry/2021/02/04/072236)の続きです。

今回作成するカードゲーム作りの参考に、こちらの動画を見ています。

Card Game for Unity 5 - YouTube

英語ですが割と聞きやすく、画面を見ていれば手順が分かるのでとてもありがたいです。

また、この動画を解説してくださっている、こちらのブログも参考にさせていただきました。

https://tomoarch.com/2019/04/10/unity%25E3%2581%25A7%25E3%2581%25A7%25E3%2581%258D%25E3%2582%258B%25E3%2581%25BF%25E3%2582%2593%25E3%2581%25AA%25E3%2581%258C%25E7%259F%25A5%25E3%2582%258A%25E3%2581%259F%25E3%2581%2584%25E3%2582%25AB%25E3%2583%25BC%25E3%2583%2589%25E3%2582%25B2%25E3%2583%25BC%25E3%2583%25A0%25E4%25BD%259C%25E3%2582%258A%25E3%2581%25AE/

【スポンサーリンク】

カード作成

まずは作成するゲームに必須な材料であるカードを作成していこうと思います。使用するのはiPad版のクリップスタジオです。

ゲームに使用するのはじゃんけんカード(グー、チョキ、パー)、カード裏の4種類ですが、一枚の画像に4枚をまとめ、unity上で4枚にスライスするという流れになります。

動画に使用されているカードに倣って1枚当たりの大きさを横72ピクセル×縦100ピクセルにしようとおもうので、画像の大きさは横が72×4=288ピクセル、縦を100ピクセルで作成します。

ここでふと悩んだのですが、後にunity上でスライスするためには、カードの枠線をきっちり4等分で書かなければなりません。コマ枠とはちょっと異なるので頭を抱えたのですが、こちらの記事がとても参考になりました。

【クリスタ】キャンバスを等分割する方法。 | Blue_Breath_Blog

表示→グリッド・ルーラーの設定で間隔を72ピクセルにし、右上のグリッドにスナップボタンにチェックを入れると等分の線を書くことができます。

ちなみに外枠下線は間隔を100ピクセルに設定し直して書きました。

これでOK！！

あとはお絵かきするだけです。

こんな絵にしてみました。

カード裏面は恐竜です。この画像をpngでエクスポートし、Macで拾うためにGoogleドライブに保存しました。しかし今回動画に準じて72×100ピクセルにしたのですが、描いてるとやっぱり画像が荒いような、、、。ちょっと不安だけどこのままいってみます。

広告決め

広告を考えるに当たってこちらを参考にさせてもらいました。

【１分理解】Unity製のゲームに広告をつけて収益化したいと思ったときにしっておくべきこと ｜Unishar-ユニシャー

簡単にいうと、unity adsは動画広告、admobはさまざまな形態があるようです。今回はバナー広告にしたいのでadmobを選択したいとおもいます。細かい作業は実際に広告をつける段階で行うとして、とりあえずadmobのアカウントを作るところまで行いました。

次回から実際にunityを使って作業していきたいと思います。ドキドキ・・・

じゃんけんゲーム作成の流れ→初心者がiPhoneアプリを作ってみる〜じゃんけんゲーム〜 - 社畜主婦の挑戦

【スポンサーリンク】

プログラミング初心者がunityでカードゲームを作ってみたい！【その1】

前回の記事(https://hot-houjitea.hatenablog.com/entry/2019/09/07/204353)で初心者なりの下準備はできました。

ところで私が将来的に作成したいアプリは今のところ2Dのカードゲームです。さあ簡単なカードゲームを作ってみよう！と思ったのですが、前回読んだ初心者教材本ではそのような記述が一切なかったため、何から始めてよいか全く分かりません、、、。書籍も探してみたのですが、いまいちぴったりくるものが見つからなかったのでネット記事を中心に情報収集しながら少しずつ進めていこうと思います。

【スポンサーリンク】

今回のアプリ作成の目標は、

1.カード形式のゲームにする(選択する、めくる、ランダム処理を行う)

2.広告を付けてみる

とします。きっちり達成できるかどうかはまだ不明ですが、、、

というわけで、上の目標を元にゲームの原案を考えてみました。

題して「じゃんけんカードゲーム」です！

幼稚園児レベルのくそつまらん内容ですが、この程度でも未知の領域なので不安ではあります。

途中で少し内容変更があるかもしれないですが、とりあえずはこの原案を元に作っていこうと思います。

次回はアプリの部品(カード、広告)について考えていこうと思います。

じゃんけんゲーム作成の流れ→初心者がiPhoneアプリを作ってみる〜じゃんけんゲーム〜 - 社畜主婦の挑戦

【スポンサーリンク】

とりあえず何かアプリを作ってみたい！【初心者のプログラミング】

私はプログラミングのプの字も分からない初心者です。しかし独学でアプリを作ってみたい！という思いが前からあったので、記録していこうと思います。同じ初心者の方の参考になれば幸いです。

【スポンサーリンク】

ちなみに私のプログラミングを始める前のスペックとしては、

• プラインドタッチもままならない。プログラミングなんて全くやったことない
• 小さい子持ち兼業主婦のためまとまった時間が取れない、そしてズボラ
• アラサー文系なので頭が固く、理解するのに時間がかかる

というダメ人間なので、勉強方法は

• 初心者本をKindleで買って少しずつ読む
• 素材はiPadやスマホで暇な時に探したり作ったりする
• パソコンで作業する時間を出来るだけ短く出来るよう、だいたいの構文は予めスマホのメモ帳なんかに書いておく
• 達成感を得られるように簡単なアプリから作る

をモットーにやっていこうと思います。基本暇な時に携帯端末で勉強する形です。なので更新速度は遅いと思いますがよろしくお願いします。経験者の方はアドバイスなど頂けたら嬉しいです。

自作アプリを作り始める前にした事

どの言語にするか？

ネットで色々と調べた結果、iosやandroid、パソコンゲームまで無料で作れて、初心者でも直感的に操作できるUnityを使ってみる事にしました。そこで必然的に学ぶ言語はc#に決定！

使用する機器

iosのアプリを中心に作りたいと思っているので、MacBook Airを購入しました。

またイラストは将来的に自分で書きたいのと、Kindleで本を読むためにiPad Proとアップルペンシルを購入。

費用がすごいことに・・・！もともとタブレットで絵を描くことに憧れていたので、他に理由ができてしまうとアッサリポチってしまいました。しばらく自分の物は買わないんだ・・・！
普段使っているスマホはiPhone8なので、これで完全にアップルに染まりました。

基本の勉強

私は本当にプログラミングについて何も知らないため、始めようにも何が分からないか分からない状態。なので初めは初心者本を買って基本を学びました。本は評価の高さで選びました。

これ。適当に選びましたが、何も知らない私でもスラスラ読める素晴らしい本でした！こういった本は最後まで読めないことが多いんですが、完読！！例題のアプリも全て作ることができました。一つ一つ易しく書いてあるので、通勤中や寝る前に読んでコード内容を理解してからパソコンを開いてサッと作業できます。まさに私にピッタリ！！

ここまでを下準備として用意しました。次回から自分なりのアプリを作成していこうと思います。こんな私でも何が作ることができるのか・・・？

【スポンサーリンク】

【アニメ感想】「どろろ」を見ました

アマゾンプライムで「どろろ」を見ました。

手塚治虫の漫画が原作の伝奇的な物語です。手塚作品はいくつか読みましたが、どろろは読んでいませんでした。ただ、アニメを見ていて

• 命の優劣について考えさせられる
• 後味の悪い話もある (悪い意味でなく、登場人物を成長させるための話)

という点で手塚作品らしさを感じました。原作から改変があったとしても上手くできたのではないかなと思うほどに、作品へのリスペクトを感じさせる内容でした。

以下、少しネタバレを含みます

【スポンサーリンク】

↑どろろと百鬼丸。見る前どろろだと思っていたキャラは百鬼丸でした。笑

作画

キャラクターはいわゆる手塚風の絵柄ではありませんでしたが、今風に丁寧にデザインされています。最終回まで特に絵が乱れることもなく、戦闘シーンもカッコよく描かれていました。

声の演出

主人公どろろの声優は鈴木梨央さん。聞いたことのない名前だなと思ったら、14歳の女の子で、子役として活躍している方みたいです。ベテラン並にお上手！中性的な声がぴったりでした。今後の声優としての活動に期待できますね。

そして百鬼丸の声は鈴木拡樹さん。こちらも聞いたことが無いな〜と思っていたら、舞台中心に活躍されている俳優さんのようです。百鬼丸は初めは耳も聞こえず声も出せない状態でした。声にならないような声から始まり、叫んだり話したりするようになるまでの絶妙な演技は素晴らしかったです。これからも声の演技やってほしいと思いました。

物語展開

序盤わりとテンポよく、ダレることなく話が進んだので話に入り込みやすかったです。中盤で百鬼丸の葛藤にたっぷり時間をかけた形になりました。この物語はここが肝なので確かに時間をかけるべきなのですが、ラスト二話くらいが駆け足であっという間に終わってしまいました。ラストにももう少し時間をかけても良いかなあと思いました (特に弟と和解するところ)。

感想

何をしても取り戻せない過ちを犯したうえでそれを抱えながら生きていく、という形のハッピーエンドでした。鬱エンドになるのではないかとハラハラしていたので私にとっては良い落とし所でした。こういったラストに誘導していくのは難しいと思うんですが自然な流れだったので、人にオススメできるレベルの良い作品だったと思います。

後日談、というほどのものではありませんが、ラストにどろろが女の子らしく成長した姿が少し映し出されました。願わくばもう少し見たかった・・・！

【スポンサーリンク】

アンパンマンの車おもちゃを買いました

息子、1歳10ヶ月。車デビューしました！


親も車持ってないのに〜！すご〜い！
普段から車が走っているのを見るたびに「ブーブー！！」と興味津々だったので、早速気に入った様子。

足で蹴って進むタイプなのですが、やはり上手くいかず、私や夫に後ろから車を押してもらうととても楽しそうにしていました。

しかしズボラな夫は途中から車を足で蹴って押すようになり、調子に乗った結果



上手くゴロン！と受け身をとった形になり、大事にならなかったので良かった・・・

子供ってスリリングな遊びを求めるので、大人も調子にのってしまうと思いがけない事故につながってしまいますね・・・気をつけないと。

【スポンサーリンク】