Unity

Move, rotate, and scale sprites

Page update date :
Page creation date :

Verification environment

Windows
  • Windows 11
Unity Editor
  • 2020.3.25f1
Input System Packages
  • 1.2.0

Prerequisites for this tip

The following settings are pre-configured as a prerequisite for the explanation of these tips.

Moving the sprite

In games, you often use a controller to move your character. This time, I would like to use the keyboard to move the sprite displayed on the screen.

If you change the script, you can move it with a gamepad in addition to the keyboard. Each input is summarized in Tips for the input system, so please refer to it.

Sprite Placement

Place one sprite in the view. For instructions on placing sprites, refer to the previous tips. For the time being, the type and size of the image can be anything as long as it is visible on the view.

There is also a text of the operation explanation, but it does not affect this operation.

Create a script that allows you to move sprites with the keyboard

In order to move the sprite by input operation, you need to create a script, so create a script in your project. The name is arbitrary, but in this case SpriteMove , it is .

Once you have created and opened the script, enter the following: This script is based on the assumption that it will be attached to the sprite to be moved.

using UnityEngine;
using UnityEngine.InputSystem;  // 追加

public class SpriteMove : MonoBehaviour
{
  // 一定時間ごとに呼ばれます
  void FixedUpdate()
  {
    // キーボードの情報を取得
    var keyboard = Keyboard.current;
    if (keyboard == null)
    {
      Debug.Log("キーボードがありません。");
      return;
    }

    // スプライトの移動処理
    // Translate メソッドでスプライトの位置が移動します
    // Space.World を指定すると回転の影響をうけません
    if (keyboard.leftArrowKey.isPressed)
    {
      transform.Translate(-0.1f, 0, 0, Space.World);
    }
    if (keyboard.rightArrowKey.isPressed)
    {
      transform.Translate(0.1f, 0, 0, Space.World);
    }
    if (keyboard.upArrowKey.isPressed)
    {
      transform.Translate(0, 0.1f, 0, Space.World);
    }
    if (keyboard.downArrowKey.isPressed)
    {
      transform.Translate(0, -0.1f, 0, Space.World);
    }

    // スプライトの回転処理
    // Rotate メソッドでスプライトが回転します
    if (keyboard.spaceKey.isPressed)
    {
      transform.Rotate(0, 0, 5f);
    }

    // スプライトの拡大縮小
    // メソッドはないので localScale プロパティに倍率をかけます
    if (keyboard.aKey.isPressed)
    {
      transform.localScale *= 1.02f;
    }
    if (keyboard.zKey.isPressed)
    {
      transform.localScale /= 1.02f;
    }
  }
}

In order to Update move the sprite on a regular basis, you need to describe the process in a method. FixedUpdate In this case, we have created and described it there.

I'll explain the details in detail another time, butUpdate the number of times a method is called per second depends on the environment in which it is running. Therefore, the speed of movement may change depending on the execution environment. FixedUpdate The number of times the method is called per second is determined by the setting value, so you can move the sprite at the same speed in any environment.

public class SpriteMove : MonoBehaviour
{
  // 一定時間ごとに呼ばれます
  void FixedUpdate()
  {
    // :
  }
}

Since it is assumed that it will be operated with the keyboard this time, the Keyboard.current keyboard information is obtained with . If you change the code here, you can also get it with a mouse or gamepad.

If you want to change it, please refer to the following tips.

// キーボードの情報を取得
var keyboard = Keyboard.current;
if (keyboard == null)
{
  Debug.Log("キーボードがありません。");
  return;
}

SpriteMove The class that you inherit from contains information about the object to which you MonoBehaviour are attaching. transform When you access properties, you can manipulate the location of the object, for example.

Transform.Translate You can call a method to move the position of the object from its current position. The X and Y coordinates are moved according to the cursor keys, respectively.

Space.World , you can move without being affected by the rotation described below.

// スプライトの移動処理
// Translate メソッドでスプライトの位置が移動します
// Space.World を指定すると回転の影響をうけません
if (keyboard.leftArrowKey.isPressed)
{
  transform.Translate(-0.1f, 0, 0, Space.World);
}
if (keyboard.rightArrowKey.isPressed)
{
  transform.Translate(0.1f, 0, 0, Space.World);
}
if (keyboard.upArrowKey.isPressed)
{
  transform.Translate(0, 0.1f, 0, Space.World);
}
if (keyboard.downArrowKey.isPressed)
{
  transform.Translate(0, -0.1f, 0, Space.World);
}

Transform.Rotate You can call a method to rotate an object from its current state. The argument is the amount of rotation with respect to the specified axis. The X axis is the left and right axis, the Y axis is the up and down axis, and the Z axis is the axis that goes backward. Therefore, in 2D, if you multiply the rotation with respect to the Z axis, it will rotate clockwise and counterclockwise.

// スプライトの回転処理
// Rotate メソッドでスプライトが回転します
if (keyboard.spaceKey.isPressed)
{
  transform.Rotate(0, 0, 5f);
}

By the way, I specified in the Space.World method earlier Translate , but If this is not specified, the movement direction will rotate according to the rotation direction.

For example, in the figure Space.World below, is specified, and the right movement operation is performed with a 45° rotation.

In the following figure, Space.World the right movement operation is performed with a 45° rotation without specifying .

Space.World If you do not specify in this way, the direction of movement changes with the direction in which you rotate. This is useful for implementing 3D and radio-controlled operations.

For scaling, there is no method to increase or decrease the scale with respect to the current scale. localScale Perform calculations on the property.

If you simply multiply the current value by a magnification, you can scale it according to the key press. Vector2 If you set it with , you can zoom in only the X direction, zoom in only the Y direction, etc.

// スプライトの拡大縮小
// メソッドはないので localScale プロパティに倍率をかけます
if (keyboard.aKey.isPressed)
{
  transform.localScale *= 1.02f;
}
if (keyboard.zKey.isPressed)
{
  transform.localScale /= 1.02f;
}

Once you've saved your script, attach it to your sprite. The name of the sprite in the hierarchy is the same as the file name, so if necessary, change it to make it easier to understand.

After that, run the game and see if it works with your keyboard.

I think this is enough for moving your ship in a vertical or horizontal shooting game. Of course, if you automatically calculate the movement of the enemy, you can move it with the same code.

Displaying sprites (images)
Implement sprite sheet animations