팀명: 드랍더빗
팀원: 김현우, 강승기
개발 환경: Unity 2020.1 URP, Visual Studio, GitLab
제작 기간: 2020.10.27 ~ 2020.11.24
YouTube: BeatBreaker Game Play

Index

1. 프로젝트 소개

구조
역할 분담 및 개발 일정

2. 프로젝트 구현

VR PLAYER
MAIN ROOM
BEATBREAK STAGE

프로젝트 소개

Beat Breaker는 날아오는 비트를 글러브로 치는 VR 리듬 액션 게임이다.

: target game

Fig 1. Target Games.

타겟은 Beat Saber와 BoxVR로 잡았다. Beat Saber의 네온 분위기와 BoxVR의 타격감을 최대한 살리려고 했다.

구조

Beat Breaker는 크게 3가지 파트로 나뉜다; Main Room, BeatBreak Stage, Result.

: main state diagrams

Main Room 에서는 앨범과 노래를 선택할 수 있다. 노래를 선택하면 BeatBreak Stage 파트에서 열심히 비트를 쳐서 점수를 올리고 Result 에서 결과를 확인하고 이름과 기록을 남길 수 있다.

역할 분담 및 개발 일정

: 팀 구성원

김현우	강승기
VR 플레이어 Game System Interactive UI Level Design	비트 스폰 비트 리듬 생성 장애물 움직임

: 개발 일정

프로젝트 구현

1. VR PLAYER

: interaction level

VR에서 플레이어는 중심축 역할을 한다. 플레이어와 주변 환경, 사물 간의 인터렉션 레벨에 따라 사용자의 경험도 달라질 것이다. Beat Breaker의 플레이어는 핸드 인터렉션이 대부분을 차지하기 때문에 글러브의 인터렉션 레벨을 높일 필요가 있었다. 글러브 인터렉션 레벨은 다음과 같다.

글러브는 항상 컨트롤러를 따라 다녀야 한다.
글러브는 모든 오브젝트(정적, 동적)와 충돌이 가능해야 된다. (글러브가 통과하는 일이 없어야 된다)
비트나 샌드백을 치면 충돌이 난 지점에서 소리가 나야 된다.

a. XR Input

: input class diagram

Unity XR Toolkit은 최근에서야 New Input System으로 인풋 스크립트가 딸려 오지만 그 전까지는 인풋 매니저를 따로 작성해야 했다. 프로젝트에서 사용한 인풋 매니져는 VR with Andrew의 Scriptable Object 방식을 사용했다.

인풋은 3가지로 나뉜다. XRButtonHandler는 Boolean 값을 반환하는 Primary/Secondary Button을 받고 XRAxisHandler는 하나의 축으로만 값이 변하는 Trigger Button, Grip Button 이 여기에 해당한다. XRAxis2DHandler는 두개의 축을 가진 Primary/Secondary Joystick이 되겠다.

XRInputManager는 위에 3가지 Handler로 만들어진 Scriptable Object를 받아 Update에서 HandleState()를 통해 값을 계속 업데이트 해준다.

인풋 값이 필요한 스크립트는 해당 인풋의 Scriptable Object를 받아서 사용하면 된다.

b. Physics Hand

플레이어의 글러브는 정적인 사물과도 충돌이 있어야 하기 때문에 Non-Kinematic Rigidbody 를 가진다. 이렇게 되면 컨트롤러의 포지션과 로테이션 트레킹을 해야 되는데 이 문제는 VR with Andrew의 팁을 받아 Velocity Tracking 방법을 사용하였다.

XRPhysicsHand.cs

private void VelocityTrackPosition()
{
    _rb.velocity *= velocityPredictionFactor;
    var positoinDelta = targetPosition - _rb.worldCenterOfMass;
    var velocity = positoinDelta / Time.unscaledDeltaTime;

    if (!float.IsNaN(velocity.x))
    {
        _rb.velocity += velocity;
    }
}

