andras/sdf-2d-demo
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Optimize scene change

Browse source
This commit is contained in:
schmelczerandras 2020-10-01 11:26:23 +02:00
parent 41f9a2b5cf
commit ee29365824
3 changed files with 15 additions and 7 deletions
Download patch file Download diff file Expand all files Collapse all files

20
src/index.ts
View file

@ -42,10 +42,10 @@ const handleTextToggle = () => {
toggleButton.addEventListener('click', handleTextToggle); toggleButton.addEventListener('click', handleTextToggle);
handleTextToggle(); handleTextToggle();
const handleScene = async (SceneConstructor: new () => Scene) => { const handleScene = async (
const scene = new SceneConstructor(); currentScene: Scene,
await scene.initialize(canvas, overlay); NextSceneConstructor: new () => Scene
): Promise<Scene> => {
let triggerIsOver: () => void; let triggerIsOver: () => void;
const isOver = new Promise((resolve) => (triggerIsOver = resolve)); const isOver = new Promise((resolve) => (triggerIsOver = resolve));
let timeSinceStart = 0; let timeSinceStart = 0;
@ -53,7 +53,7 @@ const handleScene = async (SceneConstructor: new () => Scene) => {
const handleFrame = (currentTime: DOMHighResTimeStamp) => { const handleFrame = (currentTime: DOMHighResTimeStamp) => {
const deltaTime = deltaTimeCalculator.getNextDeltaTime(currentTime); const deltaTime = deltaTimeCalculator.getNextDeltaTime(currentTime);
scene.drawNextFrame(currentTime, deltaTime); currentScene.drawNextFrame(currentTime, deltaTime);
if ((timeSinceStart += deltaTime) > sceneIntervalInSeconds * 1000) { if ((timeSinceStart += deltaTime) > sceneIntervalInSeconds * 1000) {
triggerIsOver(); triggerIsOver();
@ -63,15 +63,21 @@ const handleScene = async (SceneConstructor: new () => Scene) => {
}; };
requestAnimationFrame(handleFrame); requestAnimationFrame(handleFrame);
const nextScene = new NextSceneConstructor();
await nextScene.initialize(canvas, overlay);
await isOver; await isOver;
scene.destroy(); currentScene.destroy();
return nextScene;
}; };
const main = async () => { const main = async () => {
try { try {
let i = 0; let i = 0;
let currentScene: Scene = new scenes[i++]();
await currentScene.initialize(canvas, overlay);
for (;;) { for (;;) {
await handleScene(scenes[i++ % scenes.length]); currentScene = await handleScene(currentScene, scenes[i++ % scenes.length]);
} }
} catch (e) { } catch (e) {
console.error(e); console.error(e);

1
src/scenes/rain/rain-scene.ts
View file

@ -36,6 +36,7 @@ export class RainScene implements Scene {
ambientLight: rgb(0.2, 0.2, 0.2), ambientLight: rgb(0.2, 0.2, 0.2),
backgroundColor: rgb(1, 1, 1), backgroundColor: rgb(1, 1, 1),
colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)], colorPalette: [rgb(1, 1, 1), rgb(0.3, 1, 1), rgb(1, 1, 0), rgb(0.3, 1, 1)],
enableHighDpiRendering: false,
}); });
for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) { for (let i = 0; i < (canvas.getBoundingClientRect().width / 800) * 20; i++) {

1
src/scenes/tunnel-scene.ts
View file

@ -81,6 +81,7 @@ export class TunnelScene implements Scene {
ambientLight: rgb(0.35, 0.1, 0.45), ambientLight: rgb(0.35, 0.1, 0.45),
backgroundColor: rgba(1, 1, 1, 1), backgroundColor: rgba(1, 1, 1, 1),
colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)], colorPalette: [rgb(0.4, 0.5, 0.6), rgb(0, 0, 0), rgb(0, 0, 0), rgb(0, 0, 0)],
enableHighDpiRendering: false,
}); });
for (let i = 0; i < 200; i++) { for (let i = 0; i < 200; i++) {