Getting rid of the simulator for Itch.io

Hi everyone. Does anybody know if it’s possible to get rid of the simulator interface when you want to embed your game anywhere, because as awesome as it is when you’re building, it’s a bit distracting and effects player emersion a lot. It’s so much better when the buttons are not there, like here: https://arcade.makecode.com/kiosk
Am I alone on this?

6 Likes

I dont know how to do that but I think it would be really cool :0

1 Like

I’m sure it’s as simple as muting one tiny piece of code somewhere, only this code is locked and we’re not allowed to alter it. Maybe it can be done through an extension? Is there anybody out there at all who can shine some light on this?

Should work to just add &hideSimButtons=1 into the src url of the iframe (after the first ?id=blah), like this: https://replit.com/@jwunderl/WigglyLawfulMegahertz#index.html

Very interesting indeed! Thank you so much for this my friend!
And it’s possible to make the game full screen all the way? The reason I ask is because I noticed yours has some space around it when you go full screen and some extra scrolling space underneath. Is that just a matter of preference or is simply what this method entails?

Oh huh, that’s interesting, I just took the default value you get from the share dialog (under the ‘embed’ option) and added in the hideSimButtons parameter. Looks like a little bit of padding stuck around and nobody fixed it / just worked around it :slight_smile: I’ll take a look at if it would be too much to fix it (as I think the kiosk looks like it has a very similar hack to what I’ll show below, which isn’t a big deal but have to make sure to fix everywhere).

But at the end of the day, it’s all just html/css that’s being applied, so it’s very easy to hack around it to fix those things:

<body style="overflow:hidden;">
  <script src="script.js"></script>
    <iframe style="position:absolute;top:0;left:-2rem;width:calc(100vw + 2rem);height:100vh;overflow:hidden" src="https://arcade.makecode.com/v1.11.37---run?id=S35510-75592-74609-07291&hideSimButtons=1&fullscreen=1" allowfullscreen="allowfullscreen" sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0"></iframe>

will make it show up like this:

(worth a quick note I added two more things – the &fullscreen=1 parameter to make sure it takes up all allocated space, and I pegged the version down to the currently released site with the v1.11.37 in the url – that way future updates - perhaps one where we fix the hideSimButtons / fullscreen embed to have no horizontal padding that puts it off center and requires css fixes outside the iframe - won’t get picked up automatically / your game won’t randomly break if we fix a bug but it changes something subtle for you.)

2 Likes