private void VelocityTrackRotation()
{
    _rb.angularVelocity *= velocityPredictionFactor;
    var rotationDelta = targetRotation
        * Quaternion.Inverse(_rb.rotation);
    float angleInDegrees; Vector3 rotationAxis;
    rotationDelta.ToAngleAxis(out angleInDegrees, out rotationAxis);
    if (angleInDegrees > 180)
    {
        angleInDegrees -= 360;
    }

    if (Mathf.Abs(angleInDegrees) > Mathf.Epsilon)
    {
        var angularVelocity = (rotationAxis * angleInDegrees
            * Mathf.Deg2Rad) / Time.unscaledDeltaTime;
        if (!float.IsNaN(angularVelocity.x))
        {
            _rb.angularVelocity += angularVelocity
                * angularVelocityDamping;
        }
    }
}

Velocity Tracking 방식은 Unity XR Toolkit에서 GrabbleObject를 잡을 때 사용하는 방식중 하나로 글러브에도 적용하게 되면 컨트롤러의 포지션과 로테이션값을 따라가게 된다.

c. Persistent Scene

빌드 인덱스의 0번째에 씬, Persistent Scene은 파괴되면 안 되는 오브잭트들이 존재하는 씬으로 GameSystem, ScoreManager 및 VRPlayer가 포함된다.

Persistent Scene은 항상 로드 되어 있고 그 위에 새로운 씬이 로드되는 방식이다.

SceneLoader.cs

private IEnumerator LoadNew(string sceneName)
{
    AsyncOperation loadAsyncOperation =
        SceneManager.LoadSceneAsync(sceneName, LoadSceneMode.Additive);

    while (!loadAsyncOperation.isDone)
    {
        float progress = Mathf.Clamp01(
            loadAsyncOperation.progress / .9f);
        yield return null;
    }
}

새로운 씬을 로드할 때 LoadSceneMode.Additive 모드로 로드하면 Persistent Scene이 유지된 채로 새로운 씬이 로드된다.

private IEnumerator LoadScene(string sceneName)
{
    _isLoading = true;

    OnLoadBegin?.Invoke();
    yield return _screenFader.StartFadeIn();
    yield return StartCoroutine(UnloadCurrent());

    yield return new WaitForSeconds(1f);

    yield return StartCoroutine(LoadNew(sceneName));
    yield return _screenFader.StartFadeOut();
    OnLoadEnd?.Invoke();

    _isLoading = false;
}

새로운 씬을 로드하는 과정은 위와 같다. 엑티브된 씬을 언로드 하기전에 화면을 FadeIn 했다가 새로운 씬을 로드하면서 FadeOut을 한다.

ScreenFader.cs

private IEnumerator FadeIn()
{
    while (_smh.shadows.value.magnitude >= 1)
    {
        _smh.shadows.value -= Vector4.one * _fadeSpeed * Time.deltaTime;
        _smh.midtones.value -= Vector4.one * _fadeSpeed * Time.deltaTime;
        _smh.highlights.value -= Vector4.one * _fadeSpeed * Time.deltaTime;
        yield return null;
    }
}

ScreenFader는 PostProcess의 ShadowsMidtonesHighlights을 이용한다.

2. MAIN ROOM

MainRoom은 앨범을 고르고 샌드백을 쳐서 노래를 고르는 공간이다.

a. BoxingBag

BoxingBag은 MainRoom의 컨트롤러 역할을 한다. Prototype 버전에는 버튼을 이용해 노래를 고르는 방식이었지만 재미가 없는 인터렉션이라 BeatBreaker의 컨셉과도 맞는 샌드백으로 바꿨다.

조작 방법은 간단하다. BoxingBag의 오른쪽을 치면 노래가 오른쪽으로 넘어가고 왼쪽을 치면 왼쪽으로 넘어간다. 그리고 가운데를 강하게 치면 노래가 선택된다.

: structure

Fig 4. Boxing Bag Structure.

BoxingBag은 Rigidbody로 이루어져 있다. 체인은 Configurable Joint로 연결돼 있고 고정축만 Kinematic이다. BoxingBag 에 무게감을 주기 위해 약간에 drag값이 있다. 또, 쳤을 때 너무 멀리 날아가면 안 되고 타격감을 주기 위해 바닥에는 Spring Joint가 BoxingBag에 연결되어 있다.

: flicker

BoxingBag은 글러브로 치면 컨셉에 맞게 네온 라이트가 깜빡인다.

BoxingBag.cs

