unity imageに線を引くアプリでCommandButtonを押した時はMainy画面に戻る処理をしたい

Question

前提・実現したいこと

unity imageに線を引くアプリでCommandButtonを押した時はMainy画面に戻りたいなどの処理をしたいのですが,線は引けたのですが,CommandButtonを追加してMaine画面に戻る処理を追加した場合動きがおかしくなります。
ただ　GetkeyDownなどの処理は問題ないので,OnButtonClickではなくCommandButonが押された時にGetkeyDownで判定する方法はないでしょうか?

タッチ処理の場合CommandButtonを使えないような気がするのですが?

if (Input.GetKeyDown("u"))この処理は問題なく動きます。

発生している問題・エラーメッセージ

CommandButonの処理が上手くいかない。

該当のソースコード

    // *** MAINLOOP ***
    void Update()
    {
        if (enableTouch)
        {
            TouchPaint();
        }
        else
        {
            MousePaint();
        }

    }


    public void OnButtonClick()
    {
        Debug.Log("Click ");

    }

    // handle mouse events
    void MousePaint()
    {
        if (Input.GetKeyDown("u"))
        {
            DoUndo();
        }
        if (Input.GetMouseButtonDown(0))
        {
            beforeMousePos = GetPosition();
        }
        if (Input.GetMouseButton(0))
        {
            Vector3 v = GetPosition();
            LineTo(beforeMousePos, v, lineColor);
            beforeMousePos = v;
            UpdateTexture();
            textureNeedsUpdate = true;
        }

        // left mouse button released
        if (Input.GetMouseButtonUp(0))
        {
            GrabUndoBufferNow();
        }

        if (Input.GetMouseButton(1))
        {
                DoUndo();
        }
    }

Comments

[Bongo]

私としては、ボタンクリック時の動作はなるべく本来のボタンの流儀に沿って「On Click ()」に実行したいメソッドをセットするのがよさそうに思うのですが、それだとうまくいかないということですね?
その際の症状はどのようなものでしょうか（ボタンをクリックすると、ボタンで隠れている背面のImageのお絵かきも作動してしまい、クリック位置に余計な点が描かれてしまう...とか?）。

それともう一つ気になる点として、Painterスクリプトがボタンオブジェクトにもアタッチしてあるようです。これはどのような理由からでしょうか。この状態だとボタンの表面にも線が描かれてしまうかと思いますが、そのような動作をさせたいということでしょうか?

[29507-01]

いつもすみません。
「On Click ()」の処理でundo,又はMain画面に戻りたいのですが
Input.GetMouseButtonDown(0)に処理が移って行くようです。

Painterスクリプトがボタンオブジェクトにもアタッチしてあるようです。これはどのような理由からでしょうか。　- - -> 知識不足で意味がありません。あくまで上記undo,又はMain画面に戻りたいのです。

ボタンをクリックすると、ボタンで隠れている背面のImageのお絵かきも作動してしまい、クリック位置に余計な点が描かれてしまい,ボタン処理でundoなどしたいのですが思うように動作しません。

Answer 1

一案として、Painterスクリプトに下記のような修正を加えてみてはどうでしょうか?

• PainterスクリプトにIPointerDownHandler、IPointerUpHandlerインターフェイスを実装する。
• OnPointerDownは通常はImage上でマウスボタンを押し下げる、あるいはタッチを開始すると動作するが、Imageよりも前面に配置されたボタンをクリックした時には、ボタンによってイベントが遮断され動作しないので都合がいいと思われる。そこで、このタイミングで線引き中であることを示すフラグをtrueにする。
• 線引きロジックは線引き中フラグがtrueの場合のみ動作させるようにする。OnPointerDownはUpdateよりも先行して処理されるので、OnPointerDown内で線引きフラグを立てておけばUpdate内やMousePaint内、TouchPaint内でそれに基づいた分岐ができる。
• OnPointerUpのタイミングで線引き中フラグをfalseにする。

// 省略

// イベント関連の機能群を使用できるように、usingディレクティブを追加する
using UnityEngine.EventSystems;

