Author Topic: [PC] "StreamStatus" Streaming Companion.  (Read 7395 times)

insidious611

  • *
  • Posts: 150
    • View Profile
[PC] "StreamStatus" Streaming Companion.
« on: 2015-04-18 15:42:51 »
Hi everyone. I'm a long time lurker, recently rather suddenly active member of the community. With the help of the people on IRC, in particular and in no particular order, Aali, Covarr, and DLPB, I've created a piece of software that allows you to create an automatically updating overlay to be used when streaming Final Fantasy 7 on various game streaming websites. In the future, I plan to expand this software to other games.

I have been using this to augment and supplement my streamed playthrough of a heavily modded FF7, which is live at various times of the day (usually late afternoon or evening CST, though there have been times where I streamed in the morning as well) here.

The software, in its current FF7 only form is available with full source code here. Or if you want a direct download link without going to the project page, here

If you don't need the source code, feel free to remove the GUISrc folder.

There are a number of requirements in order to make use of this. I will list these below:

Requirements:

1. A PC copy of FF7. This has only been tested with the 1998 version (or, specifically, a 2012 copy converted to the 1998 version, though any 1998 version should work.)

2. A local Apache webserver with PHP. For this, I recommend XAMPP, available here. For your security, especially if you're unfamiliar with running a network server, I recommend setting the server to listen only on 127.0.0.1, making it accessible only to your local computer and not to the rest of the network or the internet. This is especially important if you're using a laptop and plan on travelling with it.

3. The latest .NET Framework. The GUI portion of this program was coded using the latest version of Visual Basic .NET, so an up to date framework is a must.

4. Streaming software capable of using a web page as a source. I use Open Broadcaster Software with the CLR Browser Plugin

5. Patience. This takes a bit to set up, and your mileage may, can, and will vary.


Here are a couple sample videos of the overlay in action:

Basic Demonstration Video! Watch the party list on the right as I change the layout of the party via PHS. Also note how closely the game timer follows the timer shown on the menu.

One of my latest streams. Unfortunately portions of the audio have been muted due to copyright claims... against the BGM. *facepalms.* I have appealed these claims.



Instructions:

1. Unpack the archive to a place on your webserver. If this is XAMPP installed using default settings, my suggested location is C:\xampp\htdocs\streamstatus (create the streamstatus folder yourself).

2. Place a font in the font folder and a background in the base folder. Covarr provided me with the background I'm using. I'm not willing however to just assume that this is available to be reused, so I'm not packing it in. The background should be a 320x720 PNG with alpha channel (transparency) named background.png. You can grab fonts from your Windows installation by going to your Fonts folder (C:\Windows\Fonts, or just enter Fonts in the run dialog) and copying them. The PHP file is currently coded to use Microsoft's Verdana font (verdana.ttf). I could not pack this in with the archive for copyright reasons, but it ships with any recent version of windows.

