dribble.tf - stv demo replay in browser

#31

24

payload.tf

2 Frags – +

This may just become the place to host demo reviews....

#32

Golden111

1 Frags – +

you sir are a beast

#33

smesi

15 Frags – +

good job me with an o

#34

PootisPootisPootisPootis

6 Frags – +

If demo contains pauses player doesn't handle them. For example this https://demos.tf/384366 stops at 62 325 tick (whole demo contains 136 815 ticks). Player doesn't show rest of the match after pause.

Overview of demo. Pause in 3rd round.https://i.imgur.com/IRjxeK2.jpg

It seems 'setPause' packet contains pause data. It fires when pause starts and ends. So it can be used to get right tick after pause ends.

Messy reference code how it can be used for tick offsets after pause ends: https://github.com/mazatf2/DemoUI2.5/blob/4a3bc844eb8d9782f09c8cadc2a3e2bea095e066/gui-src/overlay-manager/src/demotool/demotool.worker.ts#L294

I haven't tested if DT_SceneEntitys props: 'm_bPaused', 'm_flForceClientTime', 'm_bIsPlayingBack' work for older demos (<2018). For 2018-2020 demos that I tested with demo.js and it seems they aren't preset.

If demo contains pauses player doesn't handle them. For example this https://demos.tf/384366 stops at 62 325 tick (whole demo contains 136 815 ticks). Player doesn't show rest of the match after pause.

[quote=Overview of demo. Pause in 3rd round.]https://i.imgur.com/IRjxeK2.jpg[/quote]

It seems 'setPause' packet contains pause data. It fires when pause starts and ends. So it can be used to get right tick after pause ends.

Messy reference code how it can be used for tick offsets after pause ends: https://github.com/mazatf2/DemoUI2.5/blob/4a3bc844eb8d9782f09c8cadc2a3e2bea095e066/gui-src/overlay-manager/src/demotool/demotool.worker.ts#L294

I haven't tested if DT_SceneEntitys props: 'm_bPaused', 'm_flForceClientTime', 'm_bIsPlayingBack' work for older demos (<2018). For 2018-2020 demos that I tested with demo.js and it seems they aren't preset.

#35

yerb

2 Frags – +

Yo dis is crazieeeee! thank you

#36

smeso

dribble.tf

9 Frags – +

PootisPootisPootisPootisIf demo contains pauses player doesn't handle them. For example this https://demos.tf/384366 stops at 62 325 tick (whole demo contains 136 815 ticks). Player doesn't show rest of the match after pause.

Thanks for the detailed info. Looking into this, I believe demo.js does indeed successfully parse/play the entire demo, but the frontend tick # is not actually correct, as the tickrate is scaled down to 30TPS, resulting in the displayed tick values being 1/2 of what they should be.

I just tried removing the downscale, but running at 60TPS totally annihilates performance. I'm not super familiar with the demo.js parser, so I may just display the tick values as tick * 2, but it:

still doesn't account for paused ticks (they end up being "padded" to the end of playback)
may be slightly off the actual ingame tick (reference comparisons below)

---

I may just totally remove showing the tick #, and just display a playback time instead? e.g. [03:40 / 19:29]

Otherwise I could just "display" tick * 2 (kinda sus), but it will be inaccurate for demos with pauses.

---

Used match below to test (as it has a pause & a VOD on Youtube to reference).

Youtube: https://youtu.be/T2VHnG3N8fc?t=323

Comparisons : https://imgur.com/yK5E78N

Also seems there are some bugs that occur with certain types of STVs (maybe due to certain plugins?) or maybe pause, that cause PlayerResource data to be missing (so players show up pink/unknown). TBD...

Edit: yo we can't use emojis here?

[quote=PootisPootisPootisPootis]If demo contains pauses player doesn't handle them. For example this https://demos.tf/384366 stops at 62 325 tick (whole demo contains 136 815 ticks). Player doesn't show rest of the match after pause.
[/quote]

