LoginSignup
1
0

More than 1 year has passed since last update.

@Yoshida003(ファイブボックス 吉田)

ファイブボックス　Unityカリキュラム　Step6　あつ森風フィッシングゲーム

Last updated at Posted at 2022-03-16

このサイトは「プログラミング教室・ファイブボックス」の　Unity学習カリキュラム ステップ６ 「あつ森風、フィッシングゲーム作成」のフェーズ１になります。

他のサンプルカリキュラム
Step1　Unityの基本
Step2　JumpGame

このプロジェクトでは以下のような作品を作ります。
あつ森風、フィッシングゲーム作成　(クリックでゲーム開始)
image.png
image.png

フェーズ1　仕様確認と環境構築

1-1,ゲームの仕様確認

この作品の通常のフローは以下の通りです。
通常のフロー

❶魚を発生させる（乱数で魚の種類や大きさ、進行方向、ターン回数決定）
❶エサをセット（初期値は10個とし釣れるごとに1つ減少。なくなったら購入）
❷釣り糸を垂らす（エサと釣り竿の先端をRayでつなぐ）
❹魚の口先とエサがぶつかったら、特定の確率でヒットする
❺釣り上げる（釣り竿の先端にエサが触れたら魚を獲得）
❻釣った魚を記録する

さらに次のオプション機能を追加
オプション機能

❶進行中のゲーム内容のセーブとロード（釣った魚、所持金、エサなど）
❷ランキング表示機能（大きさ順、金額順、釣った数の順など）
❸釣った魚の図鑑機能（釣った数、合計金額など）
❹エサの購入
❺釣り竿の購入
❻ステージ管理

これらのフローと機能を順に作成していきます。

1-2,プロジェクトの作成

2D のプロジェクトを指定し、プロジェクト名に 「FishingGame」 などの適当な名前を指定、保存場所に任意の場所を指定し、「プロジェクトを作成」ボタンを押します。
image.png
Webブラウザでゲームをプレイできるように、環境を変更します。
上部のメニューから、File => Build Settings をクリック。
image.png
「WebGL」 を選択して 「Swich Platform」 をクリック。
image.png
さらに 「Player Settings」 のメニューを展開。
「Player」 => 「WebGL」アイコンタグ を選択 => 「Resolution」 の項目から
[Default Canvas Width] = 960
[Default Canvas Height] = 600
に指定されていることを確認します。
image.png

作成されたプロジェクトに、初期状態で用意されている「Sceneフォルダ」、フォルダ内の 「SampleScene」 の名前をそれぞれ次のようにに変更しておきます。
フォルダ「Scene」=> 「01_Scenes」
Scene「SampleScene」=> 「GameScene」
image.png
Asset 内に次の3つのフォルダを用意しておきます。
「02_Scripts」 => スクリプトファイルを保存するフォルダ
「03_Predabs」 => プレファブを保存するフォルダ
「04_Sprites」 => 画像ファイルを保存するフォルダ
image.png
その他の設定やフォルダ作成は、必要に応じて都度行っていきます。
これでプロジェクト作成の準備は完成です。

1-3,魚の配列作成

1-3-1,テキストファイルの用意

素材は　こちら から取得してください。
Download後、メニューバーの「Asset」⇒「Import Package」でDownload下ファイルを指定し、取り込みます。

この作品では多くの魚のデータを使用しますので、別途用意するテキストファイルからデータを取り込みます。
取り込むデータは以下の通りです。

データ 変数名 説明
Name f_Name 魚の名前
Size f_Scale 魚の基準の大きさ
ImgSize f_ImgScale 表示上の基準の大きさ
Speed f_speed 魚の泳ぐ速さ
Price f_Price 魚の基準の価格
Level f_Level 魚をヒットさせる難易度（大きいほど難易度が高い）
Sprite f_Img 魚の画像（別途用意）

FishData
image.png
上のようなイメージで作成します。
Unityの取り込むのは、タイトル行を除いたテキストファイルとなります。
テキストファイルは以下の条件で作成します。

ファイル名 ：fish.txt
区切り ：タブクリり
文字コード ：utf-8

Aseets 内に「Resources」という名前のフォルダを作成し、用意した [fish.txt] を格納します。
image.png

画像素材は各自用意して頂くか、教室で用意した素材を取り込んで使ってください。
取り込んだ魚の画像は、事前に作成した「04_Sprits」というフォルダの中に「fish」というフォルダを作成し、その中に保存しておきます。
image.png

1-3-2,テキストデータ取り込み

このフェーズでは用意したテキストデータを取り込んで、2次元配列として保管します。
まずは、Aseets 内に配置した「02_Scripts」 フォルダ内に[GameManager] というスクリプトファイルを作成します。
さらにHierarchy上に 「GameManager」 というオブジェクトファイルを作成し、スクリプトファイル 「GameManager.cs」 をアタッチしておきましょう。
image.png

データ取り込みで行う処理の流れは以下の通りです。