3. Third, set FF7 to use a resolution of 960x720. (This isn't strictly necessary, but as the overlay is currently keyed to a 320x720 image, it looks best

4. Start up your streaming software and set it to use the overlay. For Open Broadcaster Software, this means having a base resolution of 1280x720, adding Final Fantasy 7 as a source (I find Monitor Capture works best due to a bug I've documented in another thread regarding Game Capture), moving it to the left side of the screen, then adding CLR Browser Plugin at a size of 320x720, adding the URL for the overlay as the source (see below), and moving it to the right hand side of the screen.

For a default installation into C:\xampp\htdocs\streamstatus, the url you want is http://127.0.0.1/streamstatus/ or http://127.0.0.1/streamstatus/index.html

5. Start up Final Fantasy 7 and load a saved game. *THIS IS IMPORTANT*. The status updater software *will not work* unless FF7 is running and ingame. If it can't find a valid savemap in RAM, it will complain and quit with an error. If you're running FF7 and ingame and you still get an error on steps 6-8, please check to make sure you aren't running two copies of ff7.exe (Ctrl+Alt+Del, Start Task Manager, Processes, look for ff7.exe). I've had this happen when ff7 didn't exit cleanly and it nearly gave me a heart attack. If you still have issues with the following step having made absolutely sure you have only one copy of ff7 running and it is ingame, please post your issue in this thread.

6. Start up the Updater GUI. This is StatusUpdater.exe in the same folder (C:\xampp\htdocs\streamstatus). Do not move this file out of the folder it's in, as it generates data files the web backend needs.

7. Type the last event (ie, "Just boarded the train back to Sector 7") into the top text box, then type any mods one by one into the lower textbox, clicking Add after each one. If you are using no mods, I would suggest typing in "None" and adding it. The content of these fields is essentially entirely up to you. Once you've done this, click commit changes.

8. Click Start. At this point, if you get an error, it is likely FF7 is not running or not ingame. If it is working properly, you should see "Running" where it originally read "Stopped", and the information in the upper left should update to match your game.

9. Preview your stream to make sure the overlay is working.

10. Start streaming!

11. Prior to quitting FF7, hit "Stop" for a graceful exit. It will exit automatically if it no longer finds FF7 running, but this behavior is somewhat undefined and may result in a corrupted status.xml file.

12. Feel free to delete any remaining status.xml and img(numbers).png files after you finish streaming, as these are generated on the fly by the program and will be overwritten by future uses of the program.



TECHNICAL DETAILS: (feel free to skip this entire block if you want)
Quote
The frontend of this program is using Visual Basic 2013 (aka VB .NET 4.5.1).  The frontend, when Start is pressed, looks for a process called "ff7.exe" and attaches itself to this process, and begins reading the in-memory copy of the Savemap, located at the offset 0xDBFD38 and at a size of roughly 4342 bytes. It grabs the entire savemap and turns it into a series of properties of an "FF7SaveMap" class. For this purpose I've also grabbed a number of variables which, as of yet, remain unused. I used the documentation of the SaveMap in the Qhimm wiki to find the important offsets for this purpose. It grabs this copy of this window of RAM every second, updates its internal variables, and then outputs the relevant variables to a very simple XML file, which is used by the backend to generate the image.

The backend of this program is using JavaScript and PHP.

The PHP portion takes a set of XML data provided by the frontend, and uses the PHP "GD" image editing library to add text to an image (it can also be used to create an image from scratch: replace calls to 'imagecreatefrompng("base/background.png")' with 'imagecreatetruecolor(320,720)' and follow these calls with 'imagesavealpha($img, true)'). As of the current version it relies on text spacing to enable creating the image using a variety of fonts and font sizes with similar results. Font sizes are currently expressed in Pixels. If you wish to express them in Point values instead, replace all references to "pxtoPt(19)" with the font size in Point. If you wish to simply change to a different Pixel size, replace "pxtoPt(19)" with "pxtoPt(yournumberhere)". If you wish to change the font from verdana, find and replace "font/verdana.ttf" with "font/yourchosenfonthere".

The JavaScript portion of the program is simple (and really, mostly not my own code :P. Though the code used is public domain.). It enables seamless updating of the image by loading new copies of the image in the background and swapping to them once they're loaded. Due to this, and depending on how slow your hard drive is and how much RAM you're using, the game timer can be "slow" by as much as a second, though it should usually be far less.

I am aware that a lot of this code is currently messy, and needs to be cleaned up to make it more easily user configurable. This cleanup is the current focus of work on the project. After cleanup, I intend to eventually make the program "generic" in scope, able to use a given pair of "memory layout" and "graphical layout" files to generate an overlay image for any game that has "stable" places in memory for its important gameplay variables. This will be most games running in emulators, most older games, and some (but not all or, really, most) newer ones.

EDIT: If you guys think this belongs in Tools, feel free to move it there. I didn't know if it really counted though, about half-and-half a streaming tool and an FF7 tool, and planned to become less and less targetted at FF7.
« Last Edit: 2018-04-24 18:34:05 by Covarr »

Kaldarasha

  • *
  • Posts: 2449
  • Prince of Model Editing
    • View Profile
Re: Final Fantasy 7 "StreamStatus" Streaming Companion.
« Reply #1 on: 2015-04-18 16:06:38 »
This has merely to do with what you want to do, but I did asked for an overlay tool once.
http://forums.qhimm.com/index.php?topic=15690.0

I mainly want a tool to replace the menu system and if things would goes well we would have as a bonus outsourced the all texts, which would help a lot with other translations of the game.

Covarr

  • Covarr-Let
  • Administrator
  • *
  • Posts: 3941
  • Just Covarr. No "n".
    • View Profile
Re: Final Fantasy 7 "StreamStatus" Streaming Companion.
« Reply #2 on: 2015-04-18 16:11:42 »
A tool is a tool, no matter how targeted. You could even release a NES sprite editor and it'd belong in tools.

Anyway, this is some impressive stuff. I think requiring a local webserver with PHP is going to be a bit much for most people, but for those who know how to set it up, it'll be wonderful.

This has merely to do with what you want to do, but I did asked for an overlay tool once.
http://forums.qhimm.com/index.php?topic=15690.0

I mainly want a tool to replace the menu system and if things would goes well we would have as a bonus outsourced the all texts, which would help a lot with other translations of the game.
I remember that thread, Kaldarasha. It's important to realize that what insidious611 has made here is fundamentally different from that. It applies this content to a webpage and displays it on a stream feed, not to the game in realtime. Most of the skills required are very different.

insidious611

  • *
  • Posts: 150
    • View Profile
Re: Final Fantasy 7 "StreamStatus" Streaming Companion.
« Reply #3 on: 2015-04-18 16:37:32 »
Specifically, I could probably create an image that would work for that given enough data on memory addresses and such, but I would be lost as to how to actually overlay it onto the game, as OBS does that for me as far as streaming goes.

insidious611

  • *
  • Posts: 150
    • View Profile
Re: Final Fantasy 7 "StreamStatus" Streaming Companion.
« Reply #4 on: 2015-04-18 16:39:25 »
Also, I'd eventually like to create an EXE (or maybe even DLL, loaded in by the updater) version of the image generator that's its own little webserver.
I'd need to find out how to implement GD in C# for this, though, and I'd consider this much further down the road than even genericizing the tool.

If I did do this, it would basically be a matter of "run this tool, then run that tool."

Honestly though, this is a bit of a "poweruser tool" anyway. After all, setting up a stream isn't exactly the easiest thing in the world to begin with, and once this tool becomes genericized, adding more games to it will require a knowledge of memory offsets and a basic idea of how
to layout text based on dynamically generated variables. :P
« Last Edit: 2015-04-18 16:48:23 by insidious611 »

Kaldarasha

  • *
  • Posts: 2449
  • Prince of Model Editing
    • View Profile
Re: Final Fantasy 7 "StreamStatus" Streaming Companion.
« Reply #5 on: 2015-04-18 16:45:47 »
I remember that thread, Kaldarasha. It's important to realize that what insidious611 has made here is fundamentally different from that. It applies this content to a webpage and displays it on a stream feed, not to the game in realtime. Most of the skills required are very different.



Don't worry I do know that I ask for much. But it's better to take the opportunity because you never know how talented and passionate the person is.

EQ2Alyza

  • 7th Heaven Crew
  • Global moderator
  • *
  • Posts: 3200
  • Dilly-Dally Shilly-Shally
    • View Profile
    • EQ2Alyza - YouTube Channel
Re: Final Fantasy 7 "StreamStatus" Streaming Companion.
« Reply #6 on: 2015-04-18 17:05:15 »
Very neat tool, I like it :)

insidious611

  • *
  • Posts: 150
    • View Profile
Re: Final Fantasy 7 "StreamStatus" Streaming Companion.
« Reply #7 on: 2015-04-18 18:44:53 »
I'm working on mockups for data files for the "genericized" version, in the experimental branch. I have a basic one for FF7 that would produce something similar to (if not exactly like) what the current program outputs. I'm next going to work on one for FF6 (US Version, AKA FF3) running in Higan.

Once I've finished tables for FF6, I think I might add what I learn from it to the wiki.

EDIT: Didn't want to double post. It should be noted that, especially for this kind of purpose, XAMPP is basically "point and shoot" as far as setting up a webserver. If you can install Anxious Heart, you can probably install XAMPP. :P
« Last Edit: 2015-04-19 02:33:36 by insidious611 »