Thanks for the detailed info. Looking into this, I believe demo.js does indeed successfully parse/play the entire demo, but the frontend tick # is not actually correct, as the tickrate is [url=https://github.com/bryjch/dribble.tf/blob/dev/src/components/Analyse/Data/Parser.ts#L105]scaled down to 30TPS[/url], resulting in the displayed tick values being 1/2 of what they should be.

I just tried removing the downscale, but running at 60TPS totally annihilates performance. I'm not super familiar with the demo.js parser, so I may just display the tick values as [b]tick * 2[/b], but it:

[list]
[*] still doesn't account for paused ticks (they end up being "padded" to the end of playback)
[*] may be slightly off the actual ingame tick (reference comparisons below)
[/list]

---

I may just totally remove showing the tick #, and just display a playback time instead? e.g. [03:40 / 19:29]

Otherwise I could just "display" [b]tick * 2[/b] (kinda sus), but it will be inaccurate for demos with pauses.

---

Used match below to test (as it has a pause & a VOD on Youtube to reference).

Youtube: https://youtu.be/T2VHnG3N8fc?t=323

Comparisons : https://imgur.com/yK5E78N

[i]Also seems there are some bugs that occur with certain types of STVs (maybe due to certain plugins?) or maybe pause, that cause PlayerResource data to be missing (so players show up pink/unknown). TBD...[/i]

Edit: yo we can't use emojis here?

#37

Icewind

4 Frags – +

You're pretty much completely right, I never bothered adding pause handling, to do it properly would probably involve cutting out the pauses when caching the tick data and save the pause start/end tick so you can later translate the ticks back.

I've never done this because I've personally never had to open a demo in the browser that had a tick in it :)

You're pretty much completely right, I never bothered adding pause handling, to do it properly would probably involve cutting out the pauses when caching the tick data and save the pause start/end tick so you can later translate the ticks back.

I've never done this because I've personally never had to open a demo in the browser that had a tick in it :)

#38

ire

3 Frags – +

Edit: yo we can't use emojis here?

limitation of the site unfortunately, emojis nuke all the stuff after them for some reason

[quote]Edit: yo we can't use emojis here?[/quote]

limitation of the site unfortunately, emojis nuke all the stuff after them for some reason

#39

BYS_ShadowFenix

0 Frags – +

Hello, I was using this for a demo review today, and I noticed rotating the camera was a little funky. Left mouse button rotates the camera around the world, but is there a way to rotate the camera around itself such that the camera's world position stays the same, but the viewing angle/rotation changes?

#40

zebulon

11 Frags – +

NEW dribble.tf Major Update
Including new cosmetic cases (textured maps) and an entirely new gamemode (free spectator camera)!!!

Hey yall, I've been working with smeso for the past several months to bring a few new QOL updates to dribble.tf! With older STV demos not working at the moment in-game, try them here if you're still looking for a demo review of this sesson's matches pre-update.

New Features Include:
Textured Maps
We have figured out how to get a reasonably sized map file complete with the in-game textures into the app. This comes with a few quality compromises, so most decals are missing and there are still several areas where textures weren't ported over. There are also still some areas which have flickering when moving the camera. I'll try to fix both these in future updates.

Spectator Camera
smeso is a boss and hammered out a freeform spectator camera, similar to what already exists in game - there have been quite a few requests for this. Check out the controlls in the app settings, but most are straight forward from the game, with a few new ones like elevation control!

New Maps
Added koth_bagel to the supported maps. Please make a request if you would like others to be supported.

I bet smeso wouldn't post his sponsor link here, but this is a huge project so consider supporting its creator

