Home: Class - Particle

Class: Particle

파티클 이펙트에 사용할 파티클이다. 파티클 효과의 종류는 점점 투명해지면서 사라지는 것, 크기가 작아지면서 사라지는 것 등이 있다.

Usage

                    
                        new Particle(options)

Extends:: Sprite
Source:: ./src/engine/fx/particle-effect.js, line 14

Parameters:

Name Type Description


                        options

object

Properties

Name	Type	Description
`lifeTimeopt`	number
`initialLifeTimeopt`	number
`isScaleFadeopt`	boolean
`isAlphaFadeopt`	boolean
`directionopt`	number
`diffusenessopt`	number
`speedopt`	number
`coloropt`	Color
`isColorOverlayEnableopt`	boolean
`overlayColoropt`	Color
`isPhysicsEnableopt`	boolean
`transformopt`	Transform
`rigidbodyopt`	RigidBody

Members

lifeTime: number

Type:: {number}
Extends:: Sprite#lifeTime
Source:: ./src/engine/fx/particle-effect.js, line 35
Default Value:: options.lifeTime

initialLifeTime: number

Type:: {number}
Extends:: Sprite#initialLifeTime
Source:: ./src/engine/fx/particle-effect.js, line 37
Default Value:: options.lifeTime

isScaleFade: boolean

Type:: {boolean}
Extends:: Sprite#isScaleFade
Source:: ./src/engine/fx/particle-effect.js, line 39
Default Value:: options.isScaleFade

isAlphaFade: boolean

Type:: {boolean}
Extends:: Sprite#isAlphaFade
Source:: ./src/engine/fx/particle-effect.js, line 41
Default Value:: options.isAlphaFade

direction: number

Type:: {number}
Extends:: Sprite#direction
Source:: ./src/engine/fx/particle-effect.js, line 44

speed: number

Type:: {number}
Extends:: Sprite#speed
Source:: ./src/engine/fx/particle-effect.js, line 50
Default Value:: options.speed

forward: Vector

Type:: {Vector}
Extends:: Sprite#forward
Source:: ./src/engine/fx/particle-effect.js, line 54

image: HTMLImageElement

화면에 보여질 이미지를 의미한다.

Type:: {HTMLImageElement}
Overrides:: Sprite#image
Source:: ./src/engine/core/sprite.js, line 55

isColorOverlayEnable: boolean

색상 오버레이를 씌울 것인지를 의미한다. 기본값은 false다.

Type:: {boolean}
Overrides:: Sprite#isColorOverlayEnable
Source:: ./src/engine/core/sprite.js, line 69

overlayColor: Color

색상 오버레이를 씌울 때 어떤 색을 씌울 것인지를 의미한다. 만약 이 색의 Alpha가 1이면 이미지 전체에 불투명한 색을 덧입히기 때문에 완전히 다른 색으로 덮히게 되어 이미지가 보이지 않는다.

Type:: {Color}
Overrides:: Sprite#overlayColor
Source:: ./src/engine/core/sprite.js, line 81

context2d: CanvasRenderingContext2d

canvas에 이 객체를 렌더링할 때 사용할 context다.

Type:: {CanvasRenderingContext2d}
Overrides:: Sprite#context2d
Source:: ./src/engine/core/game-object.js, line 57

name: string

생성된 객체의 이름을 말한다. 기본값으로는 생성자의 이름을 저장한다.

Type:: {string}
Overrides:: Sprite#name
Source:: ./src/engine/core/game-object.js, line 64

isVisible: boolean

화면에 이 객체를 그릴 것인지를 의미한다. 기본값은 true다.

Type:: {boolean}
Overrides:: Sprite#isVisible
Source:: ./src/engine/core/game-object.js, line 71

isActive: boolean

이 객체가 활성상태인지 의미한다. 만약 이 값이 false라면 update와 render가 실행되지 않는다. 이 값이 false라면 물리엔진에서도 수집하지 않는다. 기본값은 true다.