// IPointerDownHandler、IPointerUpHandlerを実装することを宣言する
[RequireComponent(typeof(RectTransform), typeof(Image))]
public class Painter : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
	// 省略

	// お絵かき中であることを示すフィールドを追加
	bool isPainting;
	
	// 省略

	// このImage上でタッチ開始、またはマウスボタンを押し下げた時にisPaintingをtrueにし...
	public void OnPointerDown(PointerEventData eventData)
	{
		isPainting = true;
	}

	// タッチが終了、またはマウスボタンが離されたらisPaintingをfalseにする
	public void OnPointerUp(PointerEventData eventData)
	{
		isPainting = false;
	}

	// MousePaint内でisPaintingを見て適宜分岐する
	// TouchPaintについても同様に分岐させる
	// あるいはメソッドの構成を見直して、MousePaintやTouchPaintには線引き関連の
	// 機能だけを記述することにし、Update内でisPaintingによる分岐を行うという作りなら
	// 似たような分岐を2ヶ所に分散して記述する必要がなくなっていいかもしれない
	// handle mouse events
	void MousePaint()
	{
		if (Input.GetKeyDown("u"))
		{
			DoUndo();
		}
		
		// 線引き中かどうかに関係なく動作させたいコードはここよりも上に記述する
		// たとえばキーボード操作によるUndo、Redoなど
		if (!isPainting)
		{
			// 線引き中に動作されると困るコードがあればこの辺に記述する
			
			return;
		}
		// 線引き中のみ動作させたいコードはここよりも下に記述する
		
		if (Input.GetMouseButtonDown(0))
		{
			beforeMousePos = GetPosition();
		}
		if (Input.GetMouseButton(0))
		{
			Vector3 v = GetPosition();
			LineTo(beforeMousepos, v, lineColor);
			beforeMousePos = v;
			UpdateTexture();
			textureNeedsUpdate = true;
		}
		
		// left mouse button released
		if (Input.GetMouseButtonUp(0))
		{
			GrabUndoBufferNow();
		}
		
		// 右ボタンクリックによるUndoも、この位置にあるとこのImage上で
		// クリックした時しか動作しなくなると思われる
		// もしそれだと困るようなら、適宜分岐経路を検討する
		if (Input.GetMouseButton(1))
		{
			DoUndo();
		}
	}

	// 省略
}

すみませんがすぐに試せるモバイル環境を持っていないため、実機上だとどうなるか未確認です。意図と異なる動きをするようでしたら、異常の様子を詳しくコメントいただければ可能であれば直してみようと思います。

追記
「UNITY LineRendererで線を描く事はできるのですが,canvasの下のimageに描く事は出来ないでしょうか?」の時のPainterと折衷させたバージョン

using System;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.SceneManagement;
using UnityEngine.UI;

/// <summary>
///		お絵描き
/// </summary>
[RequireComponent(typeof(RectTransform), typeof(Image))]
public class Painter : MonoBehaviour, IPointerDownHandler, IPointerUpHandler
{
	// ペンの半径...0で1ピクセルの線になる
	[Range(0, 5)] public int penRadius;

	// 前景色（ペンの色）
	public Color foregroundColor = Color.red;

	// 背景色
	// ただし、現状は以前のご質問で製作した「元々セットされているテクスチャを下絵にする」
	// という方式になっているため、この背景色はスクリプト中で使用されていない
	[SerializeField] private Color backgroundColor = Color.white;

	private RectTransform rectTransform;
	private Image image;
	private Texture2D texture;
	private Vector2Int textureSize;
	private Vector2Int previousPixelPosition;
	private Vector2Int cachedPixelPosition;

	// 線引き中であることを示すフラグ
	private bool isPainting;

	private readonly Stack<Texture2D> undoStack = new Stack<Texture2D>();
	private readonly Stack<Texture2D> redoStack = new Stack<Texture2D>();

	public bool CanUndo => this.undoStack.Count > 0;
	public bool CanRedo => this.redoStack.Count > 0;

	// タイトルシーンに移動するメソッド
	// ボタンのインスペクターの「On Click ()」でこのメソッドを実行するよう設定しておく
	// 個人的な好みでは、「タイトルシーンに移動する」という機能は「Image上にお絵かきする」という機能と
	// 直接的な関係があるようには感じられないので、別のスクリプトに役割分担させた方がいい気もしますが...
	public void OnButtonClick()
	{
		SceneManager.LoadScene("Title");
	}

	public void OnPointerDown(PointerEventData eventData)
	{
		this.isPainting = true;
	}

	public void OnPointerUp(PointerEventData eventData)
	{
		this.isPainting = false;
	}

	public void Undo()
	{
		if (!this.CanUndo)
		{
			return;
		}

		var previousTexture = this.texture;
		var poppedTexture = this.undoStack.Pop();
		this.texture = poppedTexture;
		this.redoStack.Push(previousTexture);
		this.UpdateSprite();
		Debug.Log($"Undo! UndoStack : {this.undoStack.Count} RedoStack : {this.redoStack.Count}");
	}

	public void Redo()
	{
		if (!this.CanRedo)
		{
			return;
		}

		var previousTexture = this.texture;
		var poppedTexture = this.redoStack.Pop();
		this.texture = poppedTexture;
		this.undoStack.Push(previousTexture);
		this.UpdateSprite();
		Debug.Log($"Redo! UndoStack : {this.undoStack.Count} RedoStack : {this.redoStack.Count}");
	}

