プログラミングなんて
なんにも分からないけど、
カードゲームが作りたい!!
きっとこのページを見てくれている方は、そんなひとが多いと思います。
でも
って思ってる方も多いと思います。
そんなひとに言いたい。
意外と簡単に作れるぞ!!!
ってな訳で
「プログラミングなんて全く分からない超初心向け Unityでのカードゲーム作成方法」
を解説していきます!
今はまだ何も分からなくても、解説通りに作るだけであなたにも絶対にカードゲームは作れます。
とは言え、初めての事ばかりで慣れるまでは大変だと思うのでゆっくりやっていきましょう!
そんな訳で今回、第一回では「カードを作る」ことをやっていきます。
完成形はこんな感じ!↓

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

もっと時間と手間を掛ければ、カッコいい見た目に出来ますが、
あくまで今回は初心者の方向けに設計してるので、かなりシンプルな見た目にしてます。
※ちなみにカードの種類は増やせるし、動かせるし、見た目も好きに変えられるので、解説を見ながら自分の好きな様にやってみるといいと思います!
(まあでも最初はそのまま作った方が失敗しなくていいと思うよ。笑)
Contents
【前準備】Unityを立ち上げよう
でもその前に、
「いや、Unityってなんぞや!」
とか
「Unityなんて持ってないわ」
って人はとりあえずインストールしよう。
インストールはしないと何も始まらない。
ダウンロード方法はこちらの記事が分かりやすかったので参考にすると良き。
Unityを開くとこんな感じの画面になると思うので順番に進めてね↓

①.立ち上がったら「新規作成」をクリック。
②.2Dを押そう。
③.プロジェクト名とかは「CardGame」とかなんでもいいよ。
プロジェクトを立ち上げたらこんな感じの画面になるはず!↓

※下の所になんか既にフォルダがいくつかあるのは、気にしなくていいよ。
【解説】Unityで作るTCG カードの作り方
そしたら早速カードを作って行きましょう!
手順に沿って進めていってね↓
まずはカードの枠組みを作る!

①.「+」マークをクリック
②.「UI」をクリック
③.「Image」をクリック
次にカードの形を決めるよ!

①.Imageをダブルクリックして、
②.それぞれの値を入力。
※WidthとHeightをいじると形を変えられるよ。
③.囲んでるところをクリックして、「RemoveComponent」を押す。
(画像が消えるけど、場所と大きさのデータは存在するので問題ないよ)
④.Imageを右クリックして、「Rename」を押して名前を「Card」に変えよう。
カード自体を作るよ!

①.Cardを右クリックして、
②③.さっきやったのと同じように「UI」をクリックして、「Panel」をクリック
Panelの形をセットする

①.四角形のマークをクリック
②.右下のマークをクリック
③.すべての値を0にする
これをすると親要素の大きさ(さっき作った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を一つの箱にまとめたデータみたいなものを言うよ。(まあ今の時点で分からなくても大丈夫w)

①.Cardをドラッグして、
②.「Asetts」に向かって離す。
③.そうするとなんか箱が出来る!!
④.①のCardは削除する。
こうやってプレファブ化しておくことで、この後色んな所にカードを出現させるのが楽になります。
ただまあカードを作っただけではどうにもならないので、次はフィールドを作っていくよ!
【まとめ】カードの作り方
今回カードの作り方について解説しましたが、うまくできたでしょうか??
「分かりやすい!」「これなら自分にもゲームが作れそうだ!!」なんて思っていただけたらめちゃくちゃ嬉しいです。
逆に「ここがわかりづらかった。。」等の意見もあると思います。
そんなご意見があればコメントください。
このサイトや記事は、読んでくれた人たちの声を反映して作っていこうと思っています。
分かりづらいところがあれば分かりやすいように解説を修正します。加筆します。
もちろん「分かりやすかった!」等、褒めていただけたらやる気が出ます。そして更新頻度も上がります。
なにか一言でもいいです。
あなたの感想を教えてください。
そんな訳で今回はここで終わり!!
最後まで読んでいただきありがとうございます。
次はフィールドを作っていくよ!!
次の記事↓

分かりやすくて助かります!
続き期待してます!
> 痛風さん
コメントありがとうございます!
そう言っていただけるだけで、「頑張って書いて良かったなぁ!!」と心から思いました。笑
やる気がめっちゃ出たので、続きのフィールドの作成について出来るだけ早く書きますね!
今日からUnityを始めました
分かりやすいのでとても助かっています
このサイトがなければUnity始めていなかったです
>もっけさん
コメントありがとうございます!
>このサイトがなければUnity始めていなかったです
そう言って貰えただけで、頑張って記事書いて良かったなぁ(´;ω;`) って思ってます。笑
めっちゃやる気出ましたありがとうございます!!
続きの記事も徐々に書いていくので、是非とも一緒にカードゲーム作っていきましょうね!
自分で作った絵柄のカードを作る時、どうすればいいか、長くなるなら、一通りの流れ、例えばこんなアプリをしよし、拡張子はこういうのを使うかとか
岐阜のカードアプリ作りたいなより
自分で作った絵柄のカードを作る時、どうすればいいのか?長くなるなら、一通りの流れ、例えばこんなアプリをしよし、拡張子はこういうのを使うかとか教えて下さい。オリジナルのカードゲームアプリを作りたいのでお願いします
>匿名さん
えーと、自分で描いた絵柄のオリジナルのカードゲームアプリを作りたいってことですかね?
であれば、私の解説記事(じゃなくもいいですけど。笑)を一通り読んでカードゲームの作り方を覚えてから、オリジナルのゲームを作る方がいいと思います。
一度作る流れを掴めたら自分で好きなように作れるようになると思うので!
自分で描いた絵をUnityに入れてゲームに取り込む流れは別の記事でやってるので、そっちも参考にしてみて下さい!(解説ではないですけど、ちょっとでも参考になるかも?)
今日からUnityを始めたくてみじんこさんの記事と出会いました。
他の記事と比べてめちゃくちゃわかりやすいので、これからも沢山の記事を書いていただけるとありがたいです!
本当にいい記事を作ってくださりありがとうございます!
トランプゲームをC#で作り始めていましたがアニメーションを行うUnityを使用したいと思い、探していたらみじんこさんの記事にたどり着きました。
とても分かりやすいので参考にしています。
作る意欲がさらにわきました。
[…] みじんこさんのブログ『みじんこ徒然ブログ』とスタジオしまづさんのYouTube『シャドバ風カードゲーム(上級者向け)』が最初に学ぶべきカードゲームとしてもっとも良さそうだったの […]