experiments/browserloops-examples
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Allow Setting Color Change Speed for Variable Timestep

Browse source
This commit is contained in:
Marty Oehme 2018-07-24 15:33:11 +02:00
parent 08c7e8ac1d
commit 46150e3c34
3 changed files with 23 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
lib/game/Game.dart
View file

@ -21,8 +21,7 @@ class Game {
}
// In-World Logic Updates
void update([num speed]) {
print(speed);
void update([int speed]) {
Point next = isRandom ? nextPosRandom() : nextPosOrdered(_curPos);
if (_curPos.x < 0) _curPos = Point(0, _curPos.y);
Color newColor = isRandom ? randomColor() : nextColor(

20
lib/src/03-VariableTimestep.dart
View file

@ -1,4 +1,5 @@
import 'dart:html';
import 'package:browserloop/game/Game.dart';
import 'package:browserloop/game/LoopExample.dart';
@ -7,7 +8,8 @@ import 'package:browserloop/game/LoopExample.dart';
/// Perhaps one of the most widely used loops
/// in games for many years. Many game frameworks
/// make use of a loop similar to this.
class VariableTimestep implements LoopExample {
class VariableTimestep implements LoopExample, VariableUpdates {
double _COLORSWITCHSPEED = 1.0;
Game game;
num id;
Stopwatch elapsed = new Stopwatch();
@ -16,14 +18,21 @@ class VariableTimestep implements LoopExample {
void eventloop(num time) {
int dt = elapsed.elapsedMilliseconds;
game.update(dt);
// Multiply by dt, so that the color switching speed is the same,
// regardless of the time it took to compute this update
int colorSwitchspeed = (_COLORSWITCHSPEED / 10 * dt).toInt();
game.update(colorSwitchspeed);
game.draw();
elapsed.reset();
id = window.requestAnimationFrame(eventloop);
}
// Starting and stopping the loop for the example page
// CONTROLS ON THE EXAMPLE PAGE
// NOT NECESSARY FOR LOOP ITSELF
void stop() {
elapsed.stop();
window.cancelAnimationFrame(id);
@ -34,4 +43,9 @@ class VariableTimestep implements LoopExample {
elapsed.reset();
window.requestAnimationFrame(eventloop);
}
@override
void setUpdates(double updateRate) {
_COLORSWITCHSPEED = 1000 / updateRate;
}
}

12
web/main.dart
View file

@ -1,9 +1,10 @@
import 'dart:html';
import 'package:browserloop/game/Game.dart';
import 'package:browserloop/game/LoopExample.dart';
import 'package:browserloop/src/02-AnimationFrameWhile.dart';
import 'package:browserloop/src/03-VariableTimestep.dart';
import 'package:browserloop/src/04-FixedLoopVariableRender.dart';
import 'package:browserloop/src/02-AnimationFrameWhile.dart';
import 'package:browserloop/src/05_DirtyFlagRendering.dart';
CanvasElement baseCanvas = new CanvasElement(width: 480, height: 480);
@ -135,7 +136,7 @@ void addControls(Example ex) {
})));
// Don't add controls which don't work anyways (for simple examples)
if (examples.indexOf(ex) <= 1) return;
if (examples.indexOf(ex) <= 0) return;
VariableUpdates loop = (ex.loop as VariableUpdates);
// Update Speed Slider
@ -147,13 +148,10 @@ void addControls(Example ex) {
..id = "update_speed"
..min = "1"
..max = "50"
..value = "3"
..value = "1"
..step = "1"
..onInput.listen((Event e) {
loop.MS_PER_UPDATE =
(1000 / int.parse((e.target as InputElement).value));
loop.setUpdates(1000 / int.parse((e.target as InputElement).value));
}));
// querySelector('#reset').onClick.listen((e) => ex.loop.game.reset());
// querySelector('#plus').onClick.listen((e) => _changeGrid(-5));
// querySelector('#minus').onClick.listen((e) => _changeGrid(5));
}