Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Add copy buttons to all
 blocks\n(function() {\n function addCopyButtons() {\n document.querySelectorAll('pre code').forEach(function(codeBlock) {\n if (codeBlock.parentElement.hasAttribute('data-copy-added')) return;\n codeBlock.parentElement.setAttribute('data-copy-added', 'true');\n \n var btn = document.createElement('button');\n btn.textContent = 'Copy';\n btn.style.cssText = 'position:absolute;top:4px;right:4px;padding:2px 8px;font-size:11px;background:#4ecdc4;border:none;border-radius:4px;color:#1a1a2e;cursor:pointer;opacity:0.7;transition:opacity 0.2s;';\n btn.onmouseover = function() { this.style.opacity = '1'; };\n btn.onmouseout = function() { this.style.opacity = '0.7'; };\n btn.onclick = function() {\n navigator.clipboard.writeText(codeBlock.textContent).then(function() {\n btn.textContent = 'Copied!';\n setTimeout(function() { btn.textContent = 'Copy'; }, 1500);\n });\n };\n codeBlock.parentElement.style.position = 'relative';\n codeBlock.parentElement.appendChild(btn);\n });\n }\n \n addCopyButtons();\n \n // Re-run on dynamic content\n var observer = new MutationObserver(addCopyButtons);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Add Copy Buttons to Code Blocks");
}
} catch(__e) { console.warn('[Userscript:Add Copy Buttons to Code Blocks]', __e); }
})();
(function(){
try {
var __m = "github.com";
var __re = new RegExp('^' + "github\\.com" + '
Skip to content

Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Force GitHub README to respect dark mode\n(function() {\n var style = document.createElement('style');\n style.textContent = '\n .markdown-body {\n color-scheme: dark light;\n }\n .markdown-body pre { background: #161b22 !important; }\n .markdown-body code { background: rgba(110, 118, 129, 0.4) !important; }\n .markdown-body table th, .markdown-body table td { border-color: #30363d !important; }\n .markdown-body img { background: #0d1117; }\n .markdown-body blockquote { border-left-color: #8b949e; }\n .markdown-body hr { border-color: #30363d; }\n ';\n document.head.appendChild(style);\n})();", "GitHub Dark Mode README Fix"); } } catch(__e) { console.warn('[Userscript:GitHub Dark Mode README Fix]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Highlight search terms from Google/DuckDuckGo/Bing referrer\n(function() {\n var ref = document.referrer;\n var terms = [];\n \n if (ref.includes('google.com') || ref.includes('duckduckgo.com') || ref.includes('bing.com')) {\n var url = new URL(ref);\n var q = url.searchParams.get('q') || url.searchParams.get('p');\n if (q) {\n terms = q.split(/\\s+/).filter(function(t) { return t.length > 2; });\n }\n }\n \n if (terms.length === 0) return;\n \n var style = document.createElement('style');\n style.textContent = '.userscript-highlight { background: #fbbf24; color: #1a1a2e; padding: 1px 3px; border-radius: 2px; }';\n document.head.appendChild(style);\n \n function highlight(node) {\n if (node.nodeType === 3) { // text node\n var text = node.textContent;\n var found = false;\n terms.forEach(function(term) {\n var regex = new RegExp('(' + term.replace(/[.*+?^${}()|[\\]\\\\]/g, '\\\\') + ')', 'gi');\n if (regex.test(text)) {\n found = true;\n var frag = document.createDocumentFragment();\n var parts = text.split(regex);\n parts.forEach(function(part, i) {\n if (i % 2 === 0) {\n frag.appendChild(document.createTextNode(part));\n } else {\n var span = document.createElement('span');\n span.className = 'userscript-highlight';\n span.textContent = part;\n frag.appendChild(span);\n }\n });\n node.parentNode.replaceChild(frag, node);\n }\n });\n } else if (node.nodeType === 1 && node.childNodes) { // element\n var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT'];\n if (!skipTags.includes(node.tagName)) {\n Array.from(node.childNodes).forEach(highlight);\n }\n }\n }\n \n highlight(document.body);\n \n // Re-highlight on dynamic content\n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1 || node.nodeType === 3) highlight(node);\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Highlight Search Terms"); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Strip utm_, fbclid, gclid, etc. from all links on page\n(function() {\n var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content',\n 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid',\n 'ref', 'ref_src', 'source', 'medium', 'campaign'];\n \n function cleanUrl(url) {\n try {\n var u = new URL(url, window.location.origin);\n var changed = false;\n trackingParams.forEach(function(p) {\n if (u.searchParams.has(p)) {\n u.searchParams.delete(p);\n changed = true;\n }\n });\n return changed ? u.toString() : url;\n } catch (e) {\n return url;\n }\n }\n \n function cleanLinks() {\n document.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n \n cleanLinks();\n \n var observer = new MutationObserver(function(mutations) {\n mutations.forEach(function(m) {\n m.addedNodes.forEach(function(node) {\n if (node.nodeType === 1) {\n if (node.tagName === 'A') cleanLinks();\n node.querySelectorAll('a[href]').forEach(function(a) {\n var clean = cleanUrl(a.href);\n if (clean !== a.href) a.href = clean;\n });\n }\n });\n });\n });\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "Remove Tracking Parameters from Links"); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + '
Skip to content

Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Auto-enable theater mode on YouTube\n(function() {\n function tryTheater() {\n var btn = document.querySelector('button[aria-label=\"Theater mode\"], ytd-player #player button[title=\"Theater mode\"]');\n if (btn && !btn.classList.contains('activated')) {\n btn.click();\n }\n }\n \n // Try immediately\n tryTheater();\n \n // Try after navigation (SPA)\n var lastUrl = location.href;\n setInterval(function() {\n if (location.href !== lastUrl) {\n lastUrl = location.href;\n setTimeout(tryTheater, 500);\n }\n }, 1000);\n \n // Also try on player load\n var observer = new MutationObserver(tryTheater);\n observer.observe(document.body, { childList: true, subtree: true });\n})();", "YouTube Theater Mode Default"); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Remove or un-stick sticky/fixed headers that block content\n(function() {\n function unstick() {\n document.querySelectorAll('header, nav, [role=\"banner\"], .header, .navbar, .sticky, .fixed-top, [style*=\"position: fixed\"], [style*=\"position:sticky\"]').forEach(function(el) {\n if (el.style.position === 'fixed' || el.style.position === 'sticky' || \n getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') {\n el.style.position = 'static';\n el.style.top = 'auto';\n el.style.zIndex = 'auto';\n }\n });\n }\n \n unstick();\n \n var observer = new MutationObserver(unstick);\n observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] });\n})();", "Kill Sticky Headers"); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + '
Skip to content

Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages

, 'i'); if (__m === '*' || __re.test(location.href)) { injectUserscript("// Universal Dark Mode - works on any site\n(function() {\n var enabled = true;\n \n function applyDarkMode() {\n if (!enabled) return;\n \n // Create style element if it doesn't exist\n var style = document.getElementById('universal-dark-mode-style');\n if (!style) {\n style = document.createElement('style');\n style.id = 'universal-dark-mode-style';\n document.head.appendChild(style);\n }\n \n // Dark mode CSS - inverts colors but preserves images/video\n style.textContent = '\n /* Invert everything except media */\n html {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #1a1a2e !important;\n }\n \n /* Restore images, videos, iframes, canvas */\n img, video, iframe, canvas, svg, picture, [style*=\"background-image\"] {\n filter: invert(1) hue-rotate(180deg) !important;\n }\n \n /* Preserve specific elements that should not be inverted */\n .no-dark-mode, .no-dark-mode *,\n [data-theme=\"light\"], [data-theme=\"light\"],\n .ace_editor, .ace_editor *,\n .CodeMirror, .CodeMirror *,\n .monaco-editor, .monaco-editor *,\n .markdown-body pre, .markdown-body pre *,\n .highlight, .highlight *,\n pre code, pre code * {\n filter: none !important;\n }\n \n /* Fix common UI elements */\n .modal, .popup, .dropdown-menu, .tooltip, .popover {\n filter: invert(1) hue-rotate(180deg) !important;\n background: #2d2d44 !important;\n border-color: #444 !important;\n }\n \n /* Scrollbars */\n ::-webkit-scrollbar { background: #1a1a2e !important; }\n ::-webkit-scrollbar-thumb { background: #444 !important; }\n ::-webkit-scrollbar-thumb:hover { background: #555 !important; }\n \n /* Selection */\n ::selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ::-moz-selection { background: #4ecdc4 !important; color: #1a1a2e !important; }\n ';\n }\n \n function removeDarkMode() {\n var style = document.getElementById('universal-dark-mode-style');\n if (style) style.remove();\n }\n \n // Toggle with Alt+Shift+D\n document.addEventListener('keydown', function(e) {\n if (e.altKey && e.shiftKey && e.key === 'D') {\n e.preventDefault();\n enabled = !enabled;\n if (enabled) {\n applyDarkMode();\n console.log('[Universal Dark Mode] Enabled');\n } else {\n removeDarkMode();\n console.log('[Universal Dark Mode] Disabled');\n }\n }\n });\n \n // Apply on load\n applyDarkMode();\n \n // Re-apply on dynamic content\n var observer = new MutationObserver(function(mutations) {\n if (enabled && !document.getElementById('universal-dark-mode-style')) {\n applyDarkMode();\n }\n });\n observer.observe(document.head, { childList: true });\n \n console.log('[Universal Dark Mode] Loaded - Press Alt+Shift+D to toggle');\n})();", "Universal Dark Mode"); } } catch(__e) { console.warn('[Userscript:Universal Dark Mode]', __e); } })(); })();
Skip to content

