ゲーム作り

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方② フィールド作成編

前回はカードを作りましたが、今回はフィールドの作成をしていくよ!!

前回の記事を見てない方はそっちを見てからの方がいいよ↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方① カードを作る編 プログラミングなんて なんにも分からないけど、 カードゲームが作りたい!! きっとこのページを見てくれている方は、そん...

 

カードとフィールドが出来てしまえば、あとはコードをバチバチ書いていく楽しい所に入るからね!

気合い入れてフィールド作っていこう!!!

今回の完成図としてはこんな感じ↓

今はまだ作り方が分からなくても、解説通りにやっていけば必ずこの通りに作れるからね!

ではやっていこう!!

 

【前準備】フィールド作成のヒント

正直、前回解説した「カードの作り方」が分かっていれば手順はほぼ一緒なので解説が無くても出来るはず!

なので復習も兼ねて、「やれそうかも!」ってひとは自分でまずやってみるといいよ。

ただ見てやってるだけだとやっぱり理解は出来ないので、

自分で出来るところだけで良いから作ってみるといいと思うよ!

あとで解説はするので、答え合わせ的に読んでみてくださいな。

 

ではこれに合わせて作ってみて!↓

 

【ヒント1】「作るべきもの」

「作るべきもの」はこれら↓

・自分の手札の場所(PlayerHand)

・自分と相手のフィールド(カードを出すところ) (PlayerField、EnemyField)

・自分と相手のリーダーの場所 (PlayerLeader、EnemyLeader)

・自分と相手のリーダーのライフ (PlayerHP、EnemyHP)

・ターンエンドボタン・マナコスト (TurnEndButtom、ManaCost)

 

【ヒント2】「使うもの」

「使うもの」はこれら↓

・ターンエンドボタン以外は全て「Panel」と「Text」を組み合わせて作る。

・ターンエンドボタンは「Button」を使ってね。

 

※今回の設計では「分かりやすさ」「シンプルさ」を重点に置いているので、相手の手札、マナコストについては実装しません。

(作りたい人は一通り作った後に追加してもいいと思うよ。)

 

【解説】フィールド作成方法

ではこの画像通りに実際に作っていくよ!!

※結構ざっくり説明のところがあるので、分かりづらい等あればコメントに書いてください。

※特に分かりづらい的なコメントがなければ、そっちの方が更新頻度も上げられるので、そのくらいの説明で今後の解説を続けます。

 

自分の手札の場所の作成

①②③.Panelを作る。

 

④.値を入れる。

⑤.Panelの名前を「PlayerHand」に変えよう。

 

フィールドの作成

①.同じようにパネルを作る。

さっき作った「PlayerHand」をコピペ(Ctrl + C → Ctrl + V)すると早いよ

②.値を入れる。

③.名前を「PlayerField」にする。

①.「PlayerField」をコピペして、「EnemyField」も作ろう。

②.値も設定しよう

 

リーダーの作成

①.リーダーの作成方法は以下の通り↓

「PlayerLeader」パネル作成→
その中に「HP」パネルと「LeaderImage」Imageを作成→
「HPPanel」の中に「HPText」Textを作成する

②.値を設定する。(場所の設定とかは自分の好きな風にして大丈夫だよ)

 

①.敵のリーダーも同じように作っていこう。コピペすると早いよ。

②.色や場所などは好きなように設定してみよう。

 

ターンエンドボタンの作成

①②③.Buttonを作る。

 

①.Buttonの名前を”TurnEndButton”に変えよう。

②.値を設定しよう。

③.ボタンの中にある「Text」の文字を”ターンエンド”に変えよう

 

マナコストの作成

①.「ManaCostPanel」を作って、その中にテキストを使ってこんな感じに作る。

②.テキストを「5」「/」「5」の様にそれぞれ書いて表示させよう。

③.完成!!

 

 

でもこのままだとカードの配置が微妙な感じなので調整をしましょう。

調整しやすくする為に、前回作ったカードプレハブを自分の手札に貼り付けてみよう。

 

でもこのままだと、カードを更に張り付けてもカードが増えて見えない、、、

これはカードが一ヶ所に重なってしまって、実際は何枚もあるのに一枚しか見えない状況になってるのが原因。。(ミルフィーユ状的な、、?)

そんなわけで表示の仕方を設定していこう。

 

配置の設定

①.「PlayerHand」を押す。

そしたら出てくる右側のウィンドウ(Inspectorウィンドウ)の一番下にある「AddComponent」を押す。

 

①.検索バーが出てくるので、「GridLayoutGroup」を検索してクリック。

 

①.そしたら画面のように値を入力する画面になるので、値にあるように設定していく。