private IEnumerator Flick(float duration)
{
    float elapsedTime = 0f;
    while (elapsedTime <= duration)
    {
        RandomAverage(_renderer, _color);
        elapsedTime += Time.deltaTime;
        yield return null;
    }
}

private Color RandomAverage(Renderer renderer, Color color)
{
    while (_smoothQueue.Count >= _smoothing)
    {
        _smoothSum -= _smoothQueue.Dequeue();
    }
    float randomValue = Random.Range(_minValue, _maxValue);
    _smoothQueue.Enqueue(randomValue);
    _smoothSum += randomValue;
    renderer.material.SetColor("_EmissionColor", color * _smoothSum);
    return color;
}

원리는 결국 랜덤 수를 이용해 깜빡이게 하는 것이다. 큐가 정해진 _smoothing의 크기만큼 다 찰 때까지 intensity가 올라갔다가 정해진 수와 같아지면 큐에서 하나씩 빼서 intensity의 값에 변동을 준다.

b. LevelSelector

LevelSelector는 BoxingBag의 Visual Output 이다. UI 이지만 3D 오브젝트를 이용해 만들었다. LevelSelector는 앨범을 소켓에 넣는 것부터 시작된다.

: select album

소켓은 Unity XR Toolkit의 Socket을 이용했다.

LevelSelector.cs

/// <summary>
/// This is called when music block is attached to the socket.
/// </summary>
public void OnMusicBlockAttach(GameObject socket)
{
    _isMusicBoxAttached = true;

    GameObject interactor = socket.GetComponent<XRSocketInteractor>().selectTarget.gameObject;
    _selectedMusicBlock = interactor.GetComponent<MusicBlock>();
    _musicBlockAttach.PlaySoundAt(interactor.transform.position, 0.3f, 2f);

    _firstSongIndex = _selectedMusicBlock.FirstSongIndex;
    _lastSongIndex = _selectedMusicBlock.LastSongIndex;
    _selectedSceneIndex = _firstSongIndex;
    _selectedSceneTitle = SceneLoader.Instance.Scenes[_selectedSceneIndex];

    AttachVisualize();
}

소켓에 앨범이 부착되는 순간 호출되고 XRSocketInteractor로 부터 앨범에 있는 노래 정보를 가져온다. 노래 정보를 가져오면 노래 커버가 보이고 노래도 재생된다.

: select music

UI의 디테일을 살리기 위해 노래 커버가 옆으로 넘어갈 때 마다 Lerp를 통한 자리 이동이 되고 스케일과 투명도도 바뀐다.

LevelSelector.cs

private IEnumerator SmoothFade(GameObject songCover, Vector3 startScale, Vector3 targetScale, Color startColor, float startAlpha, float targetAlpha,
    AnimationCurve ac, float duration, FadeMode fadeMode)
{
    if (fadeMode.Equals(FadeMode.In)) songCover.SetActive(true);
    float elapsedTime = 0f;

    while (elapsedTime <= duration)
    {
        // 노래 커버의 투명도 조정
        Material material = songCover.GetComponent<Renderer>().material;
        startColor.a = Mathf.Lerp(startAlpha, targetAlpha, ac.Evaluate(elapsedTime / duration));
        material.color = startColor;

        // 사진의 투명도 조정
        Color imageColor = songCover.GetComponentInChildren<Image>().color;
        imageColor.a = Mathf.Lerp(startAlpha, targetAlpha, ac.Evaluate(elapsedTime / duration));
        songCover.GetComponentInChildren<Image>().color = imageColor;

        // 스케일 조정
        _lerpScaleValue = Vector3.Lerp(startScale, targetScale, ac.Evaluate(elapsedTime / duration));
        songCover.transform.localScale = _lerpScaleValue;

        elapsedTime += Time.deltaTime;
        yield return null;
    }
    if (fadeMode.Equals(FadeMode.Out)) songCover.SetActive(false);
}

투명도를 조정하기 위해 material의 Render Mode는 Transparent를 사용하고 사진 material의 우선순위를 더 높게 줬다. 자리 이동 모션도 SmoothFade()와 마찬가지 방법을 사용한다.

: confirm selection

노래 선택은 BoxingBag에 중앙을 일정 속도 이상으로 쳐야 선택이 된다.

SandBagHitPoint.cs