Repository files navigation

Viewback - A Video Game Design Tool

Viewback is a data visualization tool for game designers. It forwards the debug information from your game to your wireless device for view during development and usability testing. You can see changes to game's internal state, debug problems on the fly, and send commands to the game in real time.

Watch this video to see how it works.

Downloads

Integration

The Viewback server is written in C and can be easily integrated into any game engine. It uses a permissive MIT license, avoids blocking networking calls, and uses only a few hundred bytes of memory. The server compiles on any C compiler with no dependencies, and the monitor is available for Windows and Android, with OSX and iOS coming soon.

Since Viewback is written in C it can be used in just about any game engine environment. Any engine written in C or C++ (Id Tech engines, Unreal, Source) can use Viewback with no extra effort. Users of engines written in Java or C# (Unity, Minecraft) can either write language bindings or implement the Viewback network protocol on their own.

This repository contains the header and source code for the Viewback server, which will typically be integrated into your game's client, if your game is multiplayer. It looks like this:

Viewback client <----------> | Viewback server |
(eg The monitor app) | Game client | <------> Game server

Installation Instructions

First, copy all files in the server directory to a directory inside your source tree. If you're familiar with git, you can use a git submodule for this purpose. Then add viewback.cpp and viewback_util.cpp to your project files. In whichever files you want to use Viewback, add at the top:

