]> git.r.bdr.sh - rbdr/sumo/blob - lib/factories/pixi.js
git.r.bdr.sh / rbdr / sumo / blob
? search:


077c5b4c41187f36af8d0794d1de29df44f00d1b
[rbdr/sumo] / lib / factories / pixi.js
1 import { Graphics } from 'pixi.js';
2
3 /**
4 * Factory object that contains many methods to create prefab pixi
5 * objects
6 *
7 * @type object
8 * @name PixiFactory
9 */
10 export default {
11
12 /**
13 * Creates a sumo container
14 *
15 * @function createSumo
16 * @memberof PixiFactory
17 * @return {external:CreateJs.Container} the created container
18 */
19 createSumo(config) {
20
21 const radius = config.radius;
22 const sumoColor = config.color || 0x87c5ea;
23
24 // The body
25 const body = new Graphics();
26 body.beginFill(sumoColor)
27 .drawCircle(0, 0, radius)
28 .endFill();
29
30 // The mouth
31 const smile = new Graphics();
32 smile.name = 'smile';
33 smile.lineStyle(10, 0xff0080, 1)
34 .arc(
35 0, 0, // center
36 radius * 0.6,
37 Math.PI / 6,
38 5 * Math.PI / 6
39 );
40
41 const frown = new Graphics();
42 frown.name = 'frown';
43 frown.visible = false;
44 frown.lineStyle(10, 0xff0080, 1)
45 .arc(
46 0, radius,
47 radius * 0.6,
48 -Math.PI / 5,
49 -4 * Math.PI / 5,
50 true
51 );
52
53 const leftEye = new Graphics();
54 leftEye.beginFill(0xffffff)
55 .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 5)
56 .endFill();
57
58 const rightEye = new Graphics();
59 rightEye.beginFill(0xffffff)
60 .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 5);
61
62 const leftPupil = new Graphics();
63 leftPupil.beginFill(0x11)
64 .drawCircle(-radius / 3 - radius / 8, -radius / 4, radius / 10);
65
66 const rightPupil = new Graphics();
67 leftPupil.beginFill(0x11)
68 .drawCircle(radius / 3 + radius / 8, -radius / 4, radius / 10);
69
70 body.addChild(this.createBlush({ radius }));
71
72 body.addChild(this.createEffortMark({ radius }));
73 body.addChild(this.createShadow({ radius }));
74
75 // The group
76 body.addChild(smile);
77 body.addChild(frown);
78 body.addChild(leftEye);
79 body.addChild(rightEye);
80 body.addChild(leftPupil);
81 body.addChild(rightPupil);
82
83 return body;
84 },
85
86 /**
87 * Creates an empty graphic
88 *
89 * @function createEmptyGraphic
90 * @memberof PixiFactory
91 * @return {external:CreateJs.Container} the created container
92 */
93 createEmptyGraphic(config) {
94
95 return new Graphics();
96 },
97
98 /**
99 * Creates a harness graphic
100 *
101 * @function createHarness
102 * @memberof PixiFactory
103 * @return {external:CreateJs.Container} the created container
104 */
105 createHarness(config) {
106
107 const radius = config.radius;
108
109 const lineThickness = 10;
110
111 // The body
112 const body = new Graphics();
113 body.lineStyle(lineThickness, 0xe1e1e1, 1)
114 .drawCircle(0, 0, radius);
115
116 const center = new Graphics();
117 center.beginFill(0xf1f1f1)
118 .drawCircle(0, 0, radius - lineThickness / 2)
119 .endFill();
120
121 body.addChild(center);
122
123 return body;
124 },
125
126 /**
127 * Creates an arena graphic
128 *
129 * @function createArena
130 * @memberof PixiFactory
131 * @return {external:CreateJs.Container} the created container
132 */
133 createArena(config) {
134
135 const radius = config.radius;
136
137 const lineThickness = 20;
138
139 // The body
140 const arena = new Graphics();
141 arena.lineStyle(lineThickness, 0xdfd4b2, 1)
142 .drawCircle(0, 0, radius);
143
144 const leftLine = new Graphics();
145 leftLine.lineStyle(20, 0xbdb08b, 1)
146 .moveTo(-radius / 4, -radius / 8)
147 .lineTo(-radius / 4, radius / 8);
148
149 const rightLine = new Graphics();
150 rightLine.lineStyle(20, 0xbdb08b, 1)
151 .moveTo(radius / 4, -radius / 8)
152 .lineTo(radius / 4, radius / 8);
153
154 arena.addChild(leftLine);
155 arena.addChild(rightLine);
156
157 return arena;
158 },
159
160 /**
161 * Creates a blush for the face
162 *
163 * @function createBlush
164 * @memberof PixiFactory
165 * @return {external:CreateJs.Container} the created container
166 */
167 createBlush(config) {
168
169 const radius = config.radius;
170
171 const blush = new Graphics();
172
173 blush.name = 'blush';
174 blush.visible = false;
175
176 const leftEyebrow = new Graphics();
177 leftEyebrow.lineStyle(4, 0x11, 1)
178 .arc(
179 -radius / 3 - radius / 4, -radius / 2 - radius / 4,
180 radius / 3,
181 Math.PI / 8,
182 2 * Math.PI / 3
183 );
184
185 const leftBlush = new Graphics();
186 leftBlush.lineStyle(4, 0xe7bfe6, 1)
187 .moveTo(-radius / 3 - radius / 4, radius / 10)
188 .lineTo(-radius / 3, 0);
189
190 const rightEyebrow = new Graphics();
191 rightEyebrow.lineStyle(4, 0x11, 1)
192 .arc(
193 radius / 3 + radius / 4, -radius / 2 - radius / 4,
194 radius / 3,
195 Math.PI / 3,
196 7 * Math.PI / 8
197 );
198
199 const rightBlush = new Graphics();
200 rightBlush.lineStyle(4, 0xe7bfe6, 1)
201 .moveTo(radius / 3 + radius / 4, radius / 10)
202 .lineTo(radius / 3, 0);
203
204 blush.addChild(leftEyebrow);
205 blush.addChild(leftBlush);
206 blush.addChild(rightEyebrow);
207 blush.addChild(rightBlush);
208
209 return blush;
210 },
211
212 /**
213 * Creates an effort mark
214 *
215 * @function createEffortMark
216 * @memberof PixiFactory
217 * @return {external:CreateJs.Container} the created container
218 */
219 createEffortMark(config) {
220
221 const radius = config.radius;
222
223 const effortMark = new Graphics();
224
225 const centerX = -3 * radius / 4;
226 const centerY = -3 * radius / 4;
227
228 effortMark.name = 'effort';
229 effortMark.visible = false;
230
231 const color = 0xff00ff;
232 const lineWidth = 2;
233
234 const topRightArch = new Graphics();
235 topRightArch.lineStyle(lineWidth, color, 1)
236 .arc(
237 centerX + 2 * radius / 7, centerY - 2 * radius / 7,
238 radius / 5,
239 Math.PI / 2,
240 Math.PI
241 );
242
243 const topLeftArch = new Graphics();
244 topLeftArch.lineStyle(lineWidth, color, 1)
245 .arc(
246 centerX - 2 * radius / 7, centerY - radius / 4,
247 radius / 5,
248 0,
249 Math.PI / 2
250 );
251
252 const bottomRightArch = new Graphics();
253 bottomRightArch.lineStyle(lineWidth, color, 1)
254 .arc(
255 centerX + 2 * radius / 7, centerY + radius / 4,
256 radius / 5,
257 Math.PI,
258 3 * Math.PI / 2
259 );
260
261 const bottomLeftArch = new Graphics();
262 bottomLeftArch.lineStyle(lineWidth, color, 1)
263 .arc(
264 centerX - 2 * radius / 7, centerY + 2 * radius / 7,
265 radius / 5,
266 3 * Math.PI / 2,
267 0
268 );
269
270 effortMark.addChild(topRightArch);
271 effortMark.addChild(topLeftArch);
272 effortMark.addChild(bottomRightArch);
273 effortMark.addChild(bottomLeftArch);
274
275 return effortMark;
276 },
277
278 /**
279 * Creates a shadow for the eye
280 *
281 * @function createShadow
282 * @memberof PixiFactory
283 * @return {external:CreateJs.Container} the created container
284 */
285 createShadow(config) {
286
287 const radius = config.radius;
288
289 const shadow = new Graphics();
290
291 const centerX = radius / 2;
292 const centerY = -3 * radius / 4;
293
294 shadow.name = 'shadow';
295 shadow.visible = false;
296
297 const color = 0x9900ff;
298 const lineWidth = 2;
299
300 shadow.lineStyle(lineWidth, color, 1)
301 .moveTo(centerX - radius / 4, centerY - radius / 3)
302 .lineTo(centerX - radius / 4, centerY + radius / 5)
303 .moveTo(centerX - radius / 8, centerY - radius / 4)
304 .lineTo(centerX - radius / 8, centerY + radius / 5)
305 .moveTo(centerX, centerY - radius / 5)
306 .lineTo(centerX, centerY + radius / 5)
307 .moveTo(centerX + radius / 8, centerY - radius / 6)
308 .lineTo(centerX + radius / 8, centerY + radius / 6)
309 .moveTo(centerX + radius / 4, centerY - radius / 5)
310 .lineTo(centerX + radius / 4, centerY + radius / 5);
311
312 return shadow;
313 }
314 };
A game about wrestling #game