※画面通りでなくても、好みの値でいいよ。

②.そしたらこんな感じに広がって表示される!!

 

①.「PlayerField」と「EnemyField」を選択して、同じように「GridLayoutGroup」を設定しよう。

②.値はこんな感じ。

 

こんな感じになれば完成!!!

※値は好きな様にすればいいけど、今回作ってるのはこんな感じの値だよ。

 

フィールド作成のやり方 まとめ

今回フィールドを作成していきましたが、うまく出来きたかな、、?

ちょっと説明を省いたところもあるので、分かりづらかったらコメントに書いて下さいな!

(いや、別に分かりやすかったぜー!!ってコメントでもいいよ 笑)

 

そんなわけで次は実際にプログラムを書いて、手札の生成やフィールドにカードを出現させていくよ!!

ではでは最後まで読んでいただきありがとうございました!

終わりっ!!

 

ABOUT ME
みじんこ
【名前】みじんこ(ここのブログ書いてるひと) ・大学2年の時に「ゲームが作りたいー!!」って思ったのに、ゲームの作り方を解説してるサイトがことごとく何言ってんのか分かんなくて挫折した。 ・数年な時を経て「だったら俺が完全初心者にも超わかりやすいサイトを作ってやんよ!」って事で、初めてゲームを作ろうとしてる方向けに解説記事を書いてるよ。

POSTED COMMENT

  1. ゆっきー より:

    とても参考にさせていただいています。質問なのですがLeaderImageは何をする物なのでしょうか、HPはわかるのですが背景の色ですか?書いてあったらすみません。

    • みじんこ より:

      >ゆっきーさん
      コメントありがとうございます!
      LeaderImageは、単にリーダーの画像を表示してるのだけのものです。
      EnemyLeaderで画像を設定してしまうと、背景が消えちゃうのでこんな感じの設計にしてます。
      って回答で大丈夫ですかね??

      ちなみに背景の色はEnemyLeaderが設定してます。

  2. さの より:

    大変参考になりました!
    勉強になります!

    • みじんこ より:

      >さのさん
      コメントありがとうございます!
      一緒に少しずつ作っていきましょ〜
      分かりづらい所があれば、気軽に聞いて下さいね( ´∀`)

  3. トキムネ より:

    失礼します。
    その①から順を追って製作しているのですが、フィールドを作る際にその①で作ったカードのデータが画面に残ったままになっています。
    ブログの画面では消えているのですが、これは新規にファイルを作っているのですか?

    • みじんこ より:

      >トキムネさん
      コメントありがとうございます!
      その①って言うのは、デジタルカードゲームの作り方①の記事のことですよね??
      今見返してみましたが、確かに特に何も書かずに②の記事になるとCardが消えてますね。。
      いま追記しましたが、「Card」についてはプレハブ化したので消してしまって大丈夫です
      新規にゲームを作るのではなく、カードのデータを作ったファイルで続けてフィールドも作って下さい!
      っていう回答で大丈夫ですかね??
      的外れなこと言ってたらまたコメントで言って下さい!

  4. トキムネさん より:

    ありがとうございます。お答えいただいた内容で問題ございません。

    もう一つ質問なのですが、その②の内容をGameでなくSceneで作成してしまったのですが、この場合はもう一度Sceneで作り直さないといけないのでしょうか?現状、再生ボタンを押しても真っ青な画面がでるだけになっています。

    • みじんこ より:

      >トキムネさん

      >ありがとうございます。お答えいただいた内容で問題ございません。
      では良かったです!!
      ずいぶん遅い時間まで作ってますね。笑

      >その②の内容をGameでなくSceneで作成してしまったのですが、この場合はもう一度Sceneで作り直さないといけないのでしょうか?
      Cardを作ったSceneと、別のSceneでフィールドを作ってしまったということですね?
      という事であれば、以降の解説はトキムネさんがフィールドを作ったSceneで引き続き作って貰えれば大丈夫です!
      ちなみにですが、真っ青な画面が出てるのはその①でCard作ったGameの方ですよね?
      今回フィールドを作ったSceneの方で再生(実行)した時はフィールドが見えてますよね??

  5. トキムネ より:

    ご回答ありがとうございます。
    上記の真っ青な画面が出てくる件は、私がフィールドのサイズをCanvasのサイズよりもかなり大きなサイズで作っていたことが原因だったみたいです。フィールドの大きさを小さくしたら無事にSceneで表示できるようになりました。

    • みじんこ より:

      >トキムネさん
      解決できたみたいで良かったです!
      また何かあったら気軽に聞いてくださいね!

COMMENT

メールアドレスが公開されることはありません。