2010-08-04 3 views
3

나는 HTML 캔버스를 사용하여 게임을 만들고 있습니다.캔버스를 사용하는 버기 동작?

http://db.tt/ei3LlR (WASD 및 왼쪽/오른쪽 화살표 키를 사용) 는 ZOOM하는 데 도움이 :

여기 내 진행합니다.

내 질문은 :

  • 왜 구글 크롬의 그림자 플리커는 탱크가 돌고 않을 때?
  • 포탑 회전시 터렛 이미지가 사파리에서 왜 깜박입니까?
  • Firefox에서 제대로 작동하는 이유는 무엇입니까?

탱크 이미지와 터렛 이미지는 일반 오래된 png입니다. 그림자는 이러한 이미지를 사용하여 동적으로 생성됩니다. 그림자는 이미지 객체가 아니라 캔버스 요소입니다.

이미지의 회전을 변경할 때 깜박임이 발생하는 것 같습니다. 내가 깜박 거리는 것을 말하면 나는 이미지가 축소되고 매우 빠르게 성장하는 것처럼 보입니다. 이미지가 회전을 멈 추면 깜박임이 다시 멈 춥니 다.

여기 무슨 일 이니? 이게 내 마지막 문제 야?

+0

Chrome 또는 Firefox에서 '깜박임'이 표시되지 않습니다. 내가 보는 유일한 것은 작은 포탑 애니메이션입니다. 그러나 좋은 일. .. 그것은 나를 위해 꽤 매끄럽게 보인다. –

+0

나는 터틀릿이 터지면서 회전하는 개틀링 총처럼 보이게하고, 앞뒤로 움직이는 각 탱크에는 하얀색 사각형이있다. 너가 말하는게 이거니? 거의 의도적으로 보입니다. – MooGoo

+0

@MooGoo : 의도 한 효과라고 생각합니다. 확대하면 더 자세하게 볼 수 있습니다. 나는 그것이 그 OP가 이야기하고 있었던 것인지 궁금해하고 있었다. –

답변

0

업데이트. 문제는 더 이상 존재하지 않습니다! 그들은 그것을 고쳐야합니다!

1

깜박임 문제는 캔버스를 이중 버퍼링하지 않는 것 같습니다. 탱크 나 포탑을 그리기 전에 땅이나 그림자가 탱크 앞에서 그려지고 화면이 새로 고침이 일어나기 때문에 가능한 일들이 깜박입니다. 문맥의 rotatetranslate 방법 작은 반올림 오류가 호이스트 이미지의 흔들림의 원인이 될 수 있다면 나는 또한 궁금하네요 Does HTML5/Canvas Support Double Buffering?

:

이 질문은 캔버스 2D와 더블 버퍼링에 대해 조금 있습니다. 다른 브라우저 구현은 이러한 조작에 대해 다른 정확도 레벨을 가질 수 있습니다. 이를 확인하기 위해 매개 변수를 가장 가까운 정수로 반올림 해보십시오.

추 신 : 게임은 지금까지 훌륭해 보입니다. 탱크 그래픽과 핸들링이 정말 좋습니다.

+0

도움 주셔서 감사합니다. 숫자를 반올림하려했지만 도움이되지 않았습니다. 문제는 당신이 묘사 한 것일 가능성이 큽니다. 이 processing.js 라이브러리는 매우 깔끔하게 보입니다. 나는 그것을 뒤집어서보고 할 것이라고 생각한다. 다시 한 번 감사드립니다! – Tiby312

+0

두 번째 생각. 이 processing.js 것은 과도한 것처럼 보입니다. 나는 당신이 가야하는 방법을 알려줄 것입니다. – Tiby312

+0

아! 나는 이중 버퍼링을했고 그것은 여전히 ​​내게 들떠있다. 그래서 그 원인이되는 반올림 오류 또는 그 것처럼 보이지 않습니다. Google 크롬의 단점 일 수 있습니다. :( – Tiby312

관련 문제