	private void Record()
	{
		this.undoStack.Push(Instantiate(this.texture));
		foreach (var textureInRedoStack in this.redoStack)
		{
			Destroy(textureInRedoStack);
		}

		this.redoStack.Clear();
		Debug.Log($"Record! UndoStack : {this.undoStack.Count} RedoStack : {this.redoStack.Count}");
	}

	private void UpdateSprite()
	{
		var previousSprite = this.image.sprite;
		this.image.sprite = Sprite.Create(
			this.texture,
			new Rect(0, 0, this.texture.width, this.texture.height),
			Vector2.zero);
		Destroy(previousSprite);
	}

	private Vector2Int GetPixelPosition()
	{
		if (!RectTransformUtility.ScreenPointToLocalPointInRectangle(
			this.rectTransform,
			Input.mousePosition,
			null,
			out var pixelPositionFloat))
		{
			return this.cachedPixelPosition;
		}

		var sizeDelta = this.rectTransform.sizeDelta;
		pixelPositionFloat += sizeDelta * this.rectTransform.pivot;
		var pixelPosition = new Vector2Int(
			Mathf.Clamp((int)pixelPositionFloat.x, 0, this.textureSize.x - 1),
			Mathf.Clamp((int)pixelPositionFloat.y, 0, this.textureSize.y - 1));
		Debug.Log($"Pixel Position: {pixelPosition}");
		this.cachedPixelPosition = pixelPosition;
		return this.cachedPixelPosition;
	}

	private bool PositionIsWithinTexture(Vector2Int position)
	{
		return (position.x >= 0) && (position.y >= 0) &&
			   (position.x < this.textureSize.x) && (position.y < this.textureSize.y);
	}

	private void PaintAt(Vector2Int position, Color32 color, int radius)
	{
		var sqrRadius = radius * radius;
		for (var i = -radius; i <= radius; i++)
		{
			for (var j = -radius; j <= radius; j++)
			{
				var p = new Vector2Int(position.x + i, position.y + j);
				var dot = (i * i) + (j * j);
				if ((dot <= sqrRadius) && this.PositionIsWithinTexture(p))
				{
					this.texture.SetPixel(p.x, p.y, color);
				}
			}
		}

		this.texture.Apply();
	}

	private void LineTo(Vector2Int from, Vector2Int to, Color32 color, int radius)
	{
		var penPosition = from;
		var x = (float)penPosition.x;
		var y = (float)penPosition.y;
		var fromTo = to - from;
		var fromToSign = new Vector2Int((int)Mathf.Sign(fromTo.x), (int)Mathf.Sign(fromTo.y));
		var fromToXIsZero = fromToSign.x == 0;
		var fromToYIsZero = fromToSign.y == 0;
		fromToSign.x = fromToXIsZero ? 1 : fromToSign.x;
		fromToSign.y = fromToYIsZero ? 1 : fromToSign.y;
		var absFromTo = fromToSign * fromTo;
		var dominantDirection = 0;
		var delta = Vector2.zero;
		if (absFromTo.x >= absFromTo.y)
		{
			var tangent = fromToXIsZero ? 0 : (float)fromTo.y / fromTo.x;
			delta.x = fromToSign.x;
			delta.y = tangent * delta.x;
		}
		else
		{
			var tangent = fromToYIsZero ? 0 : (float)fromTo.x / fromTo.y;
			delta.y = fromToSign.y;
			delta.x = tangent * delta.y;
			dominantDirection = 1;
		}

		while (this.PositionIsWithinTexture(penPosition))
		{
			try
			{
				this.PaintAt(penPosition, color, radius);
				x += delta.x;
				y += delta.y;
				penPosition.x = (int)x;
				penPosition.y = (int)y;
				if (fromToSign[dominantDirection] > 0)
				{
					if (penPosition[dominantDirection] >= to[dominantDirection])
					{
						break;
					}
				}
				else
				{
					if (penPosition[dominantDirection] <= to[dominantDirection])
					{
						break;
					}
				}
			}
			catch (Exception e)
			{
				Debug.LogException(e);
				break;
			}
		}
	}

	private void Start()
	{
		this.rectTransform = this.transform as RectTransform;
		this.image = this.GetComponent<Image>();
		var sizeDelta = this.rectTransform.sizeDelta;
		var width = (int)sizeDelta.x;
		var height = (int)sizeDelta.y;
		var backgroundPixels = (this.image.mainTexture as Texture2D).GetPixels32();
		this.image.sprite = null;
		this.texture = new Texture2D(width, height, TextureFormat.ARGB32, false) {filterMode = FilterMode.Bilinear};
		this.texture.SetPixels32(backgroundPixels);
		this.texture.Apply();
		this.textureSize = new Vector2Int(width, height);
		this.UpdateSprite();
	}

