Pixi.js: λΌλ””μ•ˆμ„ μ‚¬μš©ν•˜μ—¬ 각도λ₯Ό λŒ€μ‹  μ‚¬μš©ν•˜λŠ” API μž¬μž‘μ—…

에 λ§Œλ“  2017λ…„ 06μ›” 30일  Β·  10μ½”λ©˜νŠΈ  Β·  좜처: pixijs/pixi.js

λͺ…μ‹œλœ ν˜œνƒ:

  • μ‚¬μš©ν•˜κΈ° μ‰¬μš΄ μ΅œμ’… μ‚¬μš©μž API
  • μ‚¬μš©μž μ½”λ“œμ— λŒ€ν•΄ 더 μ‰½κ²Œ μΆ”λ‘ ν•˜κ³  읽을 수 μžˆμŠ΅λ‹ˆλ‹€.
  • λΌλ””μ•ˆ 값보닀 차수 값을 μœ μ§€ν•˜κΈ° 더 μ‰½μŠ΅λ‹ˆλ‹€.
  • λ‹€λ₯Έ μ›Ή 기반 및 기타 2D μ—”μ§„κ³Όμ˜ 일관성
Stale πŸ™ Feature Request

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

Phaserκ°€ ν•˜λŠ” κ²ƒμ²˜λŸΌ? κ°λ„λŠ” 도이고 νšŒμ „μ€ λΌλ””μ•ˆμž…λ‹ˆλ‹€.

λͺ¨λ“  10 λŒ“κΈ€

μƒκ°λ‚˜λŠ” λͺ‡ 가지 단점:

  • λ‚΄μž₯ μžλ°”μŠ€ν¬λ¦½νŠΈ μˆ˜ν•™ ν•¨μˆ˜λŠ” λΌλ””μ•ˆμœΌλ‘œ ν‘œμ€€ν™”
  • λ‚΄μž₯ glsl ν•¨μˆ˜λŠ” λΌλ””μ•ˆμœΌλ‘œ ν‘œμ€€ν™”ν•©λ‹ˆλ‹€.
  • λΌλ””μ•ˆμ€ 일뢀 μœ ν˜•μ˜ 계산을 μ²˜λ¦¬ν•˜λŠ” 데 더 νŽΈλ¦¬ν•œ ν˜•μ‹μž…λ‹ˆλ‹€(예: 0-> Math.pi * 2μ—μ„œ lerpν•˜κ³  μ‹œκ³„ λ°©ν–₯으둜 μ™„μ „νžˆ νšŒμ „ν•  수 있음).

μ €λŠ” μˆ˜ν•™ 전문가이며 지속성 및 셰이더 ν˜•μ‹μƒμ˜ 이유둜 0..1 λ˜λŠ” 0..512 쀑 ν•˜λ‚˜λ₯Ό μ‚¬μš©ν•˜λŠ” 것을 μ„ ν˜Έν•©λ‹ˆλ‹€. 2λ…„ 이상 전에 같은 μ§ˆλ¬Έμ„ ν–ˆλ‹€λ©΄ λΌλ””μ•ˆμ΄ μˆ˜ν•™ μ˜λ―Έμ—μ„œ "순수"ν•˜κΈ° λ•Œλ¬Έμ— 더 λ‚«λ‹€κ³  말할 수 μžˆμŠ΅λ‹ˆλ‹€.

κ·ΈλŸ¬λ‚˜ νŒŒμΌμ— 2 x Math.PIλ₯Ό μ €μž₯ν•˜λŠ” 것은 문제(지속성)이고 "360"은 2*PI보닀 μ“°κΈ°κ°€ 더 λΉ λ₯΄λ©° 이진 ν˜•μ‹μœΌλ‘œ λͺ…ν™•ν•˜κ²Œ ν‘œν˜„ν•  수 μ—†μŠ΅λ‹ˆλ‹€.

ν”Œλž˜μ‹œ 기반 엔진은 λ‹€μŒκ³Ό 같이 거의 μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