Type:: {boolean}
Overrides:: Sprite#isActive
Source:: ./src/engine/core/game-object.js, line 80

layer: Layer

객체의 레이어다.

Type:: {Layer}
Overrides:: Sprite#layer
Source:: ./src/engine/core/game-object.js, line 86

rigidbody: RigidBody

물리효과를 위한 강체다.

Type:: {RigidBody}
Overrides:: Sprite#rigidbody
Source:: ./src/engine/core/game-object.js, line 92

transform: Transform

이 객체의 좌표, 크기, 각도 등을 의미한다.

Type:: {Transform}
Overrides:: Sprite#transform
Source:: ./src/engine/core/game-object.js, line 102

isPhysicsEnable: boolean

이 객체에 물리효과를 적용할건지를 의미한다. 기본적으론 적용하지 않는다.

Type:: {boolean}
Overrides:: Sprite#isPhysicsEnable
Source:: ./src/engine/core/game-object.js, line 110

collider: BoxCollider

이 객체의 Collision 타입을 나타낸다. 기본값으로는 상자 형태(BoxCollider)를 사용한다.

Type:: {BoxCollider}
Overrides:: Sprite#collider
Source:: ./src/engine/core/game-object.js, line 118

color: Color

렌더링에 사용될 색상값이다.

Type:: {Color}
Overrides:: Sprite#color
Source:: ./src/engine/core/game-object.js, line 124

matrix: Matrix

이 객체의 transform을 행렬로 나타낸 결과다. canvas에서 좌표, 회전, 규모를 이용해 물체를 그리려면 행렬을 이용해야한다. 그래서 이 객체의 transform을 canvas에서 활용할 수 있게 matrix로 변환하여 저장한다.

Type:: {Matrix}
Overrides:: Sprite#matrix
Source:: ./src/engine/core/game-object.js, line 142

previousMatrix: Matrix

이전 프레임의 matrix와 현재 프레임의 matrix를 선형보간하기 위해 이전 프레임의 matrix를 저장해야한다.

Type:: {Matrix}
Overrides:: Sprite#previousMatrix
Source:: ./src/engine/core/game-object.js, line 149

childList: array

이 객체의 자식들을 저장할 테이블이다.

Type:: {array}
Overrides:: Sprite#childList
Source:: ./src/engine/core/game-object.js, line 155

parent: GameObject

이 객체의 부모 객체다. 부모의 matrix를 이용해 자신의 matrix를 만들고, 이 객체를 삭제할 때 부모에 의해 삭제되기 때문에 이 객체의 부모를 기억해야 한다.

Type:: {GameObject}
Overrides:: Sprite#parent
Source:: ./src/engine/core/game-object.js, line 164
Default Value:: undefined

Methods

update(deltaTime)

파티클 효과를 업데이트한다. 지속 시간이 지났다면 제거한다.

Extends:: Sprite#update
Overrides:: Sprite#update
Source:: ./src/engine/fx/particle-effect.js, line 69

Parameters:

Name	Type	Description
`deltaTime`	number	이전 프레임와 현재 프레임의 시간차

fadeAway()

각 파티클 효과가 켜져있다면 그 파티클 효과를 적용한다.

Extends:: Sprite#fadeAway
Source:: ./src/engine/fx/particle-effect.js, line 85

spreadOut(deltaTime)

만약 물리효과가 적용되지 않는다면 직접 position을 변경해야한다.

Extends:: Sprite#spreadOut
Source:: ./src/engine/fx/particle-effect.js, line 104

Parameters:

Name	Type	Description
`deltaTime`	number	이전 프레임와 현재 프레임의 시간차

draw()

도형이나 텍스트는 렌더링을 할 때 색상을 설정하여 입힐 수 있지만, 이미지는 그렇지 않다. getImageData로 캔버스의 특정 영역의 색상값을 읽어올 수 있지만, 다른 이미지와 겹쳐졌을 때에는 원하는 결과를 얻을 수 없다. 따라서 아래의 과정을 거쳐 오버레이를 씌울 수 있다.

