SpiritLink

Javascript 에서 모바일 브라우저인지 감지하는 코드

static isMobile(){
    // if we want a more complete list use this: http://detectmobilebrowsers.com/
    // str.test() is more efficent than str.match()
    // remember str.test is case sensitive
    let isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
    (navigator.userAgent.toLowerCase());
    return isMobile;
}

Spine으로 특정시점에 애니메이션을 재생시키거나 AddAnimation으로 애니메이션을 이어서 재생할때

애니메이션이 출력이 안되거나 재생 시점이 각기 다른 현상이 있었다.

Spine의 Visible을 False로 처리했을때 이러한 현상이 발생했었다.

처음에는 visible을 true로 놔둔 상태에서 스크린 밖의 좌표에 이동시켰으나

Render함수의 부하가 관찰됨.

this.sprite.autoUpdate = false;

먼저 spine의 autoUpdate를 false로 설정한다.

this.sprite.update( delta );

이후 Delta값을 이용해서 업데이트 한다. (Delta는 프레임간 시간을 넣어주면 됨 [dt], 일반적인 상황에서는 1 / 60 )

관찰시 visible을 false 상태에서 true로 전환되도 정상적으로 애니메이션이 재생되는걸 확인할 수 있음

빛이 벽을 통해서 반사 되거나

공튕기기 게임에서 벽에 부딪힐때 반사각을 구해보자

1. 진행방향 벡터 (p) 와 충돌한 부분의 법선벡터 (n) 가 필요하다.

let n = this.result.normal; // 법선 벡터
let p = [];                  // 원래 벡터
p2.vec2.sub( p, this.rayClosest.from, this.rayClosest.to );

2. 진행방향 벡터의 역벡터 (-p) 를 구한다.

let minusP = [];         // 역 벡터
p2.vec2.sub( minusP, this.rayClosest.to, this.rayClosest.from);

3. 역벡터 (-p) 와 법선 벡터의 (n) 내적 (dot)을 구한다.

// 내적 계산
let dot = p2.vec2.dot( minusP, n );

4. 법선 벡터를 2배로 (2 * n) 늘린다.

// 법선 벡터 2배
let mulNormal = [];
p2.vec2.scale( mulNormal, this.result.normal, 2 );

5. 2배 길이의 법선벡터를 내적이 계산된 값만큼 스케일을 조절한다. ( 2 * n * dot(-p, n) )

let finalNormal = [];
p2.vec2.scale( finalNormal, mulNormal, dot );

6. 원래 진행방향 벡터 (p)에 5번에서 계산된 벡터 (스케일 조절된 법선 벡터) 를 더한다. ( p + 5번 결과 벡터 )

p2.vec2.add( reflect, p, finalNormal ); // 반사벡터 산출

7. 구해진 반사벡터를 정규화시킨다. ( normalize reflect )

p2.vec2.normalize( reflect, reflect );  // 정규화

8. 2d Screen의 특성에 따라 (y값이 밑으로 갈수록 증가) 역벡터를 구하면 완성( negate reflect )

p2.vec2.negate( reflect, reflect );     // 스크린 특성

마지막으로 계산된 reflect를 물체의 방향 (direction) 으로 사용하면 잘 반사된다.

- 참고 하면 좋은 수학적 개념 -

http://toymaker.tistory.com/entry/%EB%B0%98%EC%82%AC-%EB%B2%A1%ED%84%B0-Reflection-Vector

https://www.slideshare.net/cancan21st/ss-17299826

http://ifyouwanna.tistory.com/entry/%EB%B0%98%EC%82%AC%EB%B2%A1%ED%84%B0