[h][b]NEW [url=https://dribble.tf/]dribble.tf[/url] Major Update[/b][/h]
Including new cosmetic cases [i](textured maps)[/i] and an entirely new gamemode [i](free spectator camera)[/i]!!!

Hey yall, I've been working with smeso for the past several months to bring a few new QOL updates to [url=https://dribbletf.netlify.app/]dribble.tf[/url]! With older STV demos not working at the moment in-game, try them here if you're still looking for a demo review of this sesson's matches pre-update.

New Features Include:
[u][b]Textured Maps[/b][/u]
We have figured out how to get a reasonably sized map file complete with the in-game textures into the app. This comes with a few quality compromises, so most decals are missing and there are still several areas where textures weren't ported over. There are also still some areas which have flickering when moving the camera. I'll try to fix both these in future updates.

[u][b]Spectator Camera[/b][/u]
smeso is a boss and hammered out a freeform spectator camera, similar to what already exists in game - there have been quite a few requests for this. Check out the controlls in the app settings, but most are straight forward from the game, with a few new ones like elevation control!

[u][b]New Maps[/b][/u]
Added koth_bagel to the supported maps. Please make a request if you would like others to be supported.

I bet smeso wouldn't post his sponsor link here, but this is a huge project so consider [url=https://ko-fi.com/bryjch]supporting its creator[/url]

#41

siyo

Fireside Casts

4 Frags – +

this is AWESOME wtf

i would like to request sultry (if not already) to be added support wise

this is AWESOME wtf

i would like to request sultry (if not already) to be added support wise

#42

zebulon

14 Frags – +

NEW dribble.tf Update

2D Skybox Background
All maps now have their 2D Skybox rendered by default. Very immersive! Wow.

New Maps
Added cp_sultry, cp_villa, and cp_reckoner to the supported maps. Please make a request if you would like others to be supported!

https://i.imgur.com/eMuuqOQ.png

[h][b]NEW [url=https://dribble.tf/]dribble.tf[/url] Update[/b]
[/h]
[u][b]2D Skybox Background[/b][/u]
All maps now have their 2D Skybox rendered by default. Very immersive! Wow.

[u][b]New Maps[/b][/u]
Added cp_sultry, cp_villa, and cp_reckoner to the supported maps. Please make a request if you would like others to be supported!

[img]https://i.imgur.com/eMuuqOQ.png[/img]

#43

smeso

dribble.tf

19 Frags – +

New dribble.tf Update

Been a while since adding anything, appreciate any thoughts/feedback. :)

Big props to zebulon for keeping the project alive

Player outlines toggle
- Press O to turn on/off
- Is pretty intensive, might kill your PC!

Frame smoothing
- Interpolate between ticks for 0.1x, 0.5x, 1x speeds - which means smoother slow motion!
- May also kill your PC - I am not good at optimizing!

Explore maps
- You can explore the maps by themself by clicking the map name in the About panel.

Killfeed improvements
- Make names clickable (jumps to the player's POV)
- Make killfeed row highlighted if spectated player is involved

[b][h]New [url=https://dribble.tf/]dribble.tf[/url] Update[/h][/b]

Been a while since adding anything, appreciate any thoughts/feedback. :)

Big props to zebulon for keeping the project alive

[b][u]Player outlines toggle[/u][/b]
- Press O to turn on/off
- Is pretty intensive, might kill your PC!

[u][b]Frame smoothing[/b][/u]
- Interpolate between ticks for 0.1x, 0.5x, 1x speeds - which means smoother slow motion!
- May also kill your PC - I am not good at optimizing!

[b][u]Explore maps[/u][/b]
- You can explore the maps by themself by clicking the map name in the About panel.

[b][u]Killfeed improvements[/u][/b]
- Make names clickable (jumps to the player's POV)
- Make killfeed row highlighted if spectated player is involved

#44

mitch

7 Frags – +

you and zebulon are fuckin insane, this is the coolest shit ever.

#45

antlers

Fireside Casts

2 Frags – +

I actually tried using this instead of being in-game for the first time last night, completely changed how we discussed our fights as a team. Looking forward to more updates!