[Canvas-불꽃놀이-16] SparkParticle로 잔상효과 적용하기

이전 글 : [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트 [Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트이전 글 : [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성 [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 :jinsk-joy.tistory.com 불꽃놀이에 잔상 효과를 적용해 생동감 더해주기 앞서 완성한 불꽃놀이를 보면 움직임은 있으나 잔상이 없어서 정적인 느낌이 강하고 단조로워 보였다.이에 각 파티클에 붙는 잔상 효과를 추가하여 움직임이 좀 더 자연스럽고 생동감 있는 불꽃놀이를 만들어보기..

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

[Canvas-불꽃놀이-15] CircleParticle 구현과 업데이트

이전 글 : [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성 [Canvas-불꽃놀이-14] 원형 불꽃 효과 생성이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 : [Canvas-불꽃놀이-12] text 픽셀 데이터 생성 [Canvas-불꽃놀이-12] text 픽셀 데이터 생성이전 글jinsk-joy.tistory.com CircleParticle 클래스를 완성하여 화면에 렌더 해보기이전 글에 원형 불꽃 효과를 생성하였다. 이번에는 이 효과를 적용할 CircleParticle 클래스를 완성하여 실제로 화면에 렌더 해보겠다. 1. CircleParticle 클래스 구현이전의 원형 불꽃 효과의 내용을 바..

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

[Canvas-불꽃놀이-14] 원형 불꽃 효과 생성

이전 글 : [Canvas-불꽃놀이-13] TextParticle 구현과 적용 [Canvas-불꽃놀이-13] TextParticle 구현과 적용이전 글 : [Canvas-불꽃놀이-12] text 픽셀 데이터 생성 [Canvas-불꽃놀이-12] text 픽셀 데이터 생성이전 글 : [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성 [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성이전 글 : [Cajinsk-joy.tistory.com  원형 불꽃 효과 구현텍스트 파티클 만으로는 시각적으로 밋밋하고 불꽃놀이의 느낌을 전달하기엔 현재의 상태가 부족하다고 느꼈다.그래서 원형 모양의 효과를 추가해 좀 더 화려하고 생생한 느낌의 불꽃놀이를 만들어 보기로 했다.처음에 도넛 모양을 유지하면서 퍼지는 형태를 구현하거나,..

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

[Canvas-불꽃놀이-13] TextParticle 구현과 적용

이전 글 : [Canvas-불꽃놀이-12] text 픽셀 데이터 생성 [Canvas-불꽃놀이-12] text 픽셀 데이터 생성이전 글 : [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성 [Canvas-불꽃놀이-11] 불꽃놀이 꼬리 완성이전 글 : [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위치와 속도 구현 [Canvas-불꽃놀이-10] 불꽃놀이 꼬리의 위jinsk-joy.tistory.com TextParticle 클래스 구현과 화면에 렌더 하기1.  TextParticle 클래스 세부 구현기존에 틀만 만들어 놓은 TextParticle의 세부적인 내용을 정의한다. 1-1. 생성자와 멤버변수TextParticle을 생성할 때 파티클을 생성할 위치 (x, y), 파티클의 속도 (vx, vy), 파티클..

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

[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-불꽃놀이-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