【Unity ゲーム制作】神経衰弱ゲームを作ろう！〜その3 （ カード生成のやり方）
前回はCardオブジェクトのPrefabを作成しました。
今回はカード生成用のマネージャークラスで
Prefabを生成してみましょう！
Hierarchyに GameManagerオブジェクト
を作ろう！
今回はCanvas外部にCreateEmptyを生成します。
Hierarchy 上で右クリック → 3DObject → CreateEmptyを選択しましょう。
ここで作ったGameManagerオブジェクトは、Manager系のクラスのアタッチ用に作成しました。
それではここに カード生成用のクラスをアタッチしたいと思います。
カード生成専用のクラスを作ろう！
まずは CardCreateManager.cs を作成し、
先ほど作ったGameManagerオブジェクトにアタッチしましょう
CardCreateManagerのプロパティ
アタッチした部分を見ると、文字と空白になっている部分があると思います。
これはCardCreateManagerクラスのPublic型の変数です。
詳しい説明は省きますは、今回はこの変数に該当するオブジェクトをアタッチしたいと思います。
以下の動画の通りに、CardPrefab のところに、前回作成したCardオブジェクトのPrefabをフォルダからアタッチしましょう。
r
CardCreateManagerの変数が動画の用に変更されれば成功です。
画像を導入するフォルダを作成する
それではいよいよカード用の画像を読み込みたいと思います。
画像は任意の画像を3枚、いらすとやなどから拝借してください。
本記事では筆者が描いたイラスト??? を基に解説していきます。
まずは画像を入れるフォルダをUnityに作成しましょう。
Resourcesフォルダ内部に Image フォルダを作成してください。
これで画像を入れ込む場所が用意できました。
カード用の画像をUnityに導入しよう！
それでは画像をUnityに読み込ませましょう。
やり方はとても簡単。
画像を選択して先ほど作ったImageフォルダに直接入れ込むだけ！
これ以外だと、Unityフォルダを開いてそこに入れる方法もあります。
参考画像には突っ込まないで下さい。。。
導入した画像をSpriteに変更しよう！
画像の読み込みは成功しましたが、そのままではUnity上で使用することはできません。
2Dオブジェクトの画像として扱える用にModeを変更しましょう。
以下の動画を参考に変更してみてください。
画像を選択して右側にでてくる部分をSpriteに変更しましょう。
画像のようになれば成功です。
今回は背景が透明なのでこのようになっていますが、透過処理がない場合でも画像のサムネイルなどが変更されます。
CardCreateManager で 実際にカードを生成する
いよいよソースコードを記載しましょう。
サンプルコードをCardCreateManagerに記述してください。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
public class CardCreateManager : MonoBehaviour {
// 生成するCardオブジェクト
public Card CardPrefab;
// 「カード」を生成する親オブジェクト
public RectTransform CardCreateParent;
void Start () {
Card card = Instantiate<Card> (this.CardPrefab, this.CardCreateParent);
}
}今回は Instantiate を使用して CardPrefabを生成しております。
Instantiateは動的にオブジェクトを生成したい時に使用されます。
CardCreateParent を引数として渡していますが、この場合、CardCreateParentの子オブジェクトとして生成されます。
ここまで書けたらGame を起動してみましょう。
「CardField」の子オブジェクトに「Card (Colne )」が生成されていれば成功です！
【Unity ゲーム制作】神経衰弱ゲームを作ろう！〜その２
前回は Grid Layout Group を使ったゲーム場面のフレーム作成を行いました。
今回は「カードクラス」のスクリプトを作成して行きたいと思います！
スクリプトを作成しよう！
まずは「Script」フォルダを生成しましょう。
Assets を右クリックして Create → Folder を選択し、名前をScript に変更しましょう。
その後、Scriptフォルダに 「Card」スクリプトを生成しましょう。
「Script」フォルダ内を右クリックして 「Create → Script」を選択。
名前を 「Card」を設定しましょう。
上記の様になっていれば成功です！
Card.csにソースコードを記述しよう！
今回は「Card.cs」の要素作成をメインとします。
以下のコードをCard.csに記述して下さい。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class Card : MonoBehaviour {
// カードのID
public int Id;
// 表示するカードの画像
public Image CardImage;
}
記述し、Card.cs を保存したら次に進みましょう。
Cardプレハブ( Prefab ) を作成しよう！
まずは前回作成したimageの名前を「Card」に変更しましょう。
そしたら新たに「Prefabs」フォルダを作成しましょう。
但し、その前に「Resources」フォルダが作成されているか確認してください。
存在しない場合はまずは「Resources」フォルダをAssetの下に作成しましょう。
その後、「Resources」フォルダの内部に「Prefabs」フォルダを作成します。
CardオブジェクトをPrefabsフォルダにアタッチする
次はHierarchyにある「Card」オブジェクトをクリックします。
そのまま下にある「Prefabs」フォルダまで引っ張っていき、フォルダ内にきたらクリックを解除しましょう。
画像の様に青色のオブジェクトが出てきたらPrefab化が成功しました。
「Card」Prefabに 「Card.cs」をアタッチしよう！
次は先ほど作った「Card」Prefabに スクリプトをアタッチしましょう。
Script フォルダにある「Card.cs」を選択したまま、Hierarchy にある「Card」オブジェクトにアタッチしましょう！
アタッチが成功すれば以下の画像の通り、「Card」オブジェクトのinspectorに「Card.cs」が追加されています。
アタッチした 「Card.cs」のプロパティを設定しよう！
アタッチした「Card.cs」を見てみると 「Id」と「 CardImage」が表示されています。
今回はこの「CardImage」に、「Card」オブジェクトに追加されてあるImageコンポーネントをアタッチしましょう。
アタッチ方法
以下の様に、「Card.cs」のプロパティに「Card」オブジェクトの Imageコンポーネントが選択されました。
変更した情報をPrefabに反映しよう！
注意すべきポイントはここです。
ここまで変更した「Card」オブジェクトですが、変更した内容を保存しないとPrefabには反映されません。
Cardオブジェクトの inspectorの右上にある「Override」を選択しましょう。
そうしたら、右下の「Apply All」をクリックしましょう。
今までの変更内容が全て反映されます。
Hierarchyにある「Card」オブジェクトを削除しよう
Prefabへの更新も終わったため、一旦Hierarchyにある「Card」オブジェクトを削除しましょう。
( Prefabsフォルダにある「Card」は削除しないで下さい！)
Cardオブジェクトを右クリックして、Delete 項目を選択します。
Hierarchyから Card オブジェクトが消滅したら成功です。
今回はここまでになります。
次回はいよいよ 「Card.cs」の内部を記述していきます！
【Unity ゲーム制作】神経衰弱ゲームを作ろう！〜その１
今回はUnityを使用して簡単な神経衰弱ゲームを作成しようと思います！
1 . プロジェクトを立ち上げよう！
Unity を起動して プロジェクトを作成しましょう。
今回は神経衰弱ですのね「MemoryGame」と命名しました
プロジェクトが生成されるとこのような画面が開くと思います。
初期は「SampleScene」が開かれているので、新たに「Start」と「Game」シーンを作成してください。
2 . 神経衰弱をするフィールドを作成しよう！
ここからは先ほど作成した「Game」シーン内に作成します。
今回は2Dゲームとして作成するため「Hierarchy」に Canvasを作成しましょう。
Canvasの作り方
Unity上の 「Hierarchy」上で右クリックを押します。
出てきた一覧から 「UI → Canvas」の項目を選択して左クリックをしてください。
するとHierarchy 上に Canvasが生成されます。
背景を作成しよう！
今度は作成した「Canvas」を選択した状態で右クリックを押して、「UI → Image」を選択して下さい。
この様な画面が表示されると思います。
初期設定だと、image のサイズが小さいため大きくしましょう。
Imageのサイズを大きくしよう！
右側にある「Inspector」のWidth と Height の値を変更することでサイズを変更できます。
Width は「横幅」 Height は 「高さ」を意味しています、
初期値は 100 に設定しているため、そちらを Width 「1920 」 Height 「1020」に変更しましょう。
変更するとImageが画面いっぱいに表示されると思います。
今回作成したImageは背景として使用するため名前を 「bg 」に変更しましょう。
Hierarchyの image をクリックすると、名前の部分が青く選択されます。
元の名前を削除して、新たに 「 bg 」と書き込みEnterキーを押しましょう。
これで名前が変更されました。
神経衰弱用のフィールドを作成しよう！
次はフィールド部分の作成に入ります。
神経衰弱の様なトランプゲームの作るにあたり「カードを床やテーブルに整列して並べる」図を表現する必要があります。
そのため、Unityの機能である 「GridLayoutGroup」を使用して表現して見ましょう！。
Canvasを選択して右クリック「UI → CreateEmpty」を選択します。
これは名前の通り座標以外何も備わっていないオブジェクトです。
このオブジェクトの名前を「 CardField 」に変更しましょう。
カード表記用のオブジェクトを作ろう！
少し脱線しますが GridLayoutGroup を使う前に表示する「カード」用のオブジェクトを作って起きましょう。
先ほど作成した「CardField」を選択して 右クリック 「 UI → Image」を選択します。
生成できたら Image の色を赤色に変えてみましょう。
Image の inspector の Color をクリックしましょう。
すると色を選択するダイアログが表示されます。
そのまま赤色を選択してみましょう。
するとUnity上のImageも赤色に変更されたと思います。
これでカード用のオブジェクトの準備が出来ました。
GridLayoutGroupをオブジェクトに追加する
「CardField」に 「GridLayoutGroup」を追加しましょう。
Inspector の一番下にある 「Add Component」をクリックします。
検索欄で 「 Grid」と検索すると画面に現れると思います。
Grid Layout Groupを選択すると、CardField オブジェクトに GridLayoutGroup が追加されました。
Grid Layout Group に付いては以下の記事を参考にしてください。
wojtek.hatenablog.com
Grid Layout Group の設定を変更
神経衰弱の様に「カードを整列して並べる」ことを表現するために設定を変更しましょう。
- Cell Size : X 200 Y 300 に変更
- Spacing : X 50 Y 50 に変更
- Child Alignment : 「Middle Center」に変更
- Constraint : 「Fixed Column Count」に変更
- Constraint Count 「 6 」に設定
Card Field に Content Size Fitter を追加
Grid Layout Group の後にもう一つのコンポーネントを追加しましょう。
AddComponent → 検索 → Content Size Fitter を選択
Content Size Fitter は子オブジェクトの大きさによって、アタッチされているオブジェクトのサイズを変更されます。
今回はカード枚数によって大きさを動的に変更できるようにするためにアタッチしました。
カードを増やしてみよう
それではGrid Layout Group が機能しているか試してみましょう。
「Card Field」の子オブジェクトになっている「image」の数を増やしてみましょう。
増やし方は 「Image」を選択してCntrol + D か、コピー → ペーストでも増加出来ます。
Grid Layout Group が機能している場、imageを増やすとこの様な状態になります。
image : 6枚
image : 12枚
image : 18枚
綺麗に整列されて表示されていると思います。
今回は外枠を作成しました。
次回からはスクリプトの作成に行きたいと思います！
【Unity】iOSで起きるInputFieldの不具合
先日、inputFieldで遊んでいたらこのような現状が起きました。
画像の通り、文字があるはずのところが白くなってしまいます。
この現状は以下の条件のときに起こりました。
・inputFieldを起動するときに、Textに文字を設定しておく。
・InputFieldのLineTypeが SingleLine のとき
その場合、初回起動時のみ このような現状が起きます。
解決
・InputFieldの LineType を「MultiLineSubmit」か「MultiLineNewline」に変更する。
これで治りました。
Unityで「Fatal Error! database disk image is malformed 」が表示された場合の対象法
Unityがクラッシュした後に起きる可能性があるこのエラー
PCを再起動しても直る気配がない。。。
そんなときにオススメの解消法は
Unityファイル内にある LibraryフォルダとTempフォルダを削除することです。
２つのファイルを削除するとUnityが立ち上がると思います。
その後ファイル形成がある程度時間が取られますが、形成後は無事に起動できると思います。
【Unity】Buttonを使ったDictionaryの機能サンプル
C#のDictionary、keyとvalueを一体化して登録することができます。
ポイントはDictionaryのkey に使用する型は string や int 型などの普遍的でデータ容量が軽いものにしてください。
たまにkey に Unity.Objectの「Shader」や、あろうことか自作したClass を設定している人がいます。。。
そのような恐ろしいことを起こさないようにして行きたいですね・・・・・。
Buttonを利用してDictionaryの動作を確認しよう。
今回は以下のサンプルコードを作成します。
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class ItemBtn : MonoBehaviour {
// Itemを保管するDictionary
private Dictionary<int, string> mItemDictionary = new Dictionary<int, string> ();
private int mDicCnt;
// Start is called before the first frame update
public void BtnA () {
this.mItemDictionary.Add (this.mDicCnt, "A");
this.mDicCnt++;
}
public void BtnB () {
this.mItemDictionary.Add (this.mDicCnt, "B");
this.mDicCnt++;
}
public void BtnC () {
this.mItemDictionary.Add (this.mDicCnt, "C");
this.mDicCnt++;
}
// Dictionaryの値を表示する
public void ViewDictionaryBtn () {
foreach (var dic in this.mItemDictionary) {
Debug.Log ($"dic.key {dic.Key} :: dic.Value {dic.Value}");
}
this.mItemDictionary.Clear ();
this.mDicCnt = 0;
}
}
それぞれのBtn,A,B,C 関数を 上の画像の ABCボタンにそれぞれアタッチします。
最後の結果ボタンには「ViewDictionaryBtn」関数をアタッチします。
ソースコードの内容はボタンを押すごとにmDicCntの値がKeyとして、関数ごとに設定してある文字がValueとしてDictionaryに登録されます。
ViewDictionaryBtnではそれまでに登録した値を全て表記することになります。
実際に起動してみると上記のような結果になります。
Dictionaryはデータ管理などで使用することが多い機能のため、使い方を理解しておくととても役立ちます。
【Unity】UI作成のPivot(ピボット)の使い方
Canvas内のRectTransformの要素に表示される「pivot」について記載します。
pivot は オブジェクトの大きさの基準値になるものです。
初期値は x , y 共に 0.5 に設定されています。
この状態で画像の幅を広げてみましょう。
画像の通り、左右均等に大きくなります。
Pivotを 0 にしてみよう！
画像の通りに、x座標のpivotを 0 にしました。
左側に点が移動したと思いますが、これは基準値が移動したということです。
この状態に画像サイズを大きくしてみましょう。
今度は右側に大きく広がったと思います。
Pivotを 1 にしてみよう！
今度は右側に基準値を設定しました。
左側に大きく広がりました。
このようにpivotを使用すると、HPゲージなどの作成 などで役立てると思います。
SourceTreeでプルできなくなったら git fetch を使おう！
ソースツリーを使用していて、突然Pull ができなくなったとこはないでしょうか？。
そんな時は右上のコマンドを起動して、
git fetch origin master を使用しましょう。
streamingAssetsのAndroidでのファイルパス
アプリやゲームで動画を再生したい時があると思います。
その時に動画ファイルを保存するフォルダが「streamingAssets」になります。
streamingAssetsに入れてあるファイルはビルドした後もそのままの状態で反映されます。
Unity公式のストリーミングアセットの記事
https://docs.unity3d.com/ja/current/Manual/StreamingAssets.html
実機でstreamingAssetsのファイルを参照する場合、AndroidとiOSでは別々のやり方が必要になります。
iOSの場合
iOSの場合はとてもシンプルです。
Path.Combine でApplication.streamingAssetsPath,と動画ファイル名を記載すれば大丈夫です。
動画ファイル名には拡張子も必要です。
Androidの場合
Androidの場合はiOSよりはちょっとめんどくさいです。
filePathを取得するのはiOSと同じですが、その後UnityWebRequestを使用して実機で保存されているファイルパスを取得する必要があります。
【Unity】Textの文字列の長さに応じてオブジェクトのサイズを設定する
UI設計で、表示する文字数に合わせて枠を拡張する時ってありませんか？
Unityでは簡単に実装できます。やってみましょう！
1.拡大するオブジェクトとテキストを用意しよう！
こちらがTextの文字数によって大きさを変更するオブジェクトです。
このTextに書き込まれた文字数に応じて、Imageのサイズが変更します。
2.ContentSizeFitter をアタッチしよう！
先ほどのTextにContent Size Fitterをアタッチしましょう。
そして「Horizontal Fit」を Prefered Size に変更します。
これをすることで、TextのWidthは書き込まれた文字数分の大きさになります。
3.スクリプト実装
Unity側の実装は済んだのでスクリプトを作成しましょう。
this.imgSize には、初期のImageのサイズ情報を渡しておきます。
その後、「初回のサイズ情報 」+ 「Textの文字数 * 拡大するOffset値」を演算してImageオブジェクトのサイズに代入しましょう。
Unityを動かしてみましょう。
上記画像のように、文字数によってオブジェクトのサイズが変更しているのがわかります。
4.まとめ
ポイントは ContentSizeFitter と text.Lengthを使用することです。
文字数によって可変したいUI作成などで是非役立ててください。
【雑談】ソシャゲのポップなUIアニメーション
近年のソシャゲは端末の性能向上と共にUI表示の演出もグレードアップしています。
黎明期のソシャゲと比べて大きく違うのは
・ダイアログを表示する時のUIアニメーション
そのゲームのコンセプトにもよりますが、プリコネなどは
・瞬時にスケールアップとフェードアウトを使用して、インパクトのある演出を表現いている
アニメーション1つとってもユーザーに与える印象は変わります。
勢いのある演出はユーザーの行動意欲を向上させますし、戦いに敗れて戦闘不能になった場合は、ネガティブな演出にするとその悲痛さや悔しさが際立ちます
UIは使いやすさも大事ですが、ユーザーにどうゲームを楽しんで欲しいか
それを真正面から訴えかけられるのがUI演出の醍醐味だと思いました。