https://libgdx.badlogicgames.com/nightlies/docs/api/com/badlogic/gdx/graphics/g2d/Sprite.html#getRotation --

http://cocos2d-x.org/docs/programmers-guide/sprites/index.html

http://help.adobe.com/ko_KR/ActionScript/3.0_ProgrammingAS3/WS5b3ccc516d4fbf351e63e3d118a9b90204-7def.html

https://www.youtube.com/watch?v=zAsDbHXlFWI

λ˜ν•œ Spineκ³Ό 같은 νŽΈμ§‘κΈ°λŠ” 각도λ₯Ό λΌλ””μ•ˆμœΌλ‘œ μ €μž₯ν•©λ‹ˆλ‹€.

ν•œ 가지 더 μ΄μƒν•œ 점은 μš°λ¦¬κ°€ κ·Έλž˜ν”½ λ””μžμ΄λ„ˆμ˜ 것인 SKEWλ₯Ό μ‚¬μš©ν•˜κ³  μˆ˜ν•™μ μΈ μ˜λ―Έμ—μ„œ "(shear.y , -shear.x)"인 κ²ƒμž…λ‹ˆλ‹€. μš°λ¦¬λŠ” κ·ΈλŸ¬ν•œ 혐였λ₯Ό ν—ˆμš©ν•˜κ³  μ‚¬μš©μžκ°€ λ™μ‹œμ— radλ₯Ό μ‚¬μš©ν•˜λ„λ‘ κ°•μš”ν•©λ‹ˆλ‹€.

"μ €μˆ˜μ€€ λ Œλ”λŸ¬"와 "자체 μŠ€ν…Œμ΄μ§€ 및 도ꡬ 지원이 μžˆλŠ” 2D κ·Έλž˜ν”½ λ Œλ”λŸ¬" κ°„μ˜ 좩돌이며 pixiκ°€ 두 λ²ˆμ§Έμ— 가깝닀고 μƒκ°ν•©λ‹ˆλ‹€.

@englercj λ‚˜λ„ κ·Έ μ½”λ“œμ—μ„œ 일해야 ν•œλ‹€, λ‚˜λŠ” 이미 λ‚΄ 포크에 그런 것을 가지고 μžˆλ‹€: https://github.com/gameofbombs/gobi/tree/master/src/core/transform
https://github.com/gameofbombs/gobi/blob/master/src/core/math/FlatTransform2d.ts

@mreinstein pixi λ³€ν™˜μ— λŒ€ν•΄ μ•Œκ³  있기 λ•Œλ¬Έμ— ν•΄λ‹Ή μ½”λ“œλ„ μ‚΄νŽ΄λ΄μ•Ό ν•©λ‹ˆλ‹€. ;)

@bigtimebuddy & @GoodBoyDigital 의 μ œμ•ˆμœΌλ‘œ APIλ₯Ό ꡬ성할 수 μžˆμŠ΅λ‹ˆλ‹€.

// useDegrees
CONVERSION = Math.PI / 180;

// useRadiens
CONVERSION = 1;

set rotation(rot)
{
    this._rotation = rot * CONVERSION;
}

Phaserκ°€ ν•˜λŠ” κ²ƒμ²˜λŸΌ? κ°λ„λŠ” 도이고 νšŒμ „μ€ λΌλ””μ•ˆμž…λ‹ˆλ‹€.

@englercj λ™μ˜ν•©λ‹ˆλ‹€. 그게 κ°€μž₯ κ°„λ‹¨ν•œ λ°©λ²•μž…λ‹ˆλ‹€. pixi 기반 엔진은 "CONVERSION" μƒμˆ˜λ₯Ό μˆ˜μ •ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