#include "viewback_util.h"

Now you are ready to implement the API.

Sample Code

This code uses the vb_util interface, which handles memory allocations for you. If you care about how Viewback manages memory, see viewback.h for an interface that allows you to allocate the memory that Viewback uses.

#include "viewback_util.h"
vb_util_initialize(); // This is optional.
// WINDOWS USERS: If you have not already, make sure you call [WSAStartup()](http://msdn.microsoft.com/en-us/library/windows/desktop/ms742213%28v=vs.85%29.aspx). See the Viewback test code for an example.
// A "channel" is a stream of data to be sent to the Viewback monitor for display.
// Here we create an integer channel called "Health".
vb_channel_handle_t health_channel;
vb_util_add_channel("Health", VB_DATATYPE_INT, &health_channel);
// The name you pass in here will be displayed in the server list on the monitor.
vb_util_server_create("My Amazing Game");
while (game_running())
{
// Call this as many times as you like, but at least once per game frame.
vb_server_update(game_time);
// You can send data once per frame, or only when the data changes. It's up to you.
if (!vb_data_send_int(health_channel, player->GetHealth()))
printf("Error sending to Viewback channel\n");
}
vb_server_shutdown();

Features

Channels

A channel is a stream of data to be sent to the Viewback monitor for display. Each channel has a type, currently supported types are integer, float, or vector. Depending on the type of the vector the data will be displayed in the monitor in a different panel. Floats and ints will be shown in the time display and vectors will be shown in the 2D display.

Groups

A group allows you to organize your channels. You can add a channel to a group and then activate a group to see all of the channels in that group. For example an "Animation" group may contain these channels:

  • PlayerYaw
  • ViewVector
  • PlayerVelocity

while the "PlayerMovement" group would contain

  • PlayerVelocity
  • JumpButton
  • OnGround

A channel can belong to multiple groups or no groups.

Labels

Integer channels are often enumerations - i.e. each value represents a state. These states often have names and looking at the names is nicer than looking at the numbers. So for integer channels you can specify that a certain value has a name, and this name will show up in the monitor instead of the number. For example for the PlayerState channel you may have these labels:

  • 0: Dead
  • 1: Respawning
  • 2: Alive
  • 3: DeathAnimation
  • 4: Spectating

Whenever the channel has the value of "2", the monitor will show the "PlayerState" channel as being "Alive".

Controls

You can specify controls to modify parameters of your game in real time. These controls appear in the monitor and when they are manipulated by the user, the callbacks that you specify will be triggered in the game code. There are currently two types of controls supported.

Buttons

When pressed, a callback function in the game will execute. For example, a "Pause" button could call this function:

void viewback_pause_callback()
{
Game()->TogglePause();
}

Other ideas for buttons:

  • Take a screenshot without leaning over your playtester.
  • Turn cheats on and off.
  • Activate the bug report system.
  • Reset the level if your playtester got stuck.

Sliders

When the slider handle is moved a callback in the game will execute. Sliders can specify integer or float values. Some ideas for sliders:

  • Adjust the difficulty of the game if your playtester is having trouble (or not enough trouble)
  • Adjust the number of bots in the game
  • Real-time tuning of a design parameter that you've been trying to get right, like the player run speed or jump height.

Console

If your game has a console, you can forward the console to Viewback. Output from the console will appear in the Viewback monitor and the user can input commands into the monitor which will get forwarded to the game.

Don't have a console in your game? No sweat, you can use the Viewback monitor as your console. Just call the Viewback vb_console_append() function with whatever messages you want to see, and it will show up on the Viewback monitor.

Status

The status string is like the console but it's always visible. New status lines replace old lines and they never scroll off the screen. Use it for things like the framerate, memory used, and how many monsters are currently spawned.

Credits

  • Initial implementation by me, @VinoBS
  • Thanks to @SteveSwink because I had the original idea for Viewback while reading his amazing book, Game Feel
  • Thanks to @nothings and @cmuratori for helping me think about API design.
  • Thanks to @deplinenoise because I unscrupulously stole a lot of his networking code from Webby
  • Special thanks to Cognizant for awarding me a generous scholarship based on my work on Viewback.

About

A tool for remotely monitoring video game playtests.

Resources

Stars

48 stars

Watchers

8 watching

Forks

Releases

Packages

Contributors

Languages