	private void Update()
	{
		if (Input.GetKeyDown(KeyCode.U))
		{
			this.Undo();
		}

		if (Input.GetKeyDown(KeyCode.R))
		{
			this.Redo();
		}

		// 線引き中かどうかに関係なく動作させたいコードはここよりも上に記述する
		if (!this.isPainting)
		{
			// 線引き中に動作されると困るコードがあればこの辺に記述する
			return;
		}
		// 線引き中のみ動作させたいコードはここよりも下に記述する

		if (Input.GetMouseButtonDown(0))
		{
			this.Record();
			this.previousPixelPosition = this.GetPixelPosition();
		}
		else if (Input.GetMouseButton(0))
		{
			var currentPixelPosition = this.GetPixelPosition();
			this.LineTo(this.previousPixelPosition, currentPixelPosition, this.foregroundColor, this.penRadius);
			this.previousPixelPosition = currentPixelPosition;
		}

		// 右クリックによるUndo
		if (Input.GetMouseButtonDown(1))
		{
			this.Undo();
		}
	}
}

Comments

[29507-01]

PCでテストしているのですが
Imageのみスクリプトをアタッチしたのですが,MousePaint()へはどこから飛んで行くのでしょうか? 又ボタンのクリック処理をどう入れたら良いかが
わかりません。
//この処理には来ます
public void OnPointerDown(PointerEventData eventData)
{
isPainting = true;
}

public void OnPointerUp(PointerEventData eventData)
{
isPainting = false;
}
//スクリプト?
public void OnButtonClick()
{
SceneManager.LoadScene("Title");
}
//この処理にこない
void MousePaint()
{
if (Input.GetKeyDown(KeyCode.U))
{
this.Undo();
}

if (Input.GetKeyDown(KeyCode.R))
{
this.Redo();
}

if (!isPainting)
{
// 線引き中に動作されると困るコードがあればこの辺に記述する

return;
}

if (Input.GetMouseButtonDown(0))
{
this.Record();
this.previousPixelPosition = this.GetPixelPosition();
}

[Bongo]

ご質問者さんのご提示いただいたコードだと、Update内でenableTouchに基づいて分岐しTouchPaintとMousePaintを切り替えて実行しているご様子だったため、それにならってみました（つまりUpdateには手を付けず、その中で呼ばれているMousePaintの中にisPaintingによる分岐を仕込んだ...というわけです）。

もしかして現在のスクリプトはご提示いただいたスクリプトとはまた違った形なのでしょうか?もし以前のご質問で私の例示しましたPainterに沿った形の方がわかりやすそうでしたら、そのように投稿内容を修正しようと思います。
あるいは質問投稿欄の文字数が許せば、ご質問者さんの現在のPainterスクリプトをご提示いただけましたらそれに沿った形にしてみます。

[29507-01]

以前の処理の延長線で
Input.GetKeyDown(KeyCode.U) この処理をコマンドボタン又はイメージをクリックする事によりUNDO,REDOを実現したいのです。
PaintスクリプトをButtonにアタッチすると線も引かなくなります。

// このImage上でタッチ開始、またはマウスボタンを押し下げた時にisPaintingをtrueにし...
public void OnPointerDown(PointerEventData eventData)
{
isPainting = true;
}

// タッチが終了、またはマウスボタンが離されたらisPaintingをfalseにする
public void OnPointerUp(PointerEventData eventData)
{
//isPainting = false;
}

public void OnButtonClick()
{
SceneManager.LoadScene("Title");
}
private void Update()
{
if (Input.GetKeyDown(KeyCode.U))
{
this.Undo();
}

if (Input.GetKeyDown(KeyCode.R))
{
this.Redo();
}

if (!isPainting)
{
// 線引き中に動作されると困るコードがあればこの辺に記述する

return;
}

if (Input.GetMouseButtonDown(0))
{
this.Record();
this.previousPixelPosition = this.GetPixelPosition();
}
else if (Input.GetMouseButton(0))
{
var currentPixelPosition = this.GetPixelPosition();
this.LineTo(this.previousPixelPosition, currentPixelPosition, this.foregroundColor, this.penRadius);
this.previousPixelPosition = currentPixelPosition;
}
}

[Bongo]

はい、そのコードのように条件分岐させれば問題ないと思いますよ。念のため以前ご提示しましたスクリプトに今回の案を組み込んだものを省略なしで追記しました（文字数制限がきつかったのでコード内のコメントはけっこう削ってしまいました...必要に応じてコメントを加えてみてください）。
なおUndo、Redo、OnButtonClickはpublicなので外部から実行することもでき、それぞれボタンを用意して「On Click ()」にセットしてやればボタンクリックでUndo、Redo、タイトルシーンへの移動ができるかと思います。

[29507-01]

ButtonにPainterのスクリプトをアタッチしてOn Click () にPainter.OnButtonClickをセットしたら線も引かなくなります。...アタッチの仕方が違う?

[29507-01]

this.isPaintingの使い方が違っていました。
有難うございました。