@englercj Processing이 이 μž‘μ—…μ„ μˆ˜ν–‰ν•˜λ©° 정말 잘λͺ»λœ λ””μžμΈ 결정이라고 μƒκ°ν•©λ‹ˆλ‹€. 그것은 λͺ¨λ“ˆν™”λ₯Ό ν•΄μΉœλ‹€. ν•œ 가지 λ°©μ‹μœΌλ‘œ μˆ˜ν–‰ν•˜λŠ” μ½”λ“œκ°€ 있고 λ‹€λ₯Έ λ°©μ‹μœΌλ‘œ κ°€μ •ν•˜λŠ” λ‹€λ₯Έ μ½”λ“œ(μ•„λ§ˆλ„ λΌμ΄λΈŒλŸ¬λ¦¬μ— 있음)λ₯Ό μ‚¬μš©ν•˜λ €κ³  ν•˜λ©΄ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. 각도 κ΄€λ ¨ ν•¨μˆ˜λ₯Ό ν˜ΈμΆœν•  λ•Œλ§ˆλ‹€ λ‹¨μœ„ λͺ¨λ“œλ₯Ό μ„€μ •ν•˜λ©΄ μ½”λ“œκ°€ μ œλŒ€λ‘œ μž‘λ™ν•˜μ§€λ§Œ 라이브러리 μ½”λ“œκ°€ 손상될 수 μžˆμŠ΅λ‹ˆλ‹€. 그리고 각도λ₯Ό μ‚¬μš©ν•˜λŠ” 라이브러리 μ½”λ“œκ°€ μžˆλ‹€λ©΄ 각도 λͺ¨λ“œλ₯Ό μ„€μ •ν•΄μ•Ό ν•©λ‹ˆκΉŒ? 즉 μ˜λ„ ν•œλŒ€λ‘œ ν•΄λ‹Ή μ½”λ“œκ°€ μž‘λ™μ„ 보μž₯ν•˜μ§€λ§Œ, μ‚¬μš©μžμ˜ μ•”ν˜Έλ₯Ό 해독 ν•  수 μžˆμŠ΅λ‹ˆλ‹€. API μ„€κ³„μ˜ μ£„μˆ˜μ˜ λ”œλ ˆλ§ˆμ™€ 거의 λΉ„μŠ·ν•©λ‹ˆλ‹€.

@OSUblake 그게 더 ν•©λ¦¬μ μœΌλ‘œ λ³΄μž…λ‹ˆλ‹€. 각도와 νšŒμ „μ΄λΌλŠ” 이름이 λ‹¨μœ„λ₯Ό λͺ…μ‹œμ μœΌλ‘œ λ‚˜νƒ€λ‚΄κ±°λ‚˜ κΈˆμ§€ν•˜μ§€λŠ” μ•Šμ§€λ§Œ 50/50 좔츑보닀 더 ν•©λ¦¬μ μœΌλ‘œ λ§Œλ“œλŠ” 연관성이 λΆ„λͺ…νžˆ μžˆμŠ΅λ‹ˆλ‹€.

κ·Έλž˜λ„ angleDeg 및 angleRad κ°€ 더 쒋을 것 κ°™μŠ΅λ‹ˆλ‹€. μ™œ λͺ…μ‹œν•˜μ§€ μ•ŠμŠ΅λ‹ˆκΉŒ?

κ°λ„λŠ” 도이고 νšŒμ „μ€ λΌλ””μ•ˆμž…λ‹ˆλ‹€.

그것이 Phaserκ°€ μˆ˜ν–‰ν•˜λŠ” 방식일 수 μžˆμ§€λ§Œ 보편적으둜 λ™μ˜λœ 것은 μ•„λ‹™λ‹ˆλ‹€. νšŒμ „μ€ λ™μž‘μ΄κ³  κ°λ„λŠ” λ°œμƒν•œ λ™μž‘μ˜ μ–‘μž…λ‹ˆλ‹€. λ•Œλ‘œλŠ” "νšŒμ „ 각도"라고도 ν•©λ‹ˆλ‹€. λ”°λΌμ„œ 기술적으둜 각도 λ˜λŠ” νšŒμ „μ€ λ™μΌν•œ 것을 μ°Έμ‘°ν•˜κΈ° μœ„ν•΄ μ˜€λ²„λ‘œλ“œλ  수 있으며 두 λ‹¨μœ„(도 λ˜λŠ” λΌλ””μ•ˆ)둜 ν‘œμ‹œλ  수 μžˆμŠ΅λ‹ˆλ‹€.

