3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

[Unity] 簡単に2Dスクロール背景を実装する方法

Posted at

動作環境

Unity 2019.4.24f1

1.事前準備

1.適当なスプライト(パターン画像)を選択
 今回はこちらからお借りしました。
 http://bg-patterns.com/

2.Inspectorから
 ・Mesh Type->Full Rect
 ・Warp Mode->Repeat
 をそれぞれ選択

※ドット画像の場合は
 ・Filter Mode->Point(no filter)
 ・Compression->None
 も選択

1_1.png

2.マテリアルの作成

1.ProjectからCreate->Materialを作成
2.ShaderからUnlit->Transparentを選択
3.右側の四角をクリックして、スクロールしたい画像を選択

1_2.png

3.スクリプトの作成

1.ProjectからCreate->C# Scriptを作成
2.以下のコードを記述

BackScroll.cs
using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class BackScroll : MonoBehaviour
{
    private Renderer rend;

    [SerializeField]
    private float m_speed;

    // Start is called before the first frame update
    void Start()
    {
        rend = GetComponent<Renderer>();
    }

    // Update is called once per frame
    void Update()
    {
        //自動でスクロール
        float x = Mathf.Repeat(Time.time * m_speed, 1);
        Vector2 offset = new Vector2(x, 0);

        rend.sharedMaterial.SetTextureOffset("_MainTex", offset);
    }
}

4.スプライトの表示

1.HierarchyからCreate Emptyを作成
2.Add ComponentからSprite Rendererを選択
3.マテリアルをドラッグして適用
4.Sprite Rendererから
 ・Sprite->スクロールしたい画像
 ・Draw Mode->Tiled
 ・Size->画面に合うサイズ
 をそれぞれ選択
5.スクリプトをアタッチしてSpeed(変数)に適当な数字を入れる

1_3.png

5.完成

ダウンロード.gif

これで自動的にスクロールするようになります。
Sprite Rendererにこのような警告が表示されることがありますが、気にしなくても動くので大丈夫です。

1_4.png

おまけ

ダウンロード (2).gif

画像を座標軸でスクロールしたいときは以下のコードを追加するとできます。
これらはスクリプトで動かしているので応用しやすいです。いろいろできると思うので試してみてください。

BackScroll.cs
        //座標軸でスクロール
        float moveX = transform.position.x * m_speed;
        float x = Mathf.Repeat(moveX, 1);

参考サイト

3
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
3
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?