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

 

プログラミングなんて
なんにも分からないけど、

カードゲームが作りたい！！

 

きっとこのページを見てくれている方は、そんなひとが多いと思います。

 

でも

 

って思ってる方も多いと思います。

 

そんなひとに言いたい。

 

意外と簡単に作れるぞ！！！

 

ってな訳で

「プログラミングなんて全く分からない超初心向け Unityでのカードゲーム作成方法」

を解説していきます！

 

今はまだ何も分からなくても、解説通りに作るだけであなたにも絶対にカードゲームは作れます。

とは言え、初めての事ばかりで慣れるまでは大変だと思うのでゆっくりやっていきましょう！

 

そんな訳で今回、第一回では「カードを作る」ことをやっていきます。

完成形はこんな感じ！↓

カードを作ってフィールドに配置するとこんな感じになるよ↓

もっと時間と手間を掛ければ、カッコいい見た目に出来ますが、

あくまで今回は初心者の方向けに設計してるので、かなりシンプルな見た目にしてます。

※ちなみにカードの種類は増やせるし、動かせるし、見た目も好きに変えられるので、解説を見ながら自分の好きな様にやってみるといいと思います！

(まあでも最初はそのまま作った方が失敗しなくていいと思うよ。笑)

 

【前準備】Unityを立ち上げよう

でもその前に、

「いや、Unityってなんぞや！」

とか

「Unityなんて持ってないわ」

って人はとりあえずインストールしよう。

インストールはしないと何も始まらない。

ダウンロード方法はこちらの記事が分かりやすかったので参考にすると良き。

 

Unityを開くとこんな感じの画面になると思うので順番に進めてね↓

①.立ち上がったら「新規作成」をクリック。

②.２Dを押そう。

③.プロジェクト名とかは「CardGame」とかなんでもいいよ。

 

プロジェクトを立ち上げたらこんな感じの画面になるはず！↓

※下の所になんか既にフォルダがいくつかあるのは、気にしなくていいよ。

 

【解説】Unityで作るTCG　カードの作り方

そしたら早速カードを作って行きましょう！

手順に沿って進めていってね↓

まずはカードの枠組みを作る！

①.「+」マークをクリック

②.「UI」をクリック

③.「Image」をクリック

 

次にカードの形を決めるよ！

①.Imageをダブルクリックして、

②.それぞれの値を入力。

※WidthとHeightをいじると形を変えられるよ。

③.囲んでるところをクリックして、「RemoveComponent」を押す。
（画像が消えるけど、場所と大きさのデータは存在するので問題ないよ）

④.Imageを右クリックして、「Rename」を押して名前を「Card」に変えよう。

 

カード自体を作るよ！

①.Cardを右クリックして、

②③.さっきやったのと同じように「UI」をクリックして、「Panel」をクリック

 

Panelの形をセットする

①.四角形のマークをクリック

②.右下のマークをクリック

③.すべての値を０にする

これをすると親要素の大きさ（さっき作ったCardのこと）と大きさが揃うyo

 

カードの色を変える！！

①.色のところ（デフォルトはたぶん白）をクリックすると、カラーパレットが表示する。

②.カードの色を決める（違う色でもいいよ）

 

カードの名前の場所を決めるよ

①②③.今までと同じ感じで今度は「Text」を選択する。

 

Textの場所と文字列を入力するよ！

①.場所と大きさの値を入力する。（画像通りの値にすると、画像通りになるよ）

②.カードの名前を入れる。（あくまでカードの名前の場所を決めるだけなので何でもいいよ）

 

カードの名前の表示の調整

①.画像通りに設定してみよう。

一応解説すると、一番目のが文字のスタイル（太字とか斜体とか）、二番目は文字の大きさ、3番目のは行間の広さの設定になってるよ。

②.真ん中詰めに設定しよう。

③.Textの名前を「Name」に変えよう。

 

同じようにPowerも作ってみよう！

①②.Nameを作った時と同じようにPowerテキストも作ってみよう。

ちなみにNameを押してコピぺ（Ctrl＋Cの後、Ctrl＋V）すると楽だよ。

 

コストの後ろのパネルを作ろう！

今までと同様に作ってみよう。

今回の注意点としてはPanel追加の後、Souce Imageを「Knob（丸いやつ）」選択すること。

 

Costテキストを追加しよう

さっき作ったCostパネルの中にCostテキストを作ろう。

 

画像アセットを手に入れよう

※ほかに画像があるなら、ここの手順は飛ばしてもいいよ。

①.「Asset Store」を押す。

ちなみにAsset Storeとは有料・無料でゲームで使える画像とか、エフェクトとかを手に入れられるUnity内のお店的なところだよ。

②.検索バーに「aekashics」と入力する。

③.出てきたこの画像をクリックする。

 

①.Freeと書かれてることをチェックして、「Import」をクリック。

②.「Static」のところにチェックを入れて、

※別に他のところにチェック入っていても問題ないけど、使わないから要らないよ！

③.「Import」を押す。

（④.この後もう一回、①のImportをクリックする必要があるかも）

 

画像を設定しよう

①②③.同じように今度は「Image」を作っていこう

 

①.Imageをクリックして、「Souce Image」の丸マーク（？）みたいなところをクリックすると、さっきインポートした画像が出てくる。

②.この中から何かを選んで閉じて、Imageの名前をIconに名前を変えたら、、、

 

完成！！！

お疲れ様でした！！

なれない操作で大変だったと思うけど出来たかな？？

完成したら最後にこれをPrefab化しましょう！

Prefab化しよう

Prefab（プレファブ）化というのは、ここで言うCardを一つの箱にまとめたデータみたいなものを言うよ。（まあ今の時点で分からなくても大丈夫ｗ）

①.Cardをドラッグして、

②.「Asetts」に向かって離す。

③.そうするとなんか箱が出来る！！

④.①のCardは削除する。

こうやってプレファブ化しておくことで、この後色んな所にカードを出現させるのが楽になります。

ただまあカードを作っただけではどうにもならないので、次はフィールドを作っていくよ！

 

【まとめ】カードの作り方

今回カードの作り方について解説しましたが、うまくできたでしょうか？？

「分かりやすい！」「これなら自分にもゲームが作れそうだ！！」なんて思っていただけたらめちゃくちゃ嬉しいです。

逆に「ここがわかりづらかった。。」等の意見もあると思います。

そんなご意見があればコメントください。

このサイトや記事は、読んでくれた人たちの声を反映して作っていこうと思っています。

分かりづらいところがあれば分かりやすいように解説を修正します。加筆します。

もちろん「分かりやすかった！」等、褒めていただけたらやる気が出ます。そして更新頻度も上がります。

なにか一言でもいいです。

あなたの感想を教えてください。

 

 

そんな訳で今回はここで終わり！！

最後まで読んでいただきありがとうございます。

次はフィールドを作っていくよ！！

次の記事↓

【解説通りに作るだけ】Unityのデジタルカードゲーム作り方② フィールド作成編前回はカードを作りましたが、今回はフィールドの作成をしていくよ！！ 前回の記事を見てない方はそっちを見てからの方がいいよ↓ ...