「かっこいいアクションゲームをつくりたい!」
「カンタンにゲームをつくりたい」
・・・と思っても
「どうすればいいか、わからない」
と悩んでいませんか?
このページでは、無料で、だれでも始められる方法でゲームのつくり方を紹介しています
今回は、2Dアクションゲームのステージと背景の絵を、つくる方法を紹介します
ぜひ、チャレンジしてください
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
次の目次の流れにそって、紹介します
また、このページはシリーズですので、
前回のページから、ぜひご覧ください
2Dアクションゲームのキャラクターとアニメーションのつくり方のページ
https://illust55.com/4055/
・Unityとは何?ゲームをつくることができるの?
Unityとはゲームをつくるためのソフトです
無料です
しかし、世界中で趣味のゲームから一流のゲームまで使われています
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
Unityで作られたゲームを紹介します
・Unityはどうすれば始められるの?
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
Unityをはじめるためには、インストールする必要があります
Unityを始めるためには、プログラムをインストールする必要があります
インストールプログラムは、公式サイトからダウンロードできます
<Unity公式サイト>
https://unity.com/ja
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
Unityのインストールの方法を次のページで紹介しています
ぜひ、合わせてご覧ください
<UNITYのインストール方法のページ>
https://illust55.com/2018/
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
次は、2Dアクションゲームで、
ステージと背景の絵をつくる方法を紹介します
・2Dアクションゲームのマップをつくろう
![](https://illust55.com/wp-content/uploads/2021/08/image-268.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
今回、紹介するゲームつくりです
左のゲームマップを右のゲームマップに変えます
・はじめに用意されているマップを右のマップに変えます
![](https://illust55.com/wp-content/uploads/2021/08/image-262.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
はじめに、 ゲーム部品のダウンロードの準備をします
公式のサイトにアクセスしてください
1.公式のゲームの部品のサイトにアクセスしてください
https://assetstore.unity.com/
1.画面の上の「ID」アイコンをクリックしてください
2.画面の上の「ログイン」ボタンをクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-263.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
背景の絵をダウンロードする準備をします
1.「Foggy Mountains」で検索してください
2.無料アセットをチェックしてください
3.「Foggy Mountains」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-264.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
自分のアカウントに追加します
・「マイアセットに追加する」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-265.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ゲームの草や地面などの部品です
1.「Alien Tile Set」で検索してください
2.無料アセットをチェックしてください
3.「 Alien Tile Set」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-266.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
自分のアカウントに追加します
・「マイアセットに追加する」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-269.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
アクションゲームの部品です
1.「 Metroidvania Controller 」で検索してください
2.無料アセットをチェックしてください
3.「 Metroidvania Controller 」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-270.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
自分のアカウントに追加します
・「マイアセットに追加する」をクリックしてください
・ゲームの部品をダウンロードする準備をしよう
![](https://illust55.com/wp-content/uploads/2021/08/image-271.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
Unityを起動してください
1.「プロジェクト」をクリックしてください
2.「新規作成」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-272.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
2Dのゲームをつくります
1.「2D」をクリックしてください
2.「プロジェクト名」、「保存先」を決めてください
3.「作成」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-273.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ゲーム部品のウィンドウを表示します
・「Windows」 → 「Package Manager」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-274.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
Unityに用意されているゲームの部品を表示します
1.「Packages」をクリックしてください
2.「Unity Registry」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-275.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
キャラクターをつねにゲーム画面に表示させる、部品です
1.検索のボックスに「sin」と入れてください
2.現れた「Cinemachine」をクリックしてください
3.「Install」ボタンをクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-276.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
自分のゲーム部品を表示します
1.「Packages」をクリックしてください
2.「My Assets」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-277.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ゲームの部品が多い時は、すべて表示されません
・これから紹介する「ゲームの部品」が現れない場合は、青の数字をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-278.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
アクションゲームの部品をダウンロードしてください
1.「 Metroidvania Controller 」をクリックしてください
2.「ダウンロード」をクリックしてください
3.ダウンロード後、「Import(読み込み)」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-279.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ダウンロードした、部品をゲーム内に取り込みます
・「Import」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-280.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ゲームマップの部品をダウンロードします
1.「 Alien Tile Set 」をクリックしてください
2.「ダウンロード」をクリックしてください
3.ダウンロード後、「Import(読み込み)」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-281.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ダウンロードした、部品をゲーム内に取り込みます
・「Import」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-282.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
背景の絵をダウンロードします
1.「Foggy Mountains 」をクリックしてください
2.「ダウンロード」をクリックしてください
3.ダウンロード後、「Import(読み込み)」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-283.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ダウンロードした、部品をゲーム内に取り込みます
・「Import」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-284.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
サンプルのゲームを表示します
1.「Assets」 → 「Scenes」をクリックしてください
2.「Demo」をダブルクリックしてください
3.サンプルゲームが現れます
![](https://illust55.com/wp-content/uploads/2021/08/image-285.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
プレイヤー以外は、つかわないので、消してください
・はじめに、プレイヤーの「DrawCharacter」以外を消します
![](https://illust55.com/wp-content/uploads/2021/08/image-286.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
「Delete」キーで消すことができます
1.プレイヤーの「DrawCharacter」以外を選んでください
2.キーボード「Delete」キーをおしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-287.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ゲーム画面に絵をおく準備をします
1.「Windows」 → 「Tile Palette」をクリックしてください
2.「Tile Palette」が現れたことを確認してください
![](https://illust55.com/wp-content/uploads/2021/08/image-288.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
地面のパーツが現れます
1.「Assets」 → 「Tile Palette」をクリックしてください
2.「GroundTiles」をクリックしてください
3.「GroundTiles」のパレットが現れます
![](https://illust55.com/wp-content/uploads/2021/08/image-289.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
絵をおくためのマス目のオブジェクトをつくります
1.左ウィンドウの空いている場所で右クリックをしてください
2.「2D Object」 → 「Tile map」 → 「Rectangular」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-290.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ドラッグ&ドロップで、絵をおくことができます
1. 現れた「Tile map」 をクリックしてください
2.地面にする絵をドラッグしてください
3.画面をクリックすると、絵をおくことができます
![](https://illust55.com/wp-content/uploads/2021/08/image-291.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
今回は、このようにつくりました
・今回は、このようにマップをつくりました
![](https://illust55.com/wp-content/uploads/2021/08/image-292.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
絵が重なるときは、「 Order Layer 」の数を変えてください
1.「移動するツール」のボタンをクリックしてください
2.「Assets」 → 「AlienTileSet」 → 「Splites」 → 「Trees」をクリックしてください
3.現れた木のパーツをドラッグ&ドロップしてください
4.「Order Layer」に「-100」を入れて、木がプレイヤーの後ろになるようにします
![](https://illust55.com/wp-content/uploads/2021/08/image-294.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
マップを今回は、このようにつくりました
・今回はこのようにつくりました
![](https://illust55.com/wp-content/uploads/2021/08/image-293.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
背景を画面におきます
1.「Assets」 → 「Foggy Mountains」 をクリックしてください
2.現れた、背景のパーツをドラッグ&ドロップで置いてください
![](https://illust55.com/wp-content/uploads/2021/08/image-304.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
空のパーツをおきます
・続いて、空のパーツをドラッグ&ドロップしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-295.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
大きさを画面に合わせてください
1.画面左上の「拡大・縮小」ボタンをクリックしてください
2.背景の「Mountains」と「Sky」をドラッグで、二つ選んでください
3.現れた、矢印をドラッグして、背景を拡大してください
![](https://illust55.com/wp-content/uploads/2021/08/image-301.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
地面の絵にキャラクターが立てるようにします
1.「Grid」 → 「Tilemap」をクリックしてください
2.「Add Component」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-296.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
プレイヤーが立つための土台を、自由につくれるパーツです
1.検索のボックスに「poly」を入れてください
2.現れた「Polygon Collider 2D」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-297.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
カドをドラッグすると形を変えることができます
1.「Edit Collider」のボタンをクリックしてください
2.現れた五角形の形を変えます
3.カドをドラッグすると形を変えることができます
![](https://illust55.com/wp-content/uploads/2021/08/image-299.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
緑のラインの上をクリックすると、新しいカドが現れます
1.つくった地面と同じ形にドラッグします
2.緑の線の上をクリックすると、新しいカドができます
![](https://illust55.com/wp-content/uploads/2021/08/image-298.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
今回は、このような形につくりました
・このような形につくりました
・プレイヤーをつねに映すゲーム画面をつくろう
![](https://illust55.com/wp-content/uploads/2021/08/image-303.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
カメラをつくります
1.左ウィンドウの何もない部分で、右クリックしてください
2.現れたメニューの「Camera」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-300.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
カメラをおいかけるパーツです
1.画面上の「Cinemachine」をクリックしてください
2.現れたメニューの「Ceate 2D Camera」をクリックしてください
![](https://illust55.com/wp-content/uploads/2021/08/image-302.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
プレイヤーを追うようにしました
1.現れたメニューの「CM vcam1」をクリックしてください
2.「Follow」にプレイヤーの「DrawCharacter」を、ドラッグ&ドロップしてください
3.「Screen Y」に「0.6」、「Dead Zone Height」に「0.7」を入れます
※ カメラをタテ方向に動かなくさせ、位置を調整します
![](https://illust55.com/wp-content/uploads/2021/08/image-305.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
カメラと背景が、同時に動くようにつくります
・「Mountains_1」、「Sky」を二つクリックして、選んでください
![](https://illust55.com/wp-content/uploads/2021/08/image-306.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
カメラの動きに合わせるようにつくりました
1.「Mountains_1」、「Sky」を「Camera」ドラッグしてください
2. 「Camera」 でマウスを離して、「Camera」の中に入るようにしてください
・テストプレイで確認しよう
![](https://illust55.com/wp-content/uploads/2021/08/image-307.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
テストプレイをして、つくりを確認してください
1.テストプレイボタンをクリックして、つくりを確認してください
2.プレイヤーが地面の上を移動して、背景がプレイヤーの動きについて来るようになりました
![](https://illust55.com/wp-content/uploads/2021/08/image-308.png)
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
左は、前回紹介しましたプレイヤーを変える方法と、今回を合わせた画面です
右は、「Alien Tile Set」のパーツをおいた画面です
多くのきれいなパーツがあるので、ぜひ試してください
前回のキャラクターとアニメーションのページをご案内します
<前回のページ>
2Dアクションゲームのキャラクターとアニメーションのつくり方のページ
https://illust55.com/4055/
・まとめ
今回は「Unity」の2Dアクションゲームでマップをつくる方法とカメラのつくり方を紹介しました
このブログでは、他のページでもゲームつくりを紹介しています
ぜひ、合わせてご覧いただき、チャレンジを続けてください
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
他のゲームつくりのページを紹介します
ぜひ、合わせてご覧ください
超初心者向け!Unityでつくる 2Dアクションゲームとアニメーション
https://illust55.com/4055/
UNITY初心者!Karting MicroGameでオリジナルマップを作ろう第四回目
https://illust55.com/3631/
超簡単にゲームプログラミング!UnityとBoltの使い方&ゲーム制作初心者講座
https://illust55.com/3889/
【ゲーム制作超初心者&Unity入門】パズルゲームの作り方を学ぼう
https://illust55.com/2469/
![](https://illust55.com/wp-content/uploads/2021/06/210631-男の子_立ち_見出し.jpg)
ここまで、ご覧いただきまして、ありがとうございました
コメント