Unityで2D STGを作る(1日目)
マリン船長(Marine Ch. 宝鐘マリン - YouTube)にはまって何かコンテンツを作ろうと思い、学生時代に作ったことのあるSTGならサクッと作れるだろう、ということで開始。船長は東方好きなのでSTGはシナジーもあるし。
利用するUnityのバージョンは2019.4.4。
事前知識としては以下のブログを読んだ程度。
Unityで0から2Dアクションバトルゲームを作ろう!①ゲーム画面の作成
今日やったことは以下
GitHubと連携する
参考:【超初心者向け】Unityのプロジェクトを、GitHub for Unityを使って超簡単にバックアップする方法 - Qiita
コマンドラインからgitで直接やってもいいが、GitHub for Unityという専用のパッケージがあるようなのでそれを使う(.gitignore作るのが面倒だし)
実施内容は以下
再配布禁止の素材を使うこともあると思うので、private repositoryで作成した
- Visual Studioで保存時に自動で整形されるように
参考:Visual Studio で保存時にコードを自動整形する|へっぽこプログラマーの備忘録
拡張機能→拡張機能の管理→Format docで検索して「Format document on save」をダウンロード - 画面サイズを指定
東方が640×480だったと思うのでそれに倣おうと思ったが、作業しているPCが1920×1080なのでかなり小さい。
1024×768にした。 - プレイヤー画像の作成
船長の三面図をドット絵ナニカで変換して、その画像の色をスポイトで取ってそれっぽく作成 - プレイヤーの作成
0から2Dアクションバトルゲームを作ろう!②プレイヤーキャラを動かそう の通り、マウス位置に追従するだけ - GameManagerを作成、プレイヤーをプレハブに
ほとんどのオブジェクトは動的に作られると思うので、プレイヤーだけ最初からオブジェクトができてるのも変では?と思い、GameManagerでインスタンス化するように。
プレハブはResources.Loadで読み込み。 - 背景画像を探す
「海賊 背景」とか「海図 背景」で検索して以下が見つかったのでいったんこれ。1024×768になるよう縮小&端をカット
[フリーイラスト] 羅針図と古地図 - パブリックドメインQ:著作権フリー画像素材集 - 画像が等倍で表示されるようカメラのスケールを調整
だいぶはまった。
Choosing the resolution of your 2D art assets2D アートアセットの解像度選択 - Unity Technologies BlogやUnity 2D ゲームの画面(メインカメラ)サイズの選択と設定例 - sh1’s diaryを見たところ、CameraのScaleを画面サイズの縦幅の1/200の値(1024×768であれば、768の1/200で3.84)にしないと等倍で表示されないようだ - ゲーム領域の背景画像を探す
一旦以下を使うことに。ゲーム領域は640*720にした
「空と海の蒼いグラデーション」の画像素材を無料ダウンロード(1)フリー素材 BEIZ images - プレイヤーをゲーム領域外に出ないようにする
private void fixPosition() { // 左端 float width = GetComponent<SpriteRenderer>().bounds.size.x; float left = transform.position.x - width / 2; if (left < gameManager.GAME_AREA_LEFT) { transform.position = new Vector3(gameManager.GAME_AREA_LEFT + width / 2, transform.position.y, transform.position.z); } //右端 float right = transform.position.x + width / 2; if (right > gameManager.GAME_AREA_RIGHT) { transform.position = new Vector3(gameManager.GAME_AREA_RIGHT - width / 2, transform.position.y, transform.position.z); } // 上端 float height = GetComponent<SpriteRenderer>().bounds.size.y; float top = transform.position.y + height / 2; if (top > gameManager.GAME_AREA_TOP) { transform.position = new Vector3(transform.position.x, gameManager.GAME_AREA_TOP - height / 2, transform.position.z); } // 下端 float bottom = transform.position.y - height / 2; if (bottom < gameManager.GAME_AREA_BOTTOM) { transform.position = new Vector3(transform.position.x, gameManager.GAME_AREA_BOTTOM + height / 2, transform.position.z); } }
- 自機の弾画像作成、自機の弾発射処理作成
updateの処理は単純にこれだけ
//画面上にしか行かない前提 Vector2 moveVector = new Vector2(0, speed); transform.Translate(moveVector); // 完全に画面外に出たら破棄 if (!GetComponent<Renderer>().isVisible) { Destroy(gameObject); }
- 背景画像のゲーム領域を透過するように
弾がゲーム領域外に描画されないよう、ゲーム領域背景→プレイヤー等→全体背景と描画されるように。そのために全体背景のゲーム領域部分を塗りつぶして透過させた
ここまでの画面キャプチャはこんな感じ