νšŒμ „κ³Ό κ΄€λ ¨λœ λͺ¨λ“  μˆ˜ν•™ 연산은 λΌλ””μ•ˆμ„ μ‚¬μš©ν•˜λ©΄ 훨씬 μ‰½μŠ΅λ‹ˆλ‹€. μ΄ν•΄ν•˜λŠ” 것은 그리 어렡지 μ•ŠμŠ΅λ‹ˆλ‹€. Math.PIλŠ” μ›μ˜ μ€‘κ°„μž…λ‹ˆλ‹€. Math.PI * 2λŠ” 전체 νšŒμ „μž…λ‹ˆλ‹€.

νšŒμ „μ„ ν¬ν•¨ν•˜λŠ” μ‚¬λžŒλ“€μ—κ²Œ μ‹œκ°μ  μ‚¬μš©μž μΈν„°νŽ˜μ΄μŠ€λ₯Ό λ…ΈμΆœν•˜κ³  청쀑이 κΈ°λ³Έ κΈ°ν•˜ν•™μ„ μ΄ν•΄ν•˜μ§€ λͺ»ν•˜λŠ” κ·Έλ£Ή(즉, λŒ€λΆ€λΆ„μ˜ μ‚¬λžŒλ“€)인 κ²½μš°μ—λ§Œ μ‹œκ°„ 정도가 μ μ ˆν•©λ‹ˆλ‹€.

λ‚˜λŠ” 이것이 μ˜κ²¬μ΄λΌλŠ” 것을 μ•Œκ³  μžˆμ§€λ§Œ λΌλ””μ•ˆμœΌλ‘œ κ°€μ‹­μ‹œμ˜€. μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ λͺ¨λ“  Math APIλŠ” λŒ€λΆ€λΆ„μ˜ μž₯λ‚œκ°μ΄ μ•„λ‹Œ κΈ°ν•˜ λΌμ΄λΈŒλŸ¬λ¦¬μ™€ λ§ˆμ°¬κ°€μ§€λ‘œ 각도가 μ•„λ‹Œ λΌλ””μ•ˆμ—μ„œ μž‘λ™ν•©λ‹ˆλ‹€.

μš°λ¦¬κ°€ λͺ¨λ“  것에 λŒ€ν•΄ λͺ¨λ“  μ‚¬λžŒμ„ 지원해야 ν•˜λŠ” 경우 @1j01 에 λ™μ˜ν•˜μ—¬ λͺ…μ‹œμ μœΌλ‘œ μ„€λͺ…ν•©λ‹ˆλ‹€. μ•„λ§ˆλ„ .degrees λ˜λŠ” .radians ?

이 λ¬Έμ œλŠ” 졜근 ν™œλ™μ΄ μ—†μ—ˆκΈ° λ•Œλ¬Έμ— μžλ™μœΌλ‘œ 였래된 κ²ƒμœΌλ‘œ ν‘œμ‹œλ˜μ—ˆμŠ΅λ‹ˆλ‹€. 더 이상 ν™œλ™μ΄ μ—†μœΌλ©΄ νμ‡„λ©λ‹ˆλ‹€. κ·€ν•˜μ˜ 기여에 κ°μ‚¬λ“œλ¦½λ‹ˆλ‹€.

이 μŠ€λ ˆλ“œλŠ” λ‹«νžŒ ν›„ 졜근 ν™œλ™μ΄ μ—†μ—ˆκΈ° λ•Œλ¬Έμ— μžλ™μœΌλ‘œ μž κ²ΌμŠ΅λ‹ˆλ‹€. κ΄€λ ¨ 버그에 λŒ€ν•œ μƒˆ 문제λ₯Ό μ—¬μ‹­μ‹œμ˜€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