private void TiggerEvent(Rigidbody hand)
{
    BoxingBag.ActivateFlicker();

    if (_selectedHitFunc.Equals(HitFunctions.Play))
    {
        _eventTriggerValue = BoxingBag.PlayTriggerValue;
        // Play
        if (hand.velocity.magnitude > _eventTriggerValue)
        {
            BoxingBag.DisconnectBoxingBag(hand);
            onHitSandBag?.Invoke(_selectedHitFunc);
        }
    }
    else
    {
        _eventTriggerValue = BoxingBag.HitTriggerValue;
        // Previous, Next
        if (hand.velocity.magnitude < 6f &&
            hand.velocity.magnitude > _eventTriggerValue)
        {
            onHitSandBag?.Invoke(_selectedHitFunc);
        }
    }
}
public enum HitFunctions { Previous, Play, Next }

BoxingBag의 OnTriggerEnter 콜백에 의해 호출된다. 미리 설정된 _selectedHitFunc에 따라 LevelSelector에 전달되는 값이 달라진다.

BoxingBag.cs

public void DisconnectBoxingBag(Rigidbody rb)
{
    _rootChain.breakForce = 1f;
    _springChain.breakForce = 1f;
    ForceTarget.drag = 0f;
    ForceTarget.AddForceAtPosition(rb.velocity * _breakForce,
        rb.position, ForceMode.Impulse);
    ChainBreakSound.PlaySoundAt(_rootChain.transform.position);
}

체인은 joint의 .breakForce 값을 1로 바꿔서 끊고 충돌 지점에 .AddForceAtPosition()를 하였다.

: Game State Changer

Game State은 총 4가지이다.

public enum GameState { Load, MapSelection, GameOn, Result }

GameStateChanger가 현재 상태를 결정하고 상태마다 필요한 세팅을 실행한다.

GameStateChanger.cs

private void OnEnable()
{
    SceneManager.sceneLoaded += UpdateGameState;
}

다음 3가지 상태; Load, MapSelection, GameOn 는 새로운 씬이 로드 될 때 UpdateGameState() 함수에서 업데이트된다. 마지막 Result 상태는 GameOn 상태에서 선택한 노래가 끝나면 자동으로 바뀐다.

3. BEATBREAK STAGE

BeatBreak Stage는 비트에 맞춰 날아오는 Beat를 방향에 맞게 치면서 운동하는 공간이다.

a. Beat

Beat는 스폰이될 때 치는 방향이 랜덤으로 정해지고 레인을 따라 플레이어를 향해 움직인다. Beat는 기본적으로 물리 인터렉션이 가능하다.

플레이어는 점수를 올리기 위해서 정해진 방향에 맞게 Beat를 쳐야 되고 콤보를 유지하는 것이 중요하다.

: points

Fig 11. Hit & Miss.

Beat를 쳤을 때 점수를 측정하는 절차는 다음과 같다.

OnCollisionEnter → Check Speed → Check HitPoint → Calculate Angle

BoxingBag.cs

// 가장 먼져 속도 체크로 Hit, Miss 인지 판별한다.
if (_rb.velocity.magnitude > noteControl.TriggerVelocity)
{
    EffectPool.Instance.PlayEffect(EffectType.punch, collision.contacts[0].point, -_rb.transform.forward);
    _goodPunch.PlaySoundAt(collisionPoint);
    _shadowPunch.PlaySoundAt(collisionPoint);

    // 충돌 지점이 HitPoint 범위에 있는지 확인 한다. 
    if (dstFromHitPoint < noteControl.HitPointRadius)
    {
        // 벡터의 내적을 구해 마지막 파이널 점수에 적용한다.
        float dotValue = Vector3.Dot(-hitPoint.up, _rb.velocity.normalized);
        _finalScore += score + Mathf.Clamp(score * dotValue, 0f, score);
        ScoreManager.Instance.AddScore(_finalScore);
        noteRB.AddForceAtPosition(punchVelocity, collisionPoint, ForceMode.Impulse);
    }
    else
    {
        _finalScore = score * Mathf.InverseLerp(0, 1, dstFromHitPoint);
        ScoreManager.Instance.AddScore(_finalScore);
        noteRB.AddForceAtPosition(punchVelocity * _reducePercentage, collisionPoint, ForceMode.Impulse);
    }
}
else
{
    _badPunch.PlaySoundAt(collisionPoint);
    ScoreManager.Instance.Missed();
}

