Day 23 | 使用ManoMotion制作打地鼠游戏Part1 - 手部侦测及地鼠设定

在上一篇文章介绍了ManoMotion的安装与介绍，今天我们要使用ManoMotion来制作打地鼠游戏!

目录
游戏机制介绍
Step 1 地鼠设置
Step 2 手掌辨识程序
Step 3 地鼠程序

游戏机制介绍

游戏运行时，手机画面的四个角落会随机出现地鼠，

玩家需要用手控制槌子敲击到地鼠，碰到地鼠的话，槌子会变化，

达到指定分数，游戏就会结束!

使用到的素材有:

地鼠	地鼠洞	槌子(前)	槌子(後)

Step 1 地鼠设置

在Unity 场景中，新增地鼠、地鼠洞物件，并将它放置在角落。

使用Canvas及Rect Transform 将物件设置在角落，就不会因为不同手机画面造成物件跑掉喽!

接着为地鼠新增Box Collider 2D，设置好适当的大小

接下来就可以撰写地鼠的程序码了

Step 2 手掌辨识程序

手部识别用到ManoMotion套件，在Start()中新增

ManomotionManager.OnManoMotionFrameProcessed += HandleManoMotionFrameUpdated;

并加入HandleManoMotionFrameUpdated():

• 注册ManoMotion中手势辨识、追踪位置及警告文字
• 并将资讯即时传给其他函式

void HandleManoMotionFrameUpdated()
    {
	GestureInfo gesture = ManomotionManager.Instance.Hand_infos[0].hand_info.gesture_info;
	TrackingInfo tracking = ManomotionManager.Instance.Hand_infos[0].hand_info.tracking_info;
	Warning warning = ManomotionManager.Instance.Hand_infos[0].hand_info.warning;

	MoveAndScaleSpookey(tracking, warning);
	HighlightSpookeyImage(warning);
    }

在Awake()中加入碰撞器

bc = gameObject.AddComponent<BoxCollider2D>() as BoxCollider2D;
bc.size = new Vector2(280, 220);

MoveAndScaleSpookey()中:

• 设定显示手部辨识的图片尺寸
• 图片尺寸将随手部在相机中的大小改变
• 并且设定碰撞器大小

  void MoveAndScaleSpookey(TrackingInfo trackingInfo, Warning warning)
	{
		if (warning != Warning.WARNING_HAND_NOT_FOUND)
		{
			spookyRectTransform.position = Camera.main.ViewportToScreenPoint(trackingInfo.palm_center);
			float width = Screen.width * trackingInfo.bounding_box.width;
			float height = Screen.height * trackingInfo.bounding_box.height;

			float size = Mathf.Min(width, height);

			bc.size = new Vector2(width,height);
			bc.transform.localPosition = spookyRectTransform.localPosition;
		}
	}

在Start()中加入:

• 设定图片资讯
• 并让手部侦测可以不断被执行

Image spookeyImageHolder;
RectTransform spookyRectTransform;

[SerializeField]
Sprite openHandSprite;
[SerializeField]
Sprite closedHandSprite;

	void Start()
	{
		spookeyImageHolder = this.GetComponent<Image>();
		spookeyImageHolder.preserveAspect = true;
		spookyRectTransform = this.GetComponent<RectTransform>();
	}

HighlightSpookeyImage()中:

• 为图片设定淡入淡出，让图片动画可以更自然

void HighlightSpookeyImage(Warning warning)
	{
		if (warning == Warning.WARNING_HAND_NOT_FOUND)
		{
			FadeOut(spookeyImageHolder);
		}
		else
		{
			FadeIn(spookeyImageHolder);
		}
	}

新增FixedUpdate()及OnCollisionEnter2D()，控制槌子的碰撞及图片变化

 private float StateSecond = 1;

 private void FixedUpdate()
    {
		StateSecond -= Time.fixedDeltaTime;

		if (StateSecond <= 0) {
			spookeyImageHolder.sprite = openHandSprite;
			FadeIn(spookeyImageHolder);
		}
	}

  private void OnCollisionEnter2D(Collision2D col)
    {
		spookeyImageHolder.sprite = closedHandSprite;
		FadeIn(spookeyImageHolder);

		StateSecond = 1;
	}

Step 3 地鼠程序

首先先新增一个Monster()，并在Scene中将所有地鼠都绑上该程序。

因为需要同时管理所有地鼠，我们新增一个gameManager来管理地鼠行为。

在Monster()中加入Hide()

 private void Hide()
    {
        gameManager.HideMonster(gameObject);
    }

在gameManager()中加入HideManager()

  public void HideMonster(GameObject monster) 
    {
        monster.SetActive(false);
    }

有了隐藏，就需要新增显示ShowManager()

  public void ShowMonster(GameObject monster) 
    {
        monster.SetActive(true);
    }

并且在Monster()中新增碰撞OnCollisionEnter2D()

  private void OnCollisionEnter2D(Collision2D collision)
    {
        Hide();
    }

如此一来，手部侦测及地鼠设定便完成喽! 下一篇将会是游戏管理，那麽我们明天见啦!