빈 버퍼 캔버스에 미리 이미지를 그린다.
그 후 버퍼 캔버스에 컬러 오버레이를 씌운다.
완성된 버퍼 캔버스를 주 캔버스에 렌더링한다.

TODO 색깔을 입힐 수는 있지만 rgb(255, 0, 0) 처럼 빨간색만 씌운다고 할 때 이미지 전체가 빨갛게 변해버린다. 알파값을 조절해서 빨간색 오버레이를 씌운 것처럼 보이게 할 수 있지만 물빠진 색감이 되어버린다.

Overrides:: Sprite#draw
Source:: ./src/engine/core/sprite.js, line 107

updateSize()

이 객체의 물리적인 크기를 이미지의 크기로 설정한다.

Overrides:: Sprite#updateSize
Source:: ./src/engine/core/sprite.js, line 145

enableColorOverlay()

색상 오버레이를 켠다.

Overrides:: Sprite#enableColorOverlay
Source:: ./src/engine/core/sprite.js, line 156

disableColorOverlay()

색상 오버레이를 끈다.

Overrides:: Sprite#disableColorOverlay
Source:: ./src/engine/core/sprite.js, line 163

setOverlayColor(color)

색상 오버레이의 색을 설정한다.

Overrides:: Sprite#setOverlayColor
Source:: ./src/engine/core/sprite.js, line 172

Parameters:

Name	Type	Description
`color`	Color	오버레이로 사용할 색상값

integrateForce(deltaTime)

가속도를 적분하여 속도에 누적한다.

Overrides:: Sprite#integrateForce
Source:: ./src/engine/core/game-object.js, line 186

Parameters:

Name	Type	Description
`deltaTime`	number	이전 프레임과 현재 프레임의 시간차

integrateVelocity(deltaTime)

속도를 적분하여 좌표값에 누적한다.

Overrides:: Sprite#integrateVelocity
Source:: ./src/engine/core/game-object.js, line 207

Parameters:

Name	Type	Description
`deltaTime`	number	이전 프레임과 현재 프레임의 시간차

calculateMatrix()

transform을 matrix로 변환한다. 이 때 부모 객체가 있다면 행렬곱을 수행해 두 matrix를 결합한다. 이 객체의 transform만 변환을 수행하지 않고 이 객체의 자식들에게도 calculateMatrix를 호출한다.

Overrides:: Sprite#calculateMatrix
Source:: ./src/engine/core/game-object.js, line 228

render()

먼저 선형보간한 matrix를 사용해 context에 등록한다. 그 다음 draw()를 통해 물체를 렌더링한다. 이 객체를 상속받은 Rect나 Circle처럼 자식객체에 따라 각각 다른 렌더링이 수행된다. 그 후 이 객체의 모든 자식들을 렌더링한다.

Overrides:: Sprite#render
Source:: ./src/engine/core/game-object.js, line 249

hasParentGameObject() → {boolean}

이 객체의 부모가 존재한다면 true를 반환한다.

Overrides:: Sprite#hasParentGameObject
Source:: ./src/engine/core/game-object.js, line 270

Returns:

Type:

{boolean}

multiplyParentMatrix()

자신의 transform을 matrix로 변환한 것과 부모의 matrix를 행렬곱한다.

Overrides:: Sprite#multiplyParentMatrix
Source:: ./src/engine/core/game-object.js, line 277

setTransform()

계산된 matrix를 context2d에 적용한다.

Overrides:: Sprite#setTransform
Source:: ./src/engine/core/game-object.js, line 285

beforeDraw()

렌더링 전에 색상값을 갱신한다거나 다른 작업이 미리 처리되어야 하는 경우 이 함수를 오버라이드해서 사용하면 된다.

이 객체에서는 기본적으로 색상값을 적용시키기 위해 globalAlpha값을 조절한다. context2d.save()를 통해 현재 설정값을 저장해두었으므로, 마음대로 변경 후 context2d.restore()로 되돌리게 된다. 따라서 현재 설정값이 자식들의 렌더링에 사용된다.