❶ [fish.txt] 内のテキストデータを全部取り込む
❷ 取り込んだテキスト1行1行を1次配列に入れ込む ⇒ 108個の要素を含む1次配列
❸ テキストの行数と列数を取得して最終的に入れ込む2次配列のサイズを決める
❹ 2で取り込んだ1行1行を、for文を使ってタブ区切りで2次配列に変換する

[GameManager.cs] を立ち上げて、以下のコードを記述します。
まず、NameSpace に使用するシステムを追加します。

GameManager.cs
using System;

続いて使用する変数を用意します。

GameManager.cs
string[] textSauce;                 //テキストの加工前の一行を入れる変数
public string[,] fishdata;          //テキストの複数列を入れる2次元配列 
int rowLength;                      //テキスト内の行数を取得する変数
int columnLength;                   //テキスト内の列数を取得する変数

ここでは最終的なデータが格納される配列、fishdata[,] のみ public変数 にしています。
これは後に他classからも参照したいためです。

さらにデータ取り込みの関数 Initialization() を作成します。

GameManager.cs
void Initialization()      //データ取り込み処理
{
    //fish.txtのデータを取得するインスタンスを作成
    TextAsset textasset = new TextAsset();
    //Resourcesフォルダから対象のテキストファイルを取得
    textasset = Resources.Load("fish", typeof(TextAsset)) as TextAsset;
    //string型の変数を用意して、上で取得したテキスト全体を入れる
    string TextLines = textasset.text;
    //Splitで一行づつを代入した1次配列を作成、（改行で分けるので1行の文字列となる）
    textSauce = TextLines.Split('\n');
    //行数と列数を取得
    columnLength = textSauce[0].Split('\t').Length;     //タブ区切りで分けられたブロック数⇒6
    rowLength = textSauce.Length;                       //データ数⇒108    
    fishdata = new string[rowLength, columnLength];     //2次配列を定義 [108,6]
    for (int i = 0; i < rowLength; i++)
    {
        //textMessageをタブごとに分けたものを一時的にtempに代入,
        //temp[0]⇒魚名、[1]⇒大きさ、[2]⇒Spritの大きさ、[3]⇒速さ、[4]⇒価格、[5]⇒難易度
        string[] temp = textSauce[i].Split('\t');
        for (int j = 0; j < columnLength; j++)    //Dataの数だけ繰り返す
        {
            //2次配列fishdata[,]にタブごとに分けたtempを代入していく
            fishdata[i, j] = temp[j];
        }
    }
}

作成した関数を Start関数 内で起動させます。

GameManager.cs
void Start()
{
    Initialization();
}

実際に起動させてみましょう。
Inspector の表示形式を 「Debug」 にすると、詳細を確認することができます。
「GameManager」のInspectorで GameManager(Script) の [TextSouce],[RowLength],[ColumnLength] がそれぞれ取り込んだ値と同じか確認することができます。
image.png
Inspector の表示形式を 「Normal」 に戻しておきましょう。

:thinking:問題１
作成した配列に、正しくデータが格納されているか、foreach()関数を使って表示させてみましょう。

答え１
foreach()文を使えば、指定した配列の中身をすべて取り出すことができます。
GameManager.cs
void Initialization
{
    /*省略*/
    foreach (string s in fishdata)
    {
        Debug.Log(s);
    }
}

image.png

foreach() 文 の記述方法は以下の通りです。

foreach( 型名 オブジェクト名 in コレクション) {
    処理文
}

foreach文ではfor文のように、インデックス番号を指定する int型変数 i を定義したり、それをループごとにインクリメント(i++)する必要はありません。
また、コレクションの要素数を取得する必要もありません。ですので、簡潔に記述することができて便利です。

このプロジェクトでは、この後も多くの配列やリストを作っていきます。
リストから任意のデータを取り出す方法や、確認する方法をマスターしておきましょう。

1-3-3,魚のスプライト

魚のスプライトは、GameManagerクラスにスプライト用の配列を作成し、Unity側からセットします。
では 「GameManager.cs」 を立ち上げて、配列を追加します。

GameManager.cs
public Sprite[] fishSprit;          //魚のイラストの配列

「GameManager」 の Inspector に宣言した FishSprite[]が表示されるので、index 数に 108 を入力
image.png
後は「fish.txt」と同じ順番で、要素に魚のスプライトをセットしていけばいいだけです。
魚のスプライト名は、fish.text の魚の名前と同じになっていることを確認しながら進めましょう。
順番を間違えたり、スプライト名が違ったりすると、この後作る機能の一部が正しく動かない状態になります。
完成イメージは下のような状態です。
image.png

1-4,背景画像作成

ここからステージ上のオブジェクトを作成、配置していきます。
まずは背景画像を作成します。
背景は画面下部に「海」の素材を、上部に「空」の素材をセットします。

1-4-1,素材の準備

「海」の素材
「海」の素材は「フリー素材」を使っています。
ベースとなる画像を1つ、ベースの前面を左右に揺らし画像が動いているように見せる画像を1つ用意します。
image.png
「04_Sprits」フォルダの中に「BackGround」 フォルダを作成し、そこに入れておきます。
image.png

「空」の素材
「空」の画像は AssetStore から取得します。
「AllSky」 の無料版を選択し、取り込んでおきます。
image.png

