So my Twitch overlay works great! But...

Post reply
1 favourites

  • For the past year I've been working on a Twitch overlay that works alongside the Twitch chat.

    When people type something into chat, I can make it do different things on the streams. This means I can create mini-games for Twitch streams!!! YAY!!!

    This was all made using Construct 2, and while testing a few things, I found that I was able to create a new app that appears on top of the Twitch channel itself, and show a real time version specifically for the viewers (a Twitch Extension).

    As I was able to make this in Construct 2 by simply adding the following line into the index code...

    ... I upgraded to Construct 3, built another test program, then added the line into the index again...

    This time, it doesn't work.

    I notice that Construct 3 exports are quite different compared to the Construct 2 export, with the index file calling the scripts folder instead of seemingly having them included. However, saying that, the one line I needed to add was also calling an external script, so I can't see what is causing the problem.

    Both programs just create a spinning square, with the Construct 2 version being a bit more complex, allowing the user to change the direction of the spin.

    Does anyone out there have a good knowledge of html, or (with any luck) Twitch extensions?

    With the only change being on whether it's Construct 2 or Construct 3, I imagine the issue I'm facing lies with the difference between the 2, rather than something I can change on Twitch, as I'm able to repeatedly get a working program using Construct 2.

    Any help would be appreciated, even if it's just brain storming ideas!

    Opening up the ability for us to make Twitch extensions and overlays would be great for all of us :)

  • Asking a question in here was a long shot, I know, as most of my questions here are pretty... out there :( But I might as well update this in case it helps someone in the future.

    I found out that if I open the project in the Twitch Development Rig, it won't load... if I preview the html in Google Chrome it doesn't work, but if I tell the Rig to preview it in Firefox, it works.

    As I said before, the only thing I changed is the version of Construct I'm using.

    Ashley Sorry to tag you, but might you know what I may be missing? We're THIS close to getting Construct working for Twitch Extensions. I imagine it'll open many doors. I don't want to have to go back to Construct 2 now that I've had a taste of Construct 3.

  • As another update...

    THIS is what the console shows when running in both Chrome and Twitch Dev Kit: 

    GET /index.html?anchor=video_overlay&language=en&locale=en-US&mode=viewer&state=testing&platform=web&legacyComponentDesign=true
GET /style.css
GET /scripts/supportcheck.js
GET /scripts/main.js
GET /scripts/offlineclient.js
GET /scripts/register-sw.js
GET /scripts/dispatchworker.js
GET /scripts/jobworker.js
GET /workermain.js
GET /scripts/c3runtime.js
GET /data.json
GET /images/shared-0-sheet0.png

    And this is what it runs in Firefox: 

    GET /index.html?anchor=video_overlay&language=en&locale=en-US&mode=viewer&state=testing&platform=web&legacyComponentDesign=true
GET /style.css
GET /scripts/supportcheck.js
GET /scripts/offlineclient.js
GET /scripts/register-sw.js
GET /scripts/main.js
GET /scripts/supportcheck.js
GET /scripts/c3runtime.js
GET /scripts/jobworker.js
GET /scripts/dispatchworker.js
GET /data.json
GET /images/shared-0-sheet0.png
GET /sw.js
GET /offline.json
GET /index.html?anchor=video_overlay&language=en&locale=en-US&mode=viewer&state=testing&platform=web&legacyComponentDesign=true
GET /
GET /scripts/c3runtime.js
GET /data.json
GET /style.css
GET /scripts/offlineclient.js
GET /images/shared-0-sheet0.png
GET /scripts/main.js
GET /workermain.js
GET /scripts/dispatchworker.js
GET /scripts/jobworker.js
GET /scripts/workermain.js
GET /scripts/supportcheck.js
GET /icons/loading-logo.png
GET /icons/icon-32.png
GET /icons/icon-512.png
GET /icons/icon-256.png
GET /icons/icon-64.png
GET /icons/icon-16.png
GET /icons/icon-128.png
GET /scripts/register-sw.js

    You can see it's not running some of them. Hope this means something to someone...

  • And as another example, this is what the console shows Construct 2 looks for: 

    GET /index.html?anchor=panel&language=en&locale=en-US&mode=viewer&state=testing&platform=web
GET /jquery-2.1.1.min.js
GET /c2runtime.js
GET /data.js
GET /images/sprite-sheet0.png
GET /sw.js
GET /offline.js?84191
GET /
GET /index.html?anchor=panel&language=en&locale=en-US&mode=viewer&state=testing&platform=web
GET /data.js
GET /offlineClient.js
GET /icon-16.png
GET /c2runtime.js
GET /icon-32.png
GET /jquery-2.1.1.min.js
GET /images/sprite-sheet0.png
GET /icon-114.png
GET /icon-128.png
GET /icon-256.png
GET /loading-logo.png

    Additionally, is there a reason why 2 workermain.js are created in an html export?

  • I have no idea what the Twitch extension is trying to do. But something you might want to check is Construct 3's worker mode. It now runs in a Web Worker by default for performance reasons. This also means if you just put a tag in the main document it won't run in the context of the runtime.

  • That did it Ashley!

    Thank you so much! I've been pulling my hair out over this for about 3 weeks now :D

    First with Construct 2, then again with Construct 3 :)

    It would be great if there was an export option for Twitch extensions. It's just the html but with one additional script also being called, which I've put alongside the other scripts.

    There are a few additional steps, but having to add that line in each time quickly gets boring after each update :)

    Happy to help if needed. After all, as I said, I've been working on this project for over a year.

    Again, thank you! I have been hesitant to update to Construct 3 for a long time, but my goodness it blows Construct 2 (which I still think is superb) out of the water :)

  • AnD4D

    Good to hear you got this working. Are you able to interact with chat messages, get follower count, etc?

  • Hi russpuppy

    Yes, I'm able to get all of that working. It's pretty insane what I've been able to achieve slapping Construct and Twitch together :D

    The fact we can now make Twitch extensions just opens up so many more doors when combined with the multiplayer plugin :)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads

  • Hi russpuppy

    Yes, I'm able to get all of that working. It's pretty insane what I've been able to achieve slapping Construct and Twitch together :D

    The fact we can now make Twitch extensions just opens up so many more doors when combined with the multiplayer plugin :)

    This looks awesome can you post a tutorial for this?

  • I was trying to share the code for quite a while, but it had the word "TwitchCraft" in the title, and Scirra kept rejecting it because the word Twitch is copyrighted, even though that's not how copyright laws work XD

  • I was trying to share the code for quite a while, but it had the word "TwitchCraft" in the title, and Scirra kept rejecting it because the word Twitch is copyrighted, even though that's not how copyright laws work XD

    haha! Well if there's anything we can do to incentivize you to share let us know... waiting with bated breath :D

  • You stream russpuppy?

    If you want to try it out, you can check out what it can do by visiting https://www.challacc.com

  • You stream russpuppy?

    If you want to try it out, you can check out what it can do by visiting https://www.challacc.com

    I used to stream but struggle to find the time for it :)

    I got to twitch affiliate then stopped.

  • I stream from time to time, but not to do it as a job. I do it to meet people and test out the code, primarily :D

  • have you integrated with bits?

Post reply
Return to board index
Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)