Went ahead and tested uploading and it works fine, few things you gotta do (upload as html file, set to play in browser, set window size to a multiple of 160x120 (e.g. 640x480), but not a big deal. Here’s the file I ended up uploading (and with even a few more query parameters :slight_smile: ):

my-cool-game.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>my cool game</title>
</head>

<body style="overflow:hidden;">
    <iframe style="position:absolute;top:0;left:-2rem;width:calc(100vw + 2rem);height:100vh;overflow:hidden" src="https://arcade.makecode.com/v1.11.37---run?id=S35510-75592-74609-07291&hideSimButtons=1&fullscreen=1&autofocus=1&nofooter=1" allowfullscreen="allowfullscreen" sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0"></iframe>

</body>

</html>

which shows up like this when uploaded https://jwunderl.itch.io/test-game-please-ignore

One more thing you might consider is using the github integration, which will 1. precompile the game for you so it loads faster 2. makes it a bit easier to customize as it can all be tracked easily / source will just be your github repo and 3. won’t load as a share link which can be easily taken out and distributed – still will be able to point to your site though https://arcade.makecode.com/github/getting-started

finally for anyone else, embedding as normal / with the simulator chrome works totally fine too, e.g you can get https://jwunderl.itch.io/another-test-game-please-also-ignore by playing with the options on the upload page (screenshot of options below) and uploading an html file that looks like this:

my-cool-game-portrait.html

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>my cool game</title>
</head>

<body style="overflow:hidden;">
    <iframe style="position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden" src="https://arcade.makecode.com/---run?id=S35510-75592-74609-07291&fullscreen=1&autofocus=1&nofooter=1" allowfullscreen="allowfullscreen" sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0"></iframe>

</body>

</html>

3 Likes

Wow, dude, that is amazing! You’ve done it! Holy smokes! It all works, it’s all possible! In the end you did it perfect with no padding at all! Thank you for doing all of this and sharing it, it’s really a miracle to be able to do this because that simulator skin really takes you out of the experience. If it was black and white maybe it wouldn’t be so intrusive but with that never changing teal, every game just has the same vibe.

Unfortunately I’m a total noob when it comes to Github, I don’t understand how it works just yet. It can execute code? It’s some kind of a vast utility or is it simply a storage platform? I would love to wrap my mind around what you’re suggesting but I’m having a hard time grasping it. Are you suggesting what this guy on Itch is suggesting: https://fiaful.itch.io/mca-exporter (you can switch to English by clicking the flag) His thing requires Github too so I assume it’s similar to what you are talking about?

2 Likes

It looks like that is an instructional guide to doing it, yes; once you have logged in and created an account, we automatically generate a page for you with a precompiled game, which will load more quickly – e.g. I made an extension recently and you can see the test code I set for it here; https://jwunderl.github.io/arcade-winter-effects/, from the repo set here: https://github.com/jwunderl/arcade-winter-effects.

For a quick description, GitHub is closer to a storage location for accessing repositories (in it’s most basic form, you can probably think of this as a folder with a history of all changes and be pretty close) that are created using a tool / app known as Git. For example, much of our source code is publicly available on github in repos like this: https://github.com/microsoft/pxt-arcade, which shows much of the changes we make to the makecode arcade website. GitHub offers some other features that go further than just storage, like hosting simple website and providing ways to run code whenever you push (submit) changes. With our github integration that they showed in that link you gave, if you have a github account, you can use it to store your projects, track changes in it, and show it off to others with the created page.

And for your other point, the teal is actually changeable now, I added support for that in a recent release (in particular for multiplayer where we use different color sims for each player, and microcode (though it looks like that transitioned from a dark theme to full screen mode)). It’s a little tedious to set up right now, as I didn’t have time to fully expose it for most users it in a nice way, but it’s doable; you have to add it in as yet another query parameter, and this one takes in a list of the styles you want to set. For example, it could look something like this:

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>my cool game</title>
</head>

<body style="overflow:hidden;">
    <iframe style="position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden" src="https://arcade.makecode.com/---run?id=S35510-75592-74609-07291&fullscreen=1&autofocus=1&nofooter=1&simParams=background-color%3Dabcdef%26button-fill%3D123456%26button-stroke%3D654321%26text-color%3Dfedcba%26dpad-fill%3Dabc123" allowfullscreen="allowfullscreen" sandbox="allow-popups allow-forms allow-scripts allow-same-origin" frameborder="0"></iframe>

</body>

</html>

– the simParams parameter is the one in which you have to pass uriencoded colors to set in the sim. This one is super ugly as I just completely randomly chose hex values for the colors, but if you search for a color picker online and take the color (you only want the part after the # that will show up if you get a hex color picker) and format them like this: background-color=abcdef&button-fill=123456&button-stroke=654321&text-color=fedcba&dpad-fill=abc123, then run that through a urlencoder (e.g. https://www.urlencoder.org/ seems fine, but it’s just a native javascript api https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent) – the end result should be the same with = swapped to %#D and & swapped to %26. (note that dpad-fill will default to button-stroke if no value is set, it’s just an extra option)

2 Likes

Amazing! Custom simulator colors change everything completely. Now this becomes another tool for crafting a unique user experience. I just have to figure our how to apply of these wonderful things you’ve shared here, for which, I cannot thank you enough. If I copy your code and just replace the link I’m set right? All the other stuff I still have to understand first but copying the code is simple enough even for a noob like me.

2 Likes

Correct, if you change the value between id= and the next & it should be enough to start, and just play with it from there / ask if you run into any more troubles!

2 Likes

Much appreciated my friend!

2 Likes