[Canvas-불꽃놀이-12] text 픽셀 데이터 생성

[Canvas-불꽃놀이-12] text 픽셀 데이터 생성

이전 글 : [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성 [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성이전 글 : [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현 [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현이전 글 : [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링 [Canvas-불꽃놀이-09]jinsk-joy.tistory.com 사용자가 입력한 문자열의 TextData 생성하기1.  문자열의 textData 생성하기앞에서 만들었던 TextData 클래스를 활용하여 파티클을 화면에 그릴 때 필요한 픽셀 데이터를 가져오도록 하겠다. 1-1. textData 가져오기fontSize를 인자를 받아 텍스트를 화면에 그리고 픽셀 데이터를 반환하는 메서드를 생..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 25.
  • textsms
[Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성

[Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성

이전 글 : [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현 [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현이전 글 : [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링 [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링이전 글 : [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기 [Canvas-불꽃놀이-08] 애니메이션 기본 틀jinsk-joy.tistory.com 불꽃놀이의 꼬리 최종 완성 이전글에서 꼬리의 위치와 속도를 정의했다. 이번 글에선 TailParticle을 생성하고 세부 값들을 조절하여 화면에 어떻게 구현되는지 확인해 보도록 한다.  1. TailParticle 구현TailParticle 클래스는 불꽃놀이의 꼬리를 나타내며, 캔버스 하단에서부터..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 24.
  • textsms
[Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현

[Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현

이전 글 : [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링 [Canvas-불꽃놀이-09] 파티클 관리와 객체 폴링이전 글 : [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기 [Canvas-불꽃놀이-08] 애니메이션 기본 틀잡기이전 글 : 2024.11.18 - [개발/Canvas] - [Canvas-불꽃놀이-07] 불꽃놀이 Particle들의 부모 클래스 [Canvas-불jinsk-joy.tistory.com 불꽃놀이 꼬리 구현하기 (x 좌표값들과 속도)이제 기본적인 토대는 다 완성이 되었으므로 세부적인 구현에 들어가고자 한다.먼저 불꽃의 꼬리 구현부터 시작하겠다.꼬리의 개수는 5개이며 중앙에 1개, 왼쪽 2개, 오른쪽 2개에서 미리 정의된 x좌표 배열과 y 속도 배열을 기반으로 생성된다...

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 22.
  • textsms
[Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기

[Canvas-불꽃놀이-04] Canvas 설정 - 물리적 크기와 CSS 크기

이전 글 : [Canvas-불꽃놀이-03] Canvas 설정하기 [Canvas-불꽃놀이-03] Canvas 설정하기이전글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-02] UI 구성 [Canvas-불꽃놀이-02] UI 구성이전 글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-01] 프로젝트 초기화 [Canvas-불꽃놀이-01] 프로젝트 초기화jinsk-joy.tistory.com 물리적 크기와 CSS 크기 설정을 통한 캔버스 해상도 조절참고 : Optimizing Canvas1. 해상도13인치의 화면이 있는데 같은 크기의 화면이라도 고해상도 화면은 저해상도 화면보다 픽셀수가 많다예를 들어 1920*1080 해상도의 13인치 화면보다 3840*..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 17.
  • textsms
[Canvas-불꽃놀이-03] Canvas 설정하기

[Canvas-불꽃놀이-03] Canvas 설정하기

이전글 : [Canvas-불꽃놀이-02] UI 구성 [Canvas-불꽃놀이-02] UI 구성이전 글 : 2024.11.15 - [개발/Canvas] - [Canvas-불꽃놀이-01] 프로젝트 초기화 [Canvas-불꽃놀이-01] 프로젝트 초기화글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되jinsk-joy.tistory.com 캔버스 기본 세팅1. 캔버스 설정하기대략적인 UI 구성이 완료되어 canvas를 설정하고자 한다.Canvas Class : 캔버스에 그림을 그리는 로직, 애니메이션, 파티클 생성을 담당해 화면에 실제로 그리는 핵심 로직을 담당CanvasOption Class : 캔버스의 ctx, 크기, 색상, 폰트, 해상도 등 기본 옵션을 정의하고 관리이렇게 옵션 ..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 16.
  • textsms
[Canvas-불꽃놀이-02] UI 구성

[Canvas-불꽃놀이-02] UI 구성

이전 글 : [Canvas-불꽃놀이-01] 프로젝트 초기화 [Canvas-불꽃놀이-01] 프로젝트 초기화글자를 입력하면 불꽃놀이처럼 빵빵 터지는 효과를 만들어보고 싶어져서 시작하게 되었다.빌드 도구로는 빠르고 비교적 설정하기가 간편한 Vite을 선택하였다.  1. github repository 생성https://githubjinsk-joy.tistory.com 화면 html, css 구성1. 화면 UI 구성하기글자를 입력한 후 불꽃놀이처럼 터지게 하는 효과를 만들기 위해 크게 두 가지의 화면으로 구성하였다구성 : 홈 (입력화면) / 캔버스 (불꽃놀이 효과)배경 : 우주느낌을 주고 싶어서 배경색을 검은색으로 설정하였다.안내 문구 : 안내문구에 애니메이션을 적용해 사용자들이 쉽게 인식할 수 있도록 유도하였..

  • format_list_bulleted Canvas/불꽃놀이 프로젝트
  • · 2024. 11. 16.
  • textsms