Show Particles
Show a particle system animation

Description

1
'show particles <particles_id>'
Copied!
The particles action let's you show amazing animations using particle systems. A particle system is useful when you want to add dynamic elements such as snow, stars, rain etc. and can be an awesome addition for your game!
To hide the particle systems, read the Hide Particles documentation.
Action ID: Particles
Reversible: Yes
Requires User Interaction: No

Parameters

Name
Type
Description
particles_id
string
The name of the particles system you want to show. These must be declared beforehand using this action configuration functions.

Configuration

To use a particle system, you must first declare it with all of it's characteristics. To do so, the particles action has a configuration function where you can define your id for each particle system and their configuration on a JSON Object.
1
Monogatari.action ('Particles').particles ({
2
'<particles_id>': ParticlesJSONObject
3
});
Copied!
This action uses the Particles.js library, reading their documentation you can find more information about it and also more information on how to create a custom particle system.

Samples

Here are some examples that may be useful and also provide a good start point:
Snow
Night Sky
Fireflies
Fire Sparks
1
Monogatari.action('Particles').particles({
2
'snow': {
3
'particles': {
4
'number': {
5
'value': 400,
6
'density': {
7
'enable': true,
8
'value_area': 800
9
}
10
},
11
'color': {
12
'value': '#fff'
13
},
14
'shape': {
15
'type': 'circle',
16
'stroke': {
17
'width': 0,
18
'color': '#000000'
19
},
20
'polygon': {
21
'nb_sides': 5
22
},
23
'image': {
24
'src': 'img\/github.svg',
25
'width': 100,
26
'height': 100
27
}
28
},
29
'opacity': {
30
'value': 0.5,
31
'random': true,
32
'anim': {
33
'enable': false,
34
'speed': 1,
35
'opacity_min': 0.1,
36
'sync': false
37
}
38
},
39
'size': {
40
'value': 10,
41
'random': true,
42
'anim': {
43
'enable': false,
44
'speed': 40,
45
'size_min': 0.1,
46
'sync': false
47
}
48
},
49
'line_linked': {
50
'enable': false,
51
'distance': 500,
52
'color': '#ffffff',
53
'opacity': 0.4,
54
'width': 2
55
},
56
'move': {
57
'enable': true,
58
'speed': 6,
59
'direction': 'bottom',
60
'random': false,
61
'straight': false,
62
'out_mode': 'out',
63
'bounce': false,
64
'attract': {
65
'enable': false,
66
'rotateX': 600,
67
'rotateY': 1200
68
}
69
}
70
},
71
'interactivity': {
72
'detect_on': 'canvas',
73
'events': {
74
'onhover': {
75
'enable': true,
76
'mode': 'bubble'
77
},
78
'onclick': {
79
'enable': true,
80
'mode': 'repulse'
81
},
82
'resize': true
83
},
84
'modes': {
85
'grab': {
86
'distance': 400,
87
'line_linked': {
88
'opacity': 0.5
89
}
90
},
91
'bubble': {
92
'distance': 400,
93
'size': 4,
94
'duration': 0.3,
95
'opacity': 1,
96
'speed': 3
97
},
98
'repulse': {
99
'distance': 200,
100
'duration': 0.4
101
},
102
'push': {
103
'particles_nb': 4
104
},
105
'remove': {
106
'particles_nb': 2
107
}
108
}
109
},
110
'retina_detect': true
111
}
112
});
Copied!
1
Monogatari.action('Particles').particles({
2
'stars': {
3
'particles': {
4
'number': {
5
'value': 355,
6
'density': {
7
'enable': true,
8
'value_area': 789.1476416322727
9
}
10
},
11
'color': {
12
'value': '#ffffff'
13
},
14
'shape': {
15
'type': 'circle',
16
'stroke': {
17
'width': 0,
18
'color': '#000000'
19
},
20
'polygon': {
21
'nb_sides': 5
22
},
23
'image': {
24
'src': '',
25
'width': 100,
26
'height': 100
27
}
28
},
29
'opacity': {
30
'value': 0.48927153781200905,
31
'random': false,
32
'anim': {
33
'enable': true,
34
'speed': 0.2,
35
'opacity_min': 0,
36
'sync': false
37
}
38
},
39
'size': {
40
'value': 2,
41
'random': true,
42
'anim': {
43
'enable': true,
44
'speed': 2,
45
'size_min': 0,
46
'sync': false
47
}
48
},
49
'line_linked': {
50
'enable': false,
51
'distance': 150,
52
'color': '#ffffff',
53
'opacity': 0.4,
54
'width': 1
55
},
56
'move': {
57
'enable': true,
58
'speed': 0.2,
59
'direction': 'none',
60
'random': true,
61
'straight': false,
62
'out_mode': 'out',
63
'bounce': false,
64
'attract': {
65
'enable': false,
66
'rotateX': 600,
67
'rotateY': 1200
68
}
69
}
70
},
71
'interactivity': {
72
'detect_on': 'canvas',
73
'events': {
74
'onhover': {
75
'enable': true,
76
'mode': 'bubble'
77
},
78
'onclick': {
79
'enable': true,
80
'mode': 'push'
81
},
82
'resize': true
83
},
84
'modes': {
85
'grab': {
86
'distance': 400,
87
'line_linked': {
88
'opacity': 1
89
}
90
},
91
'bubble': {
92
'distance': 83.91608391608392,
93
'size': 1,
94
'duration': 3,
95
'opacity': 1,
96
'speed': 3
97
},
98
'repulse': {
99
'distance': 200,
100
'duration': 0.4
101
},
102
'push': {
103
'particles_nb': 4
104
},
105
'remove': {
106
'particles_nb': 2
107
}
108
}
109
},
110
'retina_detect': true
111
}
112
});
Copied!
1
Monogatari.action('Particles').particles({
2
'fireflies': {
3
'particles': {
4
'number': {
5
'value': 202,
6
'density': {
7
'enable': true,
8
'value_area': 800
9
}
10
},
11
'color': {
12
'value': '#0bd318'
13
},
14
'shape': {
15
'type': 'circle',
16
'stroke': {
17
'width': 0,
18
'color': '#000000'
19
},
20
'polygon': {
21
'nb_sides': 5
22
},
23
'image': {
24
'src': 'img/github.svg',
25
'width': 100,
26
'height': 100
27
}
28
},
29
'opacity': {
30
'value': 0.9299789953020032,
31
'random': true,
32
'anim': {
33
'enable': true,
34
'speed': 1,
35
'opacity_min': 0,
36
'sync': false
37
}
38
},
39
'size': {
40
'value': 3,
41
'random': true,
42
'anim': {
43
'enable': false,
44
'speed': 4,
45
'size_min': 0.3,
46
'sync': false
47
}
48
},
49
'line_linked': {
50
'enable': false,
51
'distance': 150,
52
'color': '#ffffff',
53
'opacity': 0.4,
54
'width': 1
55
},
56
'move': {
57
'enable': true,
58
'speed': 3.017060304327615,
59
'direction': 'none',
60
'random': true,
61
'straight': false,
62
'out_mode': 'out',
63
'bounce': false,
64
'attract': {
65
'enable': false,
66
'rotateX': 1042.21783956259,
67
'rotateY': 600
68
}
69
}
70
},
71
'interactivity': {
72
'detect_on': 'canvas',
73
'events': {
74
'onhover': {
75
'enable': true,
76
'mode': 'bubble'
77
},
78
'onclick': {
79
'enable': true,
80
'mode': 'repulse'
81
},
82
'resize': true
83
},
84
'modes': {
85
'grab': {
86
'distance': 400,
87
'line_linked': {
88
'opacity': 1
89
}
90
},
91
'bubble': {
92
'distance': 250,
93
'size': 0,
94
'duration': 2,
95
'opacity': 0,
96
'speed': 3
97
},
98
'repulse': {
99
'distance': 400,
100
'duration': 0.4
101
},
102
'push': {
103
'particles_nb': 4
104
},
105
'remove': {
106
'particles_nb': 2
107
}
108
}
109
},
110
'retina_detect': true
111
}
112
});
Copied!
1
Monogatari.action('Particles').particles({
2
'fireSparks': {
3
'particles': {
4
'number': {
5
'value': 400,
6
'density': {
7
'enable': true,
8
'value_area': 3000
9
}
10
},
11
'color': {
12
'value': '#fc0000'
13
},
14
'shape': {
15
'type': 'circle',
16
'stroke': {
17
'width': 0,
18
'color': '#000000'
19
},
20
'polygon': {
21
'nb_sides': 3
22
},
23
'image': {
24
'src': 'img/github.svg',
25
'width': 100,
26
'height': 100
27
}
28
},
29
'opacity': {
30
'value': 0.5,
31
'random': true,
32
'anim': {
33
'enable': false,
34
'speed': 1,
35
'opacity_min': 0.1,
36
'sync': false
37
}
38
},
39
'size': {
40
'value': 2,
41
'random': true,
42
'anim': {
43
'enable': true,
44
'speed': 5,
45
'size_min': 0,
46
'sync': false
47
}
48
},
49
'line_linked': {
50
'enable': false,
51
'distance': 500,
52
'color': '#ffffff',
53
'opacity': 0.4,
54
'width': 2
55
},
56
'move': {
57
'enable': true,
58
'speed': 7.8914764163227265,
59
'direction': 'top',
60
'random': true,
61
'straight': false,
62
'out_mode': 'out',
63
'bounce': false,
64
'attract': {
65
'enable': false,
66
'rotateX': 600,
67
'rotateY': 1200
68
}
69
}
70
},
71
'interactivity': {
72
'detect_on': 'canvas',
73
'events': {
74
'onhover': {
75
'enable': false,
76
'mode': 'bubble'
77
},
78
'onclick': {
79
'enable': false,
80
'mode': 'repulse'
81
},
82
'resize': true
83
},
84
'modes': {
85
'grab': {
86
'distance': 400,
87
'line_linked': {
88
'opacity': 0.5
89
}
90
},
91
'bubble': {
92
'distance': 400,
93
'size': 4,
94
'duration': 0.3,
95
'opacity': 1,
96
'speed': 3
97
},
98
'repulse': {
99
'distance': 200,
100
'duration': 0.4
101
},
102
'push': {
103
'particles_nb': 4
104
},
105
'remove': {
106
'particles_nb': 2
107
}
108
}
109
},
110
'retina_detect': true
111
}
112
});
Copied!
You can also play with the Particles.js interactive tool to create your own particle systems.

Examples

For this examples, we'll assume you've used one of the sample configurations provided. Showing a particle system is as simple as:
1
Monogatari.script ({
2
'Start': [
3
'show particles snow',
4
'end'
5
]
6
});
Copied!