1-4-2,「海」の背景をセット

まずは、ゲーム画面の表示サイズを設定します。
[1-2]で選択したWebGL上での見え方に統一しておきましょう。
「Game」タブ を選択し、画面サイズ変更メニューから一番下にある 「+ボタン」 を押します。
展開された 「Add」メニュー で以下のように指定。
[Type] => Fixed Resolution
[Width & Height] => 960 × 600
最後に 「OK」ボタン を押して確定。
image.png

続いてHierarchy上で、オブジェクトを作成。
UI => Image を選択。
image.png
生成された「Image」を Inspector から設定します。
❶名前を 「SeaImage」 にリネーム
❷RectTransformコンポーネントで位置、サイズを下のように指定。
❸Imageコンポーネントで「Source Image」に取り込み済みの 「SeaImg1」 を指定。
image.png
この段階では以下のような表示となっているはずです。
image.png

1-4-3,「空」の背景をセット

空の背景には、AssetStoreから取得した「AllSkyFree」の「Epic_BlueSunset」フォルダの中の「Epic_BlueSunset_Cam_0_Front+Z」という素材を使用したいと思います。
image.png
ただこのままでは使用できないので、選択した画像の Inspector から画像タイプの修正を行います
Texture Type => Sprit(2D and UI）
最後は 「Apply」ボタン で確定。
image.png
先程の「海」の画像の追加と同様に、Canvas上に新たな Image のオブジェクトを追加します。
海の画像よりも奥のレイヤーにしたいので、「Canvas」の子要素の一番上に配置します。
image.png
生成された「Image」を Inspector から設定します。
❶名前を 「SkyImage」 にリネーム
❷RectTransformコンポーネントで位置、サイズを下のように指定。
❸Imageコンポーネントで「Source Image」に取り込み済みの 「Epic_BlueSunset_Cam_0」 を指定。
image.png
以下のようなイメージとなっています。
image.png

1-4-4,「波」の背景をセット

波はプログラムから動かしますが、その為には「worldSpace」に指定する必要があります。
Scene上に配置されるオブジェクトと同じ「worldSpaceに位置する」という意味になります。
しかしもともとのCanvasはとても大きいため、ベースの大きさを縮小します。
「Canvas」の Inspector から以下のパラメータを修正します。
❶RectTransformコンポーネント
・PosZ　の値を　10　に指定　
　　※今後の課題で作る釣り糸を表示するために必要になります
・Scale の X Y をそれぞれ 0.04 に指定
❷Canvasコンポーネント
・RenderMode を World Space
・EventCamera を Main Camera
image.png

Hierarchy上に新たな「image」オブジェクトを作成し、Canvasの子要素の一番下 に配置します。
image.png
Inspectorから以下のように設定します。
❶名前を「WaveImage」に指定
❷RectTransformコンポーネント
　Width => 1500 左右に揺らすので、画面幅より大きめに指定します
　Height => 500
　PosY => -91 ちょうど海面と同じ高さになるように調整します
❸Imageコンポーネント
　Source Image => 「Wave」　取得した画像を使います
　Color => A（Alpha値：不透明度）を 0.5　後ろの海の画像が透けて見えるようにセット
image.png
さらに、RigidBody2Dコンポーネントを追加します。
スクリプトファイルでのみ動かすので、Body Type を 「Kinematic」 にしておきます。
image.png

続いて波を動かすスクリプトファイルを作成します。
「02_Scripts」フォルダ内に、[ WaveManager ]スクリプトファイルを作成してください。
作成した 「WaveManager.cs」 は 「WaveImage」 にアタッチしておきます。

:thinking:問題２
RigidBody2D　を使って、「WaveImage」 を波のように左右に揺らし続けるプログラムを作ってみましょう。

答え２
この課題はtransform の Position を使ってみできるのですが、y座標の変更があった際など、都度プログラムの修正が必要になります。またRigidBody2Dの方が滑らかに動くようなので、今回はRigidBody2Dを使って動かします。 解答例：
WaveManager.cs
Rigidbody2D rb2d;
void Start()
{
    rb2d = GetComponent<Rigidbody2D>();
}
void Update()
{
    rb2d.velocity = new Vector2(Mathf.Sin(Time.time / 2), 0);
    //Time.time で周期をとっていますが、早すぎるので2で割って調整しています。
}

これで背景の調整は完了しました。

ではここで、WebGlで正しく表示されるか確認しておきます。
上部メニューの「File」から 「Build And Run」 を選択。
初回のみファイルを保存する場所を聞いてくるので、任意のフォルダを指定します。
image.png
初回は特に時間がかかるので、余裕を見て実行します。
成功すると以下のようにブラウザ上でゲームのSceneを確認することができます。
image.png

最後までご覧いただき、ありがとうございます。
引き続きカリキュラムを参照したい場合は、「ファイブボックス」までお気軽にお問い合わせください。

https://www.fivebox.info/
Mail:ueda@fivebox.info
Tel:0268-71-7294

© 2020 - 2022 FiveBox CORPORATION.

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0