돌려돌려 돌림판 (2/3) - 베타 버전

 

 

 

 

 

4달 전에 시작해서 4시간 만에 끝난(...)

 

링크 : https://play.rgbplace.com/#/roulette

 

 

헤로쿠 쪽 작업이 어느정도 끝나고

 

미루어뒀던 돌림판 작업을 시작했고, 초기 버전이 완성되었다.

 

처음에 구글 차트로 작업을 예상했었는데,

 

 

보는 바와 같이 글자가 고정되어 돌아가지 않는다.. 구글 차트에서도 지원 안하는 옵션이라

 

부족하게 만들바엔 그냥 캔버스로 하는게 더 간단해보여서 찾아보니 관련 소스를 찾아볼 수 있었다.

 

https://www.c-sharpcorner.com/UploadFile/18ddf7/rotating-a-circle-using-canvas-in-html5/

Rotating a Circle Using Canvas in HTML5

 

VueJS 에 맞춰 코드를 다듬고 개선한 결과, 생각보다 빠르게 작업을 완료할 수 있었다.

 

스핀 속도, 당첨 결과 추가, 커스텀 설정 등을 나중에 추가할 예정.

 

캔버스 관련 함수를 처음 써봤는데, 예전에 C언어 코딩으로 게임을 처음으로 작업했을 때가 생각났다.

 

지금 스핀 방식은 화면을 덧그리는 방식으로 돌아가는 것 처럼 애니메이션 작업이 되는데, 게임개발 용어를 이때 처음 들었었다.. 지금은 잘 기억이 안나지만. 더블 프레임이었나 무슨 용어가 있었는데.. => 더블 버퍼링 이었다.. 그리고 이 방법은 더블 버퍼링이 아니고..

 

아무튼 자연스럽게 나오게 하기위해 setInterval 함수에서 requestAnimationFrame 함수를 사용해서 재귀적으로 호출하여 구현하였다.

 

추가적으로 해야될 작업이 사실 많지만 언제 진행할지 모르겠당.

 

---

간단한 alert 창 을 띄우려고 작업해봤는데

 

1. 회전 수 계산이 안됨 <- 원인은 잘 모르겠음..

 

2. 핀도 잘 안그려짐 <- 알고보니 캔버스 안에서 캔버스를 추가해서 사용하는 기법이 있었음.

 

 

이후 여러 돌림판을 분석해봤을 때

 

1. 구글 스피너

 

svg 태그를 이용한 방식이고 제일 간단한 방식이다.

 

단지 svg 태그를 그려줘야한다는 것과, textpath 설정 등 코딩으로만 해결하기에는 어려운 방법이다.

 

이미지를 돌리는것과 비슷한 방식으로 보인다.

 

 

2. https://blog.bramp.net/wheel/

Lunch Wheel

 

캔버스로 작업한 것 중 가장 완성도가 높아보인다. 근데 소스를 보니 원리를 잘 모르겠다..

분명 같은 canvas 에 회전 값을 주는데 나는 틀어지고 이건 왜 안틀어지는건지...

 

애초에 이걸 보고 만들었어야 했다 ㅠ

 

 

3. https://konvajs.org/docs/sandbox/Wheel_of_Fortune.html

Wheel of Fortune HTML5 Canvas Game

konvaJS 를 사용한 예제. canvas 를 좀 더 심화적으로 다루려면 아마도 이걸 사용해서 해보는 것도 좋을 듯 하다.

 

이렇게 예제 소스가 많았다니.. 처음에 검색할 땐 하나도 안나왔었던 것들인데

 

작업을 하고나니 보이는건 왜일까..

 

 

 

어쨋든 해당 프로젝트는 완료처리 수순을 밟고 나중에 예제 소스 보고 커스터마이징을 해보거나

 

아니면 바퀴형태의 모양이 아닌 carousel 형식으로도 작업을 진행해볼까 생각중이다.
(굳이 만들기도 어렵고 구식인 방식을 선택한게 아닌가 싶기도 하다.)

 

---

https://chrome.google.com/webstore/detail/%EB%8F%8C%EB%A0%A4%EB%8F%8C%EB%A0%A4-%EB%8F%8C%EB%A6%BC%ED%8C%90/cbhdjmlgamciejnfglfejgbgmjdddckh?hl=ko

돌려돌려 돌림판

소스가 이렇게나 많았구나..