ノーコードで多重スクロールする背景を作る方法【アセット紹介】【Unity】
今回はUnityで多重スクロールする背景を作ることができる無料アセットを紹介します。
👇完成形はこんな感じ👇
概要
無限スクロールに対応した視差効果のある背景を作成できちゃいます。しかもアセットの導入のみでコードを書く必要もないので、１０分程度で作ることができます。ぜひ最後までご覧ください！
視差効果とは？
視差効果とは、複数の背景レイヤーを異なる速度でスクロールさせることで、奥行き感や立体感を演出する技術です。前景のレイヤーは速く動き、背景のレイヤーはゆっくり動くことで、視覚的に距離感が生まれます。
この手法は、2Dゲームやアニメーションでよく使用され、シーンに深みを加えることができます。
作り方
それでは実際に作り方を解説します。まずはAssetStoreで「Easy Parallax」を入手。
（Parallaxは日本語で「視差」です）
導入方法
導入方法を解説します。（わかる方は飛ばしてください）
Unityのプロジェクトを立ち上げます。今回はライティング調整のために2DURPプロジェクトを使用します。プロジェクトが開いたら、[WIndow] > [Package Manager]からパッケージマネージャーを開きます。（Add to My AssetしたときにOpen In Unityを選択しても同じようにインポートできます）
PackagesをMyAssetsに設定したのを確認してから、「Easy Parallax」と検索。
Downloadボタンを押してからImportボタンをクリック。（筆者は既にダウンロード済み）
全てのチェックボックスにチェックが入っているのを確認して、再びImportボタンをクリックします。
デモシーンの実行
インポートが完了したら[Assets] > [Scripts] > [EasyParallax] > [Demo]の中にある「ParallaxTest」という名前のシーンをを開きます。
実行してみましょう。
視差効果のある多重スクロールができています。なので言ってしまえばあとは素材を差し替えるだけです。
背景素材の導入
今回は下の無料アセットを使用してみます。
ここから下の内容は素材によっても異なりますので個人で調整してください。
こちらも先ほどと同じ手順でPackageManagerから、もしくはOpenInUnityからインポートします。
背景を追加したいシーンを開いてインポートした背景素材をヒエラルキータブにドラッグ＆ドロップしていきます。（おそらくこの方法が一番速い）👇動画参照
全ての背景素材をシーン内に追加出来たらレイヤーの設定を行います。Layerの管理方法は各個人によっても異なると思いますので、参考までにしてください。
[BackGround]という名前のレイヤーを追加し、Order In Layerを調整します。
続いて背景のサイズ調整を行います。
筆者と同じ背景素材を使用する場合は下の数値を参考に設定してください。
【画面サイズ】1280 × 720
【背景素材のPixel Per Unit】52
【背景素材のY座標】2.55
【Global Light 2DのIntensity】2.5
上の値で設定するとこのようになります👇
以上で素材の最低限の設定は完了です。
それでは本題の背景スクロールに移ります。
多重スクロールの実装
まずはすべての背景素材それぞれに[SpriteMovement]コンポーネントと[SpriteDuplicator]コンポーネントを追加してください。
まずは[SpriteMovement]コンポーネントから設定を行います。
SpriteMovementコンポーネントには２つのパラメーターがあります。
MovementSpeedTypeにはMoveSpeedType型のScriptableObjectを設定することができます。
[Assets] > [Scripts] > [EasyParallax] > [Demo] > MovementSpeeds の中にすでに４つのMoveSpeedTypeがあります。せっかくなのでこれらを利用して作りましょう。
どれでもいいのでMoveSpeedTypeをクリックして中身を見てみましょう。
設定できるプロパティは「Speed」のみです。Speedはスクロール速度を管理する変数です。つまり同じMovementSpeedTypeを複数のレイヤーに持たせておけばすべてSpeedが同じになるので管理がしやすいわけですね。
この素材はちょうど４種類のグループに分けられます。同じ速度で動いてほしいレイヤーをグループ分けして見やすくしました👇
あとはそれぞれのグループの名前の通りにMovementSpeedTypeをアタッチしましょう💪
全てのレイヤーにアタッチできたら実行してみましょう。
想定通りに動きました！完成です🎉🎉
でもちょっと待った✋！！まだブラウザバックしないで！
補足
完成しましたが、まだSpriteDuplicatorについて解説していません。
今回はの場合は初期設定のままうまくいきましたが、そうでない人もいると思いますので解説します。
SpriteDuplicatorについて
SpriteDuplicatorは無限スクロールに対応させるためのスクリプトです。
このコンポーネントのプロパティの内容をまとめました。
- Pool Size : 複製する背景の枚数。指定した枚数が繰り返しスクロールされる。
- Sprite Reposition Index : 画面外に出た背景を右に再配置させるときの基準となる数値。１なら背景が１枚出た瞬間に右に再配置される。
- Sprite Reposition Correction : 分からなかったため、ChatGPTの回答を貼り付けておきます。申し訳ございません。
初期値の背景の動きをSceneビューで見るとこのようになっています👀
左にスクロールしていった背景が背景画像２つ分画面外にでると右に再配置されます。背景は5つ分あり、それが繰り返しスクロールしている構造です。
SpriteMovementについて
SpriteMovementコンポーネントについても補足しておきます。
さっきは無視していたSpeedという変数がありますが、この変数は無視してOKです👌
コードの中身を見たところMovementSpeedType内のSpeedが優先的にスクロール速度に代入されるため、MovementSpeedTypeを設定している場合は数値を変更しても何も変化はありません。
逆に言うとMovementSpeedTypeを設定していない場合はこの数値がScrollSpeedに適用されるので注意してください。
ただ個人的にはまとめて管理できる点からMovementSpeedTypeで管理することを推奨します。
また、背景以外のスクロールもこのコンポーネントで制御できます。例えば👇のゴブリンように（この場合SpriteDuplicatorは必要ありません）
解説については以上です。
まとめ
今回はEasyParallaxという無料アセットで視差効果のある多重スクロールを実装する方法について解説しました。
ノーコードでこんなにきれいなスクロールが実装できるなんてすばらしいですよね。
参考になった方はぜひ読者登録＆ブックマーク登録お願いします👍
この記事に対する感想やご意見などのコメント💬もお待ちしております！
最後まで読んでいただき、ありがとうございました！
高校生のスマホゲーム開発記録｜１週間目
こんばんは！ゲーム開発で一攫千金を狙う高校生、NEOです。
今回は実際にゲームアプリ開発の１週間目の進捗を報告したいと思います💪
まずは下の動画をご覧ください。
ひとまずこのような感じになりました。実装した内容をまとめると、
- 背景のスクロール
- プレイヤーの基本的なアニメーションとアクション
- ゴブリン（敵）の追加
- 仮のHPバー実装
- スコアカウントの実装
という感じです。それではこの１週間の作業を細かく見ていきましょう。
実際にどのように実装したかや、工夫した点、苦労した点なんかをまとめていきます。
実装① 背景スクロール
まず最初に実装したのは視差効果を利用した背景です。視差効果とは、複数の背景レイヤーを異なる速度でスクロールさせることで、奥行き感や立体感を演出する技術です。前景のレイヤーは速く動き、背景のレイヤーはゆっくり動くことで、視覚的に距離感が生まれます。
この手法は、2Dゲームやアニメーションでよく使用され、シーンに深みを加えることができます。
最初は自分でプログラムを書いてみたんですが、どうにもうまくいかず、、、
しかし、諦め半分でAssetStore*1を覗いてみたところ、なんとそれっぽいアセットが見つかりました！しかも無料で！
早速Unityに導入したところ、動きました！🎉🎉
しっかり視差効果が適用されたすばらしい背景スクロールですね！
それと、この背景画像もAssetStoreで無料で入手したものです。
筆者の画力では到底こんなきれいな背景は描けないので素材に感謝です！
実装② プレイヤーの基本アクション
２つ目に実装したのはプレイヤーです。
プレイヤーのスプライトは前から使おうと考えていた、これまたAssetStoreの素材を利用しました。（アセットストアに頼りすぎだろ！）
プレイヤーのアニメーション等を設定し、実行した結果が下の動画。
うーん。なんだかカクカク、、、。
理由はただ１つ。アニメーションフレーム数（コマ数）が少ないからです。しかし、アセットストアで配布されていた素材なので、勝手に素材を改変、追加していいかは分かりません。
そこでとりあえず、素材フォルダ内にあった、ライセンスファイルをコピペしてChatGPTに投げたところ、このような回答が返ってきました。
アニメーションフレームを編集・追加した
このアセットは著作権も放棄されてるからほとんど何しても大丈夫らしいです。
よかった！
というわけでそれからアニメーションのコマ数を増やす作業に入りました。
ツールにはドット絵ペイントツール（有料）のAsepriteを使用しました。
約1.5時間かけてコマ数を20枚程度増やしました。０から作るよりは簡単でした！
それを今度はUnityで実際に動かせるようにします。これが意外に時間かかった💦
それを実行してみると、
アニメーションがスムーズになりましたね！（ゴブリンを試しで置いていました。ミスです）
ちょっとしたことですが、こだわってよかったと思います！
実装③ ゴブリン（敵）
さっきの動画でも登場しましたが、敵となるゴブリンを実装しました。このゴブリンのスプライトもまたまたAssetStore👜で無料で入手したものです。（ちなみにPlayerの素材と同じ作者さん）
プレイヤーが一定の範囲内に入ったら攻撃するというプログラムを書いて完成です。
ゴブリンについてはそれ以外に特に語ることもないので僕のがんばり（プログラムの一部）を画像として貼っておきます。
実装④ 仮のHPバー実装
プレイヤーのHPバーも実装しました。
見た目はひどいですが機能としては完璧です。
見た目は後から簡単に変えられるように設計しているので、世界観などに合わせて追々やっていきたいと思います。
実装⑤ スコアカウント
このゲームにおいてのスコアは進んだ距離です。敵を倒してとにかく先へ進めば進むほど高得点となります。なのでその指標となる数値を表示する必要があるわけですね。
今のところフォントもデフォルトで無機質な作りですが、これについても追々手を加えたいと思います。
それ以外にこだわった点
ここに書いてあること以外にもこだわった点があります。例えば攻撃した、されたときの画面のエフェクトです。
これはTopDownEngineに入っているMMFeedbacksという機能を使用して実装しました。
画面の歪みや、色収差、Bloomなどの画面効果のプロパティーを操作しています。
一気に見た目がそれっぽくなるので最高です！
ややこしいので細かいことは省略しますが、気になった方はぜひ調べてみてください。他にもいろんなことができます。（MMFeedbacksが単体でほしい場合はFeelを購入してください）
まとめ
個人的にはこの１週間の作業スピードには一応満足しています。ただ、もっと頑張れたなと思う一面もあるので来週も気を引き締めて頑張りたいと思っています。
来週はコイン、２体目の敵、足場などを実装する予定です。
最後まで見たいただき、ありがとうございました！
📗ブックマーク登録、読者登録もお忘れなく！
高校生がゲーム開発で一攫千金を狙うお話💰【Unity】【ゲーム制作】
はじめまして。みなさんゲームはお好きですか？こんなニッチなブログにたどり着いたということは日々ゲームをプレイされている方がほとんどだと思います。そんなあなたに質問です。
ゲームを作りたいと思ったことはありませんか？
僕はめちゃくちゃおもいます！自分の作ったゲームを誰かにプレイしてもらって喜んでもらえるとか最高じゃありませんか！？
このブログはそんな筆者がゲームを制作する過程や進捗をを共有・報告する場にしたいと思っています。
👦はじめに
それでは簡単に自己紹介をさせていただきます。
ネット名: NEO
年齢: 16歳（高校2年生）
ゲーム制作歴🎮: 約3年（実際に制作している期間は約2年）
ゲーム開発で一攫千金を狙う漢、NEOと申します。僕がゲームを作り始めたきっかけは、YouTubeの「ゲームは誰でも作れる！」という動画でした。ブログは初投稿ですががんばります！
これまでに作ったゲームについては、別の記事で詳しく紹介しますので今回は省略させていただきます。
🚀これからの具体的な目標（本題）
さて、本題に入ります。結局どういうゲームをどうやって作るの？という話です。開発期間や開発環境についても詳しく説明します。
まず、最終的にはAppStoreとGooglePlayStoreでアプリを公開します。つまりは皆さんのお手元に筆者が作った超面白いゲームが届く日がやってくるというわけです！という話を前提にもっと深堀っていきましょう🔥
どうやって作るの？💻
ゲームを作るといってもいろんな方法があります。まずパソコンはほぼ必須でしょう。次にソフトですね。基本ゲームを作るとなるとゲームエンジンというものを使用します。ゲームエンジンには以下のようなものがあります。
- Unity
- RPGツクールシリーズ
- UnrealEngine
- GameMaker
- Godot
今回はUnityを使用します。というかストアでアプリを公開するとなるとこの中ならUnityのシェア率がダントツで一番高いと思います。
Unityを使い慣れているというのもありますし、正直筆者の中では迷うことなくこいつ一択ですね。
Unityってなに？
Unityが何なのかわからないあなたのために簡単に説明しておきます。Unityというのはゲームを制作するためのソフトでPCからインストールできます。
Unityで作られたゲームには以下のようなものがあります。
みなさんが知っているゲームを一つくらいはあるのではないのでしょうか？しかもこのUnityエンジン、なんと無料で始められます。マジです。気になった方は今すぐ調べてみてください！一緒にゲーム開発しましょう🔥
どんなゲームを作るの？
問題はここです。「どんなゲームを作るのか！」僕が作りたいゲームを箇条書きでまとめるとこんな感じです。
・・・無理ですよね。こんなゲームを個人の高校生が作れるはずがありません。筆者の人生を捧げても到底作れないでしょう。かといってどうやって決めたらいいか分からない！ということで別の観点から考えましょう。
制作期間を決め、それに見合ったボリュームにする
まずは制作期間を決めましょう。話はそこからです。例えば期限を１週間としましょう。素材を描いて、プログラムも書いて、広告を導入し、テストして、審査に出す。
人によっても変わりますが、筆者のレベルだと、とても誰かに手に取ってもらえるようなゲームにはならないでしょう。せいぜい作れてブロック崩しのような簡単なゲームです。じゃあ１か月なら？かなり幅が広がりますね。すこし複雑なゲームでも作れそうです。
いろいろ考えた結果、筆者は１か月半を目安にゲームを作ります。
ジャンルを決める🎮
次にジャンルを決めます。僕の中では以下のような候補がありました。
- 脱出ゲーム
- 放置系クリッカーゲーム
- 横スクロール無限ランゲーム
考えた結果、３の横スクロール無限ランゲームを制作することに決定しました。
制作の記録は次回から公開していきます💪ペースは週1くらいを想定しています。
どうやって収益を得るの？
一攫千金を狙うというでかでかとしたタイトルですから、もちろん今回制作したゲームは収益化します。ゲームアプリをストアで公開してどうやって収益を得るの？という話に関しましては主に３つの方法があります。
- 有料販売：自作アプリを有料で販売し、ユーザーにそのアプリを購入してもらいます。ただし、それなりのクオリティーがないと見向きもされない。
- 広告配信：自作アプリに広告を入れ、ユーザーにその広告を表示させ収益を得ます。有料販売と比べると比較的ハードルが低い。
- アプリ内課金：ユーザーにアプリ内で課金をしてもらう。これもある程度のクオリティーが必要。導入が難しい。
筆者のレベルではお金を払ってもらうほどのクオリティーのゲームは作れないので今回は２の広告配信で収益を得ます。画面の上部にバナー広告を入れたり、リワード広告（動画を視聴することで報酬を発生させる）を入れます。それをユーザーに表示してもらうことで収益が発生します。
これが収益を得る基本の仕組みとなります。
📒まとめ
今回の記事では自己紹介と今後の方針について説明させていただきました。正直面白くない内容だったかもしれませんがここまで読んでくださった方、本当にありがとうございます！
次回からは実際にゲームを制作していく様子をお届けできますのでぜひお楽しみに！
読者登録やXのフォローもよろしくお願いします👍