b. Fever Mode

Fever Mode는 10 콤보 이상 유지하면 진입하게 된다.

하지만 장애물에 충돌하거나 Beat를 놓치거나 Miss가 날 경우 콤보는 깨지고 Fever Mode는 끝나게 된다.

Fig 14. Comparison.

c. Result Screen

Result UI는 3개의 페널로 이루어져 있다. 왼쪽 페널은 Best Combo나 Miss의 개수 같은 디테일을 표시한다. 가운데 페널은 점수와 노래 커버사진을 표시하고 오른쪽 페널은 플레이한 노래의 랭크가 표시된다.

기록을 남기기 위해선 키보드를 글러브로 치고 Enter를 누르면 랭크 패널에 기록을 남기게 된다.

: physics button

Physics Button은 목적에 맞게 재정의 해서 사용할 수 있도록 만들었다.

PhysicsButton.cs

private void IsButtonPushed()
{
    _currentDistance = Vector3.Distance(_btn.transform.position,
        _pushPoint);
    if (_currentDistance < _distance * 0.5f && !_isButtonPushing)
    {
        _isButtonPushing = true;
        OnButtonDown(_btn.transform.position);
    }
    else if (_currentDistance > _distance * 0.6f && _isButtonPushing)
    {
        _isButtonPushing = false;
        OnButtonUp(_btn.transform.position);
    }
}

PhysicsButton은 코어 기능으로 버튼이 눌렸는지를 판단한다. ._pushPoint와 ._btn.transform.position 사이의 거리로 눌렸는지 확인한다.

PhysicsButton.cs

public virtual void OnButtonDown(Vector3 buttonPosition) { }
public virtual void OnButtonUp(Vector3 buttonPosition) { }

PhysicsButton을 상속받은 자식은 목적에 맞게 재정의 해서 사용하면 된다.

KeyboardButtons.cs

public override void OnButtonDown(Vector3 position)
{
    onKeyPush?.Invoke(_selectedKey, position);
}

재정의된 함수는 버튼이 눌릴 때마다 호출된다.

KeyboardKeyController.cs

private void OnEnable()
{
    foreach (KeyboardButtons btn in _keyboardButtons)
    {
        btn.onKeyPush += Push;
    }
}

private void Push(KeyboardKeys key, Vector3 pos)
{
    _click.PlaySoundAt(pos);
    switch (key)
    {
        default:
            KeyInput(key.ToString());
            break;
    }
}

KeyboardKeyController에 Push() 함수는 .onKeyPush에 구독돼 있기 때문에 레퍼런스를 가지고 있는 버튼들이 눌릴 때마다 KeyInput()의 기능을 수행한다.

: save system

랭크는 기록될 때 json 파일 형식으로 저장된다. Tuple에 데이터를 받을 때 노래 제목, 랭크에 기록할 이름, 그리고 플레이한 노래의 점수를 받게 된다.

SaveSystem.cs

public void Save(string song, string name, float score)
{
    Records.Add(new Tuple<string, string, float>(song, name, score));
    var rank = (from record in Records
                orderby record.Item3 descending
                select record)
                .ToList<Tuple<string, string, float>>();

    string jsonRecord = JsonConvert.SerializeObject(rank);
    byte[] bytes = System.Text.Encoding.UTF8.GetBytes(jsonRecord);
    string format = Convert.ToBase64String(bytes);

    File.WriteAllText(SAVE_FOLDER + "Ranking.json", format);
}

기록은 추가될 때마다 점수순으로 다시 정렬해서 기록된다.

public List<Tuple<string, string, float>> GetRankOfSong(string song)
{
    List<Tuple<string, string, float>> rank = new List<Tuple<string, string, float>>();
    foreach (Tuple<string, string, float> record in Records)
    {
        if (record.Item1.Equals(song))
        {
            rank.Add(record);
            if (rank.Count == _rankTop) break;
        }
    }
    return rank;
}

노래의 기록을 가져올 때는 Records에 로드된 정보에 미리 설정한 개수만큼만 반환한다.