]>
Commit | Line | Data |
---|---|---|
1 | import 'babel-polyfill'; | |
2 | ||
3 | // Systems | |
4 | import ApplyForceSystem from './systems/apply_force'; | |
5 | import CreateCouplingLineSystem from './systems/create_coupling_line'; | |
6 | import ControlMapperSystem from './systems/control_mapper'; | |
7 | import DashSystem from './systems/dash'; | |
8 | import ElasticSystem from './systems/elastic'; | |
9 | import PhysicsWorldControlSystem from './systems/physics_world_control'; | |
10 | import PhysicsToAttributesSystem from './systems/physics_to_attributes'; | |
11 | import RenderSystem from './systems/render'; | |
12 | import AttributesToRenderableSystem from './systems/attributes_to_renderable'; | |
13 | ||
14 | // Factories | |
15 | ||
16 | import SumoFactory from './factories/sumo'; | |
17 | ||
18 | // External Dependencies | |
19 | ||
20 | import Serpentity from '@serpentity/serpentity'; | |
21 | import { Application } from 'pixi.js'; | |
22 | import { Engine } from 'matter-js'; | |
23 | ||
24 | /* global window document */ | |
25 | ||
26 | const internals = { | |
27 | kBackgroundColor: 0xd8c590, | |
28 | kNoElementError: 'No element found. Cannot render.', | |
29 | ||
30 | // Handler for the window load event. Initializes and runs the app. | |
31 | ||
32 | onLoad() { | |
33 | ||
34 | const sumo = new internals.Sumo({ | |
35 | element: document.getElementById('sumo-app-entry-point') | |
36 | }); | |
37 | ||
38 | sumo.startLoop(); | |
39 | ||
40 | internals.exports.sumo = sumo; | |
41 | } | |
42 | }; | |
43 | ||
44 | /** | |
45 | * Sumo - main entry point. Attached to window->load | |
46 | * | |
47 | * @class Sumo | |
48 | * | |
49 | * @param {object} config the configuration to extend the object | |
50 | * | |
51 | * @property {HTMLElement} [element=null] the element in which to render. | |
52 | * Required, will throw if not provided | |
53 | * @property {Number} [fps=60] the fps target to maintain | |
54 | * @property {Number} [verticalResolution=224] how many pixels to render in the vertical | |
55 | * axis (gets scaled if the canvas is larger) | |
56 | * @property {Array<Number>} [aspectRatio=[2.76, 1]] the aspect ratio experssed as | |
57 | * an array of two numbers, where aspect ratio x:y is [x, y] (eg. [16, 9]) | |
58 | */ | |
59 | ||
60 | internals.Sumo = class Sumo { | |
61 | ||
62 | constructor(config) { | |
63 | ||
64 | this.fps = 60; | |
65 | this.aspectRatio = [2.76, 1]; | |
66 | this.verticalResolution = 224; | |
67 | ||
68 | Object.assign(this, config); | |
69 | ||
70 | if (!this.element) { | |
71 | throw new Error(internals.kNoElementError); | |
72 | } | |
73 | ||
74 | this._engine = new Serpentity(); | |
75 | ||
76 | this._previousTime = 0; | |
77 | this._looping = false; | |
78 | ||
79 | // Initialization functions | |
80 | this._initializeCanvas(); | |
81 | this._initializeMatter(); | |
82 | this._initializePixi(); | |
83 | this._initializeSystems(); | |
84 | this._initializeEntities(); | |
85 | } | |
86 | ||
87 | /** | |
88 | * Starts the main loop. Resets the FPS (if you change it it won't go | |
89 | * live until after you stop and start the loop) | |
90 | * | |
91 | * @function startLoop | |
92 | * @instance | |
93 | * @memberof Sumo | |
94 | */ | |
95 | startLoop() { | |
96 | ||
97 | this._looping = true; | |
98 | this._frameDuration = 1000 / this.fps; | |
99 | window.requestAnimationFrame(this._loop.bind(this)); | |
100 | } | |
101 | ||
102 | /** | |
103 | * Pauses the loop | |
104 | * | |
105 | * @function pauseLoop | |
106 | * @instance | |
107 | * @memberof Sumo | |
108 | */ | |
109 | pauseLoop() { | |
110 | ||
111 | this._looping = false; | |
112 | } | |
113 | ||
114 | // The main loop used above. Runs the serpentity update process and | |
115 | // attempts to maintain FPS. The rest is handled by the engine. | |
116 | ||
117 | _loop(currentTime) { | |
118 | ||
119 | if (!this._looping) { | |
120 | return; | |
121 | } | |
122 | ||
123 | window.requestAnimationFrame(this._loop.bind(this)); | |
124 | ||
125 | const currentFrameDuration = currentTime - this._previousTime; | |
126 | ||
127 | if (currentFrameDuration > this._frameDuration) { | |
128 | ||
129 | // We're sending the currentTime since it gives better results for | |
130 | // this type of renderer, though usually we expect the delta | |
131 | this._engine.update(currentFrameDuration); | |
132 | this._previousTime = currentTime; | |
133 | } | |
134 | } | |
135 | ||
136 | // Creates a canvas for rendering | |
137 | ||
138 | _initializeCanvas() { | |
139 | ||
140 | this._canvas = document.createElement('canvas'); | |
141 | this.element.appendChild(this._canvas); | |
142 | this._resizeCanvas(); | |
143 | window.addEventListener('resize', this._resizeCanvas.bind(this)); | |
144 | } | |
145 | ||
146 | // Initialize MatterJs | |
147 | ||
148 | _initializeMatter() { | |
149 | ||
150 | this._matterJs = Engine.create(); | |
151 | ||
152 | this._matterJs.world.gravity.y = 0; | |
153 | } | |
154 | ||
155 | // Initialize Pixi | |
156 | ||
157 | _initializePixi() { | |
158 | ||
159 | this._pixi = new Application({ | |
160 | backgroundColor: internals.kBackgroundColor, | |
161 | view: this._canvas, | |
162 | width: this._canvas.width, | |
163 | height: this._canvas.height | |
164 | }); | |
165 | } | |
166 | ||
167 | // Resizes the canvas to a square the size of the smallest magnitude | |
168 | // of the window. | |
169 | ||
170 | _resizeCanvas() { | |
171 | ||
172 | let width = window.innerWidth; | |
173 | let height = Math.round(width * this.aspectRatio[1] / this.aspectRatio[0]); | |
174 | ||
175 | if (window.innerHeight < height) { | |
176 | height = window.innerHeight; | |
177 | width = Math.round(height * this.aspectRatio[0] / this.aspectRatio[1]); | |
178 | } | |
179 | ||
180 | this._canvas.style.width = `${width}px`; | |
181 | this._canvas.style.height = `${height}px`; | |
182 | ||
183 | this._canvas.width = Math.round(this.verticalResolution * this.aspectRatio[0] / this.aspectRatio[1]); | |
184 | this._canvas.height = this.verticalResolution; | |
185 | } | |
186 | ||
187 | // Initializes the serpentity systems | |
188 | ||
189 | _initializeSystems() { | |
190 | ||
191 | this._engine.addSystem(new ControlMapperSystem()); | |
192 | ||
193 | this._engine.addSystem(new DashSystem()); | |
194 | ||
195 | this._engine.addSystem(new ApplyForceSystem()); | |
196 | ||
197 | this._engine.addSystem(new PhysicsWorldControlSystem({ | |
198 | engine: this._matterJs | |
199 | })); | |
200 | ||
201 | this._engine.addSystem(new ElasticSystem()); | |
202 | ||
203 | this._engine.addSystem(new PhysicsToAttributesSystem()); | |
204 | ||
205 | this._engine.addSystem(new AttributesToRenderableSystem()); | |
206 | ||
207 | this._engine.addSystem(new CreateCouplingLineSystem()); | |
208 | ||
209 | this._engine.addSystem(new RenderSystem({ | |
210 | application: this._pixi | |
211 | })); | |
212 | } | |
213 | ||
214 | // Initializes the serpentity entities | |
215 | ||
216 | _initializeEntities() { | |
217 | ||
218 | const sumoA = SumoFactory.createSumo(null, { | |
219 | position: { | |
220 | x: 50, | |
221 | y: 50 | |
222 | } | |
223 | }); | |
224 | ||
225 | const sumoB = SumoFactory.createControllableSumo(null, { | |
226 | position: { | |
227 | x: 500, | |
228 | y: 78 | |
229 | } | |
230 | }); | |
231 | ||
232 | const harness = SumoFactory.createHarness(null, { | |
233 | position: { | |
234 | x: 309, | |
235 | y: 112 | |
236 | } | |
237 | }); | |
238 | ||
239 | SumoFactory.createRubberBand(this._engine, { | |
240 | entityA: sumoA, | |
241 | entityB: harness | |
242 | }); | |
243 | ||
244 | SumoFactory.createRubberBand(this._engine, { | |
245 | entityA: sumoB, | |
246 | entityB: harness | |
247 | }); | |
248 | ||
249 | // To keep the coupling behind, we'll manually add the sumos later | |
250 | ||
251 | this._engine.addEntity(sumoA); | |
252 | this._engine.addEntity(sumoB); | |
253 | this._engine.addEntity(harness); | |
254 | } | |
255 | }; | |
256 | ||
257 | export default internals.exports = {}; | |
258 | ||
259 | // autorun.bat | |
260 | window.addEventListener('load', internals.onLoad); |